@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto.eot?") format("eot"),
  url("../fonts/Roboto.woff") format("woff"),
  url("../fonts/Roboto.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
body{
		box-sizing: border-box;
		font-size: 14px;
		color: #333;
		overflow-x: hidden;
		font-family: "Poppins", sans-serif;
		height: 100vh;
		overflow-y: scroll;
		

}
.container{
	width: 100%; 
	margin: 0 auto; height: 100%;
}
		*{padding: 0px; margin: 0px;}
		/*#frame{
			border: 1px solid blue;
		}*/
		#header{
			padding-bottom: 10px;
			height: 65px;
			background: #ede8e8;
			position: relative; 
		}
		#logo{
			/*border: 1px solid red;*/
			
			 float: left; margin-top: 5px;
			
		}
		#contain{
			width: 100%; height:800px; margin: 0px; 
			display: flex; padding-top:20px;
		
		}
		.contain-1{
			height: 612px!important;
		}
		@media screen and (max-width: 680px) { 	#contain{
			width: 100%; height:300px; margin: 0px; margin-top: 18px;
			display: flex; padding-top: 35px;
		
		}
	}

/* rakesh instruction for responsive*/

/*@media screen and (max-width: 1280px) 
{ 	#contain{
			width: 100%; height:600px; margin: 0px; margin-top: 10px;
			display: flex; padding-top:0;
		
		}
	}*/





			/*border: 1px solid red;}*/
			/*#contain::after{ content: ""; display: block;clear: both; }*/
		#contain::after{content:: " "; display: block;clear: both;}
		#right{
			width: 79%; height:100%;/*height: 598px;*/
			/*background-image: url('hawai.jpg');*/ display: inline-block;
			position: relative;left: 0px;
			/*border: 1px solid red;*/
		

		}
			#left{
			width: 20.5%; height: 100%;
			display: inline-block;
			vertical-align: top;
			overflow-y: scroll;
			overflow-x: hidden;
      background: linear-gradient(to right, #6666ff 0%, #ffffff 96%);
			/*border: 0.5px solid green; this is for whole left side menu*/

		}
		.clear{
			clear: both;
		}
	
		#slider,#img1{
	     width:100%; height: 100%;
	    /*height:598px;*/ margin: 0px;
    }
  #slider,#img1 img{
  	/*height: 455px;*/ margin: 0px; height: 100%;
  }
.abc
{
width:100%;/* 1280 * 598*/
height:100%;
margin:0px;
position:relative;
display:none;
}
.jkl
{
position:relative;
animation : anim1 1s;
}
@keyframes anim1
{
	from
	{
	right:-300px;
	}
	to{
	right:0px;
	}
}
#num1
{
position:absolute;
top: 85%;
left: 45%;
width:220px;
height:25px;
}
.n/*this four round block */
{
display:inline-block;
background-color:green;
width:20px;
height:20px;
text-align:center;
border-radius:10px;
}
#marquee{
	width: 100%;
}
#Domestic{
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	text-align:center;
	font-size: 16px;
	
	vertical-align: middle;


}
#Domestic a{
	display: block;
	text-decoration: none;
	padding-bottom: 15px;
	
}
#space{
	width: 100%; overflow-x: hidden;
	line-height: 48px;
	margin-bottom: 10px;
 

}

#Domestic #space{
	color: white;
	background: #989898;
}
/* this for tile area like hydronic FCU*/
.form-group{
	position: relative;
}
.form-group input{
	width: 100%;
    padding: 6px;
    border-radius: 3px;
    border: 1px solid #9b9797;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}
.form-group img {
	display: inline-block;
    left: 87%;
    position: relative;
    top: -29px
}
/*#Domestic img{
	padding-top: 17px;
}*/
#pic{
	
	width: 65%; height: 65%;

}

/*#img1{z-index: 0;}*//*z-indes -1 means behiend the menu*/
@media screen and (max-width: 500px) { #menu ul li{
			background: green;
			width: 100%; height: 35px;
			border-radius: 8px; line-height: 35px;
			text-align: center;float: right;
			position: relative; display: inline-block;
			border:1px solid white;
			margin-left: 5px; /* this is to increase the gap between manu. but if i give some margin */
		}	
	}
#menu ul{
	width: 100%;
}


li{z-index: 999999;}
#menu ul li{
			background: green;
			width: 130px; height: 35px;
			border-radius: 8px; line-height: 35px;
			text-align: center;float: right;
			position: relative; display: block;
			border:1px solid white;
			margin-left: 5px; /* this is to increase the gap between manu. but if i give some margin */
		}
#menu{
			vertical-align: top;  /*width: 88%;*/ padding-top: 12px;}


#menu ul li a{text-decoration: none;color: white;
			text-align: center; 
			}
#menu ul li:hover{background-color: #0033cc;}
#menu ul ul{display: none;}
#menu ul li:hover > ul{
			display: block; 
		}
#menu ul ul ul{
			margin-left: 130px; top: 0px;
			position: absolute;
}

#menu ul ul ul li {
			margin-left: 0px;
}
/* Change this in order to change the Dropdown symbol */
/*li > a:after { content:  ' +'; }*/
li > a:only-child:after { content: ''; }
#menu ul{
	position: relative; 
}
#menu .third-list > a:after {
 content:  ' ';
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-top: 7px solid #fff;
 position: absolute;
 top: 14px;
 right: 8px;

}
.marquee{
	width:100%;
	background: green;
	 color: #fff;
	 padding: 8px;
}
.top-heading h3{
	padding-left: 20px;
	font-size: 20px;
	padding-top: 10px;
}
.top-heading h3:after{
	content: "";
	display:block;
	border-bottom: 2px solid #ddd;
	width: 100%;
	padding-bottom: 13px;
	
}
.product-item{
	width: 225px;
    float: left;
    margin: auto;
    text-align: center;
    border: 1px solid #ddd;
    margin-top: 20px;
    padding: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
.item-name a {
	background: red;
	color:#fff;
	width: 100px;
	display: block;
	padding: 10px;
	margin: auto;
	margin-top: 15px;
}
.regular .item{
  width: 80%;
  display: inline-block;
  height: 400px;	
}
.regular .item img{
  width: 85%;
    /* height: 100%; */
    overflow: hidden;
    object-fit: contain;
    max-height: 136px;
    margin: 20px 0;
}
.regular .item-name a{
	margin: 0;
	text-align: center;
	margin: auto;
	margin-top: 10px;
}

.ITC{
	height: 270px;
	width: 180px;
}

.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    /*font-size: 20px;*/
    line-height: 1;
    opacity: .75;
    color: #141414;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dotted.slick-slider {
    margin-bottom: 30px;
    margin-left: 16px;
    margin-top: 27px;
}
.slick-next:before {
   content: "\f105";
    font: normal normal normal 24px/1 FontAwesome!important;
    position: absolute;
    right: 15px;
    
}

.contact{
  background:url(../images/bradcam.png.webp) no-repeat center center;
   background-size:cover;
   padding: 160px 0 102px 0;

}
.map{
  margin-top: 80px;
}
.contact-title{
  font-size: 27px;
    font-weight: 600;
    margin-bottom: 20px;
}
.contact h2{
  font-size: 56px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: capitalize;
}
.form-contact{
  margin-top: 75px;
}
.form-contact textarea{
  height: 60px;
}
.form-contact .form-control {
    border: 1px solid rgb(229, 230, 233);
    border-radius: 0px;
    height: 48px;
    padding-left: 18px;
    font-size: 18px;
    background: transparent;
    display: block;
}
.form-contact .form-group {
    margin-bottom: 30px;
}
.boxed-btn {
    background: rgb(255, 255, 255);
    display: inline-block;
    padding: 14px 44px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid rgb(0, 211, 99);
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    color: rgb(0, 211, 99) !important;
}
.boxed-btn:hover {
    background: rgb(0, 211, 99);
    border: 1px solid rgb(0, 211, 99);
    color: rgb(255, 255, 255) !important;
}
.form-contact textarea{
  height: 160px !important;
  margin-bottom: 40px;
}
.contact-info span{
  font-size: 30px;
  padding-right: 20px;
}
.contact-info{
  display: flex;
  padding-top: 8px;
}
.contact-info .media-body h3{
  font-size: 20px;
  font-weight: 800;
  color: rgb(0, 211, 99);
  padding-top: 12px;
}
.contact-info .media-body p {
    color: #8a8a8a;
    font-size: 16px;
    color: #f1da5b;
    font-weight: 600;
}

.slick-arrow{
	z-index: 111;
}
.slick-prev:before {
    content: "\f104";
    position: absolute;
    font: normal normal normal 24px/1 FontAwesome!important;
    left: 15px;
    
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    /* color: transparent; */
    border: 0;
    outline: none;
    background: #333;
    border-radius: 50%;
}
.slick-dots {
    position: absolute;
    bottom: -141px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    left: -75px;
}
.regular .slick-dots{
	bottom:-20px;
}
.regular .slick-dots li.slick-active button{
	background:green;
}
.item{
	/*width: 86%!important; /*how to make this block size a bit bigger then current size because pic size is bigger*/
	width: 300px;
	display: inline-block;
    background: #CCCCFF;
    text-align: center;
    margin: auto;
    padding-top: 40px;
   border: 10px solid white;
   padding-bottom: 20px;
}

.slick-slide img {
    display: block;
    text-align: center;
    margin: auto;
}
.regular .item {
	width: 190px;height: auto;
  
}
.item-name h3{
	padding-bottom: 20px;
  font-size: 20px
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #333;
    width: 24px;
    display: block;
    height: 24px;
}
.slick-track { display: flex; align-items: center; }

.slick-slide { height: auto; flex: 1; }
.slider-text h3{
 font-weight: 600;
}
.slide-content{
      margin: 0 @gutters;
     padding: 0 0px;
    margin: 0 auto;
   text-align: center;
   font-size: 16px;
      
    }
 .about{
	text-align: center;
	padding-top: 20px;
	background: url(../images/background.png) no-repeat center center;
	background-size: cover;
	padding-top: 150px;
  padding-bottom: 75px;
   z-index: 0;
   position: relative;
   opacity: 0.8;
}
.about h3:after{
	content: "";
	display: block;
	border-top: 2px solid red;
	width: 100px;
	margin: auto;
	margin-top: 10px;
	font-weight: 600;

}
 
.mbr-overlay{
	background-color: rgb(255, 255, 255);
     z-index: 0;
    
}
.slider-text{
	background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    display: inline-block;
    outline: 1px solid rgba(0, 0, 0, 0.2);
    outline-offset: -15px;
    padding: 65px 50px;
    position: relative;
    text-align: center;
}
.copy-right{
	background: rgb(9, 95, 234);
	width: 100%;
	color: white;
	text-align: right;
	font-size: 15px;
	line-height: 35px;
	text-decoration-line: 25px;
	padding-right: 0px;

}
.mobile-image{
	display: none;
}
.mobile-image p{
	text-align: center;
}


.sideMenu{
	display: none;
	z-index: 111;
}
.btn{
  position: absolute;
  top:-1px;
  right: 45px;
  height: 45px;
  width: 45px;
  text-align: center;
  font-size:30px;
  border-radius: 3px;
  cursor: pointer;
  transition: left 0.4s ease;
}
.btn.click{
  right: 260px;
}
.btn span{
  
  font-size: 28px;
  line-height: 45px;
}
.fa-bars{
	 content: '\f0c9';
	 font: normal normal normal 14px/1 FontAwesome;
	 color: #333;
}
.btn.click span:before{
  content: '\f00d';
  font: normal normal normal 14px/1 FontAwesome;
  color: #333;
  font-size: 36px;
}
.sidebar{
  position:absolute;
  width: 250px;
  /*height: 100%;*/
  right: -250px;
  background: #1b1b1b;
  transition: left 0.4s ease;
  z-index: 111;
}
.sidebar.show{
  right: 0px;
  z-index: 111;
}
.sidebar .text{
  color: white;
  font-size: 25px;
  font-weight: 600;
  line-height: 65px;
  text-align: center;
  background: #1e1e1e;
  letter-spacing: 1px;
}
nav ul{
  background: #1b1b1b;
  height: 100%;
  width: 100%;
  list-style: none;
}
nav ul li{
  line-height: 60px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
nav ul li:last-child{
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
nav ul li a{
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding-left: 40px;
  font-weight: 500;
  display: block;
  width: 100%;
  border-left: 3px solid transparent;
}
nav ul li.active a{
  color: cyan;
  background: #1e1e1e;
  border-left-color: cyan;
}
nav ul li a:hover{
  background: #1e1e1e;
}
nav ul ul{
  position: static;
  display: none;
}
nav ul .feat-show.show{
  display: block;
}
nav ul .serv-show.show1{
  display: block;
}
nav ul ul li{
  line-height: 42px;
  border-top: none;
}
nav ul ul li a{
  font-size: 17px;
  color: #e6e6e6;
  padding-left: 80px;
}
nav ul li.active ul li a{
  color: #e6e6e6;
  background: #1b1b1b;
  border-left-color: transparent;
}
nav ul ul li a:hover{
  color: cyan!important;
  background: #1e1e1e!important;
}
nav ul li a span{
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;
}
nav ul li a span.rotate{
  transform: translateY(-50%) rotate(-180deg);
}
.products{
	display: none;
}
.product-title{
	text-align: center;
}

.products ul{
	display: flex;
    overflow-x: scroll;
    width: 90%;
    height: 115px;
    margin: auto;
}
.products h3{
	font-size: 12px;
	text-align: center;
}
.products li{
	list-style: none;
}
.product-title h3{
  color: #0000cc;
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 40px;
}
.product-title p{
	color: #7a7a7a;
	margin-bottom: 45px;
}
.product-title p span{
	color: #91DA32;
}
.product-title p:after{
	content: "";
    height: 2px;
    margin: 20px auto 20px;
    width: 115px;
    background: red;
    display: block;
}
.product-type{
	margin-bottom: 80px;
}
.cover{
	display: flex;
	flex-wrap: wrap;
}
.cbp-item-wrapper{
	width: 25%;
    height: 244px;
	position: relative;
	overflow: hidden;
}
.cbp-item-wrapper .img{
	
    transform: translate3d(0px, 0px, 0px);
   
}
.cbp-item-wrapper .img img{
 -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all .25s ease-in-out;
    object-fit: cover;
}
.overlay {
    background: rgba(145,218,50,0.8);
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 3;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all .5s;
    width: 100%;
    height: 100%;
    top: 0;
    text-align:center;
    padding-top: 100px;
    opacity: 0.8;
    display: none
}
.cbp-item-wrapper:hover .overlay{
	display: block;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all .5s;
}
.show-buttom{
	text-align: top;
}
.show-buttom a{
	background: #f6f7f7;
    border: 1px solid #91DA32;
    border-radius: 3px;
    color: #91DA32;
    display: inline-block;
   min-width: 80px;
    text-decoration: none;
    padding: 3px 23px;
    outline: 0;
    margin-top: 30px;
}
.call-to-action-1{
	margin-top: 40px;
	text-align: center;
	margin-bottom: 40px;
}
.call-to-action-1 h3{
	font-weight: 600;
}
.call-to-action-1 a{
	background: #91DA32;
	font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    line-height: 1.6;
    letter-spacing: 1px;
    margin: 0 5px 0 5px;
    padding: 10px 22px;
    text-align: center;
    box-shadow: 0 -3px rgb(0 0 0 / 30%) inset;
    -moz-box-shadow: 0 -3px rgba(0,0,0,0.3) inset;
    -webkit-box-shadow: 0 -3px rgb(0 0 0 / 30%) inset;
    -o-box-shadow: 0 -3px rgba(0,0,0,0.3) inset;
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -o-transition: all ease .3s;
    -ms-transition: all ease .3s;
    transition: all ease .3s;
}
.call-to-action-1 p{
	width: 35%;
    margin: auto;
    padding-top: 20px;
    color: #1c1c1c;
    padding-bottom: 30px;
}
.footer {
    padding: 60px 0;
    width: 100%;
    background: #3B008D;
    color: #fff;
}
.footer h3{
	position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #4e4e4e;
}
.footer h3:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: -3px;
    width: 30px;
    height: 4px;
    background: #ff304d;

}
.footer li{
	font-size: 16px;
	list-style: none;
	padding-bottom: 10px;
	border-bottom: 1px solid #404040;
    color: #fff;
    display: block;
    transition: color 0.5s ease-in-out;
    text-decoration: none
}
.social-link{
	display: flex;
	padding-left: 15px;
}
.social-link li{
	list-style: none;
	padding-right: 10px;
}
.social-link li a{
	color: #fff;
	font-size: 20px;
	display: inline-block;
	padding-right: 10px;
}
.overlay H4{
  padding-top: 100px;}

@media (max-width: 991px){
	#left{
		display: none;
	}
	#right{
		width: 100%;
	}
	.mobile-image{
	display: block
}
.wrap{
	display: flex;
    overflow-y: scroll;
    height: 135px;
    width: 95%;
    margin: auto;
    padding-right: 10px;
   overflow-x: hidden;

}
.wrap li{
	list-style: none;
	padding-right: 30px;
}

#menu{
	display: none;
}

.sideMenu{
	display: block;
}
#contain{
	height: auto;
}
.products{
	display: block;
}
.cbp-item-wrapper{
	height: 160px;
}
@media (max-width: 767px){
.call-to-action-1 p{
	width: 70%
}
}
@media (max-width: 600px){
.call-to-action-1 p{
	width: 100%
}
.cbp-item-wrapper{
	width: auto;
	height: auto;
}
#pic{
	width:auto;
}
.slick-dots{
	left: 0;
}
.slide-content{
  font-size: 18px;
}
.regular .item img{
  max-height: 150px;
}
.regular .item img {
    max-height: 300px;
}
.footer{
  margin-top: 150px;
}
}
@media (max-width: 480px){
.sidebar{
	right: -275px;
}
/*.sidebar.show {
    right: -28px;
    
}*/
.btn{
	right: 62px;
}
}