@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: MyriadPro;
  	src:url("../fonts/MyriadPro.otf");
}
@font-face {
	font-family: MyriadProLight;
  	src:url("../fonts/MyriadPro-Light.otf");
}
@font-face {
	font-family: MyriadProBold;
  	src:url("../fonts/MyriadPro-bold.otf");
}

body{
	
	background: rgb(203,202,202);
background: linear-gradient(90deg, rgba(203,202,202,1) 0%, rgba(238,238,238,1) 100%);
	margin: 0;
	padding: 0;
	font-family: 'MyriadPro';
	color: #fff;font-size: 1.2vw;
}
* {box-sizing: border-box}
#cominImg{width:40%; margin-left:30%; margin-top:6%; margin-bottom:6%}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  float: left;
  margin-top: 2.3vw;
}

.slide-img{width: 100%}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -1vw;
  color: white;
  font-size: 3vw;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  font-family: MyriadProLight;
}

/* Position the "next button" to the right */
.next {
  right: 15%;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 15%;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  	color: #fff;
    font-size: 4vw;
    padding: 8px 12px;
    position: relative;
    bottom: 8px;
    width: 100%;
    text-align: center;
    margin-top: -26vw;
    text-transform: uppercase;
    font-family: 'MyriadProLight';
	float: left;
}
.bold-cap{font-family: MyriadProBold;}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.top-nav{background: rgb(53,136,186);
background: linear-gradient(90deg, rgba(53,136,186,1) 0%, rgba(31,107,156,1) 9%, rgba(20,92,141,1) 26%, rgba(20,92,141,1) 69%, rgba(31,107,156,1) 93%, rgba(53,136,186,1) 100%); width: 100%; position: fixed;font-family:'MyriadPro'; z-index: 1000}

.top-nav a{
	color: #e9edf2;
	text-decoration: none;
	font-size: 0.8vw;
	margin-left: 2vw;
	margin-top: 0.6vw;
    float: left;
}

.top-nav-container{width: 70%;margin-left: 15%; margin-right: 15%;}
.head-icons {
	width: 1.5vw;
  	height: auto;
  	display: flex;
  	float: right;
	margin: 0.3vw 0.3vw 0.5vw 0.3vw;
	
}

.head-icons-f {
	width: 1.5vw;
  	height: auto;
  	display: flex;
  	float: right;
	margin: 0.3vw 0.3vw 0.5vw 0.3vw;
	
}

.head-email{margin-left: 0 !important;}
.main-nav{width: 100%;
    position: fixed;
    z-index: 1000;
    margin-top: 2.2vW; }
.main-nav-container{width: 70%;margin-left: 15%; margin-right: 15%;background-color: #fff; float: left}
.head-logo{width: 13vw;
    margin: 1vw 1vw 1vw 4vw;}

/* Style the navigation bar */
.navbar {
 	width: 70%;
  	overflow: auto;
	float: right
}

/* Navbar links */
.navbar a {
  float: left;
  text-align: center;
  padding: 1.8vw 1.4vw 1.4vw 1.4vw;
  color: #176796;
  text-decoration: none;
  font-size: 1vw;
}

/* Current/active navbar link */
.active {
  color: #0d5384;font-family: MyriadProBold;
}

.nav-icon{width:20%;}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */

.container{width: 70%;margin-left: 15%; margin-right: 15%; float: left}
.full-container{width: 100%;float: left}
.about-us{background: rgb(53,136,186);
background: -webkit-linear-gradient(left, rgba(53,136,186,1) 0%, rgba(31,107,156,1) 9%, rgba(20,92,141,1) 26%, rgba(20,92,141,1) 69%, rgba(31,107,156,1) 93%, rgba(53,136,186,1) 100%);
background: -o-linear-gradient(left, rgba(53,136,186,1) 0%, rgba(31,107,156,1) 9%, rgba(20,92,141,1) 26%, rgba(20,92,141,1) 69%, rgba(31,107,156,1) 93%, rgba(53,136,186,1) 100%);
background: linear-gradient(to right, rgba(53,136,186,1) 0%, rgba(31,107,156,1) 9%, rgba(20,92,141,1) 26%, rgba(20,92,141,1) 69%, rgba(31,107,156,1) 93%, rgba(53,136,186,1) 100%);
	margin-top: -5%;
    z-index: 100;
    position: relative;
    border-radius: 20px;

}
.about-icon{float: left;
    width: 6vw;
    margin: 5% 3% 5% 7%;}
p{
	
	font-size: 1.2vw;
    line-height: 1.6;
}
h1,h2,h3,h4{margin:0; padding: 0;text-transform: uppercase;font-family: MyriadProBold;}
h2{font-size: 1.4vw}
.about-txt{float: left;
    width: 75%;
    margin-right: 5%; margin-top: 2%}
.about-txt h2{float:left; width: 100%;margin:1.2vw 0 1.2vw 0}
.latest{background: rgb(203,202,202);
background: linear-gradient(90deg, rgba(203,202,202,1) 0%, rgba(238,238,238,1) 100%);}
.latest-h{    color: #0d5384;
    width: 100%;
    text-align: center;
    margin-top: 2vw;
    margin-bottom: 1vw;font-size: x-large;
}
.home-hr{width: 6vw;
    color: #4da8db;
    border: 1.5px solid #4da8db;
    background: #4da8db;
	margin-bottom: 3vw;
}
.full{width: 100%; float: left}
.product-container{width: 30%; float: left;    margin-bottom: 3vw;}
.product-img{border-radius: 20px;z-index: 100;
    position: relative;}
.product-box{background: rgb(224,223,223);
background: linear-gradient(90deg, rgba(224,223,223,1) 0%, rgba(210,209,209,1) 100%); width: 100%; float: left; border-radius: 20px;margin-top: -3vw;height: 10vw;}

.product-title{margin-top: 5vw;
    width: 90%;
    word-break: break-word;
    margin-left: 5%;
    margin-right: 5%; text-align:center;
    margin-bottom: 2vw;color: #0d5384;float: left;}
.see-more{float: left; width: 35%; background-color: #fff; border-radius: 20px;margin-top: 6vw;
    margin-right: 5%; color: #0868ac;}
.see-img{width: 2.5vw; padding: 7%;}
.see-txt{font-size: 1vw;}
.mid{margin-left:5%; margin-right: 5%}
.video-container{background-color: #eeeeee; }
.yt-container { position: relative; padding-bottom: 45.25%; padding-top: 30px; height: 0; overflow: hidden;margin-bottom: 3% }
.yt-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 5%; width: 90%; height: 100%; }
.why-container{background-color: #fff; color: #666666}
.one-why{width: 50%; float: left;margin-bottom: 2%}
.why-img{
    width: 13%;
    margin-left: 5%;
    margin-right: 5%;}
.one-txt{
    width: 77%;}
.one-txt h2{color: #4da8db; width: 100%; float: left; font-size: 1.2vw;}
.one-txt p {width: 100%;font-size: 1vw; }
.R{float: right}
.L{float: left}
.txtL{text-align: left;}
.txtR{text-align: right;}
.email-container{background-color: #4da8db; text-align: center; color: #fff;display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;}
.email-container p{text-transform: uppercase;}
.email-btn{background-color: #ffffff;
    border-radius: 20px;
    margin-left: 2vw;box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.17);
-webkit-box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.17);
-moz-box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.17);margin-top: 1.3vw; margin-bottom: 1.3vw;}
.email-img{padding: 4%;
    width: 95%;}

.footer{background-color: #0d5384; width: 100%; float: left;
    }

#footer-logo{width: 11vw;
    margin-bottom: 1.5vw;
    margin-top: 1.5vw; clear: both;}
.footer div{display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;}
.footer .navbar {
 	width: 100%;
  	overflow: auto;display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;;
	 
}

/* Navbar links */
.footer .navbar a {
	text-align: center;
    padding: 0vw 0vw 1vw 0vw;
    color: #fff;
    text-decoration: none;
    font-size: 1vw;

}

.footer .head-icons{margin-bottom: 1.6vw}
#copy{background-color: #4da8db;color: #fff;font-size: 0.7vw;
    padding: 1vw;}
.desktop{display: block;}
.mobile{display: none;}
.product{margin-left:13%;}
.product-title-page {
    margin-top: 5vw;
    width: 90%;
    word-break: break-word;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 2vw;
    color: #0d5384;
    float: left;
    text-align: center;
}
.download{width: 13vw;
    border-radius: 17px;
    margin-left: 43vw;
    margin-bottom: 4vw;
    margin-top: 2vw;
}

.commercial{background-color: #4da8db; cursor:pointer;
    color: #fff;
    width: 10vw;
    text-align: center;
    padding: 0.3vw;
    border-radius: 10px;
    text-transform: uppercase;
    margin-left: 23vw;
    float: left;
    margin-bottom: 3vw;}
.residential{background-color: silver;cursor:pointer;
    color: #fff;
    width: 10vw;
    text-align: center;
    padding: 0.3vw;
    border-radius: 10px;
    text-transform: uppercase;
    margin-left: 3vw;
    float: left;}
	
	strong{font-family: 'MyriadProBold';}
	
	.new-product {
    margin-left: 1.3%;
    margin-right: 1.5%;
}

.new-product-container {
    width: 30%;
    float: left;
    margin-bottom: 3vw;
	margin-top: 2vw;
}

.new-product-box {
   
    width: 100%;
    float: left;
    border-radius: 20px;
    margin-top: -3vw;
}

.download-light {
    width: 13vw;
    
    margin-left: 4vw;
    margin-bottom: 4vw;
}
.contact{background-image: url(../images/bg.jpg);
    background-repeat: repeat;
    background-size: 25px;}
	
	.contact-hr {
    width: 10vw;
    color: #fff;
    border: 1.5px solid #fff;
    background: #fff;
    margin-bottom: 3vw;
}
.contact-h {
    color: #fff;
    width: 100%;
    text-align: center;
    margin-top: 10vw;
    margin-bottom: 1vw;
    font-size: x-large;
}
.contact-img{ width:30%;margin-left: 1.7vw;margin-top: 2vw;margin-bottom: 4vw;}

.contact-details{float:left; width:35%;}
.map-container { position: relative; padding-bottom: 30.25%; padding-top: 30px; height: 0; overflow: hidden;margin-bottom: 3% }
.map-container iframe, .map-container object, .map-container embed { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
.contact-icons{ width:20%; float:left}
.contact-txt{ width:80%; float:right;}
.cont-des{color: silver;width:100%;
    margin: 0;}
	
.cont-title{color: black;width:100%;
    margin: 0;}
.cont-img{width: 4vw;
    margin-top: 1vw;}
.call{margin-top: 2vw;}
.mail{margin-top: 1.7vw;}
.mid-cont{    margin-top: 3vw;
    margin-bottom: 3vw;}
.contact-mr{margin-top: 2vw;
    margin-bottom: 2vw;}
.about{background-image: url(../images/bg-g.jpg);
    background-repeat: repeat;
    background-size: 25px;}
.center{text-align:center}
.blue{color:#0d5384}
.l-blue{color:#4da8db;}
.bluebg{background-color:#0d5384}
.l-bluebg{background-color:#4da8db;}
.abouts {
    width: 30%;
    float: left !important;
    padding: 0.5vw;
    color: #fff;
    font-size: 0.78vw;
    text-align: center;
    border-radius: 20px;margin-bottom: 2vw;
}
.aboutmr{margin-top:2vw !important;}
.aboutsf {
    width: 47%;
    float: left !important;
    padding: 0.5vw;
    color: #fff;
    font-size: 0.78vw;
    text-align: center;
    border-radius: 20px;margin-bottom: 2vw;
}
.rmr{margin-right:5%;}

.midA {
    margin-left: 5%;
    margin-right: 5%;
}

.product-title-h {
    margin-top: 5vw;
    width: 50%;
    word-break: break-word;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 2vw;
    color: #0d5384;
    float: left;
}
@media screen and (max-width: 600px) {
	body {font-size: 2.5vw;}
	.desktop{display: none;}
	.mobile{display: block}
	.top-nav-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
}
#cominImg{width: 80vw;
    margin-left: 10vw;
    margin-top: 40vw;
    margin-bottom: 6vw;}
.head-icons-f {
    width: 6.5vw;
    height: auto;
    display: flex;
    float: left;
    margin: 4.3vw 4.3vw 4.5vw 0.3vw;
}
.product-title-h {
    margin-top: 7vw;
    width: 90%;
	margin-left: 0%;margin-right: 0%;
	margin-bottom: 2vw;
	text-align: center;}
.about-icons{margin: 5% 3% 5% 2% !important;}
.abouts {
    width: 30%;
    float: left !important;
    padding: 1vw;
    color: #fff;
    font-size: 2.8vw;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 2vw;
    height: 15vw;
    vertical-align: middle;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.aboutsf {
    width: 47%;
    float: left !important;
    padding: 1vw;
    color: #fff;
    font-size: 2.8vw;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 2vw;
    height: 12vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.map-container {width:100%;     padding-bottom: 42.25%;}
.contact-txt {
    width: 60%;
    float: left;    margin-top: 3vw;
}
.contact-details {
    float: left;
    width: 100%;
}
.contact-icons {
    width: 34%;
    float: left;
    margin-right: 5%;
}
.cont-img {
    width: 10vw;
    margin-top: 1vw;
    float: right;
}
.contact-img {
    width: 31%;
    margin-right: 1vw;
    margin-top: 4vw;
    margin-bottom: 8vw;
    float: left !important;
    margin-left: 1vw;
}
.contact-h {margin-top: 45vw;}
.contact-hr {
    width: 30vw;}
.new-product-container {
    width: 47%;}
	.download-light {
    width: 25vw;
    margin-left: 9vw;}
	
.commercial{
    
    width: 20vw;
    text-align: center;
    padding: 0.6vw;
    border-radius: 5px;
    }
.residential{
    width: 20vw;
    padding: 0.6vw;
    border-radius: 5px;
    }
.download {
    width: 35vw;
    border-radius: 15px;
    margin-left: 30vw;}
.product {
    margin-left: 1.5%;
    margin-right: 1.5%;
}
.top-nav a {
    color: #e9edf2;
    text-decoration: none;
    font-size: 3vw;
    margin-left: 5.5vw !important;
    margin-top: 3.6vw;
    float: left;
}	
	.mobile-contact{width: 100%;
    float: left;}
	.mobile-icons{width: 100%;-webkit-transform: scaleX(-1);
  transform: scaleX(-1);
    float: left;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;}
	
	.head-icons {-webkit-transform: scaleX(-1);
  transform: scaleX(-1);
    width: 6.5vw;
    height: auto;
    display: flex;
    float: left;
    margin: 4.3vw 4.3vw 4.5vw 0.3vw;
}
	
.mobile-container-menu {
  	width: 100%;
    margin: auto;
    background-color: #555;
    color: white;
    border-radius: 10px;
    float: left;
    margin-top: 22vw;
    position: fixed;
    z-index: 1000;
	display: block;
}

.topnav-menu {
  overflow: hidden;
  background-color: #fff;
  position: relative;
}

.topnav-menu #myLinks {
  display: none;
}

.topnav-menu a {
  	color: #0d5384;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
    text-align: center;
    border-bottom: 1px solid;
}

.topnav-menu a.icon {
  
  display: block;
    position: absolute;
    left: 2vw;
    top: 2vw;
	border: none;
}

.active-menu {
  background-color: #fff;
  color: white;
}	

.mobile-logo{width: 40%;
    margin-left: 30%;
    margin-right: 30%;}
	
.slideshow-container {
    max-width: 100%;
    position: relative;
    float: left;
    margin-top: 35vw;
}
	.text {margin-top: -52vw;font-size: 9vw;}
	.prev {
		left: 1%;}
	.next {
		right: 1%;}
	.prev, .next {margin-top: -8vw;font-size: 6vw;}
	.container {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;}
	.about-us {border-radius: 10px;}
	p {
		font-size: 2.8vw;}
	h2 {
    font-size: 3.4vw;}
	
	.about-icon {
   	width: 16vw;
    margin: 9% 3% 5% 2%;}
	
	.latest-h {margin-top: 5vw;}
	.about-txt {width: 70%; margin-left: 2%;}
	.home-hr {
		width: 18vw;}
	.mid {
    margin-left: 5%;
    margin-right: 0%;
}
	.product-container {
		width: 47%;}
	.product-img {
		border-radius: 5px;}
	.product-box {border-radius: 10px;height: 25vw;}
	.product-box-pr {height: 18vw !important;}
	.product-title {
    margin-top: 7vw;
    width: 90%;
	margin-left: 5%;margin-right: 5%;
	margin-bottom: 2vw;
	text-align: center;}
	
	.see-more {
    width: 50%;
    border-radius: 5px;
    margin-top: 0vw;
    margin-left: 25%;margin-bottom: 3vw;}
	
	.see-txt {
    font-size: 2.5vw;}
	
	.see-img {
		width: 6.5vw;}
	.yt-container iframe, .video-container object, .video-container embed {left: 0%;width: 100%;}
	.one-why {
    width: 100%;
    float: left;
    margin-bottom: 2%;
}
	.txtR {
    text-align: left;
}
	.L {
    float: right;
}
	
.one-txt h2 {
   
    font-size: 3.2vw;
}
	
.one-txt p {
    width: 100%;
    font-size: 2.8vw;
}	

	.m-left{float: left}
	
.why-img {
    width: 13%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 1vw;
}
.one-why {
    width: 100%;
    float: left;
    margin-bottom: 2%;
    margin-top: 2vw;
}
	.email-container p {
    text-transform: uppercase;
    margin-left: 13vw;
    margin-right: 1vw;
}
	
.email-btn {
    background-color: #ffffff;
    border-radius: 5px;
    margin-right: 6vw;
    box-shadow: 10px 10px 5px 1px rgb(0 0 0 / 17%);
    -webkit-box-shadow: 10px 10px 5px 1px rgb(0 0 0 / 17%);
    -moz-box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.17);
    margin-top: 1.3vw;
    margin-bottom: 1.3vw;
}
	
	.email-img {
    padding: 3%;
    width: 99%;
}
	
	.email-container {
    
		text-align: left;}
	
	#footer-logo {
    width: 40vw;
    margin-bottom: 5.5vw;
    margin-top: 5.5vw;
    
}
	
	.footer .navbar a {
     
		font-size: 3.5vw;}
	
	#copy {
    
    font-size: 1.8vw;
    padding: 4vw;
}
	
} /*end 600*/




@media screen and (max-width: 500px) {
  .email-img {
    padding: 1%;
    width: 96%;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 320px) {
   h2 {
    font-size: 4vw;}
	.latest-h {font-size: large;}
	.email-img {
    padding: 0%;
    width: 84%;
    margin-left: 2vw;
}
	.one-txt p {
    
    font-size: 3vw;
}
	.one-txt h2 {
    font-size: 3.6vw;
}
	p {
    font-size: 3vw;
}
	.email-container p{font-size: 2.5vw;}
}