/************* GENERAL STYLES ***/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

article > ul { padding-bottom: 10px; }

article > ul > li { 
	margin-left: 17px;
	margin-bottom: 10px; }

html, body {
	text-align: left;
	font-size: 14px;
	font-family: Arial, sans-serif;
	color: #222;
	line-height: 1.5; }
	
body { background: url(../images/bg2.jpg) top left repeat-x #ededed; }

.warning_div {
	border: 1px solid #d1c000;
	background-color: #ffe88b;
	padding: 10px;
}

body.index { background: url(../images/bg_index2.jpg) top left repeat-x #ededed; }

	/*** FONT STYLES ***/	
	h1 { 
		font-size: 24px; 
		font-weight: bold;
		color: #222;
		line-height: normal;
		margin: 0 0 10px; }
		
	h2 {
		font-size: 18px;
		font-weight: bold;
		color: #222;
		line-height: normal;
		padding: 0 0 3px;
		margin: 0 0 10px;
		border-bottom: 1px solid #c6c6c6; }
		
		h2.info { background: url(../images/icon_search.png) top right no-repeat; }
		h2.press { background: url(../images/icon_press.png) top right no-repeat; }
		
	aside h2 {
		position: relative;
		padding: 1rem;
		margin: 0;
		font-family: 'Play', serif;
		font-size: 16px;
		font-weight: 600;
		color: #f5d140;
		text-transform: uppercase;
		text-align: center;
		line-height: 1.3;
		border: none;
		background: url(../images/h2_bg2.jpg) top right no-repeat #01333b;
		overflow: hidden;
	}
		
	h3 {
		font-size: 18px;
		font-weight: bold;
		color: #222;
		line-height: normal;
		margin: 0 0 7px; }
		
	h3 a:link, h3 a:visited { color: #222; }
	
	h4 {
		font-size: 16px;
		font-weight: bold;
		color: #cd3f0d;
		line-height: normal;
		margin: 0 0 10px; }
	
	a:link, a:visited { 
		color: #095877;
		text-decoration: none;
		font-weight: bold; }
		
	a:hover { text-decoration: underline; }
		
	a img { border: none; }
	
	p { margin-bottom: 16px; }
	
	a:focus, a:hover, a:active { outline:none; }

img {
	max-width: 100%;
	height: auto;
}

/************* STRUCTURE STYLES ***/
#wrapper {
	width: 1000px;
	max-width: 100%;
	padding: 0 20px;
	margin: 0 auto; }
	
	/*** HEADER ***/
	header {
		width: 100%;
		height: 108px;
		float: left;
		position: relative;
		/* background: url(../images/header_glow.jpg) 0px 21px no-repeat; */
	}
		
	/* header.index { background: url(../images/headerIndex_glow.jpg) 0px 21px no-repeat; } */
		
		header img.logo {
			width: 306px;
			position: absolute;
			top: 54px;
			left: 14px;
		}

		header .open-mobile-nav {
			width: 2rem;
			height: 2rem;
			display: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z'%3E%3C/path%3E%3C/svg%3E");
		}

		header .close-mobile-nav {
			width: 2rem;
			height: 2rem;
			display: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M10.5859 12L2.79297 4.20706L4.20718 2.79285L12.0001 10.5857L19.793 2.79285L21.2072 4.20706L13.4143 12L21.2072 19.7928L19.793 21.2071L12.0001 13.4142L4.20718 21.2071L2.79297 19.7928L10.5859 12Z'%3E%3C/path%3E%3C/svg%3E");
		}
		
	/*** NAVIGATION ***/
	nav { 
		width: 733px;
		max-width: 100%;
		height: 51px;
		float: right;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../images/nav_bg-v2.png) bottom no-repeat; }
		
		nav ul {
			display: flex;
			gap: 1.5rem;
			list-style: none;
			font-family: 'Play', serif;
			font-size: 1.1rem; }
				
			nav ul li a:link,
			nav ul li a:visited {
				height: 100%;
				display: block;
				text-transform: uppercase;
				color: rgb(255, 255, 255, 0.5);
			}

			nav ul li a:hover {
				color: #fff;
				text-decoration: none;
			}

			nav ul li a.active {
				color: #f5d140;
			}
					
					/* nav ul li a.home {
						width: 66px;
						background: url(../images/nav_01_home.png) top no-repeat; }
						
					nav ul li a.aboutus {
						width: 250px;
						background: url(../images/nav_02_manu.png) top no-repeat; }
						
					nav ul li a.store {
						width: 134px;
						background: url(../images/nav_03_store.png) top no-repeat; }
						
					nav ul li a.research {
						width: 103px;
						background: url(../images/nav_04_research.png) top no-repeat; }
						
					nav ul li a.contactus {
						width: 115px;
						background: url(../images/nav_05_contactus.png) top no-repeat; }
						
					nav ul li a:hover, nav ul li a.active { background-position: bottom; } */

@media (max-width: 800px) {

	header {
		height: 113px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30px 0 5px;
	}

	header.index {
		height: auto;
	}

		header img.logo {
			width: 250px;
			position: static;
		}

		header .open-mobile-nav,
		header .close-mobile-nav {
			display: block;
		}

		header .close-mobile-nav {
			position: absolute;
			top: 20px;
			right: 20px;
		}

	nav {
		width: 100%;
		height: 100%;
		position: fixed;
		top: -100%;
		left: 0;
		z-index: 10;
		padding: 3rem 2rem;
		background-color: rgb(18, 18, 18, 0.97);
		opacity: 0;
		transition: 0.5s ease all;
	}

		nav ul {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			font-family: 'Play', serif;
		}

			nav ul li {
				width: 100%;
				height: auto;
			}

				nav ul li a {
					width: auto !important;
					background: transparent !important;
					text-indent: 0 !important;
					color: #fff !important;
					font-size: 2rem;
				}

				nav ul li a.active {
					color: #f8d32c !important;
				}

	#main-nav:target,
	#main-nav.is-open {
		top: 0;
		opacity: 1;
	}

}
				
	#headerImage {
		width: 100%;
		float: left;
		position: relative;
	}

		#headerImage img {
			display: block;
		}

		#headerImage > div {
			width: 500px;
			position: absolute;
			right: 1rem;
			bottom: 15%;
			z-index: 1;
			font-size: min(16px, 2vw);
			font-weight: bold;
			color: #fff;
			text-shadow: 0 0.05em 0.25em rgb(0,0,0,0.5);
		}

			#headerImage > div a {
				display: inline-block;
			}

@media (max-width: 600px) {

	#headerImage > div {
		width: 100%;
		position: static;
		padding: 0.5rem 1rem 1rem;
		background-color: #121212;
		font-size: 0.75rem;
	}

}
			
	/*** SECTION ***/
	section {
		width: 100%;
		min-height: 400px;
		display: grid;
		grid-template-columns: 270px minmax(0, 1fr);
		gap: 25px;
		padding: 35px 0 50px; }

@media screen and (max-width: 800px) {

	section {
		grid-template-columns: minmax(0, 1fr);
	}

	section aside {
		order: 1;
	}

}
	
		/*** ASIDE ***/
		aside {}
			
			aside a:link, aside a:visited { 
				color: #095877;
			}
			
			aside div {
				padding: 10px 10px 5px;
				margin: 0 0 20px;
				background: #cfdddf;
				border: 1px solid #01333b;
			 }
				
			aside li { margin: 0 0 5px 17px; }
			
			aside > img { 
				display: block;
				margin: 0 auto; }
		
		/*** ARTICLE ***/
		article {}
			
			article img.right {
				float: right;
				margin: 0 0 10px 15px;
				border: 1px solid #c6c6c6; }
		
		/*** HOME PAGE - PRODUCTS ***/
		#productTabs {
			width: 100%;
			float: left;
			background: #fff;
			margin: 0 0 40px;
			position: relative; }

			#productTabs .tabs {
				width: 100%;
				display: flex;
				align-items: stretch;
				gap: 1px;
			}
			
			#productTabs .tabs a {
				flex: 1 1 0;
				display: flex;
				justify-content: center;
				align-items: center;
				float: left;
				padding: 0.5rem;
				background: #01333b;
				text-align: center;
				color: rgb(255, 255, 255, 0.5);
				font-weight: bold;
				line-height: 18px;
				position: relative; }
					
				#productTabs .tabs a:hover {
					text-decoration: none;
					background: #014a55; }
					
				#productTabs .tabs a.active {
					background: url(../images/productTab_bg.jpg) bottom left repeat-x #f8d32c;
					color: #222; }

				#productTabs .tabs .text-mobile {
					display: none;
				}
					
				#productTabs .tabs a .arrow {
					width: 100%;
					height: 8px;
					position: absolute;
					bottom: -8px;
					background: url(../images/productTab_arrow.png) bottom center no-repeat;
					display: none; }
					
					#productTabs .tabs a.active .arrow { display: block; }
					
			#productTabs .tabContent {
				width: 100%;
				float: left;
				padding: 20px;
				display: none; }
				
				#productTabs .tabContent.active { display: block; }
				
				#productTabs .tabContent p.head {
					border-bottom: 1px solid #eee;
					font-size: 17px;
					padding: 0 0 15px;
					margin: 0 0 20px; }

				#productTabs .product-details {
					display: grid;
					grid-template-columns: 250px 1fr;
					align-items: center;
					padding-bottom: 10px;
				}
					
				#productTabs .tabContent .product {
					text-align: center; }
					
					#productTabs .tabContent .product div { 
						display: inline-block; }
					
					#productTabs .tabContent .product img {	margin: 0 10px 5px; }
						
					#productTabs .tabContent .product div span { 
						display: block;
						color: #999; }
						
						#productTabs .tabContent .product div span a { 
							background: none;
							padding: 0; }
					
				#productTabs .tabContent .info { }
					
					#productTabs .tabContent .info h4 {
						font-size: 18px;
						font-weight: normal;
						font-size: 18px;
						text-align: center; }

						#productTabs .tabContent .info .prices {
							display: flex;
							flex-wrap: wrap;
							align-items: start;
						}
						
					#productTabs .tabContent .info .price {
						min-width: 100px;
						flex: 1 1 0;
						margin: 10px 0 0;
						text-align: center;
						font-size: 16px;
						font-weight: bold;
						color: #737e00; }
						
						#productTabs .tabContent .info .middle { margin: 10px 2px 0; }
						
						#productTabs .tabContent .info .big { width: 185px; }
						
						#productTabs .tabContent .info .price small {
							font-size: 11px;
							font-weight: normal;
							display: block;
							color: #222; }
							
					#productTabs p.notice {
						position: absolute;
						bottom: 0;
						right: 20px;
						font-size: 11px;
						color: #999;
						font-style: italic;
						text-align: right; }

@media screen and (max-width: 600px) {

	#productTabs .tabs .text-desktop {
		display: none;
	}

	#productTabs .tabs .text-mobile {
		display: block;
	}

	#productTabs .product-details {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

} 
						
		/*** TESTIMONIALS ***/
		#testimonials {
			width: 100%;
			float: left;
			margin: 0 0 40px;
			border-top: 1px solid #c6c6c6;
			border-bottom: 1px solid #c6c6c6;
			font-size: 16px;
			font-style: italic;
			position: relative; }
			
			#testimonials .wrap {
				width: 100% !important; }
			
			#testimonials .slide {
				width: 100% !important;
				padding: 35px 0 30px 38px;
				background: url(../images/testimonials_bg.png) top left no-repeat; }
			
			#testimonials span {
				display: block;
				text-align: right;
				font-weight: bold; }
				
				#testimonials span small { 
					display: block;
					font-size: 14px; }
					
			.controls {
				width: 100%;
				font-size: 0;
				position: absolute;
				top: -7px;
				text-align: center; }
			
			.controls a { 
				width: 7px;
				height: 7px;
				display: inline-block;
				margin: 0 3px;
				background: #c6c6c6;
				border: 3px solid #c6c6c6;
				zoom: 1;
				*display: block;
				border-radius: 10px; }
			
			.controls a.activeSlide { background: #fff; }
				
		/*** MORE INFO ***/
		#moreInfo {
			width: 100%;
			float: left;
			margin: 30px 0 40px; }
			
			#moreInfo ul {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
				gap: 0.5rem 1rem;
				list-style: inside; }
					
		/*** PRESS RELEASES ***/
		#pressReleases {
			float: left; }
			
			#pressReleases ul {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
				gap: 1rem;
				list-style: none; }
				
				#pressReleases ul li.nomar { margin: 0; }
				
				#pressReleases img {
					display: block;
					margin: 0 0 10px;
					border: 7px solid #222; }
					
		/*** PRODUCTS ***/
		ul#products {
			width: 100%;
			float: left;
			list-style: none; }
			
			ul#products > li {
				width: 100%;
				float: left;
				display: grid;
				grid-template-columns: auto minmax(0, 1fr);
				align-items: start;
				gap: 2rem;
				margin: 10px 0;
				padding: 0 0 20px;
				border-bottom: 1px solid #c6c6c6; }
				
			ul#products img.item {
				width: 129px;
				float: left;
				margin: 20px 0 0; }
				
			ul#products .content {}
				
				ul#products ul.price { list-style: none; }
				
					ul#products ul.price li {
						display: flex;
						flex-wrap: wrap;
						gap: 1rem;
						margin: 0 0 10px; }

					ul#products ul.price .product-form {
						display: flex;
						flex: 1 1 auto;
						flex-direction: row-reverse;
						align-items: center;
					}
					
					ul#products ul.price img { 
						height: 22px;
						float: right;
						margin: 0 0 0 10px;
						vertical-align: middle; }
						
					ul#products ul.price strong.title {
						display: block;
						text-decoration: underline;
						margin: 0 0 10px; }
						
			ul#products p.notice {
				color: #666;
				font-style: italic; }
				
			p#payment { 
				float: left;
				margin-top: 20px; }
			
			p#payment img {
				width: 57px;
				height: 37px;
				vertical-align: middle; }

@media screen and (max-width: 600px) {

	ul#products > li {
		grid-template-columns: minmax(0, 1fr);
	}

}
				
		/*** RESEARCH ***/
		ul#research {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
			gap: 1rem;
			list-style: none; }
		
			ul#research li {
				margin: 0;
				text-align: center; }
				
				ul#research li.nomar { margin: 0; }
				
			ul#research img { 
				display: block;
				margin: 0 auto 10px;
				border: 7px solid #222; }
				
			a[href$=".pdf"]:not(:has(img)) {
				background: url(../images/icon_pdf.png) left no-repeat;
				padding: 0 0 0 25px; }
				
		/*** CONTACT FORM ***/
		form#contact fieldset { border: none; }
		
		form#contact ul { list-style: none; }
		
		form#contact ul.contactInfo {
			margin: 0 0 12px;
			border-bottom: 1px solid #c6c6c6; }
			
			form#contact ul li { margin: 0 0 12px; }
		
		form#contact label {
			width: 130px;
			float: left; }
			
		form#contact input[type="text"] {
			width: 375px;
			padding: 3px 5px;
			border: 1px solid #aeaeae;
			font: inherit; }
			
		form#contact textarea {
			width: 375px;
			min-height: 125px;
			padding: 3px 5px;
			border: 1px solid #aeaeae;
			font: inherit; }
			
		form#contact select {
			width: 200px;
			padding: 3px 5px;
			border: 1px solid #aeaeae;
			font: inherit; }
			
			form#contact option { padding: 0 3px; }
			
			form#contact optgroup option { padding: 0 3px 0 10px; }
			
		form#contact input[type="submit"] {
			width: 131px;
			height: 39px;
			float: right;
			margin: 0 148px 0 0;
			border: none;
			background: url(../images/btn_send.png) no-repeat;
			text-indent: -9999em;
			cursor: pointer; }
		
				
	/*** FOOTER ***/
	footer {
		width: 100%;
		float: left;
		background: url(../images/footer_bg.jpg) top left repeat-x #01333b;
		color: #fff; }
		
		#footerInner {
			width: 100%;
			min-height: 200px;
			float: left;
			padding: 25px 0 0 0;
			background: url(../images/footerInner_bg2.jpg) top center no-repeat; }

		footer #wrapper {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 2rem;
		}
				
		footer a:link, footer a:visited {
			text-decoration: none;
			color: #fff; }
					
			footer a:hover { text-decoration: underline; }
			
		/* footer p { width: 460px; } */
		
		footer p.flags img {
			width: 32px;
			height: 32px;
			float: left;
			margin: 0 6px 0 0; }
			
			/* #newsletter {
				width: 450px;
				float: right; } */

		footer .footer-left {
			order: -1;
		}
				
				#newsletter fieldset { 
					display: flex;
					align-items: stretch;
					gap: 1rem;
					border: none; }
				
				#newsletter h2 {
					font-size: 24px;
					color: #f5d140;
					border: none; }
					
				#newsletter input[type="text"] {
					flex: 1 1 auto;
					padding: 5px;
					border: 2px solid #4b2011;
					background: #fff;
					font: inherit;}
					
				#newsletter input[type="submit"] {
					width: 131px;
					height: 39px;
					flex: 0 0 auto;
					border: none;
					background: url(../images/btn_signup.png) no-repeat;
					text-indent: -9999em;
					cursor: pointer; }

@media screen and (max-width: 800px) {

	footer #wrapper {
		grid-template-columns: 1fr;
	}

	footer .footer-left {
		order: 0;
	}

}