html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}li{list-style:none}

html, body { position:relative; height:100%; margin:0px; padding:0px; color:#FFF; font-family: 'Oswald', sans-serif;}
body { background-color:#221f1f;}

@media only screen and (min-width: 1500px) {

	html { width: 100%; margin: auto;}
	
}

.container { width:100%; float: left; }
.width { width:100%; float: left; }

.fl { float: left; }
.fr { float: right; }

.desktop { display: block !important; }
.mobile { display: none !important; }

.yellow { color:#ffcb05}
b { font-weight: 100;}

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

	.desktop { display: none !important; }
	.mobile { display: block !important; }
	
}

/* HEADER */

.desktop-header { width: 100%; float: left; position: relative; margin-top: -65px;}
.desktop-header img { width: 100%; float: left; }

.language {position: absolute; right: 0%; top: 8vh; background-image: url(../images/language.png); background-repeat: no-repeat;display: block; width: 150px; height: 50px; background-size: 25px; background-position: 0px 12px;}

.language #language {float: right; margin-right: 20px; margin-top: 7px; width: 100px;}

.select-css {
    display: block;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    padding: .7em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #221f1f;
    appearance: none;
}

.select-css::-ms-expand {
	/*display: none;*/
}

.select-css:hover {
	border-color: #888;
}

.select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #FFF;
	outline: none;
}

.select-css option {
	font-weight:normal;
}


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

	.language {position: absolute; right: 0%; top: 5vh; background-image: url(../images/language.png); background-repeat: no-repeat;display: block; width: 100px; height: 25px; background-size: 15px; background-position: 10px 5px;}

	.language #language {float: right; margin-right: -30px; margin-top: 0px; width: 100px;}

	.select-css {
		display: block;
		font-size: 10px;
		font-family: sans-serif;
		font-weight: 700;
		color: #fff;
		line-height: 1.3;
		padding: .7em 1.4em .5em .8em;
		width: 70px;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0;
		border: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		background-color: #221f1f;
		appearance: none;
	}

	.select-css::-ms-expand {
		/*display: none;*/
	}

	.select-css:hover {
		border-color: #888;
	}

	.select-css:focus {
		border-color: #aaa;
		box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
		box-shadow: 0 0 0 3px -moz-mac-focusring;
		color: #FFF;
		outline: none;
	}

	.select-css option {
		font-weight:normal;
	}

	
}



.logo { position: absolute; bottom:-2px; left:calc(50% - 260px); }
.logo img { width: 520px; float: left;}

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

	.logo { position: inherit !important; float: left; width: 90%; }
	.logo img { width: 100%; float: left; }
	.mobile-header { height: 9.2vw; }
	button { width:10%;  float: left; height: 100% !important; background-color: #221f1f; color: #FFF; font-weight: 600; line-height: 40px; padding: 0px !important; font-size: 1.4em; -webkit-appearance:none; -ms-appearance: none; -moz-appearance: none; -o-appearance: none; border-style: none; }
	
}

.navigation { width: 100%; float: left; border-top: 3px solid #fecb08; }
.navigation ul { margin-left:calc(50% - 447px); float: left; }	
.navigation ul li { float: left; height: 100%; border-left:1px solid #FFF; }
.navigation ul li a { color: #FFF; padding-left: 25px; padding-right: 25px; line-height: 50px; font-size: 16px;}
.navigation ul li:first-child { border-left:0px solid #FFF; }	
.navigation ul li:hover a { color: #ffcb05; transition: all ease-out 0.5s; }

.header-bottom {/* background-color:#2b2828; background-image: url(../images/mono-block-valve.png); background-size: cover; border-bottom: 2px solid #FFF; */}
.header-bottom h2 {font-size: 44px; width: 100%; text-align: center; float: left; font-weight: 100;}
.header-bottom h3 {font-size: 34px; width: 100%; text-align: center; float: left; color: #908f8f; font-weight: 200;}
.header-bottom h4 {font-size: 24px; padding-bottom: 40px; width: 100%; text-align: center; float: left; padding-top: 10px; font-weight: 100;}

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

	.navigation { width: 100%; float: left; border-top: 3px solid #fecb08; }
	.navigation ul { margin-left:0px; float: left; }	
	.navigation ul li { float: left; height: 100%; border-left:0px solid #FFF; width: 100%; border-bottom: 1px solid #2e2b2b; }
	.navigation ul li a { color: #FFF; padding-left: 0px; padding-right: 0px; line-height: 50px; font-size: 14px; width: 100%; display: block; text-align: center;}
	.navigation ul li:first-child { border-left:0px solid #FFF; }	
	.navigation ul li:hover a { color: #ffcb05; transition: all ease-out 0.5s; }
	
	.header-bottom h2 {font-size: 33px; text-align: center; float: left; font-weight: 100; padding-bottom: 10px;}
	.header-bottom h3 {font-size: 25px; width:90%; text-align: center; float: none; margin: auto; color: #908f8f; font-weight: 200;}
	.header-bottom h4 {font-size: 24px; padding-bottom: 40px; width: 100%; text-align: center; float: left; padding-top: 10px; font-weight: 100;}

}

/* FOOTER */

.footer-container {width: 100%; float: left; margin-bottom: 15px; margin-top: 15px;}
.footer-container > div {width: 50%; margin: auto;}

#contact_us_map { width: 100%; margin: auto; float: left; margin-top: 25px;}
.contact-us {width: 35%; margin: auto; margin-top: 20px; margin-bottom: 25px;}
.contact-us h2 { font-size: 13px; width: 100%; text-align: center; color: #4e4c4c; padding-top: 25px; padding-bottom: 10px;}
.contact-us p { font-size: 15px; width: 100%; text-align: center; color: #908f8f}
.contact-us p a { font-size: 15px; width: 100%; text-align: center; color: #FFF}
.contact-us p a:hover { color:#ffcb05; transition: all ease-out 0.5s}

.contact-us .social-media { width: 188px !important;}
.contact-us .social-media ul li a {font-size: 25px;}

.policy p {float: left; margin-right: 15px; font-size: 13px;}
.policy ul { float: left;}
.policy ul li { float: left; margin-right: 15px; padding-left: 15px; border-left:1px solid #FFF;}
.policy ul li a { display: block; color: #FFF; text-decoration: underline; font-size: 13px; text-transform:uppercase;}
.policy ul li a:hover {color: #ffcb05; transition: all ease-out 0.5s;}

.social-media ul li { float: left; margin-left: 15px;}
.social-media ul li a {color: #FFF;}
.social-media ul li a:hover {color: #ffcb05; transition: all ease-out 0.5s;}

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

	
	.footer-container .fl {width: 100%;}	
	.footer-container .social-media ul li {display: none !important;}
	.footer-container > div { width: 100%; margin: auto;}

	.policy p { width: 100%; margin: 0px; float: left; text-align: center; margin-bottom: 10px; }
	.policy ul { width: 184px; float: none; margin: auto;}
	.policy ul li:first-child {float: left; margin-right: 15px; padding-left: 0px; border-left:0px solid #FFF;}
	.policy ul li:last-child {float: left; margin-right: 0px;}
	
}

/* FOOTER INPUTS */

label { width: 100%; text-align: center !important; float: left; font-size: 13px; margin-bottom: 5px; margin-top: 15px;}

input { position: relative; width: 100%; height: 28px; display: block; background-color: #908f8f; border: none; color: #FFF; box-sizing: border-box; border-radius: 0px !important; font-family: 'Oswald', sans-serif; -webkit-appearance:none; -ms-appearance:none; -moz-appearance:none;	-o-appearance:none;}

textarea {width: 100%; min-width: 100%; max-width: 100%; background-color: #908f8f; box-sizing: border-box; border-radius: 0px !important; height: 150px; min-height: 150px; max-height: 500px; font-family: 'Oswald', sans-serif; color: #FFF; -webkit-appearance:none; -ms-appearance:none; -moz-appearance:none;	-o-appearance:none; position: relative; z-index: 999;}

.action-button { background-color:#ffcb05 !important; color: #221f1f !important; font-weight: 100!important; border-radius: 0px !important; margin-bottom: 10px; margin-top: 10px; -webkit-appearance:none; -ms-appearance:none; -moz-appearance:none; -o-appearance:none;}
.action-button:hover { background-color:#221f1f !important; color: #ffcb05 !important; font-weight: 100; transition: all ease-out 0.5s; cursor: pointer;}
.action-button:disabled { background-color:#929292 !important; color: #221f1f !important; font-weight: 100!important; border-radius: 0px !important; margin-bottom: 10px; margin-top: 10px; -webkit-appearance:none; -ms-appearance:none; -moz-appearance:none; -o-appearance:none;}


/* POLICY */

.policy-container { width:70%; margin: auto; }
.policy-container p { width: 80%; margin: auto; margin-bottom: 10px; text-align: center; font-size: 15px; line-height: 23px; font-weight: 100; color: #908f8f; }

.policy-container p a { color: #FFF; text-decoration:underline;}
.policy-container p a:hover { color: #ffcb04;}

.policy-container h1 { width: 100%; float: left; text-align: center; color: #FFF; margin-top: 20px; margin-bottom: 30px; font-size: 25px; }	
.policy-container h2 { width: 100%; float: left; text-align: center; color: #FFF; margin-top: 20px; margin-bottom: 30px; font-size: 17px; text-transform: uppercase; }	
.policy-container h3 { width: 100%; float: left; text-align: center; color: #ffcb04; margin-bottom: 10px; font-size: 15px; text-transform: uppercase; }	
.policy-container h1::after { content: ''; width: 320px; margin: auto; margin-top: 10px; height: 3px; display: block; background-color: #ffcb04; }	
.policy-container h4 { width: 100%; float: left; text-align: center; color: #ffcb04; margin-bottom: 10px; margin-top: 15px; font-size: 15px; text-transform: uppercase; }	

.policy-container ul {width: 100%;}
.policy-container ul li {width: 100%; text-align: center;}

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

	.policy-container { width:90%; }
	
}

/* PRODUCT DETAIL */

.product-container { width: 60%; margin: auto;}

.products h2 { width: 100%; float: left; text-align: center; color: #FFF; margin-top: 20px; margin-bottom: 30px; font-size: 25px;}
.products h2::after { content: ''; width: 320px; margin: auto; margin-top: 10px; height: 3px; display: block; background-color: #ffcb04; }
.products p { width: 80%; margin: auto; text-align: center; font-size: 15px; margin-bottom: 55px; line-height: 23px; font-weight: 100; color: #908f8f; padding-bottom: 30px; }
.product { width: calc(33% - 20px); float: left; padding: 10px; padding-bottom: 70px;}

.product > a { width: 100%; float: left; margin-bottom: 30px; color: #FFF; background-color: #221f1f !important;}
.product a:last-child::after { content: ''; width: 100px; height: 2px; background-color: #fecb03; display: block; margin: auto; margin-top: 5px;}
.product a { width: 100%; float: left; color: #FFF; text-align: center;}
.product a:hover { transition: all ease-out 0.5s; color:#ffcb05}
.product a img { width: 100%;}
.product a img:hover { width: 100%; transition: all ease-out 0.5s;}

.product-single { width: 50%; margin: auto; padding: 10px; padding-bottom: 70px;}
.product-single > a { width: 100%; float: left; margin-bottom: 30px; color: #FFF; background-color: #221f1f !important;}
.product-single a:last-child::after { content: ''; width: 100px; height: 2px; background-color: #fecb03; display: block; margin: auto; margin-top: 5px;}
.product-single a { width: 100%; float: left; color: #FFF; text-align: center;}
.product-single a:hover { transition: all ease-out 0.5s; color:#ffcb05}
.product-single a img { width: 100%;}
.product-single a img:hover { width: 100%; transition: all ease-out 0.5s;}

.breadcrumb { width: 100%; float: left; margin-top: 25px; margin-bottom: 5px;}
.breadcrumb li { float: left;}
.breadcrumb li:last-child a { color:#ffcb05}		
.breadcrumb li:last-child::before { content: '>'; float: left; width: 20px; color: #FFF; text-align: center; line-height: 17px; font-weight: 100;}	
.breadcrumb li a { display: block; float: left; color: #FFF; font-size: 13px;}	

.product-detail { width: 70%; margin: auto;}
.product-detail .half-left { width: 50%; float: left;}
.product-detail h1 { width: 100%; font-size: 35px;}
.product-detail .half-left img { width: 100%;}	

.product-detail .half-right { width: 50%; float: left;}
.product-detail .half-right h2 { margin-top: 35px;}	
.product-detail .half-right p { color: #908f8f; font-weight: 100;}	

.product-detail .half-right .technical-title { font-size: 21px; background-color: #ffcb04; color: #221f1f; text-indent: 10px; border-top-right-radius: 25px; line-height: 45px; }
.product-detail .half-right h2 { text-transform: uppercase; margin-bottom: 15px; border-bottom: 2px solid #fecb08; padding-bottom: 5px;}
.product-detail .half-right > p { margin-bottom: 15px;}

.product-detail .half-right p:last-child {
    color: #FFF;
    font-weight: 100;
	margin-top: 15px;
}

.product-detail table { width: 100% !important;}
.product-detail table tr td:first-child p { color:white;}
.product-detail table tr { border-top: 1px dotted #908f8f;}
.product-detail table tr td p { font-size: 13px;}

@media only screen and ( max-width: 768px) {	
	
	.product-detail { width: 90% !important; margin: auto;}
	
	.breadcrumb { display: none;}
	.product-detail .half-left { width: 100%; float: left;}
	.product-detail h1 { width: 100%; font-size: 30px; text-align: center;}	
	.product-detail .half-right { width: 100%; float: left;}
	.product-detail .half-right h2 { margin-top: 15px; text-align: center; width: 100%;}	
	.product-detail .half-right p { color: #908f8f; text-align: center; width: 90%; margin: auto; margin-bottom: 15px;}	
	.product-detail table { width: 90%; margin: auto;}	
	
	.products p { width: 90%}
	.contact-us { width: 90%}
	
	.product-container { width: 100%;}
	.product { width: calc(50% - 20px);}	
	
	.social-container p { width: 100%; text-align: center; float: left; font-size: 13px;}
	.social-container .fl { width: 100%;}
	.social-container .fr { display: none;}

	.navigation {width: 100%; display: none;}
	
	#chartdiv { height: 200px !important;}
	
}

/* COOKIE NOTIFICATION */

.cookie-notification {width: 35%; padding: 10px; height: auto; background-color: #221f1f; position: fixed; bottom: 25px; display: block; z-index: 99999; color: #FFF; left: 31.5%; box-shadow: 0px 10px 25px #221f1f;}
.cookie-notification h2 {color: #ffcb04; font-size: 20px; width: 100%; text-align: center;}
.cookie-notification p {font-size: 13px; width: 100%; text-align: center; margin-bottom: 10px;}				
.cookie-notification p a {font-size: 13px; color:#FFF; text-decoration: underline; }
.cookie-notification p a:hover { color:#ffcb05;}
.cookie-notification .action-button {width: 50%; margin: auto;}

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

	.cookie-notification { width: 75%; left: 12.5%; }

}

/* SLIDEOUT */

.slideout-menu { position:absolute; left: 0; top: 0; bottom: 0; z-index: 0; width: 256px; overflow-y: auto; display: none; -webkit-overflow-scrolling: touch;}
.slideout-panel { position: relative; z-index: 1;}
.slideout-open, .slideout-open body, .slideout-open .slideout-panel { overflow: hidden; }
.slideout-open .slideout-menu { display: block; }

/* CUSTOM */

#navbar-main { background: #201d0f; }
#main { background-color: #2b2828; }

/* PARSLEY */

.parsley-errors-list { width:100%; float:left; margin-bottom: 10px;}
.parsley-required, .parsley-minlength, .parsley-equalto, .parsley-type { background-color:#f6c908; color:#221f1f; width:100%; height:25px; display:block; line-height:25px; font-size:13px; text-align: center; float: left;}
.parsley-required:last-child { margin-top: -4px;}