/*
Theme Name: Synder Filtration Texas
Description: Synder Filtration Texas
Author: Milan
Version: 1.6
Tags: Synder Filtration Texas
*//* -------------------------------------------------------------- */
@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-regular.eot');
	src: url('fonts/myriadpro-regular.eot') format('embedded-opentype'), url('fonts/myriadpro-regular.woff') format('woff'), url('fonts/myriadpro-regular.ttf') format('truetype'), url('fonts/myriadpro-regular.svg#MyriadProRegular') format('svg');
	font-weight:400;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-black.eot');
	src: url('fonts/myriadpro-black.eot') format('embedded-opentype'), url('fonts/myriadpro-black.woff') format('woff'), url('fonts/myriadpro-black.ttf') format('truetype'), url('fonts/myriadpro-black.svg#MyriadProBlack') format('svg');
	font-weight:700;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-bold.eot');
	src: url('fonts/myriadpro-bold.eot') format('embedded-opentype'), url('fonts/myriadpro-bold.woff') format('woff'), url('fonts/myriadpro-bold.ttf') format('truetype'), url('fonts/myriadpro-bold.svg#MyriadProBold') format('svg');
	font-weight:600;
}
@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-semibold.eot');
	src: url('fonts/myriadpro-semibold.eot') format('embedded-opentype'), url('fonts/myriadpro-semibold.woff') format('woff'), url('fonts/myriadpro-semibold.ttf') format('truetype'), url('fonts/myriadpro-semibold.svg#MyriadProSemibold') format('svg');
	font-weight:500;
}
html,body{overflow-x:hidden;}
body{margin: 0; padding: 0; font-family: MyriadPro; font-weight:400; font-size: 16px;}
a{text-decoration:none; transition: all linear .3s;}

.header{background:#f4f3f3;}
.custom-logo-link{display: block; max-width: 230px; margin: 15px 0;}
.custom-logo{max-width: 100%; height: auto;}

.top-right{display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}

.top-red{background:#9d2f2f; font-size:14px; padding: 3px 0 3px 20px; border-radius: 0 0 0 10px; position:relative;}
.top-red a{color:#fff;}
.top-red img{max-width: 18px; margin-right:5px; margin-bottom: 1px;}
.top-red a+a{margin-left:20px;}
.top-red:before{content:""; position:absolute; left:100%; height:100%; width:100vw; top:0; background:#9d2f2f;}

#menu-top-nav{margin: 0; padding: 0; list-style: none; display: flex; gap: 20px;}
#menu-top-nav a{color:#231f1f; text-transform:uppercase; display:block; line-height:60px; letter-spacing:1px; font-size:15px; font-weight:500;}
#menu-top-nav a:hover{color:#9d2f2f;}

.fs-18{font-size:18px;}

.cbtn{background:#fff; color:#9d2f2f; font-weight:600; border-radius:7px; text-transform:uppercase; letter-spacing:1px; padding:8px 20px; display:inline-flex; font-size:15px; transition: all linear .3s; outline:none; border:1px solid rgba(255,255,255,0);}
.cbtn:hover{background:none; color:#fff; box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25); border-color:rgba(255,255,255,1);}
.cbtn:focus{background:#fff; color:#000; box-shadow:none;}
.cbtn.btn-red{background:#9d2f2f; color:#fff;}
.cbtn:hover.btn-red{background:none;}
.cbtn:focus.btn-red{background:#fff; color:#9d2f2f;}

.red-banner{background:#9d2f2f; padding:20px 0 20px 30px; font-size:22px; border-radius:8px 0 0 8px; letter-spacing:1px; position:relative;}
.red-banner a{color:#fff;}
.red-banner:before{content:""; position:absolute; left:100%; height:100%; width:100vw; top:0; background:#9d2f2f;}

a.data-title {position: relative;}
a.data-title:hover::after {content: attr(data-title); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.8);
  color: #000; padding: 10px; white-space: normal; font-size: 13px; z-index: 100; min-width:262px; line-height:20px; text-align:center;}
  
.left-5{width: 1320px; position: relative; margin-left: calc((100vw - 1300px) / 2) !important;} 
.left-5 > .vc_column_container{padding-right: 100px; max-width: 500px;}
.right-5{} 
.right-5 > .vc_column_container{padding-left: 100px; max-width: 500px;} 

.cta1 > .vc_column-inner > .wpb_wrapper{max-width:250px; width:100% height:250px; position:relative; border:2px solid #fff; border-radius:15px; overflow:hidden; margin-left:auto; margin-right:auto; margin-bottom:35px; transition: all linear .3s;}
.cta1 > .vc_column-inner > .wpb_wrapper:hover{filter: drop-shadow(0px 8px 40px rgba(157, 47, 47, 0.8));}
.cta1 img{width:100%; max-width:auto !important; height:100% !important; object-fit:cover;}
.cta1 h2{position:absolute; bottom:15px; left:20px; right:20px; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin:0; background:#fff; border:1px solid #3d3836; border-radius:8px; padding:8px 10px; text-align:center; transition: all linear .3s;}
.cta1 > .vc_column-inner > .wpb_wrapper:hover h2{background: #9d2f2f; color:#fff; border-color:#fff;}

#footer {background: #414243; color:#d1d3d4; font-size: 13px; padding: 40px 0; clear: both;}
#footer h3 {color: #d1d3d4; margin: 0 0 10px; padding: 0; font-size: 15px; text-transform: uppercase; letter-spacing:1px; text-align: left; font-weight: 400;}
#footer ul {margin: 0; padding: 0; list-style:none;}
#footer ul li {margin: 0; padding: 0; list-style: none; font-size: 13px; color: #fff; text-align: left; text-transform: capitalize;}
#footer a {color: #fff;}
#footer .social a{color:#d1d3d4; margin:0 5px;}
#footer ul li a:hover {text-decoration: underline;}
#copyright {height: 37px; line-height: 37px; text-align: center; color: #58595b; font-size: 12px;}

@media (max-width: 1199.98px) {
	.left-5{width: 960px; margin-left: calc((100vw - 940px) / 2) !important;}
	.left-5 > .vc_column_container{max-width: 450px;}
	.right-5 > .vc_column_container{padding-left: 60px; max-width: 380px;}
}
@media (max-width: 991.98px) {
	.left-5{width: 720px; margin-left: calc((100vw - 700px) / 2) !important;}
	.left-5 > .vc_column_container{max-width: 350px;}
	.right-5 > .vc_column_container{padding-left: 50px; max-width: 290px;}
}
@media (max-width: 767.98px) {
	.top-red{display: none;}
	.top-right{justify-content: center;}
	.custom-logo-link{max-width: 150px; margin: 5px 0;}
	
	.hamburger-menu {background: none; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; padding: 0;}
	.hamburger-menu .bar {width: 30px; height: 3px; background-color: #000;	transition: 0.3s; border-radius:2px;}
	.hamburger-menu.openbtn span:nth-child(1){
	-moz-transform: rotate(45deg) translateX(7px) translateY(7px);
	-webkit-transform: rotate(45deg) translateX(7px) translateY(7px);
	-o-transform: rotate(45deg) translateX(7px) translateY(7px);
	-ms-transform: rotate(45deg) translateX(7px) translateY(7px);
	transform: rotate(45deg) translateX(7px) translateY(7px);
	}
	.hamburger-menu.openbtn span:nth-child(2){opacity:0;}
	.hamburger-menu.openbtn span:nth-child(3){
	-moz-transform: rotate(-45deg) translateX(8px) translateY(-8px);
	-webkit-transform: rotate(-45deg) translateX(8px) translateY(-8px);
	-o-transform: rotate(-45deg) translateX(8px) translateY(-8px);
	-ms-transform: rotate(-45deg) translateX(8px) translateY(-8px);
	transform: rotate(-45deg) translateX(8px) translateY(-8px);
	}
	
	#access{display: none; position: absolute; left: 0; top:70px; width: 100%; background: #fff !important; padding: 0; z-index: 99; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); height: calc(100vh - 69px); overflow-y: scroll;}
	#menu-top-nav{display:block;}
	#menu-top-nav > li{margin: 0 24px; position:relative;}
	#menu-top-nav > li > a{padding: 28px 0; border-bottom: 0.5px solid #000; position:relative; display:block; line-height: normal;}
	#menu-top-nav > li:first-child > a{border-top: 0.5px solid #000;}
	#menu-top-nav > li > a span,#menu-top-nav > li > span{width:24px; height:24px; position:absolute; right:0; top:25px; z-index: -1;}
	#menu-top-nav > li > a:not([href="#"]) + span{z-index: 1; cursor:pointer;}
	#menu-top-nav > li > a span:before,#menu-top-nav > li > span:before,
	#menu-top-nav > li > a span:after,#menu-top-nav > li > span:after{content:""; position:absolute; height:24px; width:1px; background:#000; right:12px; top:0; transition: all .2s linear;}
	#menu-top-nav > li > a span:after,#menu-top-nav > li > span:after{width:24px; height:1px; right:0; top:11px;}
	#menu-top-nav > li.mopen > a{color: #D90789;}
	#menu-top-nav > li.mopen > a span:after,#menu-top-nav > li.mopen > span:after{background:#D90789;}
	#menu-top-nav > li.mopen > a span:before,#menu-top-nav > li.mopen > span:before{-ms-transform: rotate(90deg); transform: rotate(90deg); background:#D90789;}
	#menu-top-nav > li ul{display:none; position: relative; width: 100%; padding: 26px 0; border-bottom: 0.5px solid #000;}
	#menu-top-nav li ul a {padding: 0 16px;}
	#menu-top-nav li ul li+li a{margin-top:20px;}
	
	.red-banner{border-radius: 8px;}
	.red-banner:before{display:none;}
}
@media (max-width: 575.98px) {
	.left-5{width: auto; margin-left: 15px !important; margin-right: 15px !important;}
	.left-5 > .vc_column_container{max-width:100%; padding-right:0;}
	.right-5{margin-left: 15px !important; margin-right: 15px !important;}
	.right-5 > .vc_column_container{padding-left: 0; max-width: 100%;}
	.min-350{height:300px;}
	#footer,#footer h3,#footer ul li{text-align:center;}
	.red-banner{font-size:16px;}
}