*{box-sizing: border-box; image-rendering: -webkit-optimize-contrast;}
html, body{overflow-x: hidden}
body {font-family:Arial, Helvetica, sans-serif; margin:0 0 0 0; font-weight:normal; font-size:12px; width:100%; overflow-x: hidden;}
a:link{color:#000033; text-decoration: none}
a:visited{color: #000033;}
a:hover{ color:#002559;}
a:active{color: #808080;}
h1{color: white; font-weight: bold; text-transform:uppercase; text-shadow: 3px 1px 8px rgba(41, 41, 41, 0.6);}
h2{font-size:16px;  color:#000033; margin-bottom:5px;}
h3{font-size:14px; color:#404040; font-weight:bold; margin:0px; padding:0px; text-transform:uppercase;}
h4{margin:0px; padding:0px; color:#0000C0; font-size:14px; font-weight:bold;}
h5{margin:0px; padding:0px; color:#000000; font-size:13px;}
h6{padding:0px; margin:0px; display:inline; font-size:14px; color:#C00000;}
img{border:none;}
img-center{margin:auto auto; text-align:center;}
td{vertical-align:top;}
p{text-align:justify; margin-top:0px;}
#mobi-toggle,.item-hide{display:none;}
.ecat-value{box-sizing: content-box; visibility:hidden;position:absolute; max-width:100px; top:0; left:0; z-index:-1}

.btn1{width: fit-content; background-color:#002559; float: left; transition: all .5s; text-align:center; letter-spacing:1px; padding:7px 25px; text-transform:uppercase; color: rgba(255,255,255,1) !important; text-decoration: none; border-radius: 50px; border: solid 2px #002559;}
.btn1:hover{background-color:#fff; color: #002559 !important;}

.btn2{background-color:#002559; transition:all .5s; font-size:11px; color: white !important; padding:5px 20px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; margin-left:60px; margin-top:10px; float: left; cursor:pointer; border-radius:5px}
.btn2:hover{opacity:.7}

.btn3{background-color:#FF8400; transition:all .5s; font-size:11px; color: white !important; padding:5px 20px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; margin-left:0px; margin-top:10px; float: left; cursor:pointer; border-radius:5px}
.btn3:hover{opacity:.7}

.btn4{width: auto; background-color: #FF8400; float: left; transition: all .5s; font-weight:bold; text-align:center; padding:7px 15px; text-transform:uppercase; color: #fff!important; text-decoration: none; border-radius:4px}
.btn4:hover{opacity:.7}

.btn5{position: relative; z-index: 99; margin-top: -27px; margin-right: 10px; width: auto; background-color:#002559; float: right; transition: all .5s; text-align:center; padding:7px 25px; text-transform:uppercase; color: #fff!important; text-decoration: none; border-radius: 50px; border: solid 2px #002559; font-weight: 600}
.btn5:hover{background-color:#fff; color: #002559 !important;}

.btn6{display: inline-block; position: absolute; left: 45px; bottom: 60px; z-index: 99; width: auto; background-color:#fff; transition: all .5s; text-align:center; border: solid 2px #fff; padding:7px 25px; text-transform:uppercase; color: #002559!important; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 15.6px; line-height: 1em;}
.btn6:hover{background-color:rgba(0, 37, 89, 0); color: #fff !important;}

.button2{ display:block; width:80px !important; height:22px !important;  border:1px solid #404040; background-color:#404040; text-align:center; padding:0px !important; padding-top:5px !important; margin-top:10px; font-size:11px !important; text-decoration:none; color:#fff !important;}
.button2:hover{border:1px solid #808080; color:#808080 !important; background-color:#fff !important; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;}
.button4{ display:block; background-color:#1C5631; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:5px;   color:#fff !important; text-align:center;}
.button4:hover{background-color:#BED630; color:#1C5631 !important;-webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;}

/*================== MAIN SECTION ============================*/
.back_main{ max-width:1280px; margin: auto auto; margin-top:10px; margin-bottom:10px; -webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.75);box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.75);}
.back_page{ width:1000px; position:relative; font-size:1.2em; line-height:1.8em; margin:20px auto; color:#000; text-align:left; padding-top:0px; top:0px; padding:15px; display:table}
.back_page p{text-align:justify;}
.product-bg{ background-color:#fff; width:100%; display:table}

.page-title{float: left; width: 100%; height:200px; background: url(images/pvc-hose.jpg) no-repeat; ma background-size: 100% auto; margin-top:100px; position:relative}
.page-title > div{margin:auto; width: 1000px; border-left: solid  rgba(255,255,255,1) 3px; font-size: 14px; position:absolute; top:0px; bottom:0; left:0; right:0; height:100px}
.page-title h1{margin:34px 0; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-shadow: 0 0 1px #000; padding-left: 10px}

.contactus-title a > div{margin:auto; width: 1000px; border-left: solid  rgba(255,255,255,1) 3px; font-size: 14px; position:absolute; top:0px; bottom:0; left:0; right:0; height:100px}
.contactus-title a > h1{margin:34px 0; text-transform: uppercase; letter-spacing: 2px; color: #fff; text-shadow: 0 0 1px #000;rgba(255,255,255,1); padding-left: 10px}

.contactus-title{background: url(images/contactus.jpg) no-repeat; background-size: 100% auto;}
.page-title-light-commercial{background: url(images/commercial-background-products.jpg); background-size: 100% auto;}
.page-title-light-maintenance{background: url(images/maintenance-background.jpg);  background-size: 100% auto; background-position: 0 0px}
.page-title img{position: absolute; top: 0}

.text-block{float: left; width:100%;}
.text-block .article{ width:100%; display:table; margin-bottom:10px}
.text-block img{ float:left; padding-right:10px}
.text-block-banner{overflow: hidden; height:280px; background-color:#f1f1f1}
.text-block-banner1{overflow: hidden; height:280px; }
.text-block-text{margin:3% 4%;  padding:20px; background-color: white; margin-top:-245px; position:relative; float: left; border:solid 1px #ccc}
.text-block-text1{padding:20px;  margin-top:-245px; position:relative; margin-bottom:25px}
.about-img{float:right; width:310px; padding-left:20px}
.text-block .product-block-list{ width:100%; margin:auto; display:table}
.text-block .product-block-list > div{ float:left; width:35%; display:inline-block}

.contact-info{ width:100%;float:left; font-size:15px; line-height:20px}
.contact-info > div{width:1000px; margin:auto; padding:0 15px}
.contact-info > div h2{ margin-top:0}
.contact-info > div .fa{ width:15%;font-size:20px; color:#003366}
.contact-info > div a{color:#555555}
.contact-info > div > div{ width:25%; display:block; float:left; padding:25px 0}
.contact-info > div > div:first-of-type{ width:25%}
.contact-info > div > div:nth-of-type(2){ width:20%}
.contact-info > div > div:nth-of-type(3){ width:23%}
.contact-info > div > div span{ float:right; width:85%}

.text-block-products{padding:20px}
.text-block-products > div{float:left; text-align:center; 
width:31%; padding:10px; margin:1%; height:255px; border:solid #c1c1c1 1px; font-size:13px; line-height:22px}
.welding{height:135px !important; padding-top:0px !important}
.text-block-products > div > div:first-of-type{height:135px; padding-top:30px}
.text-block-products > div > div:last-of-type{height:55px;}
.text-block-products div img{margin-bottom:20px}

.hose-proctection-block{ display:flex; flex-wrap:wrap}
.hose-proctection-block h2{ font-size:24px; margin-bottom:0}
.hose-proctection-block > div{ display:flex; flex-wrap:wrap; justify-content: space-between; margin:20px 0 30px 0px;}
.hose-proctection-block .hose-proctection-text{ width:67%}
.hose-proctection-block .hose-proctection-text > p:first-of-type{ margin-top:-5px}
.hose-proctection-block > div img{ padding:0; border-radius:4px; box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 12%);}

.hydraulic-equipment{position:absolute; visibility:hidden; z-index:999999;}
.hydraulic-fittings-1{font-family:Arial,Helvetica,sans-serif; width:100%; height:100px; z-index:9999999; background: linear-gradient(to top right, #003366 0%, #005dbb 90%); position:fixed; font-size: 18px}
.hydraulic-fittings-header{ width:100%; margin:auto auto;}
.hydraulic-hose-2{ position:relative; font-size:13px; width:100%;  z-index:2; line-height:18px; margin:auto; float: left; background: #f1f1f1;}
.hydraulic-hose-section{width:100%; margin:auto auto; display:table}
{max-width:1280px; margin:auto auto;}

.contact-us .cleod-map{position: absolute; left: 0; right: 0; height: 100px;}
.contact-us .cleod-map div{position: absolute; left: 0; right: 0; top: 0px; height: 400px; background: linear-gradient(to top right, rgba(0, 0, 0, 0.61) 10%, rgba(0, 0, 0, 0) 100%);}
.contact-us .cleod-map h1{font-size: 60px; margin-left: 100px; margin-top: 100px;}
.contact-us .contact-us-details{position: relative; z-index: 99; margin-top: -100px; height: 265px; width: 100%;}
.contact-us .contact-us-detail{ position: relative; height: 100%; width: 20%; background: white; display: inline-block; margin-right: 80px; background: rgb(24, 81, 116); border-top: solid 5px #005dbb}
.contact-us .contact-us-detail:last-child{margin-right: 0px; float:right;}
.contact-us .contact-us-detail .contact-us-icon{color: white; position:absolute; text-align:center; width: 70px; height: 70px; border-radius: 50px; font-size: 2em; top: -20px; left: calc(50% - 32px); background: rgb(0, 64, 102); border: solid 5px #005dbb} 
.contact-us .contact-us-detail .contact-us-icon i{position:relative; margin-top: 20px; z-index: 2;}
.contact-us .contact-us-detail h2{margin: 0px; padding-top: 57px; padding-bottom: 20px; background: rgb(0, 64, 102); text-align:center; color: white; position: relative; z-index: 1;}
.contact-us .contact-us-detail .contact-us-info{padding: 20px; position:absolute; width: 100%; color: white; font-size: 15px; line-height:25px;}
.contact-us .contact-us-detail .contact-us-info a{color: white;}	
.contact-us .contact-us-section-2{ width: 100%; margin-top: 20px; position: relative;}
.contact-us .contact-us-section-2 .enquiry-container{color: #222; width: 55%; display:inline-block;}

.intro-enquiry-form tr > td > div > div{margin-top: -10px;}
.intro-enquiry-container{width:100%; background:#222222; padding:40px 0 80px 0; color:rgba(255,255,255,.6); float: left; font-size:14px; }
.intro-enquiry-container h2{color: white; font-size:36px; margin-top: -5px}
.intro-enquiry-container h2 span{width:84px; height:5px; margin-top:10px; background:#FF8400; display: block; border-radius:8px}
.intro-enquiry-container p{line-height:20px}
.intro-enquiry{margin: auto; padding:30px; padding-left: 10px}
.contact-us .contact-us-section-2 h2{font-size: 2em; padding: 20px; color: #003366; margin: 0;}
.intro-enquiry table{width:100%}
.intro-enquiry input, .intro-enquiry select, .intro-enquiry textarea{color: #333; font-family:Arial, Helvetica,  sans-serif; width:100%;  background-color:#dddddd; border-radius:1px; border: 1px solid rgba(0,0,0,.1); font-size:14px; padding:10px; margin-bottom:7px; margin-top:5px}
.captcha{margin-top:5px}
.intro-enquiry textarea{min-height: 110px; resize: vertical;}

.breadcrumb{color:#fff; text-transform: uppercase; font-size: 1.3em; display: block; z-index:10; width: auto !important; float: right !important; margin-top:-20px;}
.breadcrumb a{color: #fff}
.breadcrumb-block{float:left; width:100%;background-color:#004c99; height:46px; position:relative; z-index:3}
.breadcrumb-block .active-page{background: #00356a; bottom: 8px;}
.breadcrumb-block > ul{margin:0; padding:0; width:1280px; margin:auto auto;}
.breadcrumb-block > ul > li{ list-style:none; float: left;  height: 54px;  z-index:1;  bottom: 8px; position:relative !important; min-width:13%; text-align:center;}
.breadcrumb-block > ul > li:hover{background: #00356a;  transition: all .5s}
.breadcrumb-block .dropdown > a{padding:23px 18px !important; top:0}
.breadcrumb-block .dropdown-menu li{ bottom:0; text-align:left; height:50px;}
.breadcrumb-block .dropdown-menu { background-color:#21637be0 !important; border-radius:0 !important; top:54px; left:0px; z-index:99999999;}
.breadcrumb-block .dropdown-menu .menu-callout{border-bottom-color:#21637be0 !important; display:none}
.breadcrumb-block > ul > li > a{ font-size:14px; color:#fff; text-transform:uppercase; top:7px; position:relative; display: inline-block; width: 100%; padding:15px 18px;}
.breadcrumb-block .arrow-down{width: 0px; height: 0px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #00356a; position:absolute; top:100%; left: 50%;transform: translate(-50%, 0);}

.contact-block{ max-width:1280px; margin:auto; margin-top:100px}
.contact-us .cleod-map{position: absolute; left: 0; right: 0; height: 100px;}
.contact-us .cleod-map div{position: absolute; left: 0; right: 0; top: 0px; height: 400px; background: linear-gradient(to top right, rgba(0, 0, 0, 0.61) 10%, rgba(0, 0, 0, 0) 100%);}
.contact-us .cleod-map h1{font-size: 60px; margin-left: 100px; margin-top: 100px;}
.contact-us .contact-us-details{position: relative; z-index: 99; margin-top: -100px; height: 265px; width: 100%;}
.contact-us .contact-us-detail{ position: relative; height: 100%; width: 22%; background: white; display: inline-block; margin-right: 45px; background: rgb(24, 81, 116); border-top: solid 5px #005dbb}
.contact-us .contact-us-detail:last-child{margin-right: 0px; float:right;}
.contact-us .contact-us-detail .contact-us-icon{color: white; position:absolute; text-align:center; width: 70px; height: 70px; border-radius: 50px; font-size: 2em; top: -20px; left: calc(50% - 32px); background: rgb(0, 64, 102); border: solid 5px #005dbb} 
.contact-us .contact-us-detail .contact-us-icon i{position:relative; margin-top: 20px; z-index: 2;}
.contact-us .contact-us-detail h2{margin: 0px; padding-top: 57px; padding-bottom: 20px; background: rgb(0, 64, 102); text-align:center; color: white; position: relative; z-index: 1;}
.contact-us .contact-us-detail .contact-us-info{padding: 20px; position:absolute; width: 100%; color: white; font-size: 15px; line-height:25px;}
.contact-us .contact-us-detail .contact-us-info a{color: white;}	
.contact-us .contact-us-section-2{ width: 100%; margin-top: 20px; position: relative;}
.contact-us .contact-us-section-2 .enquiry-container{color: #222; width: 55%; display:inline-block;}
.contact-us .contact-us-section-2 .cleod-areas-section{ display: inline-block; position: absolute; height: 100%; width: 45%; padding: 30px; padding-right:20px;}
.contact-us .contact-us-section-2 .cleod-areas-section p{padding-left: 20px; padding-right: 20px;}
.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area{background: rgb(222, 222, 222); position: relative; margin-bottom: 20px;border-left:solid 5px #005dbb;}
.cleod-areas-section .container-icon{left: -20px;}

.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area .area-content{width: 50%; padding: 20px; padding-left: 50px; background: rgb(222, 222, 222); position:relative; z-index:1;}
.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area h2{font-size: 20px; color: #003366;}
.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area p{display: inline-block; text-align: left; height: 100%; margin-bottom: 20px;}
.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area img{display: inline-block; padding: 20px; top: 0; right: 20px; position:absolute; height: 100%;}

.container-icon{color: rgb(0, 64, 102); position:absolute; text-align:center; width: 70px; height: 70px; border-radius: 50px; font-size: 26px;  background: rgb(222, 222, 222); border: solid 5px #005dbb; top: calc(50% - 35px);} 
.container-icon i{position:relative; margin-top: 18px; z-index: 2;}

.container-section:nth-of-type(odd) .container1 .container-icon{right: -20px;}
.container-section:nth-of-type(even) .container1 .container-icon{left: -20px;}
.container1 .container-text{position: relative; background: rgb(222, 222, 222); padding: 20px 50px;}
.container1 .container-text h2{font-size: 25px; margin-bottom: 20px; color: #003366}
.container1 .container-text p{font-size: 16px; line-height: 25px; color: #333}
.container1 .container-text ul{list-style: none;}
.container1 .container-text ul li:before{ content: ""; border-color: #003366; border-style: solid; border-width: 4px; display: block; height: 0; width: 0; left: -1.5em; top: 0.8em; position: relative; border-radius: 1.5px;}
.container1 .container-text ul li{font-size: 16px;}

.product-block-items > div{float: left; text-align:left; width: 23%; padding: 10px; margin: 1%; height: 205px; border: solid rgb(0, 80, 160) 2px; font-size: 13px; line-height: 18px;position:relative; margin-bottom:30px }
.product-block-items > div > div:first-of-type{ height:93px}
.product-block-items > div > div:last-of-type{ position:relative; float:left;bottom:0; background-color:rgb(0, 71, 141); color:#fff; width:100%; padding:0 7px; height:63px}
.product-block-items > div > div a, .product-block-items > div > div h2 a{ color:#fff}
.product-block-items img{ padding:0; width:100%; height:auto}
.product-block-items > div >  div h2{ margin:5px 0; font-size:11px}
.product-block-items > div > div .fa{padding: 7px 9px;font-size: 23px;}
.product-block-items > div > div:last-of-type > span{ float:left; display:inline-block; width:100%;}
.product-block-items > div > div:last-of-type > span:last-of-type{width: 45px;font-size:30px;border: solid 3px;height: 45px;background-color: #00478d;position: absolute;border-radius: 50px;padding: 0px;bottom: -26px;left: 0;right: 0;margin-left: auto;margin-right: auto;}

.disclaimer-text ul{ padding:0 0 0 20px; margin:0}
.disclaimer-text li{ padding:5px 0; line-height:26px}
.text-block.disclaimer-text h2{ font-weight:normal; font-size: 22px}
.text-block.disclaimer-text > div{ display: flex; justify-content: space-between; flex-wrap: wrap; width:60%; margin-top:20px}
.text-block.disclaimer-text > div > a{min-width:150px;color: #fff;}
.tcs-block div {display: flex;flex-wrap: nowrap;align-items: center;}
.tcs-block div input {width: 4% !important;height: 25px;margin-right: 10px !important;}
.tcs-block > td > div > label > span > a{color:#152c4c !important; font-weight:normal}


/*================= Enquiry ======================*/

/*-------------- THANK YOU ---------------------*/
.thank-you{float: none; margin:auto; border-left:none; font-size:13px; width:900px !important; margin-bottom: 70px; display: table}
.thank-you div{float: left}
.thank-you-image{left:60px; top:80px; position: relative; width:50%; box-sizing:border-box}
.thank-you-text{float: left; top:40px; left:10px; width:50%; box-sizing:border-box; position:relative; z-index:100}
.thank-you-title{font-size: 5.5em;text-transform:initial; font-weight: normal; white-space:nowrap; position:relative; left:-150px; top:15px }
.thank-you-title span:first-of-type{color: rgb(0, 53, 106)}
.thank-you-title span:nth-of-type(2){color: rgb(0, 76, 153)}
.thank-you-title span:nth-of-type(3){color: #121213}
.thank-you-contact{text-align: center; width:100%; margin-top:115px; padding:25px 0; font-weight: bold; line-height:20px; border-top:1px #fff solid; float: left}
.thank-you-contact a{color: #000; margin:10px 0; float:none; }
.thank-you-contact .btn5{width: auto; line-height:50px; padding: 13px 20px;}
.thank-you-enquiry{ margin-top:10px}

/*================= MENUS ======================*/
.menu-top{ position:relative; float:right; width:48%; z-index:1000;}
.menu-top label{display: none}
#myNavbar, .navbar-collapse.collapse{padding:0}
.nav{ padding:0; margin:0; margin-left: -20px}
.nav > li > a{color:#fff !important; text-transform:uppercase; border: none !important; text-decoration:none; padding:38px 20px!important; transition:all .5s}
.nav > li > a:hover, .nav > li:hover > a{ opacity: 0.7 !important;}

.dropdown{ display:inline-block; position:relative; list-style:none}
.dropdown li{border-bottom:1px solid rgba(255, 255, 255, .2) !important;}
.dropdown li:last-of-type{border:none !important}
.dropdown > a{color:white !important; padding:10px 15px !important; display:inline-block}
.dropdown a:focus{background-color:initial !important }
.dropdown-menu{ position:absolute; display:none; background-color: rgba(15, 64, 113, 0.9) !important; padding:0 !important; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; !important;min-width: 160px; font-size:14px}
.dropdown-menu1{ width: 400px;}
.dropdown-menu1 li{ width:50%; float:left}
.dropdown-menu li{padding:0; list-style:none}
.dropdown-menu a{color:#fff !important; font-weight:normal !important; text-decoration:none !important; width: 100%; transition:all .5s;  padding: 8px 6px!important; display:inline-block; line-height: 1.42857143;}
.dropdown-menu li:last-child a{ border-bottom-right-radius: 10px;}
.dropdown-menu li:hover a{color:#fff !important; background-color: #043566 !important}

.navbar-nav > li a{border:1px solid transparent}


/*================ Dropdown ===================*/
@media screen and (min-device-width: 768px){	
	.active{border:solid 1px #fff}
	.dropdown:hover .dropdown-menu{display:block !important}
	.navbar-collapse.collapse{height:120px !important}
}


.menu-cat{position:relative; float:left; width:990px; padding:5px; padding-left:10px;}
.menu-cat h2{text-align:center; color:#DA251C; font-size:16px; text-transform:none !important; border-bottom:1px dotted #666; margin-bottom:10px;}
.menu-cat h1{color:#BB1D19;}
.menu-cat img{position:relative; float:left; margin-right:5px; margin-bottom:50px;}
.menu-cat div{position:relative; float:left; width:300px; height:160px;  margin-right:5px; margin-bottom:10px;background-color:#fff; border-bottom:10px solid #DA251C; padding:10px;box-shadow: 10px 10px 5px #888888;margin-right:50px;}
.menu-cat div:first-child{margin-left:150px;}
.menu-cat div:last-child{margin-right:0px;}
.menu-cat span{ display:block;height:90px;}
.menu-cat ul{list-style:none; padding:0px; margin:0px;}


.menu-home{position:relative; float:right; width:24%;  height: 100px;}
.menu-home a{color:#fff;  text-decoration:none; width:50%; padding:40px 0; float: left; text-align:center; font-weight: bold; text-transform:uppercase}
.menu-home .menu-home-tel{font-weight: normal; transition: all .5s}
.menu-home .menu-home-tel:hover{opacity: 0.7}
.menu-home .menu-home-tel:first-of-type{float:left;padding: 40px 0px 30px 0px;}
.menu-home .menu-home-tel span{float: left; position:relative; }
.menu-home .menu-home-tel img{width:15px; top:4px; position:relative}
.menu-home .menu-home-quote{margin-right:0px; border-top-left-radius: 100px; padding:33px 0 44px 30px; float:right; font-size: 0.9em;
position:relative; top:0px; background-color: #00356a; transition: all .5s; max-height: 100%;}
.menu-home .menu-home-quote:hover{background: #00356aaa;}
.menu-home .menu-home-quote > span{width:15px; height:15px; border-radius:15px; display: inline-block;  color: #fff; font-size:1.5em; top:7px; position:relative}
.menu-home .menu-home-quote > span > span{position: relative; top:-7px}
.menu-home a:hover{color:#fff;}


.menu-side{position:relative; float:left; width:25%; margin-bottom:25px}
.menu-side ul{padding:0; margin: 0}
.menu-side li{position: relative; list-style: none; transition:all .5s; font-size: 1.1em; border-left:6px solid transparent; background-color: #f1f1f1; margin-bottom:2px;}
.menu-side a{color: rgba(0, 37, 89, .7); padding:20px; display: inline-block; width:100%}
.menu-side span{position: absolute; left:0; top:29px; width:0; height:0;  border:solid 5px transparent; border-left: solid 5px rgba(0, 37, 89, 1); display: inline-block; display: none;}
.menu-side li:hover{background-color:rgba(0, 37, 89, .7); border-left:6px solid rgba(0, 37, 89, 1)}
.menu-side li:hover span{display: inline-block;}
.menu-side a:hover{color:#fff}

li.side-active{background-color:rgba(0, 37, 89, .7); border-left:6px solid rgba(0, 37, 89, 1)} 
li.side-active a{color:#fff} 
.menu-side .side-active span{display: inline-block;}


.item-summary{}
.item-summary div{ position:relative; float:left; font-size:14px; border:1px solid #999; padding:20px; box-shadow:0 0 10px 2px #ccc; margin-bottom:20px; margin-right:20px;  }
.item-summary div:hover{box-shadow:0 0 10px 2px #404040;-webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease;}
.item-summary div:last-child{margin-right:0px;}
.item-summary div h3{ font-size:12px;}

/*==================== LOGO =======================*/
.logo{position:relative; float:left; clear:left; margin:23px 0px; width:24%; padding-left:10px}
.hydraulic-fittings-1 .logo img{width:80%; height: auto;}

/*===================== SEARCH ======================*/
.search{position:relative; float: right; display:none;z-index:99999999; overflow:visible !important; padding:40px 5px 0px 5px; right:15px; width:27px}
.search a{transition: all .5s;  color: #fff}
.search a:hover{opacity: 0.7}
.search img{width:30px; height: auto; position:relative; top: 7px}
.search-box{position: absolute;  left:-170px; padding:5px; top:100px; width:210px; z-index:9999999; display:none ; background-color: #0f4071e6; color: #fff; border-radius: 0px; font-size: 18px}
.search-box input{border: none; padding:5px; width:170px}
.search-box span{cursor: pointer}

.search img{position: relative; top:-8px}
.gsc-input{background: white; padding:0 !important}
.gsc-input *{border: none !important; padding:0 !important; box-shadow: none !important}
.gsc-search-box{ padding: 0px !important; height: 22px;}
.gsc-input-box{margin:0 !important; height:20px !important; width:165px; background-color: transparent !important}
.gsc-input{height:16px !important; border: solid 1px white; margin:0; margin-top:-5px !important}
.gsc-search-box input{height:auto !important; width:auto !important; background: none !important; font-size:.9em !important}
button.gsc-search-button, button.gsc-search-button:hover{background-color: #185174 !important; border: none !important; border-radius: 0 !important;padding: 5px !important ;margin: 0 !important;}

.gsc-adBlock{ display:none !important}
.search ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
}
.search ::-moz-placeholder { /* Firefox 19+ */
  color: white;
}
.search :-ms-input-placeholder { /* IE 10+ */
  color: white;
}
.search :-moz-placeholder { /* Firefox 18- */
  color: white;
}

.pop-up-45{position: fixed; z-index: 999999999; top:68%; left: 0; width:100%; background:rgba(36, 36, 36, 0.85); height: 100%; text-align:center; display: none}
.pop-up-45-close{position: absolute; right:-10px; top:-10px; cursor: pointer; color: #fff; font-weight:bold; height:28px; width:28px; border-radius:40px; background-color:rgb(0, 65, 129); z-index: 999999999; font-size: 18px;line-height: 28px; padding:0 8px}
.pop-up-45 img{border-radius:4px; display:block;box-shadow: 0 0 10px 2px #010101;}
.pop-up-45 > div{ font-size: 18px; line-height: 26px;border-radius: 4px;top:4%; max-width:1000px; width:100%; position: relative; margin:auto; display:table; background-color: #fff; width:100%; padding:0 10px}
.pop-up-45 > div p a{ text-decoration:none; color:rgb(0, 65, 129)}
.pop-up-45 > div a:hover{ color:rgb(0, 65, 129)}
.pop-up-45 > div h2 a{ color:rgb(0, 65, 129);text-decoration:none; font-size:22px }

.home-main{height:400px; }
.home-banner{ display:flex; overflow: hidden; position:relative;margin:auto;width:100%; max-width:1663px;  text-align:center;min-height: 400px; height: calc(100vw * 0.29);}
.home-banner h2{text-transform: uppercase; font-weight:bold; font-size: 60px; color:#fff}
.home-banner h1,.home-banner p{ font-size:22px; line-height: 26px; text-transform: uppercase; font-weight:normal}
.home-banner:before{ content:"";position: absolute; background: linear-gradient(to top right, rgba(0, 0, 0, 0.61) 10%, rgba(0, 0, 0, 0) 100%);display: table; width: 100%; height: 100%; z-index: 2;}

.notice-block{background-color: #ff0000; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
.notice-block p{text-align: center; font-size: 19px; color: #fff; margin: 13px;}

.intro-products{max-width:1280px; margin:auto; margin-top: 50px; margin-bottom: 5px;padding: 0 20px}
.products-container > div{  position:relative; width: 300px; height: 343px; display: inline-block; margin-bottom:30px; margin-right:7%; color:#808080; font-size:1.3em; line-height:1.5em; background: rgb(24, 81, 116); box-shadow: 0px 0px 11px rgba(51, 51, 51, 0.38); border-top: solid 5px #005dbb; box-shadow: 6px 6px 40px rgb(0, 0, 0);}
.products-container a{ color:#dfefff}
.products-container .btn6:hover{ opacity:0.8}
.products-container > div:nth-of-type(3n + 3){margin-right: 0;}
.products-container > div:not(:nth-last-of-type(1)):not(:nth-last-of-type(2)):not(:nth-last-of-type(3)){margin-bottom: 60px;}

.pipe-clambs{ display:table;}
.pipe-clambs > div > div:first-of-type{ width:25%; margin-left:0}
.pipe-clambs > div > div{ width:73%; margin-left:2%; float:left}

@media screen and (max-width: 1094px){
.products-container > div:nth-of-type(3n + 3){margin-right: 7%;}
.products-container > div:nth-of-type(2n + 2){margin-right: 0;}
}


/*.intro-products img{width:100%; transition:all 0.75s ease; -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease; border-bottom: solid 1px #002559;}
.intro-products img:hover{opacity:.5}*/

.products-container > div .btn6{bottom: 20px; left: calc(50% - 75px)}

.products-container .container-icon{top: -20px; left: calc(50% - 30px); color: white; background: rgb(0, 64, 102)}
.products-container .container-icon i{}
.products-container h2{margin: 0px; padding-top: 50px; padding-bottom: 27px; background: rgb(0, 64, 102); text-align: center; color: white; position: relative; z-index: 1; font-size:25px;}
.products-container h1{width:364px; height:207px; color:#808080 !important; border:solid 1px #c1c1c1; border-radius:5px; text-align:center; padding-top:10px; margin-top:-2px}
.products-container P{padding: 20px; position: absolute; width: 100%; color: white; font-size: 16px; line-height: 25px; text-align: left}

.intro-section{float: left;background-image: url("images/spiral-protection-3.jpg");  background-size: cover; position: relative;}
.intro-section .intro-container{width: 50%; display: inline-block; height: 100%; }
.intro-section .intro-container.about-us{background: rgba(0, 51, 102, 0.9);  float: left; }
.intro-section .intro-container.contact-us{background: rgba(0, 42, 84, 0.9); position: absolute;}

.intro-section .intro-content{padding: 25px 50px; margin-bottom: 80px;}
.intro-section .intro-content h2,
.intro-section .intro-content h2 a{text-transform: uppercase; font-size: 30px; margin: 30px 0px; color: #fff;}

.intro-section .intro-content p{font-size: 1.5em; line-height: 1.8em; color: #ddd; height: 100%;}
.intro-section .intro-content p a:link{color: #fff;}
.intro-section .intro-content p a:visited{color: #fff;}

.intro-section .intro-content img{position: absolute; right: 0px; bottom: 0px; max-width: 413; width: 50%; height: auto}

.new-arrival-block{ width:100%; display:table; padding:17px 0}
.new-arrival-block > div{ margin:auto; font-size: 32px; text-align: left;color:#0055ab;  font-weight:bold; max-width:900px}
.new-arrival-block > div > div{ width:65%; float:left}
.new-arrival-block > div > div:last-of-type{ width:25%;}
.new-arrival-block > div img{ display:block;float:left; margin-right:20px}
.new-arrival-block > div span{ padding: 23px 0; display: block;float: left;}
.new-arrival-block > div > div:last-of-type a{font-weight:normal; background-color:#0055ab; color:#fff; padding: 12px 20px; font-size: 20px;text-transform: uppercase; border-radius: 36px;margin: 17px auto; text-align: center; display: block;}

/*===================== DOWNLOAD ======================*/
.download-brochure{ display:block; padding:0px; margin:0px; color:#494848; font-weight:bold; font-size:11px;}
.download-brochure div{position:relative; float:left; width:120px; height:230px; margin-right:5px; margin-left:5px; text-align:left;}
.download-brochure img{border:#CCCCCC 1px solid; margin-bottom:2px; width:100px; height:140px;}
.download-brochure img:hover{opacity:0.7;-webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease; }
.download-brochure a{font-size:11px; margin:0px; text-align:left; padding:0px; position:relative; float:left; margin-top:5px;}
.download-brochure h3{ font-size:11px; color:#000; height:25px; position:relative; float:left; width:130px; margin-top:2px; margin-bottom:2px; line-height:12px; font-size:11px; color:#000; font-weight:normal; text-transform:capitalize;}
.download-brochure span {background-image:url(images/catalogue/pdf_link_small.jpg); border:none; position:relative; float:left; left:0px; margin-right:3px; top:-2px; width:20px; height:20px; background-repeat:no-repeat;}

#enquiry-bottom input{ width:190px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:none; padding:3px; color:#666; font-size:11px; padding-left:10px; margin-bottom:3px;}
#enquiry-bottom textarea{ font-family:Arial, Helvetica, sans-serif; width:190px; height:40px;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:none; padding:3px; color:#666; font-size:11px; padding-left:10px; margin-top:2px;}

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

.footer{background-color: rgb(241, 241, 241); width:100%; float:left; text-align:left; box-sizing:border-box; font-size:1.7em;}
.footer .footer-section{width: 25%; float:left; height: 200px; padding: 30px 10px; padding-left: 60px; position: relative;}
.footer .footer-section a{color: rgb(0, 42, 82) ;}
.footer .footer-section a .fa-whatsapp{ font-weight:bold}
.footer .footer-section .fs-arrow{width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent;  position: absolute; left: 0px; top: calc(50% - 30px);}
.footer .footer-section:nth-of-type(1){background: rgb(241, 241, 241); padding: 30px; width: 23%; display: flex; align-items: center;}
.footer .footer-section:nth-of-type(2) .fs-arrow{border-left: 30px solid rgb(241, 241, 241);}
.footer .footer-section:nth-of-type(2){background: rgb(231, 231, 231); border-top-left-radius: 50px; padding-left: 49px; width: 33%;
 padding-right: 0; }
.footer .footer-section:nth-of-type(3) .fs-arrow{border-left: 30px solid rgb(231, 231, 231);}
.footer .footer-section:nth-of-type(3){background: rgb(222, 222, 222);}
.footer .footer-section:nth-of-type(4) .fs-arrow{border-left: 30px solid rgb(222, 222, 222);}
.footer .footer-section:nth-of-type(4){background: rgb(210, 210, 210); width:19%}
footer .footer-section.fs-logo{padding: 72px 25px;}
.footer .footer-section.fs-logo .logo{width: auto}
.footer .footer-section.fs-logo img{margin-left: -2px; width: 100%; height: auto}
.footer .footer-section ul{position: relative; font-size: 16px; line-height: 25px; list-style: none; padding: 0;}
.footer .footer-section li{float:none; width:auto; height:auto;}

.footer-regions{padding: 12px 0; display: table; width: 100%; background-color: #ededed;border-top: solid 1px #004b97}
.footer-regions ul{ padding:0; max-width:1280px; margin:auto; width:100%; display:table}
.footer-regions ul strong{ display:block; font-size:12px;margin-bottom: 3px;}
.footer-regions li{ float:left; padding-right:20px; list-style:none;color:#333; font-size:12px}
.footer-regions li a{ text-decoration:none; color:#333}

.footer-menu{display: flex; flex-wrap: wrap;}
.footer-menu li{ width:50% !important}

.row{clear: left;}
.row0{clear: left; line-height:1px;}

@media screen and (max-width:1330px){
	.intro-products, .footer > div, .intro-enquiry, .back_page{width:100%}
	.nav > li > a{padding:40px 7px !important}
	.intro-products a img{height: auto}
	.menu-home-tel{left: -15px; position:relative}
	.menu-home-tel span{left: -15px;  position:relative}
	.search{left: -40px}
}

@media screen and (max-width:1200px){
	.hydraulic-fittings-1{font-size: 14px;}
	.contact-us .contact-us-details{ width:1000px; margin:auto; margin-top:-103px; height:auto}
	.contact-us .contact-us-detail{width: 300px;margin-left: 10%; display:inline-block; height: 265px;
    margin-bottom: 50px;}
	.contact-us .contact-us-detail:last-child{ float:none}
	.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area .area-content{ width:100%}
	.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area img{ display:none}
	.menu-home{ width:27%}
	.menu-top{ width:45%}
	.menu-home .menu-home-quote{ padding:40px 0 44px 10px;}
	.page-title > div{left: 30px;}
}

@media screen and (max-width:600px){
	body{display: block; margin-top:120px}
	*{max-width:100% !important; height: auto}
	.logo{width:250px !important; top:-13px}
	.menu-home .menu-home-quote{ border-radius:0}
	.search{ position:absolute; padding: 0; top:10px; height:5px; width: 210px; float: right; left:15%; text-align:right;font-size: 1.4em; z-index:0}
	.search-box{width:200px !important;  left:0; top:35px; z-index: -1 !important}
	.gsc-search-box input{ width:95% !important}
	button.gsc-search-button{ width:23px; height:23px}
	.navbar-toggle{background-color:#2A336E !important; color:white !important; text-align:right; position:relative; border-radius:4px; top:10px; font-weight: bold!important; padding: 10px;
font-size: 14px;}
	.intro-section .intro-content{ padding:25px 20px}
	.hydraulic-fittings-header{ width:calc(100% - 50px); float:left}
	.icon-bar{color:white !important}
	.keyword-1{box-shadow: 0 0 5px 1px #666}
	.hydraulic-fittings-1{top:0; height: 120px;}
	.new-arrival-block{ padding:0 15px}
	.new-products-block > div{ width:100% !important}
	.new-products-block > div h2{ margin: 10px 0;}
	.new-products-block .btn-prod{margin-top: 0;}
	.menu-home{top:-24px !important; float: left; width:100%;}
	.menu-home a{padding:0}
	.menu-home .menu-home-tel:first-of-type{width: 50%; padding:4px 0; height:29px; left:-6px}
	.menu-home .menu-home-tel{ left:0}
	.menu-home .menu-home-tel span{margin:0;left:13px; line-height:29px; float:right; display:none}
	.menu-home .menu-home-tel{width:auto; position: relative; top: -7px !important; }
	 a.menu-home-quote{padding:5px 0 !important; width: 100%; top:-6px !important; float: left !important;line-height:20px}
	.menu-top{background-color: #002559; width:100%; position: relative; right:0}
	.dropdown-menu{margin-left:30px !important}
	.navbar-nav{margin:0 !important}
	.nav > li > a{padding: 10px 30px !important; color:#fff !important}
	.contactus{width:100%}
	.products-container > div{ width:100%; margin-left:auto; margin-right:auto}
	.contactus > div > div{width:100%; height: auto; padding:20px}
	.contactus > div{width:100%; height: auto;}
	.contactus-text-details{width: 100%}
	.menu-side{width:100%; padding:0 10px}
	.home-banner{display: none}
	.text-block{margin:0 !important; width:100% !important}
	.text-block-text{ margin:0;margin-top: -245px !important;}	
	.products-container > div:nth-of-type(3n + 3){ margin:0}
	.products-container > div{ margin-bottom:70px !important}
	.hose-proctection-block .hose-proctection-text,.dropdown-menu1 li{ width:100%}
	.hose-proctection-block > div{justify-content: space-around;}
	
	.footer{display: none}
	.pop-up-45{ top:81%}
	.pop-up-45 > div h2{ margin:15px 0}
	.pop-up-45 > div > div p{ display:none}
	.pop-up-45 > div{ width:95%}
	
	.intro-products{width:100% !important; height:auto !important; display: block; margin-left:0; margin-right:0; padding-left:0; padding-right:0}
	.intro-products{ margin-bottom:0 !important}
	.product-block-items > div,.intro-section .intro-container{ width:100%}
	.product-block-items > div > div:first-of-type{ height:107px}
	.product-block-items > div{ height:215px}
	.page-title h1{ margin:25px 0; padding-left:0}
	.text-block .content{ font-size:15.5px}
	.contact-us .cleod-map{ height:120px; margin-top:20px}
	.contact-us .cleod-map div{ height:100px}
	.contact-us .cleod-map h1{ font-size:28px; margin:37px 0; text-align:center}
	.contact-us .contact-us-detail{ margin-bottom:80px; width:100%}
	.contact-us .contact-us-section-2{ float:left}
	.intro-enquiry{ padding:10px}
	.intro-enquiry-form table tr td { width:100%; display:block}
	.intro-enquiry-form table tr td .btn1{ width:100%;}
	.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area .area-content{ width:100%;padding-left: 25px;
}
	.contact-us .contact-us-section-2 .cleod-areas-section .cleod-area img{ display:none}
	.contact-us .contact-us-details{ margin-top:-200px}
	.contact-us .contact-us-section-2{ margin-top:0; height:auto}
	.contact-us .contact-us-section-2 .cleod-areas-section,.contact-us .contact-us-section-2 .enquiry-container{ width:100%}
	
	.text-block.disclaimer-text > div{ width:100%}
	.text-block.disclaimer-text > div > a{ width:100%; margin:5px 0}
	.tcs-block div{ line-height:20px}
	.tcs-block div input{ width:10%}
	
	.intro-section > div{ width:100% !important; float:left; display:block}
	.intro-section .intro-container.contact-us{ position:inherit}
	.intro-products > div{margin:10px 0 !important;}
	.intro-section .intro-content{ margin-bottom:0}
	.intro-container .btn6{ position:relative; left:82px; bottom:17px}
	.breadcrumb-block,.intro-section .intro-content img{ display:none}
	.page-title > div,.text-block-products div{width:100%; text-align:center; border:none}
	.page-title{ height:120px}
	.page-title > div{ height:75px}
	.intro-who-are{float: none}
	.dropdown:focus .dropdown-menu,.dropdown:hover .dropdown-menu{display:block !important; margin:0;left:0;position:relative;border-radius:0 !important;min-width: 100%;}
	.nav > li > a:hover, .nav > li:hover > a{ border:none !important}
	.footer-regions{ display:none}
}

@media screen and (max-width: 575px){.logo{left: 0px;}}
#navOverlay{display:none}@media screen and (max-width: 767px){
.menu-top{width:250px;position:fixed;top:0;height:120px;width:50px;overflow:hidden;padding:0px;transition:all 0.3s;z-index:100}
#mainNav{padding:10px;overflow-y:auto;height:calc(100vh - 120px)}
.menu-top>label{color:#fff;display:block;height:120px;padding:0;position:relative;margin-bottom:0}
.menu-top>label>i{line-height:120px;text-align:center;width:50px;transition:all 0.1s ease 0.3s;font-size: 1.5rem; float:right}
#navOverlay{display:block !important;width:100%;height:100%;background-color:rgba(0,0,0,0.8);position:fixed;top:0;left:0;transform:translate(100%);transition:all 0.25s ease-out 0.1s;z-index:99}#mobi-toggle:checked ~ .hydraulic-fittings-1 .menu-top>label i::before{content:"\f00d";font-size:2.5rem}#mobi-toggle:checked ~ .hydraulic-fittings-1 .menu-top{height:100vh;width:250px}
#mobi-toggle:checked ~ * #navOverlay{transform:translate(0)}
}