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

.thin {
	font-weight:100;
}

.light {
	font-weight:300;
}

.regular {
	font-weight:400;
}



/*****************Responsive typography starts https://www.sitepoint.com/build-responsive-type-scale-bootstrap/**************/
body {
font-family: 'Roboto', sans-serif;
font-weight:300;
}
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 992px) {
  html {
    font-size: 18px;
  }
}

h1, .h1 {
  font-size: 2.48832rem;
}

h2, .h2 {
  font-size: 2.0736rem;
}

h3, .h3 {
  font-size: 1.728rem;
}

h4, .h4 {
  font-size: 1.44rem;
}

h5, .h5 {
  font-size: 1.2rem;
}

h6, .h6 {
  font-size: 1rem;
}

.display-4 {
  font-size: 3.48832rem;
}

.display-3 {
  font-size: 4.185984rem;
}

.display-2 {
  font-size: 5.0231808rem;
}

.display-1 {
  font-size: 6.02781696rem;
}

@media (min-width: 768px) {
  h1, .h1 {
    font-size: 2.48832rem;
  }

  h2, .h2 {
    font-size: 2.0736rem;
  }

  h3, .h3 {
    font-size: 1.728rem;
  }

  h4, .h4 {
    font-size: 1.44rem;
  }

  h5, .h5 {
    font-size: 1.2rem;
  }

  h6, .h6 {
    font-size: 1rem;
  }
}

/*****************Responsive typography ends *****************/



.navbar {
	background-color:rgba(219,217,214,0.95);
	box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
	}

.footer-bg {
	background-color:rgba(219,217,214,0.95);
}

.bg-lit {
	background-color: #f0f0f0;
}

.dropdown:hover>.dropdown-menu {
    display: block;
    }

.dropdown-menu {
    font-size: 13px;
	background-color:#f2f2f2;
	  }
.dropdown-menu a:hover{background-color:#f2f2f2; color:#06C; }

/*************Top carousel css*********/

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/****************To Carusel css ends************/

.carousel-caption {
  transform: translateY(-50%);
  bottom: 0;
  top: 70%;
}

.displayed {
	display:block;
	}
	
/**************Card deck responsive*********/
/* Set width to make card deck cards 100% width */
@media (max-width: 950px) { 
	
	.card-deck-wrapper {margin-right:0;margin-left:0;}
	.card-deck {
	    display: block;
	    width: 100%;
	    margin-bottom: .75rem;
	    table-layout: fixed;
	    border-spacing: 1.25rem 0;
	}
	.card-deck .card {
	    display: block;
	    margin-bottom: .75rem;
	    vertical-align: top;
	}
  
  .card-deck .card:not(:first-child) {
    margin-left: 0px;
}
  
}

hero{width:100%;-webkit-background-size:cover;background-size:cover;overflow:hidden;position:relative;background-color:#fff;text-align:center;-webkit-transition:height 999999s;-o-transition:height 999999s;transition:height 999999s;padding:0 10%;height:100vh;min-height:537px}

.hero .hero-wrap{max-width:1680px;position:relative;margin:auto;height:100%}

.hero-wrap{z-index:40;position:relative;width:100%;max-width:956px}

.trans {background-color:#fff; opacity:0.8; z-index:1;}

/******************** Residentail*******************/
.para {
	color:#f2f2f2; line-height:normal;
}

.shadow {text-shadow: 1px 1px 2px #555, 0 0 1em #555, 0 0 0.1em #555;}
/***************Residential ends*************/

/*************Index page 100vh carousel*******/
.carousel,
.carousel-inner {
     height: 100vh;
}

/****************** icon fonts from www.fontastic.me app starts*************/

				/******Products & Commercail page*********/
		
		.icon-6th-page-shades-control:before {
				  content:j;
				  font-size:3.5em;
				  color:#007bff;
  		}
		.icon-youtube-play-button-transparent-background:before {
				  content:l;
				  font-size:3.5em;
				  color:#007bff;
  		}
		.icon-6th-page-climate-control:before {
				  content:i;
				  font-size:3.5em;
				  color:#007bff;
  		}
			
	.icon-5th-page-light-control:before {
				  content:g;
				  font-size:3.5em;
				  color:#007bff;
  		}
  	.icon-5th-page-biometricn:before {
				  content:a;
				  font-size:3.5em;
				  color:#007bff;
  		}
	.icon-5th-page-energy-savingn:before {
				  content:b;
				  font-size:3.5em;
				  color:#007bff;
  		}		
	.icon-icon-shades-2:before {
				  content:k;
				  font-size:3.5em;
				  color:#007bff;
  		}
	.icon-5th-page-icon-security-burglar-alarm-system:before {
				  content:f;
				  font-size:3.8em;
				  color:#007bff;
  		}	
	.icon-5th-page-icon-fire-safety-system:before {
				  content:e;
				  font-size:3.5em;
				  color:#007bff;
  		}
	.icon-5th-page-temp-control:before {
				  content:h;
				  font-size:3.5em;
				  color:#007bff;
  		}	
	.icon-5th-page-icon-attendance-system:before {
				  content:c;
				  font-size:3.5em;
				  color:#007bff;
  		}
	.icon-5th-page-icon-conference-room-solution:before {
				  content:d;
				  font-size:3.5em;
				  color:#007bff;
  		}
	
	/****************** icon fonts from www.fontastic.me app endss*************/
	
	
	/* original solution by https://codepen.io/Rowno/pen/Afykb */


/* carousel fullscreen */

.carousel-fullscreen .carousel-inner .carousel-item {
    height: 100vh; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover;
}


/* carousel fullscreen - vertically centered caption*/

.carousel-fullscreen .carousel-caption {
  /*  top: 75%; */ 
    bottom: auto;
 /*   -webkit-transform: translate(0, -50%); 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%);*/
}

/****** Responsive for commercial page starts *********/
@media only screen and (max-width: 544px) {
		.tarea1 {
			  width:75%;
			   }
		.tarea2 {
			  width:75%;
 			}  
	  }
	  @media only screen and (min-width: 545px) {
		.tarea1 {
			  width:25%;
		  }
		.tarea2 {
			  width:50%;
	  			}
	  }
	

	@media only screen and (max-width: 554px) {  
	  	
		#first {
			order: 2;
		}
		#second {
			order: 1;
		}

	  }
	  
/****** Responsive for commercial page ends *********/	  

/********* css for commercial page starts***********/

	.h100 {height:100vh;}

	.banner {
			height:91vh;
			display:flex;
			aligh-items:center;
			background-size:cover;
			background-position:center;
			background-repeat:no-repeat;
			}  
				
		
	.C-bg1 {
		background-image:url(../images/O-commercial-1st-page-image-1.jpg);
	}

	.C-bg2 {
		background-image:url(../images/O-3rd-page-image-boardroom-solutions.jpg);
	}
	
	.C-bg3 {
		background-image:linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url(../images/O-4th-page-image-workspace-solution.jpg);
	}

/********* css for commercial page ends***********/

/************ css for Residential page starts **********/
   	.R-bg0	 {
		background-image:url(../images/O-pexels-photo-186077.jpg);
		}
	
	.R-bg1 {
		background-image:url(../images/Morning.jpg);
		 }
		
	.R-bg2 {
		background-image:url(../images/Package-Delivery-Newsletter.png);
		}
		
	.R-bg3 {
		background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(../images/O-living-room-chandeliers.jpg);
	}
	
	.R-bg4{
		background-image:  url(../images/Smart-home-devices.jpg);
	}
	
	.R-bg5{
		background-image:url(../images/O-Home-Theater.jpg);
	}
	
	.R-bg6{
		background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(../images/banner3.jpg);
	}
	
	.R-bg7{
		background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(../images/O-pexels-photo-920387.jpg);
	}
	
	.navbar1 .navbar-toggler-icon {
    	background-image: url('https://mdbootstrap.com/img/svg/hamburger3.svg?color=00FBD8');
		}  /*********For timing navbar on small devices icon ***********/

	.pt-6 {padding-top: 4rem;
		}
 	
	.viewport1 { height:75vh;
				  display:flex;
				  aligh-items:center;
	  }
	
	.vl {
		border-left: 6px solid green;
		height: 100px;
		position: absolute;
		left: 50%;
		margin-left: -3px;
		top: 0;
	}

		
/************ css for Residential page ends **********/		

/************ css for Hospitality page starts *******/
	
	.H-bg-hospitality {
		background-image:url(../images/O-interior-design-hotel.jpg);
			}
	.H-bg-banquet	{
		height:100vh;
		background-image:url(../images/Banquet.jpg);
	}

/************ css for Hospitality page ends *******/