@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&display=swap");

html, body, input, textarea, select, button {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	color: #595959;
}

html {
	overflow-x: hidden;
	overflow-y: scroll;
}

form {
	margin: 0;
}

p {
	line-height: 200%;
}

a {
	-webkit-transition: all 100ms linear;
	-ms-transition: all 100ms linear;
	transition: all 100ms linear;
}

div.table {
	display: table;
}

div.table > div.row {
	display: table-row;
}

div.table > div.row > div.cell {
	display: table-cell;
}

a {
	text-decoration: none;
}

/* =========== */
/* MAIN LAYOUT */
/* =========== */

	html {
		margin: 0;
	}

	body {
		margin: 0;
		background-color: #262626;
	}

	#wrapper {
		box-sizing: border-box;
		width: 100%;
	}

/* ====== */
/* HEADER */
/* ====== */

	header {
		box-sizing: border-box;
		background-color: #ffffff;
		width: 100%;
		height: 80px;
		border-bottom: 1px solid #144466;
	}

	header > div {
		box-sizing: border-box;
		width: 1100px;
		height: 80px;
		margin: 0 auto;
	}

	header > div > div {
		float: left;
	}

	/* Logo */

	header > div > div.logo {
		width: 200px;
		height: 80px;
	}

	header > div > div.logo > a {
		display: block;
		width: 100%;
		padding-top: 20px;
		text-align: center;
	}

	/* Nav */

	header > div > div.menu {
		width: 770px;
		height: 80px;
	}

	/* Language */

	header > div > div.language {
		width: 130px;
		height: 80px;
	}

	header > div > div.language > a {
		display: block;
		float: right;
		width: 32px;
		height: 32px;
		margin-top: 24px;
		margin-left: 5px;
	}

	header > div > div.language > a img {
		width: 32px;
		height: 32px;
	}

/* === */
/* NAV */
/* === */

	#nav {
		box-sizing: border-box;
	}

	#nav > nav {
		box-sizing: border-box;
		margin: 0 auto;
		text-align: center;
	}

	#nav > nav ul {
		display: inline-block;
		text-align: left;
	}

	#nav > nav ul,
	#nav > nav ul li {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#nav > nav a {
		display: block;
	}

	#nav > nav ul > li > span {
		display: none;
	}

	/* Main level */

	#nav > nav > ul > li {
		display: inline-block;
		position: relative;
	}

	#nav nav > ul > li > a {
		position: relative;
		height: 80px;
		line-height: 80px;
		color: #595959;
		font-weight: 600;
		padding: 0 7px;
	}

	#nav nav > ul > li:hover > a {
		color: #2988cc;
	}

	#nav nav > ul > li > a::after {
		content: "";
		display: block;
		position: absolute;
		bottom: 20px;
		left: 50%;
		width: 0;
		height: 2px;
		background-color: #2988cc;
		-webkit-transition: all 100ms linear;
		-ms-transition: all 100ms linear;
		transition: all 100ms linear;
	}

	#nav nav > ul > li:hover > a::after {
		width: 100%;
		left: 0;
	}

	/* Dropdown menu */

	#nav > nav ul li ul li {
		display: block;
	}

	#nav > nav li ul {
		position: absolute;
		z-index: 5;
		display: none;
		background-color: #262626;
		padding: 15px 0;		
	}

	#nav nav li ul li ul {

	}

	#nav > nav li ul li {
		float: none;
		position: relative;
		padding: 0 20px;
		height: 30px;
		line-height: 30px;		
	}

	#nav > nav li ul a {
		position: relative;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.75);
	}

	#nav > nav li ul a:hover {
		color: rgba(255, 255, 255, 1);
	}

	#nav > nav ul ul ul {
		left: 100%;
		top: 0;
	}

/* ========== */
/* BREADCRUMB */
/* ========== */

	#breadcrumb {
		display: none;
	}

/* ======= */
/* CONTENT */
/* ======= */

	#content {
		min-height: 500px;
		background-image: url('../../img/background.jpg');
		background-position: center top;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	h1 {
		margin: 0;
		box-sizing: border-box;
		padding: 0;
		font-size: 28px;
		margin-bottom: : 30px;
		font-weight: 300;
		text-transform: uppercase;
	}

	#content div.content_html {
		box-sizing: border-box;
		padding: 30px;
		background-color: #fafafa;
		width: 1100px;
		margin: 0 auto;
		min-height: 500px;
		border-left: 1px solid  #144466;
		border-right: 1px solid  #144466;
	}

/* ============= */
/* BANNER SLIDER */
/* ============= */

	#bannerslider > div.banners > div.banner > div.label {
		width: 1100px;
	}

	#bannerslider > div.banners > div.banner > div.label > div > label {
		margin: 0;
		padding: 0;
		width: 700px;
		font-size: 32px;
		font-weight: 600;
		text-transform: uppercase;
	}

	#bannerslider > div.banners > div.banner > div.label > div > label > span {
		display: inline-block;
		background-color: rgba(255, 255, 255, 0.5);
		padding: 20px;
	}

	#bannerslider > div.banners > div.banner > div.label > div > p {
		width: 700px;
		margin: 20px 0;
		margin-bottom: 40px;
		padding: 0;
		font-size: 16px;
		font-weight: 600;
	}

	#bannerslider > div.banners > div.banner > div.label > div > p > span {
		display: inline-block;
		background-color: rgba(255, 255, 255, 0.75);
		padding: 10px;
		position: relative;
	}

	#bannerslider > div.banners > div.banner > div.label > div > div {
		width: 700px;
	}

	#bannerslider > div.banners > div.banner > div.label > div > div > button {
		height: 50px;
		line-height: 48px;
		padding: 0 40px;
		font-weight: 600;
		background-color: #ffffff;
		border: 2px solid #144466;
		color: #144466;
	}

/* ====== */
/* FOOTER */
/* ====== */

	#footer {
		background-color: #262626;
		color: rgba(255, 255, 255, 0.5);
		padding: 20px;
	}

	#footer > footer {
		overflow: hidden;
		width: 1100px;
		margin: 0 auto;
	}

	#footer > footer > div {
		box-sizing: border-box;
		float: left;
		width: 50%;
		margin-bottom: 50px;
	}

	#footer > footer > div > ul {
		display: block;
		margin: 0;
		padding: 0;
	}

	#footer > footer > div > ul > li {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
		color: #ffffff;
		margin-bottom: 5px;
		font-weight: 600;
	}

	#footer > footer > div > ul > li a {
		font-weight: 500;
		color: rgba(255, 255, 255, 0.6);
	}

	#footer > footer > div > ul > li a:hover {
		color: rgba(255, 255, 255, 0.95);
	}

	#footer > footer > label {
		clear: both;
		display: block;
		text-align: center;
	}

/* ============= */
/* POPUP MESSAGE */
/* ============= */

	#blackscreen {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.75;
		z-index: 2;
	}

/* =============== */
/* RESPONSIVE MENU */
/* =============== */

	#responsive-menu {
		display: none;
		height: 60px;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
	}

	#responsive-menu > a {
		display: block;
		width: 60px;
		height: 60px;
		position: absolute;
	}

	#responsive-menu > a > i {
		display: block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		margin: 15px;
		text-align: center;
		font-size: 22px !important;
	}

	#responsive-menu > a.menu-icon {
		top: 0;
		left: 0;
	}

	#responsive-menu > a.user-icon {
		top: 0;
		right: 60px;
	}

	#responsive-menu > a.cart-icon {
		top: 0;
		right: 0;
	}

	#responsive-menu > .menu {
		position: fixed;
		top: 60px;
		left: 0;
		width: 85%;
		height: 100%;
		overflow-y: scroll;
		margin-left: -85%;
		-webkit-transition: all 300ms linear;
		-ms-transition: all 300ms linear;
		transition: all 300ms linear;
		background-color: #333333;
		color: #bfbfbf;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
	}

	/* Menu icon */

	#responsive-menu > a.menu-icon {
		box-sizing: border-box;
		padding: 20px 18px;
	}

	#responsive-menu > a.menu-icon > div {
		-webkit-transition: all 200ms linear;
		-ms-transition: all 200ms linear;
		transition: all 200ms linear;
	}

	#responsive-menu > a.menu-icon > div:nth-child(1) {
		border: 3px solid #595959;
		border-bottom: none;
		top: 0;
	}

	#responsive-menu > a.menu-icon > div:nth-child(2) {
		height: 3px;
		background-color: #595959;
		margin-top: 5px;
		margin-bottom: 5px;
		top: 4px;
	}

	#responsive-menu > a.menu-icon > div:nth-child(3) {
		border: 3px solid #595959;
		border-top: none;
		top: 22px;
	}

	/* Menu icon open */

	#responsive-menu > a.menu-icon.open > div:nth-child(1) {
		transform: rotate(45deg) translate(6px, 6px);
	}

	#responsive-menu > a.menu-icon.open > div:nth-child(2) {
		opacity: 0;
	}

	#responsive-menu > a.menu-icon.open > div:nth-child(3) {
		transform: rotate(-45deg) translate(5px, -5.5px);
	}

	#responsive-menu > .menu.open {
		margin-left: 0;
	}

	#responsive-menu > .menu > label {
		display: block;
		padding: 14px;
		background-color: #262626;
		text-transform: uppercase;		
	}

	#responsive-menu > .menu > label > i {
		margin-right: 7px;
	}

	/* NAV */

	#responsive-menu > .menu > .categories ul,
	#responsive-menu > .menu > .categories ul li,
	#responsive-menu > .menu > nav.info ul,
	#responsive-menu > .menu > nav.info ul li {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#responsive-menu > .menu > .categories ul li {
		position: relative;
		overflow-y: hidden;
	}

	#responsive-menu > .menu > .categories ul li > a,
	#responsive-menu > .menu > nav.info ul li > a {
		display: block;
		padding: 14px;
		padding-right: 70px;
		font-size: 13px;
	}

	#responsive-menu > .menu > .categories a,
	#responsive-menu > .menu > nav.info a {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
	}

	#responsive-menu > .menu > nav.info ul li > a {
		padding-right: 14px !important;
	}

	#responsive-menu > .menu > .categories ul li > span {
		display: block;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 100%;
		line-height: 48px;
		text-align: center;
	}

	#responsive-menu > .menu > .categories ul li > span > i {
		margin-left: 10px;
		font-size: 12px !important;
		-webkit-transition: all 200ms linear;
		-ms-transition: all 200ms linear;
		transition: all 200ms linear;
	}

	#responsive-menu > .menu > .categories ul li > span > i.active {
		transform: rotate(-180deg) translate(0px, 2px);
	}

	#responsive-menu > .menu > .categories li ul {
		display: none;

	}

	#responsive-menu > .menu > .categories li ul {
		padding-left: 10px;
	}

	#responsive-menu > .menu > .categories ul li ul {
		background-color: #2b2b2b;
	}

	#responsive-menu > .menu > .categories ul li > a,
	#responsive-menu > .menu > nav.info ul li > a {
		border-bottom: 1px solid #2b2b2b;
		color: #bfbfbf;
	}

	#responsive-menu > .menu > .categories ul li > span {
		border-left: 1px solid #2b2b2b;
	}

	#responsive-menu > .lang {
		float: right;
	}

	#responsive-menu > .lang > a {
		display: block;
		float: right;
		width: 32px;
		height: 32px;
		margin-top: 14px;
		margin-right: 10px;
	}

	#responsive-menu > .lang > a img {
		width: 32px;
		height: 32px;
	}

/* ===========*/
/* RESPONSIVE */
/* ===========*/

	/* Phone */

		@media (max-width: 1000px) {

			a, input, button {
				-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
			}

			input, button, textarea, select, a {
				outline: none !important;
			}

			p {
				line-height: 150%;
			}

			/* Show menu */

			#responsive-menu {
				display: block;
			}

			/* Hide desktop header */

			#topbar, header > div, #nav {
				display: none;
			}

			/* Header */

			body {
				padding-top: 60px;
			}

			header {
				width: 100% !important;
				margin: 0 !important;
				height: 60px !important;
				position: fixed;
				top: 0;
				z-index: 3;
			}


			/* Breadcrumb */

			#breadcrumb {
				display: none !important;
			}

			/* Content */

			#content {
				width: 100% !important;
				margin: 0 !important;
				padding: 0 !important;
			}

			#content > .main {
				width: 100% !important;
				margin: 0 !important;
				padding: 0 !important;
			}

			#content > .main > .inside {
				width: 100% !important;
				margin: 0 !important;
			}

			#content div.content_html {
				width: 100%;
				padding: 10px;
				border: 0;
			}

			/* Banner */

			#bannerslider > div.banners > div.banner > div.label > div > label > span {
				padding: 5px;
			}


			#bannerslider > div.banners > div.banner > div.label > div > p > span {
				padding: 5px;
			}

			#bannerslider > div.banners > div.banner > div.label {
				width: 90%;
			}

			#bannerslider > div.banners > div.banner > div.label > div > label {
				width: 100%;
				font-size: 14px;
				font-weight: 600;
			}

			#bannerslider > div.banners > div.banner > div.label > div > p {
				width: 100%;
				margin: 10px 0;
				margin-bottom: 10px;
				font-size: 14px;
			}
			
			#bannerslider > div.banners > div.banner > div.label > div > div {
				width: 100%;
			}

			#bannerslider > div.banners > div.banner > div.label > div > div > button {
				display: none;
			}

			/* Product list */

			div.products_bar div {
				clear: both;
				width: 100% !important;
			}

			div.products_bar div:nth-child(2) {
				margin-top: 10px;
			}

			#products_list > .item {
				width: 49% !important;
				margin-top: 0 !important;
				margin-right: 2% !important;
				margin-bottom: 2% !important;
				padding: 10px !important;
			}

			#products_list > .item > .image > a > img {
				transform: scale(1);
			}

			#products_list > .item:nth-child(2n) {
				margin-right: 0 !important;
			}

			/* Product page */

			#product_page > div.product_info > div.image,
			#content > .main.show_sidebar #product_page > div.product_info > div.image {
				float: none;
				width: 100%;
				margin: 0 !important;
				margin-bottom: 20px !important;
			}

			#product_page div.image_container > div.main {
				padding: 0 !important;
			}

			#product_page > div.product_info > div.info,
			#content > .main.show_sidebar #product_page > div.product_info > div.info {
				float: none;
				width: 100%;
				margin: 0 !important;
				margin-top: 5%;
			}

			#product_page div.image_container > label {
				display: none;
			}


			#product_page > div.product_info div.cart {
				width: 100%;
			}

			#product_page > div.parameters > table tr td:nth-child(1) {
				width: 50%;
			}

			/* Footer */

			#footer > footer {
				width: 100% !important;
			}

			#footer > footer > div {
				clear: both;
				width: 100% !important;
			}

			/* User form */

			div.user_form {
				width: 100% !important;
			}

			/* Account form */

			form > table.my_account,
			form > table.my_account tbody,
			form > table.my_account tbody tr,
			form > table.my_account tr td {
				display: block;
				clear: both;
				width: 100%;
				padding: 0 !important;
				margin: 0 !important;
			}

			form > table.my_account div.field > label {
				clear: both;
				width: 100%;
				margin-bottom: 5px;
			}

			form > table.my_account div.field > div {
				clear: both;
				width: 100%;
				margin: 0;
				margin-bottom: 10px;
			}

		}