/*----------------------------
1) transition
2) colors theme
3) dropkick css override
4) bxslider css override
form validation 
-----------------------------*/

/* ==========================================================================
 transition
   ========================================================================== */
.mod-box.mod-products-cnt ul li a:before{transition:top 0.5s ease, opacity 0.5s ease; -webkit-transition:top 0.5s ease, opacity 0.5s ease; -moz-transition:top 0.5s ease, opacity 0.5s ease; -o-transition:top 0.5s ease, opacity 0.5s ease;-ms-transition:top 0.5s ease, opacity 0.5s ease;}
/* ==========================================================================
  colors theme
   ========================================================================== */
header,.hsearch .search-input input[type="submit"],footer,.contact-form input.btn,.hsearch .search-input button.btn-submit,.mod-box.mod-products ul li:hover:after,.mod-box.mod-products ul li.active:after,.navbar-toggle{background:#e7bc1f}
.about .container{background:#fff} 
section.about h2.title{border-color:#e7bc1f; color:#e7bc1f;}
section.about .title-holder:after{border-color:#e7bc1f}
.container.loadmore-holder a{color:#e7bc1f;}
/* ==========================================================================
  dropkick css
   ========================================================================== */
.dk-select{width:100%; height:43px}
.dk-selected{border:1px solid #e1e1e1; border-radius:0px; height:100%; padding-top:9px; font-size:13px; color:#999999}
.dk-selected:after{border-left:0px}
.dk-selected:hover, .dk-selected:focus{border-color:#999}
.dk-selected:before{border-width:5px 5px 0}
/* ==========================================================================
  bxslider css
   ========================================================================== */
.bx-wrapper .bx-viewport{box-shadow:none; border:none; left:0px}
.bx-wrapper .bx-controls-direction a{height:36px; width:36px}
.bx-wrapper .bx-prev, .bx-wrapper .bx-prev:hover, .bx-wrapper .bx-next,.bx-wrapper .bx-next:hover{background:url(../img/slider-arrow.jpg) no-repeat 100% 0; }
.bx-wrapper .bx-prev, .bx-wrapper .bx-prev:hover{background-position:0 0}
.bx-wrapper .bx-next:hover,.bx-wrapper .bx-prev:hover{opacity:0.5}
/*=========================================================================
mobile menu button
===========================================================================*/
.navbar-toggle .icon-bar{background:#fff}
.navbar-toggle{margin:30px 0 0 0}
/*--------------------------------------------*/ 
section, header, .main-banner{/*max-width:1400px;*/ margin:0 auto}
body{padding:0px;  -webkit-font-smoothing: antialiased;font-family: 'Roboto', sans-serif; font-weight:400;background:url(../img/pattern.png) repeat 0 0; -webkit-appearance:none}
h2{color:#333; font-size:22px; margin:10px 0; padding:0px}
h3{font-size:16px; color:#000; text-transform:uppercase}
h4{font-size:14px; color:#666;}
h2.mod-title{text-transform:uppercase; color:#000; font-size:20px; margin:0; padding:0px}
p{font-size:13px; color:#878787; line-height:20px; text-align:justify;}
a, a:hover{text-decoration:none; outline:none; color:#666}
a.btn{background:#03a9f4; color:#fff; border-radius:2px; text-align:center; display:inline-block; font-size:14px; text-transform:uppercase; font-size:20px; font-weight:500; width:280px; height:50px; line-height:50px; padding:0px}
a.btn:hover{color:#fff; opacity:0.7}
img{max-width:100%}
input, button{border:0px}
.header-top, .header-mid{}
.header-top{border-bottom:1px solid #eaeaea}
ul.htop-right{padding:0px; margin:0px; list-style:none; overflow:hidden; float:right}
ul.htop-right li,ul.htop-right li a{font-size:13px; color:#666666}
ul.htop-right li{float:left; margin-left:26px; padding:12px 0}
ul.htop-right li i{margin-right:5px; display:inline-block}
header{height:60px;}
.htop-social{margin:0px; padding:0px; list-style:none;}
.htop-social li{float:left; width:auto; margin:0 20px 0 0; padding:15px 0 0 0}
.htop-social li i{font-size:18px; color:#b69393}
.logo{padding:22px 0 30px; display:block; width:70px}
.hsearch{/*margin-left:-30px; */padding:29px 0 0 0}
.hsearch .search-option,.hsearch .search-input{height:43px; float:left}
.hsearch .search-option{width:35%; }
.hsearch .search-input{width:65%;}
.hsearch .search-option select{width:100%;opacity:0}
.hsearch .search-input input[type="text"],.hsearch .search-input input[type="search"]{width:90%; height:100%; float:left; border:1px solid #e1e1e1;padding:0 15px }
.hsearch .search-input input[type="submit"],.hsearch .search-input button.btn-submit{width:10%; height:100%; float:left; }
.hsearch .search-option .dk-selected{border-right:0px; background:#f7f7f7}
.hsearch .search-input button.btn-submit i{color:#fff}
/*=========================================================================
desktop maing menu start
===========================================================================*/
nav{padding:0px; margin:0px}
nav ul{list-style:none; margin:0px; padding:0px}
nav ul li{floaT:left; margin:0px; padding:0px; position:relative}
nav ul li a,nav ul li a:focus{text-transform:uppercase;text-decoration:none;color:#fff; font-size:14px; display:inline-block; height:60px; line-height:60px; padding:0 15px}
nav ul li a:hover,nav ul li.active a{ background:rgba(255,255,255,0.3) }
.submenu{list-style:none; width:300px; margin:0px; padding:0px; position:absolute; left:0px; top:60px; z-index:8; background:#ececec; opacity:0; display:none; box-shadow:0 1px 5px #999}
.submenu li, .submenu li a{display:block; float:none; width:100%; color:#333}
.submenu li a{border-bottom:1px solid #ccc}
.submenu li a:focus,.submenu li a:hover{color:#000}
nav ul li:hover .submenu{display:block}
/*=========================================================================
end of desktop main menu
===========================================================================*/
.main-banner{width:100%; padding:0px; margin:0px auto; position:relative}
.main-banner ul{list-style:none; padding:0px; margin:0px}
.main-banner .overlay{width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:999; background:rgba(0,0,0,0.4)}
.main-banner ul li{width:100%; position:relative}
.main-banner ul li figure{position:relative}
.main-banner ul li figure:after{content:'';position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:1}
.main-banner ul li img{width:100%; height:auto} 
.main-banner .slider-cnt{position:absolute; left:0px; top:23%; width:100%; z-index:2}
.main-banner .slider-cnt h2{color:#fff; font-size:52px; text-transform:uppercase;}
.main-banner .slider-cnt p{font-size:24px; color:#fff; margin:20px 0 0 0; max-width:555px; line-height:30px}
/* --------------------
quick service
----------------------*/
 .quick-service{ padding: 2px 0;
  background: #E7BC1F;}
/*.quick-service{padding:28px 0; background:#fff}*/
.quick-service-block{overflow:hidden}
.quick-service-block i{float:left; width:20%; margin:16px 0 0}
.quick-service-block .block-cnt{float:left; width:80%; padding-left:12px;}
/* --------------------
about section
----------------------*/
section.about{margin:0; padding:30px 0 0 0}
section.about .container{padding-top:40px; padding-bottom:40px}
section.about .title-holder{position:relative; text-align:center}
section.about .title-holder:after{content:''; height:3px; border-top-width:1px;  border-top-style:solid; border-bottom-width:1px;border-bottom-style:solid; padding-bottom:1px; background:white; position:absolute; left:0px; top:23px; width:100%; z-index:1}
section.about h2.title{font-size:20px; font-weight:500; margin:0 0 15px 0; text-transform:uppercase; display:inline-block; padding:10px 60px; border-style:double; border-width:3px; position:relative; z-index:2; background:#fff}
section.about p{}
.abt-featured-img{position:absolute; right:0px; top:200px}
.abt-featured-img img{max-width:100%}
section.icon-info{background:#e9e9e9; padding:100px 0; text-align:center}
section.icon-info ul{padding:0px; margin:0px; list-style:none;text-align:center}
section.icon-info ul li{display:inline-block; padding:0px; margin:0px 20px;}
.features{padding:100px 0; background:#03a9f4; position:relative}
.features .feature-img{position:absolute; left:50%; top:50%; width:auto; display:inline-block; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);}
.features ul{list-style:none; padding:0px; margin:0px;}
.features ul li{float:left; clear:left; color:#fff; width:225px; margin:20px 0 20px 100px;}
.features ul li:nth-child(2n){float:right; clear:right; margin:20px 100px 20px 0}
.features ul li h2{font-weight:500; font-size:25px; margin:0 0 20px 0; color:#FFF}
.features ul li p{color:#FFF; font-size:18px; line-height:30px;}
.mod-box{padding:20px 0;  text-align:left; color:#FFF}
.mod-box .container{background:#fff; padding-top:40px; padding-bottom:40px;}
.mod-box h2{}
.mod-box p{font-weight:300; font-size:25px;}
.mod-box ul{list-style:none; padding:20px 0 30px; margin:15px 0 0; text-align:center; border:1px solid #efefef;} 
.mod-box ul li{display:inline-block; width:auto; margin:0 20px;  overflow:hidden; vertical-align:middle}
.mod-box ul li img{}
#client ul li{width:15%}
#client ul li img{max-height:60px; width:auto}
.business.mod-box ul li img{opacity:1; max-width:150px; max-height:40px}
.business-cnt {margin:10px 0 20px}
.business-cnt .container{background:#fff; padding-top:40px; padding-bottom:40px }
.business-cnt .container .cnt{width:70%; float:left;}
.business-cnt .container figure{width:25%; float:right; padding-top:30px}
.business-cnt .container figure img{max-height:80px}
.business-cnt .bx-wrapper{margin:0px}
.mod-box.mod-products .container{padding-bottom:0px; padding-top:10px}
.mod-box.mod-products ul{border-bottom:0px; padding:0px;}
.mod-box.mod-products ul li{width:20%; margin:0px; padding:0; margin-left:-3px; vertical-align:middle;border-right:1px solid #efefef; cursor:pointer; position:relative}
.mod-box.mod-products ul li a{display:block;margin:0px; padding:14px 0 0 0;margin:0px;height:116px; vertical-align:middle;}
.mod-box.mod-products ul#product-pager li a img{opacity:0.5}
.mod-box.mod-products ul li:hover:after,.mod-box.mod-products ul li.active:after{content:''; width:100%; height:3px; position:absolute; left:0px; bottom:0px;}
.mod-box.mod-products ul li:last-child{border-right:0px}
.mod-box.mod-products ul li span{display:inline-block; width:100%; text-align:center; color:#999999; height:auto; padding:8px 10px}
.mod-box.mod-products-cnt {padding:0px}
.mod-box.mod-products-cnt .container{padding-top:0px;padding-bottom:10px}
.mod-box.mod-products-cnt ul{overflow:hidden; border:0px; padding:0px;}
.mod-box.mod-products-cnt ul li{opacity:1; margin:0; width:23%; width:calc(100%/4 - 16px);float:left; margin:0 10px; text-align:left; padding-bottom:10px}
.mod-box.mod-products-cnt ul li:first-child{margin-left:0px}
.mod-box.mod-products-cnt ul li:last-child{margin-right:0px}
.mod-box.mod-products-cnt ul li a{display:inline-block; position:relative;}
.mod-box.mod-products-cnt ul li a:before{content:''; position:absolute; left:50%; top:55%; height:50px; width:50px; margin:-25px 0 0 -25px; background:#4aacdb url(../img/search.png) no-repeat 50% 50%; opacity:0; display:none}
.mod-box.mod-products-cnt ul li a:hover:before{top:50%; opacity:1}
.mod-box.mod-products-cnt ul li figure{background:#ececec}
.mod-box.mod-products-cnt ul li img{opacity:1}
.mod-box.mod-products-cnt ul li h4{text-align:center}
.mod-box.mod-products-cnt ul li span{display:block; text-align:center; color:#333; font-size:12px; font-weight:bold}
.mod-box.mod-products-cnt .container.loadmore-holder{margin-top:2px; padding:0px}
.mod-box.mod-products-cnt .container.loadmore-holder a{display:block; text-align:center; font-size:16px; text-transform:uppercase; padding:10px 0}
.mod-box.mod-products-cnt .container.loadmore-holder a span{padding:4px 40px 4px 0; background:url(../img/down-arrow-o.png) no-repeat 100% 0; display:inline-block;}
.advt{margin:15px 0}
.advt .container{padding-top:15px; padding-bottom:15px; background:#fff;}
.advt .container ul{list-style:none; padding:0px; margin:0px}
.advt .container ul li{display:inline-block; margin:0 2px 0 -3px; width:auto;}
.advt .container ul li img{}
.advt .container ul li:last-child{margin-right:0px}
.contact-form{background:#fff; padding:30px 0;}
.contact-form input[type="text"],.contact-form input[type="email"], .contact-form textarea{background:#fffbec; height:40px; line-height:40px; color:#ababab; border:0px; width:100%; padding:0 20px; font-size:13px; font-weight:400; border:2px solid #e2e4e3 }
form{}
.contact-form textarea{height:200px}
form ul{list-style:none; padding:0px; margin:0px; overflow:hidden}
form ul li{padding:5px 0px}
form ul li.grp{overflow:hidden;}
form ul li.grp .grp-item{width:50%; padding-right:10px; float:left}
form ul li.grp .grp-item:last-child, form ul li.grp .grp-item.last{padding-left:10px; padding-right:0px}
form select, form textarea{width:100%}
form textarea{height:250px; background:#fff; border-radius:2px; border:0px}
/*.form-wrap{max-width:660px; margin:0 auto}*/
.form-wrap{ margin:0 auto}
.contact-form{}
.contact-form input.btn{float:right; width:180px; height:50px; font-weight:500; font-size:20px; text-transform:uppercase; text-align:center; line-height:20px; color:#fff;}
footer{text-align:center; padding:0;}
footer p{color:#fff; font-size:14px; padding:20px 0; margin:0px}
/*------------------------
 form validation 
 -------------------------*/
.contact-form input[type="text"].input-error, .contact-form input[type="email"].input-error, .contact-form textarea.input-error{border-color:#e12000; }
.error{color:#e12000}

/*=========================
 detail page
 =========================*/
 .detail-wrap{padding:38px 0; }
 aside .module,.detail-content{background:#fff; padding:15px; margin:0 0 30px 0}
aside h2.module-title{font-size:16px; text-transform:uppercase; border-bottom:2px solid #f3f3f3; padding:10px 0; margin:0px 0 0px 0; position:relative; }
aside h2.module-title:after{position:absolute; content:''; width:20%; height:2px; background:#e7bc1f; left:0px; bottom:-2px}
aside .module.businessGrp-list{}
aside .module.businessGrp-list ul{list-style:none; padding:0px; margin:0px}
aside .module.businessGrp-list ul li{padding:0px; margin:0px}
aside .module.businessGrp-list ul li a{display:block; padding:12px 10px; border-bottom:1px solid #ccc; color:#333;}
aside .module.businessGrp-list ul li a:hover{color:#e7bc1f}
aside .module.businessGrp-list ul li:last-child a{border-bottom:0px}
.detail-title{position:relative; font-size:20px; text-transform:uppercase; background:#fff; padding:0 20px 0 0; margin: 0 0 40px 0;}
.detail-title span{background:#fff; display:inline-block; width:auto; padding:0 20px 0 0; position:relative; z-index:2;}
.detail-title:after{content:''; padding:0px; margin:0px; position:absolute; left:0px; width:100%; top:50%; border-bottom:4px double #e7bc1f; z-index:1}
.detail-content article{padding:10px 0 0 0}
/*----------------
product listing isotope
------------------*/
.isotope-wrapper { max-width: 100%; margin: 0 auto 50px; position: relative; left: 13px }
.social-page .container { max-width: 1080px; margin: 0 auto; min-height: 500px }
.container:after { content: ''; display: block; clear: both; }
.element { position: relative; margin: 0px; float: left; padding-bottom: 40px }
.element img { width: 100%; height: 100%; display: block; }
.cont-lg { width: 22%; height: auto; margin: 4px 0px; overflow: hidden }
.cont-lg-wt { width: 50%; height: auto; }
.cont-sm { width: 25%; height: auto; }
.cont-lg-wt img { height: auto }
.element-cont-lg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0px; }
.element-cont-sm { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0px; }
.element i { color: white; font-size: 2.5em; float: right; }
.filter-menu { text-align: left; height: 58px; background: #e7bc1f; margin: 20px 0 0 0; border: 1px solid #eaeaea; border-bottom: 0px; }
.filter-menu ul { padding: 0px; margin: 0px; background: #fff; overflow: hidden }
.filter-menu ul li { list-style: none; margin: 0; display: inline-block; float: left }
.filter-menu ul li button { color: #010101; font-size: 13px; text-transform: uppercase; border: 0px; background: none; line-height: 55px; font-weight: 600; padding: 0px 20px; border-right: 1px solid #eaeaea }
.filter-menu ul li.active { background-color: #e7bc1f; }
.filter-menu ul li.active button { color: #fff; }
.filter-menu ul li:last-child button { border-right: 0px }
.element p { color: white; }
.element .date { clear: both; text-transform: uppercase; }
.social-wall-wrapper { padding: 30px 0 }
.social-wall-wrapper h2 { font-size: 65px; font-family: 'proxima_novathin'; text-align: center; margin: 20px 0 }
button { outline: none }
.element-cnt { padding: 4px 0 }
.element-cnt h2 { font-size: 13px; text-transform: uppercase; text-align: center; padding: 0px; margin: 0px; line-height: 16px }
.element-cnt span { font-size: 12px; color: #666666; display: block; text-align: center }
/*----------------
end of product listing isotope
------------------*/
/*----------------
video holder
------------------*/
.video-holder{height:145px; overflow:hidden; background:#999 url('../img/mqdefault.webp')50% 50%; padding:0px; margin:11px 0 0; position:relative; }
.video-holder:before{content:'';position:absolute; left:50%; top:50%; height:40px; width:40px; margin:-20px 0 0 -20px; background:url(../img/video-icon.png) no-repeat 0 0; background-size:85px;}
.popup { width: 0px; height: 0px; background: #fff; padding: 0px; margin: 0px; position: absolute; left: 50%; top: 375px; z-index: 99999; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; }
.popup.show { width: 825px; height: 464px; top: 15%; max-width: 80%; }
.popup.show.expand { /*width: 100%; height: 100%;top: 0px; left: 0px;transform: translateX(0%); -ms-transform: translateX(0%); -moz-transform: translateX(0%); -webkit-transform: translateX(0%);*/ position: fixed;  max-width: 100%;  }
.popup iframe { opacity: 0; transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; }
.popup.show iframe { opacity: 1 }
.popup-close,
.popup-enlarge { position: absolute; right: -102px; display: none }
.popup-close { top: -50px; }
.popup-enlarge { bottom: 85px; color: #fff; font-size: 15px; right: -126px; display: none!important }
.popup.show .popup-close,
.popup.show .popup-enlarge { display: block }
.popup.show.expand .popup-close,
.popup.show.expand .popup-enlarge { right: 30px; }
.popup.show.expand .popup-close { top: 50px; }
i.icon-close,
i.icon-expand { display: inline-block; height: 42px; width: 42px; background: url(../img/sprite.png) no-repeat 0 0; vertical-align: middle }
.popup-close,
.popup-close a { color: #de085e; font-size: 15px; }
.popup-enlarge i.icon-expand,
.popup-close i.icon-close { margin-right: 10px }
i.icon-close { background-position: -196px -120px }
i.icon-expand { background-position: -144px -120px }
.video-loaded {background-color:#000!important;}
.video-loaded .detail-wrap, .video-loaded header, .video-loaded footer{opacity:0.1}
/*----------------
video holder end
------------------*/
@media(max-width:1399px){
.abt-featured-img{width:65%}
}
@media(max-width:1024px){
.mod-box.mod-products-cnt ul li a:before{display:none}
}
@media(max-width:1023px){
 .main-banner .slider-cnt{padding:0 10%}
 .main-banner .slider-cnt h2{font-size:24px}
 .main-banner .slider-cnt p{font-size:16px; line-height:20px; margin-top:10px}
 
}

@media(max-width:767px){
 header{height:auto}
 header.nav{display:none}
 ul.htop-right li{margin:0 5px; }
 ul.htop-right li, ul.htop-right li a{font-size:11px}
.nav.fixed{position:static}
nav ul li{float:none; width:100%; border-bottom:1px solid rgba(255,255,255,0.3)}
nav ul li a{display:block}
 .logo{width:100%; text-align:center; display:block}
 .logo img{display:inline-block; width:100%; }
 .htop-social {overflow:hidden; text-align:center}
 .htop-social li{float:none; display:inline-block; margin:0 5px}
 .hsearch{overflow:hidden; padding:0 0 20px 0; width:100%; display:none}
 .hsearch .search-option, .hsearch .search-input{width:100%;}
 .hsearch .search-option .dk-selected{border:1px solid #e1e1e1; }
 .hsearch .search-option{margin-bottom:5px}
 .bx-wrapper .bx-controls-direction a{display:none}
.about-cnt img{width:100%; margin:5px 0 15px 0}
.mod-box.mod-products ul li img{max-width:50px; max-height:50px;}
.mod-box.mod-products ul li span{display:none}
.mod-box.mod-products ul li a{height:80px}
.mod-box.mod-products-cnt ul li{width:calc(100%/2 - 21px)}
.mod-box.mod-products-cnt ul li:first-child{margin-left:10px}
.business-cnt .container figure,.business-cnt .container .cnt{width:100%; float:none}
.business-cnt .container{padding-top:0px; padding-bottom:0px}
}
@media(max-width:600px){
.bx-wrapper .bx-viewport{height:250px;}
.main-banner ul li figure{overflow:hidden}
.main-banner ul li img{width:auto; height:250px; max-width:200%; position:relative; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%);}
.main-banner .slider-cnt{padding:0 2%}
.mod-box.business.mod-products ul li a{padding-top:24px}
.main-banner .slider-cnt{}
.htop-social li{padding:0px 0 15px 0}
.htop-social li i{color:#fff}
#client ul li{padding:20px 0}
.contact-form{padding:20px 0}
.contact-form input.btn{width:100%; margin-bottom:20px}
.mod-box .container{padding-top:20px 0}
#client ul li{width:50%}
/*--------------------
detail page
----------------------*/
.detail-title{font-size:16px}
.detail-content figure img{max-width:60%; margin:0px 0 20px}
/*-----------------
product listing isoptope
-------------------*/
.filter-menu ul li{display:block; width:100%; float:none; margin:0px; border:0px; border-bottom:1px solid #CCC}
.filter-menu ul li button{display:block; border:0px}
.filter-menu{height:auto;}
.cont-lg{width:100%;}
.isotope-wrapper{left:0px; margin:0 5px}
}
.bx-wrapper{margin-bottom:20px}
.loadmore-holder{display:none}
.slider-logo{width:90px}