/*mobile menu*/
#mobile-menu #myNavbar{ display:block; position:relative; width:auto;}
/* Transitions */
body#page{overflow-x: hidden; position: relative; right: 0;}
#mobile-menu.active{right:-250px;}
body#page.active {left:0;}
body#page.active .navbar-fixed-top{ right:250px;}

@media (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .affix {
        position: fixed;
    }
}


@media only screen and (min-width:1003px) and (max-width:1024px){

    html,body{overflow-x: hidden;} 

    .top-bar{font-size: 85.7%;}    
    .top-bar span a{margin-left: 10px;}
    .top-bar .social{margin-left: 0;margin-right: -8px;}
    .top-bar .social ul li{margin-right: 5px;}

    .navbar-header{margin-top: 22px;}
    .navbar-brand img{width: 228px;}
    #main-menu ul li a{padding:28px 20px;}
    .affix #main-menu > ul > li > a{padding:28px 9px;}

    #banner{height:320px;}
    #banner ul.banner{height:320px;}
    #banner ul.banner li{background-size: cover; height:320px;}
    #banner .banner-txt{top:80px;}
    #banner .banner-txt h1{font-size:182.6%;}

    .award{min-height:340px;}
    .award1{min-height:480px;}
    .inner-gallery .gallery-img a{height:95px;}
    #clientele p{font-size:87%;}
    .signup h4{font-size: 126.1%;}
    .tagline{padding: 30px 0;}
    .entry-content h3, h3{line-height: 30px;}
    .btn-download img{margin-right: 0;}
    .btn-download{font-size: 100%;}
    .contact-wrapper{min-height: 235px;}
    .contact-title{min-height: 92px; padding: 20px;}
    .text-separator{margin: 20px 0;}
    .document-block h4{font-size:100%; line-height:16px;}
    .brochure-img h4{font-size:144%;}

    .footer-bottom p,.footer-top ul li a{font-size: 100%;}
    .footer-bottom .social ul li{margin-right: 15px;}

}

@media only screen and (min-width:768px) and (max-width:1002px) {

    #main-menu{display: none;}
    #mobile-menu{display: block;}
    #mobile-menu #main-menu{display: block;}
    #main-menu ul li a span.caret{display:none;}

    #wrapper{ width:100%; position:relative; box-shadow:0 0 10px 10px rgba(0,0,0,.2); z-index:10; background:#fff;  }
    #mobile-menu-icon{ display:block; position:absolute; right:25px; top: 20px; width:30px; height:30px; background:url(../images/nav-icon.png) no-repeat 0 0;}

    body#page{overflow-x: hidden; position: relative; right: 0;}
    body#page.active {left:0;}
    body#page.active #header{ right:250px;} 
    #header #main-menu{ display:none !important;} 
    #header .navbar-brand{margin: 0;}
    #header .container{ width: 100%;}

    #mobile-menu{position: fixed; width: 250px; top: 0; height:100%; z-index:2; overflow-y: scroll; background-color:#E5E5E5; right: -250px;}
    #mobile-menu.active{right:-250px;}
    #mobile-menu #main-menu{ display:block !important;}

    #main-menu ul{ margin:0;}
    #main-menu{ float:none; padding:0; border: none; box-shadow: none;}
    #main-menu ul{ float:none !important;} 
    #main-menu ul li{ float:none; padding:0; margin:0; border:none; position:relative; border-bottom:1px solid #283230;}
    #main-menu ul li ul li ul{ border:none;}
    #main-menu ul li a{ text-transform:capitalize; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; font-size:100%; border-bottom:none; padding:12px 20px; display:block; color:#dbdbdb; text-transform:none; font-weight:400; background-color:#434343; margin-bottom:0;}
    #main-menu ul li ul li a{border-bottom:none; color:#f0f0f0; font-size:100%; text-decoration:none;}
    #main-menu ul li.active ul li a{ color: #f0f0f0;}
    #main-menu ul li ul li a:hover{ color: #f0f0f0;}
    #main-menu ul li > a:hover, #main-menu ul li.active > a{ color:#fff; border-bottom:none; background-color:#ff1f28;}
    #main-menu ul li.changebg > a{ color:#fff;}
    #main-menu ul li:hover > a{ border-bottom:none;}
    #main-menu ul li a .submenu{ position:absolute; width:42px; height:42px; right:0; top:1px; display:block;  cursor:pointer; -moz-transition:transform 0.3s ease-in-out;  -webkit-transition:transform 0.3s ease-in-out;  transition:transform 0.3s ease-in-out; }
    #main-menu ul li a .submenu:before,#main-menu ul li a .submenu:after{ content:""; background-color:#fff; display:block;  -moz-transition:transform 0.3s ease-in-out;  -webkit-transition:transform 0.3s ease-in-out;  transition:transform 0.3s ease-in-out; }
    #main-menu ul li a .submenu:before{ width:2px; height:15px; position:relative; left:20px; top:12px;}
    #main-menu ul li a .submenu:after{ width:15px; height:2px; position:relative; left:13px; top:4px;}
    #main-menu ul li.changebg>a>.submenu:before { transform:rotate(-90deg);}
    #main-menu ul li.changebg>a>.submenu:after { display:none;}

    #main-menu ul li > ul{ padding:0; border:none;}
    #main-menu ul li.submenu-one:hover > ul{ top:0;}
    #main-menu ul li.submenu-one ul{margin-bottom: -1px;}
    #main-menu ul li ul,#main-menu ul li:hover>ul,#main-menu ul li ul li ul,#main-menu ul li ul li:hover>ul{ width:auto; display:none; opacity:1; position:relative; left:0; top:0; visibility:visible; transition:none; box-shadow:none;}
    #main-menu ul li ul li a{ padding:12px 30px;}
    #main-menu ul li ul li ul li a{padding:12px 40px;}
    #main-menu ul li ul li{ border-bottom:1px solid #283230;}
    .navbar-nav > li > a::before{display:none;}
    .navbar-header img{width:190px;margin-top:15px;}

    .top-bar .social{margin-left: 0;}
    .top-bar .social ul li{margin-right: 0;}
    .top-bar .social ul li a i{font-size: 16px; margin-right:0;}
    .top-bar .social ul li a span{display: none;}
    .top-bar span a{margin-left: 5px;}
    .tag ul li{font-size: 87.4%; padding: 6px;}
    #search-box .form-control,#search-box button{height: 35px;}
    .form-control-feedback { height: 35px; line-height: 35px;width: 35px;}

    #banner{top: 0; margin: 0 auto;height:240px;}
    #banner ul.banner{height:240px;}
    #banner ul.banner li{background-size: cover; height:240px;}
    #banner .banner-txt{top:60px;}
    #banner .banner-txt h1{font-size:150%;}
    .btn-service{line-height:34px; margin-top:30px;}

    .innovation{margin-bottom:0;}
    .innovation .item{min-height:210px;}
    .innovation .item p{font-size: 100%;}
    .innovation .item h4{font-size:128%;}
    .innovation .item,.contact-wrapper{min-height: 190px; position: relative;}
    .innovation .item p,.column-content h6 span{position: absolute; bottom: 0;}

    .header-wrapper h1.page-title{font-size: 298%;}
    h2{font-size:130%; line-height:20px; margin-top:30px;}
    .entry-content h3, h3{line-height: 30px;}
    #contact h5{line-height: 18px;}
    #contact h5 br{display: none;}
    #certificate h2{font-size:250%;}
    .brochure-img{margin:0 0 30px;}
    .brochure-img a{height:330px;}
    .tagline{padding: 30px 0;}
    .about-us p{font-size:120%; margin-bottom:20px;}
    .award{min-height: 265px;}
    .award p{font-size: 115%; line-height: 18px;}
    .award1{min-height:516px;}
    .btn-download{font-size:73.1%; line-height:26px; padding-left:0;}
    .btn-download img{margin-right:0;}
    ul.tabs-list > li > a{padding:14px 4px;}
    .form-group label small{margin-left:0; font-size:67%;}

    .services-content{min-height: 440px; position: relative;}
    .services-content .btn-details{position: absolute; bottom: 0;}
    .services-content h4{min-height: 64px;}
    .column-content{min-height: 220px; position: relative;}
    .header-wrapper{margin: 0; top: 0;}
    .contact-wrapper{min-height: 234px; position: relative;}
    .sales-wrapper{min-height: 210px; margin-bottom: 30px;}
    .contact-wrapper{min-height: 192px;}
    .contact-box .col-sm-4,.contact-box .col-sm-3{ width:50%;}

    .footer-top p{width: auto;}
    .footer-top .links .touch img{margin-top: 28px;}
    .footer-bottom .social ul li{margin-right: 12px;}
    .footer-bottom .social ul li a i{margin-right: 5px;}


}

@media only screen and (max-width:767px) {
    #main-menu{display: none;}
    #mobile-menu{display: block;}
    #mobile-menu #main-menu{display: block;}
    #mobile-menu #main-menu ul li span.icon{display: none !important;}
    #mobile-menu #main-menu ul li.menu-item-has-children:hover>ul,#mobile-menu  #main-menu ul li.submenu-one:hover>ul{opacity: 1; visibility: visible; top: 0; left: 0;}
    #mobile-menu #main-menu ul li ul li ul li ul{left: 0;width: auto;}
    #main-menu ul li a span.caret{display:none;}

    #wrapper{ width:100%; position:relative; box-shadow:0 0 10px 10px rgba(0,0,0,.2); z-index:10; background:#fff;  }
    #mobile-menu-icon{ display:block; position:absolute; right:25px; top: 20px; width:30px; height:30px; background:url(../images/nav-icon.png) no-repeat 0 0;}

    body#page{overflow-x: hidden; position: relative; right: 0;}
    body#page.active {left:0;}
    body#page.active #header{ right:250px;} 

    #header #main-menu{ display:none !important;} 
    .navbar-header {margin: 15px 0;}
    #header .navbar-brand{margin: 0; float: none; padding: 0; height: auto; line-height: normal;}
    #header .container{ width: 100%;}
    nav.navbar {display: none;}

    #mobile-menu{position: fixed; width: 250px; top: 0; height:100%; z-index:2; overflow-y: scroll; background-color:#E5E5E5; right: -250px;}
    #mobile-menu.active{right:-250px;}
    #mobile-menu #main-menu{ display:block !important;}

    #main-menu ul{ margin:0;}
    #main-menu{ float:none; padding:0; border: none; box-shadow: none;}
    #main-menu ul{ float:none !important;} 
    #main-menu ul li{ float:none; padding:0; margin:0; border:none; position:relative; border-bottom:1px solid #283230;}
    #main-menu ul li ul li ul{ border:none;}
    #main-menu ul li a{ text-transform:capitalize; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; font-size:100%; border-bottom:none; padding:12px 20px; display:block; color:#dbdbdb; text-transform:none; font-weight:400; background-color:#434343; margin-bottom:0;}
    #main-menu ul li ul li a{border-bottom:none; color:#f0f0f0; font-size:100%; text-decoration:none;}
    #main-menu ul li.active ul li a{ color: #f0f0f0;}
    #main-menu ul li ul li a:hover{ color: #f0f0f0;}
    #main-menu ul li > a:hover, #main-menu ul li.active > a{ color:#fff; border-bottom:none; background-color:#ff1f28;}
    #main-menu ul li.changebg > a{ color:#fff;}
    #main-menu ul li:hover > a{ border-bottom:none;}
    #main-menu ul li a .submenu{ position:absolute; width:42px; height:42px; right:0; top:1px; display:block;  cursor:pointer; -moz-transition:transform 0.3s ease-in-out;  -webkit-transition:transform 0.3s ease-in-out;  transition:transform 0.3s ease-in-out; }
    #main-menu ul li a .submenu:before,#main-menu ul li a .submenu:after{ content:""; background-color:#fff; display:block;  -moz-transition:transform 0.3s ease-in-out;  -webkit-transition:transform 0.3s ease-in-out;  transition:transform 0.3s ease-in-out; }
    #main-menu ul li a .submenu:before{ width:2px; height:15px; position:relative; left:20px; top:12px;}
    #main-menu ul li a .submenu:after{ width:15px; height:2px; position:relative; left:13px; top:4px;}
    #main-menu ul li.changebg>a>.submenu:before { transform:rotate(-90deg);}
    #main-menu ul li.changebg>a>.submenu:after { display:none;}

    #main-menu ul li > ul{ padding:0; border:none;}
    #main-menu ul li.submenu-one:hover > ul{ top:0;}
    #main-menu ul li.submenu-one ul{margin-bottom: -1px;}
    #main-menu ul li ul,#main-menu ul li:hover>ul,#main-menu ul li ul li ul,#main-menu ul li ul li:hover>ul{ width:auto; display:none; opacity:1; position:relative; left:0; top:0; visibility:visible; transition:none; box-shadow:none;}
    #main-menu ul li ul li a{ padding:12px 30px;}
    #main-menu ul li ul li ul li a{padding:12px 40px;}
    #main-menu ul li ul li{ border-bottom:1px solid #283230;}
    .navbar-nav > li > a::before{display:none;}
    .navbar-header img{width:250px;margin:0;}
    .navbar-form{margin: 0 -15px;}

    #banner{top: 0; margin: 0 auto;height:200px;}
    #banner ul.banner{height:200px;}
    #banner ul.banner li{background-size: cover; height:200px;}
    #banner .banner-txt{top:50px;}
    #banner .banner-txt h1{font-size:120%;}
    .btn-service{line-height:24px; margin-top:30px; font-size:90%;}

    .top-bar .social{margin-left: 0;}
    .top-bar .social ul li{margin-right: 0;}
    .top-bar .social ul li a i{font-size: 16px; margin-right: 4px;}
    .top-bar .social ul li a span{display: none;}
    .top-bar span a{margin-left: 5px;}

    .tag{margin-bottom: 0;}
    .tag ul li{font-size: 87.4%; padding:9px 15px;}
    .tagline br{display:none;}
    .tagline{padding:20px 0; font-size:134%;}
    #search-box{margin: 0 0 15px;}

    h2{font-size: 150%; line-height: 26px; margin-top:30px;}
    .about-us h3,.contact-box{margin-bottom:30px;}

    .award{min-height:295px; margin-bottom:60px;}
    .awards{padding-bottom: 0;}
    .award1{min-height:482px;}

    .innovation,.content-wrapper h3{margin-top:30px;}
    .innovation .item{margin-bottom:40px;}
    .innovation .item h4{margin-top:20px; font-size:140%;}
    .innovation [class^="col-"],.awards [class^="col-"],.inner-gallery [class^="col-"]{ width:50%;}
    .contact-title{min-height:66px;}
    #contact h5{line-height:18px;}
    .content-wrapper img{margin-top:30px;}
    .header-wrapper{margin:0; top:0;}
    .breadcrumbs-wrapper{display:none;}
    .text-wrapper p.with-icon{padding-top:10px;}
    .contact-wrapper{min-height:234px;}
    .entry-content p,.text-wrapper{margin-bottom:0;}
    .text-separator{margin:10px 0;}
    .career-img{margin-bottom:30px;}
    .gallery-img h4{font-size:100%;}
    .brochure-img{margin:0 0 30px;}
    .brochure-img a{height:315px;}
    .brochure-img .small{margin-top:0;}


    .footer-bottom{text-align:center;}
    .footer-bottom .social{float:none; margin-top:10px;}
    
    .error-page .title{font-size: 800%;}
    .error-page .title .face{display: none;}
}


@media only screen and (min-width:320px) and (max-width:480px) and (orientation : portrait) {

    #mobile-menu-icon{top:36px;}

    .top-bar .social ul li a i{margin-right:5px;}
    .top-bar span{font-size:80%;}
    .tag ul li{font-size:80.4%; padding:9px;}

    .header-wrapper h1.page-title{font-size:300%; line-height:40px;}
    .entry-content h3, h3{font-size:160%;}
    .signup h4{font-size:120%;}
    #contact h5{font-size:98%; line-height:16px;}
    .innovation{margin-bottom:0;}
    .award1{text-align:center; min-height:auto;margin-bottom:30px;}
    .award1 img{margin:0 auto;}
    .contact-box{margin-bottom:30px;}
    .sales-wrapper, .contact-wrapper,.contact-title{min-height:auto;}
    .innovation [class^="col-"], .top-details [class^="col-"],.awards [class^="col-"],.footer-top .col-xs-6,.gallery [class^="col-"],#clientele [class^="col-"],.award-content [class^="col-"],.inner-gallery [class^="col-"],.contact-box,#certificate [class^="col-"],#document [class^="col-"],#brochure [class^="col-"]{width:100%;} 

    .footer-top .aboutus-footer, .footer-top .footer-links, .footer-top .services{min-height:360px;}
    .footer-top .links{padding:40px 15px;}
    .footer-bottom .social ul li{margin-right:10px;}

}
@media screen and (max-width:480px) and (orientation : landscape) {

    #mobile-menu-icon{top:34px;}

    .top-details [class^="col-"]{width:100%;}
    .tag ul li{padding:15px 22px; font-size:95.4%;}

    .innovation .item{min-height:190px; margin-bottom:20px;}
    .award1{min-height:530px;}
    .contact-box{margin-bottom:30px;}
    #contact h5{line-height:16px;}
    .header-wrapper h1.page-title{font-size:250%; line-height:35px;}
    .sales-wrapper, .contact-wrapper{min-height:234px;;}
    .inner-gallery .gallery-img a{height:130px;}
    .gallery-img a{height:118px;}
    #clientele p{font-size:80%;}
    .brochure-img h4,.gallery-img h4{font-size:110%; line-height:15px; font-weight:500;}

    .footer-bottom p{font-size:100%;}
    .footer-top .aboutus-footer, .footer-top .footer-links, .footer-top .services{min-height:auto;}

}


@media screen and (max-width:320px) and (orientation : portrait) {

    .top-bar .social ul li a{margin-right:0;}
    .tag{margin-top:10px;}
    .tag ul li{padding:9px 3px;}
    .navbar-header img{margin-top:0;}
    #banner .banner-txt h1{font-size:100%;}
    .awards-content h3{font-size:150%;}
    .award{min-height:324px;}
    .header-wrapper h1.page-title{line-height:16px; font-size:150%;}
    .approval [class^="col-"]{width:100%;}
    .gallery-img h4{font-size:124%;}

}

@media only screen and (min-width:240px) and (max-width:320px)
{
    .tag {display: none;}
}