@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

body { margin: 0; padding: 0; font-family: 'Titillium Web', sans-serif;}

a { transition: 0.5s ease-in-out; text-decoration: none;}

.clr { clear: both; }
.clr-10 { clear: both; height: 10px;}
.clr-20 { clear: both; height: 20px;}
.clr-30 { clear: both; height: 30px;}
.clr-40 { clear: both; height: 40px;}
.clr-50 { clear: both; height: 50px;}

.container { width: 100%; max-width: 1200px; height: auto; padding: 0 15px; box-sizing: border-box; margin: 0 auto; }

#wrapper { width: 100%; box-sizing: border-box; float: left; }
.top-header { width: 100%; box-sizing: border-box; float: left; background-color: #000; }
.top-header-col { width: 100%; box-sizing: border-box; float: left; }
.top-header-left { width: 40%; float: left; box-sizing: border-box; padding: 10px 0;}
.top-header-left img { width: 10%; float: left; }
.top-header-left a { width: 87%; float: right; box-sizing: border-box; color: #fff; font-size: 15px; }
.top-header-left-inner{ width: 50%; float: left;}

.top-header-right { width: 50%; float: right; box-sizing: border-box;}
.social-media { float: right; width: 25%; background-color: #ff9900; box-sizing: border-box; padding: 8px 0 5px 0; text-align: center;}
.social-media img { width: 17%; margin: 0 8px 0 0; }

.header { background: url(../images/logo-bg.jpg) top center no-repeat ; background-size: cover; width: 100%; float: left; box-sizing: border-box; padding: 15px 0 5px 0;}
.logo { width: 30%; float: left; box-sizing: border-box; }
.logo img { width: 50%; }
nav .clr { display: none; }
.navigation-col { width: 70%; float: right; }
/*slider start*/
.slider-col{ width: 100%; float: left; box-sizing: border-box; overflow-x: hidden;}
.slider {width: 100%; margin: 0px auto;}
.slick-slide {margin: 0px 0px;}
.slick-slide img {width: 100%;}
.slick-slide {transition: all ease-in-out; }
.slick-active {opacity: .5;}
.slick-current {opacity: 1;}
/*slider end*/

/*quality start*/
.quality { width: 100%; box-sizing: border-box; float: left; margin: 30px 0 10px 0;  }
.quality-col { width: 100%; box-sizing: border-box; float: left; }
.quality-left { width: 50%; float: left; box-sizing: border-box; text-align: center; }
.quality-left h3 { font-weight: 400; color: #000; font-size: 36px; float: right; margin-right: 65px;  }
.quality-right { width: 50%; float: right; box-sizing: border-box; border-left: 4px solid #ff9900; } 
.quality-right p { width: 80%; float: right; font-size: 16px; color: #333333; font-weight: 200; text-align: justify; float: left; margin-left: 65px;}
/*quality end*/

/*product slider*/
.prod{ width: 100%; float: left; box-sizing: border-box; background: url(../images/bg-img.png) top center no-repeat; background-size: cover; text-align: center;}
.pd-col { width: 100%; box-sizing: border-box; float: left; padding: 40px 0; }
h1 { color: #fdad35; font-size: 48px; margin: 0; text-align: center;}
h2 { color: #fdad35; font-size: 48px; margin: 0; text-align: center;}
.pd-col p { color: #333333; font-size: 16px; margin: 10px auto 30px auto; font-weight: 300; width: 80%; }

.overlap { position: relative; width:98%; }
.image { display: block; width: 100%; height: auto; text-align:center; }
.overlay { position: absolute; top: 5%; bottom: 5%; left: 5%; right: 5%; height: 90%; width: 90%; opacity: 0; transition: .5s ease; 
  background-color: #000; }
.overlap:hover .overlay { opacity: 0.8; }
.text { color: white; font-size: 20px; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); width: 100%; padding: 25px 0 0 20px; box-sizing: border-box; }
.text-left { width: 70%; float: left; box-sizing: border-box; }
.text-left h2 { font-size: 35px; font-weight: 700; color: #fff; line-height: 40px; text-align: left;}
.text-left .exotic { font-size: 35px; font-weight: 300; color: #fff; line-height: 40px; text-align: left;}
.text-left p { width: 100%; font-size: 16px; font-weight: 400; color: #fff; line-height: 25px; text-align: left; margin: 20px 0 0 0;}
.text-right { width: 30%; float: right; box-sizing: border-box; }
.text-right img { width: 77%!important; float: right; }
/*product slider*/

/*application start*/
.application { width: 100%; float: left; box-sizing: border-box; margin: 70px 0 0 0; }
.application-col { width: 100%; float: left; box-sizing: border-box; background: url(../images/application-bg.png) top left no-repeat; 
  margin: 120px 0 0 0; background-size: 88%;}
.application-left { width: 47%; float: left; box-sizing: border-box; }
.application-left img{ margin: -100px 0 0 -80px; width: 108%;}
.application-right { width: 52%; float: left; box-sizing: border-box; }
.application-right img.exteriors{ width: 110%; margin: -18px 0px 0 -10px; }
.application-right img.office{ width: 103%; margin: 25px 0px 0 -10px; }
.application-left .img-heading { width: 20%; position: absolute; margin: -4% 0 0 0; left: 34%;}
.application-right .img-heading { width: 20%; position: absolute; margin: -4% 0 0 0; left: 70%;}
.application-right .aap-3 { width: 20%; position: absolute; margin: -4% 0 0 0; left: 70%;}
.img-heading h3 { font-size: 36px; color: #fff; font-weight: 400; margin: 0;}
/*application end*/

/*why eon start*/
.why-eon { width: 100%; float: left; box-sizing: border-box; margin: 90px 0 0 0; }
.eon-col { width: 100%; float: left; box-sizing: border-box;}
.eon-col p { color: #333333; font-size: 16px; margin: 10px auto 0px auto; font-weight: 300; width: 80%; text-align: center; }
.eon-col-inner { width: 25%; float: left; box-sizing: border-box; text-align: center; margin: 45px 0 0 0;}
.eon-col-inner img { width: 50%; margin: 45px 0 0 0; }
.eon-col-inner p { color: #999999; font-weight: 300; font-size: 16px; line-height: 24px; text-align: center; }
.eon-circle-yellow { width: 195px; height: 195px; border-radius: 50%; background-color: #ff9900; margin: 0 auto; }
.eon-circle-green { width: 195px; height: 195px; border-radius: 50%; background-color: #33cccc; margin: 0 auto; }
.eon-col .clr { display: none; }
.eon-col-inner h3 { font-size: 18px; font-weight: 700; color: #999999; line-height: 20px; margin: 15px 0 0px 0; }
/*why eon end*/

/*quotation start*/
.quotation { width: 100%; float: left; box-sizing: border-box; margin: 90px 0 200px 0; }
.quotation-col { width: 100%; float: left; box-sizing: border-box; border-top: 3px solid #ff9900; border-bottom: 3px solid #ff9900; }
.quotation-col img.comma-1 { margin: -58px 0 0 -4px; display: block; }
.quote { font-size: 38px; font-style: italic; padding: 10px 0px 0px 0 ; text-align: right;}
.author-name { font-size: 30px; font-weight: 300; padding: 0px 0px 10px 0 ; text-align: right; width: 100%;}
.quotation-col img.comma-2 { display: block; float: right; margin: 0 0 -56px 0;}
/*quotation end*/


/*footer start*/
footer { width: 100%; float: left; box-sizing: border-box; background:url(../images/footer-bg-img.png) bottom center no-repeat; 
	background-size: cover;}
.footer-col { width: 100%; float: left; box-sizing: border-box; padding: 50px 0 20px 0; }
.footer-left { width: 50%; float: left; box-sizing: border-box; }
.footer-left img { width: 40%; float: left; }
.footer-inner { width: 33%; float: left; box-sizing: border-box; margin: 40px 0 ;}
.link-1 { width: 25%; } .link-2 { width: 41%; }
.footer-inner ul { width: 100%; float: left; list-style: none; padding:0; margin: 8px 0;}
.footer-inner ul li { display: block; }
.footer-inner ul li a { font-size: 18px; color: #fff; font-weight: 400; }
.footer-inner ul li a:hover { color: #ffa100; }
.header-link { float: left; box-sizing: border-box; width: 100%; }
.header-link a { font-size: 20px; font-weight: 600; color: #fff; }
.header-link a:hover { color: #ffa100; }
.footer-left p { font-size: 14px; color: #fff; font-weight: 400; margin: 0; }
.footer-left p.phone { width: 76%; float: right; margin: 0; }
.footer-right { width: 50%; float: right; box-sizing: border-box; }
#query-form { width: 100%; float: right; border: 1px solid #988f81; background-color: #fff; padding: 35px 40px; box-sizing: border-box; 
	margin: -130px 0 0 0;}
#query-form legend { color: #988f81; font-size: 30px; font-weight: 700;  }
#query-form .form-group { width: 100%; float: left; box-sizing: border-box; margin-top: 20px; }
#query-form label { width: 100%; float: left; box-sizing: border-box; font-size: 15px; color: #988f81; font-weight: 400; padding-bottom: 10px; }
#query-form input { width: 100%; float: left; box-sizing: border-box; font-size: 15px; color: #988f81; font-weight: 400; padding: 10px; 
	border: 1px solid #988f81; }
#query-form textarea { width: 100%; float: left; box-sizing: border-box; font-size: 15px; color: #988f81; font-weight: 400; padding: 10px; 
	border: 1px solid #988f81; font-family: 'Titillium Web', sans-serif; }
#query-form .btn { padding: 12px 40px; font-size: 20px; font-weight: 400; display: block; background-color: #ff9900; color: #fff; float: right;	border:1px solid #ff9900; cursor: pointer;}
#query-form .btn:hover { color: #ff9900; background-color: #fff; }
.copyright { width: 100%; float: left; box-sizing: border-box; margin-bottom: 20px; }
.copyright-left { width: 50%; float: left; box-sizing: border-box; }
.copyright-right { width: 50%; float: right; box-sizing: border-box; text-align: right; }
.copyright p { font-size: 15px; color: #fff; margin: 0;}
.copyright-right p { width: 30%; float: right; background: url(../images/smartech-logo-white.png) top 0px left 0px no-repeat; background-size: 13%; line-height: 26px;}
.copyright-right p a { color: #fff; text-decoration: none; }
.copyright-right p a:hover { color: #ff9900; }
/*footer end*/



/*contact footer*/
.footer-about { width: 36%; float: left; box-sizing: border-box; }
.footer-about img { width: 50%; float: left; margin-bottom: 20px;}
.footer-about p{ font-size: 14px; line-height: 24px; color: #fff; float: left;  width: 70%;}
.footer-nav { width: 42%; float: left; box-sizing: border-box; }
.footer-nav ul { float: left; list-style: none; padding:0; margin: 8px 0;}
.footer-nav ul li { display: block; }
.footer-nav ul li a { font-size: 14px; color: #fff; font-weight: 400; }
.footer-nav ul li a:hover { color: #ffa100; }
.footer-nav .header-link { margin-bottom: 8px; }
.footer-menu { width: 40%; float: left; box-sizing: border-box; }
.footer-media { width: 22%; float: left; box-sizing: border-box; }
.footer-media p { color: #fff; font-size: 14px; margin-top: 8px; width: 70%; float: left; text-align: right; }
.media { width: 30%; float: right; box-sizing: border-box; margin-top: 8px; }
.media img { width: 28%; float: right; margin-left: 10px;  }
.footer-media .detail { font-size: 14px; color: #fff; font-weight: 400; margin-top: 50px; text-align: right;}
.footer-media p.phone { width: 60%; float: right; font-size: 14px; color: #fff; font-weight: 400}
/*contact footer*/

/*------------select language--start-here-----------------*/
.lang-btn{width: 71%;float: left;}
.lang-btn ul{padding: 0px; margin:0px; list-style: none; float: right; line-height: 44px;} 
.lang-btn ul li{color: #fff;position: relative;}
.lang-btn ul li ul{position: absolute; left: 0px; background-color: #ff9900; width: 170px; z-index: 999999; display: none;}
.lang-btn ul li ul li{margin-top: 0px; padding: 10px; line-height: 25px;}
.lang-btn ul li ul li a{color: #fff; display: block; outline: 0px;}
.lang-btn ul li:hover ul{display: block; transition: ease-in-out 0.5s;}
.lang-btn ul li ul li:hover{background:  #000;}
.lang-btn i {border: solid white; border-width: 0 3px 3px 0;  display: inline-block;  padding: 3px; margin-left: 7px;}
.lang-btn .down { transform: rotate(45deg);  -webkit-transform: rotate(45deg);}
.tooltip p{padding: 8px;}
.tooltip ul{padding: 0px; margin:0px; list-style: none;}
.tooltip ul li{float: left; margin-right: 10px;}
.tooltip ul li a{font-size: 12px; color:#fff; font-weight: 400;  }
.tooltip ul li img{width: 21px; margin-right: 3px;}
.top-rlang{width: 100%;box-sizing: border-box;float: left;background-color:#494949; padding: 10px 0px;}
.inner-lang{float: right;}
.inner-lang ul{margin: 0px; padding: 0px; list-style: none;}
.inner-lang ul li{text-align: left; display: inline-block; margin-right: 8px;}
.inner-lang ul li a { color: #fff; font-size: 12px; font-weight: 400; }
.inner-lang ul li a img {width: 25px; margin-right: 3px;}
/*------------select language--start-here-----------------*/