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

/* Table of Contents
-----------------------------
1. Mobile and small tablate
2. iPad
3. small mobile
4. Other
*/

/* 1. Mobile and teblete  responsive css 767px
-----------------------------------*/
@media (max-width:767px) {
    body{min-width: inherit;}
    /* default  */
    h1{font-size: 18px; word-wrap: break-word; page-break-after: 0 5px; -webkit-box-sizing: border-box; box-sizing: border-box;}
    h2{font-size: 17px;}
    h3{ font-size: 14px;line-height: normal}
    h4{}
    h5{}
    h6{}
    p{font-size: 13px; line-height:18px}
    p a{}
    a:hover{border: none}
    img{max-width: 100%;}
    .container{width: 100%}
    .full-width{min-width: inherit; width: 100%; padding: 0 4%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    #wrapper{min-width: inherit; width: 100% }
    .not-found.auto-height{padding: 0; width: 92%; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; padding: 30px 0;}

    /* mobile menu */
    .mobile-nav, #mobile-menu{display: block;}
    #mobile-menu{display: block;width: 25px;height: 20px;position: fixed;-ms-touch-action: manipulation;touch-action: manipulation;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;white-space: nowrap;right: 22px;top: 23px;-webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;transition: all 0.7s ease; z-index:9999}
    #mobile-menu span{width: 100%;height: 3px;display: block;position: absolute;top: 50%;margin-top: -1.5px;left: 0;z-index: 9999}
    #mobile-menu span, #mobile-menu span:before, #mobile-menu span:after{background: #fff; }
    #mobile-menu span:before, #mobile-menu span:after{content: '';position: absolute;top: -8px;left: 0;width: 100%;height: 3px;-webkit-transition: all 0.7s ease;-moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;transition: all 0.7s ease;}
    #mobile-menu span:after{bottom: -8px;top: initial}
    #mobile-menu.active span:before{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);top: 0; background: #fff}
    #mobile-menu.active span{background:rgba(61, 56, 52, 0) }
    #mobile-menu.active span:after{transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);bottom: 0; background: #fff}
    #mobile-navbar{background:rgba(61, 56, 52, 0.9);position: fixed;top: 0;width: 100%;height: 100%;right: -100%;box-sizing: border-box;padding-top: 70px;z-index: 9998; -webkit-transition: all 0.8s ease ;-o-transition: all 0.8s ease ;transition: all 0.8s ease ;}
    #mobile-navbar.open{right: 0;}
    #mobile-navbar nav{padding-bottom: 20px; overflow-y: auto; height: 100%}
    #mobile-navbar ul ul{display: none;background:rgba(61, 56, 52, 0.6); height: auto}
    #mobile-navbar li{border-bottom: 1px solid rgba(255,255,255,.3);list-style: none;position: relative;display: block;margin: 0;}
    #mobile-navbar li:last-child{border-bottom-width: 0;padding-bottom: 0;}
    #mobile-navbar li em{display: block;position: absolute;top: 8px;right: 6px;width: 15px;height: 15px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
    #mobile-navbar li em:before, #mobile-navbar li em:after{content: '';position: absolute;top:50%;margin-top: -1px;left: 0;width: 100%;height: 2px;background: #fff;}
    #mobile-navbar li em:after{transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg)}
    #mobile-navbar li em.active{transform: rotate(225deg);-moz-transform: rotate(225deg);-webkit-transform: rotate(225deg);}
    #mobile-navbar li a{color: #d2d2d2;padding: 7px 0px 7px 15px;display: block;margin-right: 30px;text-transform: uppercase; font-family: Montserrat, sans-serif;}
    #mobile-navbar li a.active{color:rgb(233, 114, 0)}
    #mobile-navbar li li{border-color: rgba(255,255,255,.8)}
    #mobile-navbar li li a{padding-left: 30px; font-weight: 400}
    header nav{display: none;}
    header #mobile-navbar nav{display: block;}
    header .brand {width: 120px;}
    header .brand img{max-width: 100%}
    header nav ul{text-align: left;}
    .overflow-hidden{overflow: hidden;height: 100%;}

    /* header part */
    #header{ height: 65px;}
    #header .container{width: 100%; max-width: 960px;}
    .navbar{display: none}
    .mobile-nav{display: block}
    #header .logo{max-width: 140px; height: auto}

    /* footer part */
    #footer{min-width: inherit; width: 100%; height:auto; display: table}
    #footer .footer-social-part{margin: 0 auto; text-align: center; display: block; float: none;}
    #footer .footer-container{width: 92%; padding-bottom: 10px;}
    #footer .footer-container p{padding-top: 10px; margin: 0 auto; float: none; text-align: center}
    #wrapper{margin-bottom: -75px;}
    #push{height: 75px;}
    #footer .footer-container .footer-social{ margin-top:15px; float: none; display: -webkit-inline-flex;display: -ms-inline-flexbox;display: inline-flex}
    #footer .footer-container p a.active{display: inline-block}

    /* home page */
    #banner .cycle-pager{max-width: 100%}
    .circle .circle-shadow{max-width: 120px; width: 100%; bottom: 21px}
    .circle .circle-image{top: -30px;}
    #banner{height: 380px;}
    #vid{min-height: inherit; height: 125%}
    #banner .banner-image{padding: 0}
    #banner .container .content-container{margin-top: 110px; width: 100%}
    #banner .container .content-container h1{font-size: 21px;}
    #banner .container .content-container h4{font-size: 14px;}
    #banner .container .content-container a {padding:7px 35px}
    #home-body .white .container{width: 92%; min-width: inherit; max-width: 960px;}
    .home-products-content .callout-container,.home-blog .callout-container{width: 100%}
    #home-body .container .image-container.relative.left{max-width: 120px; width: 100%; margin: 0 auto; height: auto; min-height: 135px; float: none; display: inline-block; vertical-align: top}
    #home-body .container .left .content p{width:auto; display:block; float: none; height: auto; margin-top: 25px;}
    #home-body .container .left .content {width:100%; float: none; display: inline-block; vertical-align: top; padding-left: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; width:70%;}
    #home-body .container .left{margin: 0 auto; width:100%;}
    #home-body .white .right .buttons{display: table; margin: 0 auto; padding: 10px 53px;}
    #home-body .container .right{margin: 0 auto; width: auto; display:block; vertical-align: top; float: none; padding-bottom: 15px;}
    .home-products-content .title{font-size: 20px; padding-top: 30px;}
    .home-products-content .divider{margin-bottom: 25px;}
    .home-products-content .callouts{width: 100%; margin:0 auto 10px; height: auto; padding-bottom: 30px;}
    .home-products-content .content-container{width: auto; padding:0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 30px;}
    .home-products-content .callout-container{padding-bottom: 30px;}
    .home-blog{height: auto; padding-bottom: 20px;}
    .home-blog h1{padding-top: 35px;}
    .home-blog .callout-container .callouts{width: 100%; height:auto; margin:.0 auto 20px;}
    .home-blog .callout-container .callouts .adjust-img{width: auto; height: auto; max-width: 75%}
    .home-blog .callout-container .callouts .buttons{ display: table; margin: 0 auto; position: static; margin-bottom: 20px;}
    .home-blog .callout-container .callouts .callout-content{width: auto; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 20px; position: static}
    .home-partners{height: auto}
    .home-partners .left .content-container{width: 92%; margin:0 auto; padding:30px 0 30px 0px;}
    .home-partners .img-container{background-position: top center}
    .home-partners .left{width: 100%; float: none;}
    .home-partners .left .content-container{height: auto}
    .home-partners .right{width: 100%; float: none}
    .home-partners .left .content-container .buttons{padding: 10px 22px; margin-bottom: 20px;}
    .home-partners .img-container{height: 370px;}
    .product .top .right ul li img{height: auto; max-width: 40px;}

    /* about us */
    .about .container{width: 92%}
    .about .container .body p{margin: 0 auto; margin-bottom: 20px}
    .second-navbar{display: none}
    .about .double-banner img{padding-top: 65px}
    .about .container h1{margin-top: 35px; margin-bottom: 10px;}
    .about .container h2{padding-top: 20px; margin-bottom: 30px; width: 100%; }
    .about .container .body p:first-child,.about .container .body p{font-size: 13px; margin: 0 auto; margin-bottom: 15px;}
    .about .quad-banner{margin-top: 30px;}
    .about .quad-banner img{width: 50%}
    .columns {-webkit-column-count: 1; -moz-column-count: 1;  column-count: 1;-webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px;}
    .about-column-height p strong img,.about-column-height p img{float: none !important; display: block !important;}
    .about .container .body p{margin-left: 0 !important}
    .about-column-height{padding-top: 20px;}

    /* product */
    .product h1{padding-top: 30px;}
    .product .top .left p{margin: 0 auto 20px;}
    .gallery h2{margin-top: 0}
    .product .gallery{margin-top: 20px;}
    .product .double-banner{margin-top: 0}
    .double-banner img{padding-top: 65px !important;}
    .product .container{width: 92%;}
    .product .white .container{margin-top: 15px;}
    .blog-container{padding-bottom: 10px; padding-top: 85px;}
    .product .top .left p:first-child{font-size: 14px;}
    .product .top .right ul li{display: -webkit-inline-flex;display: -ms-inline-flexbox;display: inline-flex; margin: 18px auto; width: 190px}
    .product .top .right ul li div{display: inline-block; vertical-align: top; position: static; width: 40px; padding-right: 10px; text-align: left; margin-top: -5px;}
    .product .top .right ul li div{height: auto; display: block; text-align: left}
    .product .top .right{width: 70%; float: none; margin: 0 auto; display: block; clear: both}
    .product .top .right ul{float: none; margin:  0 auto; display: table}
    .product .top .left{width: 100%; padding-bottom: 30px}
    .product .services{height: auto}
    .product .services .left .content{width: 92%; position: static; margin: 0 auto; display: block}
    .product .services .left{position: static; float: none; width: 100%}
    .product .services .left .content .buttons{position: static; display: table; margin:0 auto}
    .product .services .left .content .divider{margin-bottom:10px;}
    .product .services .right{width: 100%; float: none; position: static; clear: both; height: 270px;}
    .product .gallery .gallery-image{height: auto; margin: 0 auto;  padding: 0 5px; width: 50%; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; float: left;margin-bottom: 10px; }
    .product .gallery .gallery-image img{height: auto; width: auto; display: block}
    .product .gallery .gallery-image .overlay{left: 5px !important; right: 5px !important;}
    .product .gallery {margin-bottom: 40px;}
    .owl-carousel .owl-item img{max-width: 100%; width: auto; height: auto}
    .main-overlay .container{width: 92%}

    /* product detail page */
    .blog-container .callout-container{width: 92%}
    .blog-container .callout-container .callouts{width: 100%; height:auto; margin:.0 auto 20px;}
    .blog-container .callout-container .callouts .adjust-img{width: auto; height: auto; max-width: 75%}
    .blog-container .callout-container .callouts .buttons{ display: table; margin: 0 auto; position: static; margin-bottom: 20px;}
    .blog-container .callout-container .callouts .callout-content{width: auto; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 20px; position: static}
    .product .white .top .left iframe{width: 100% !important; max-width: 280px !important; margin-bottom: 20px; display: inline-block; vertical-align: top}
    .product .white .top .left iframe + iframe{margin-bottom: 0}
    .product .gallery{margin-bottom: 25px;}
    .product .white hr.divider{padding: 0}
    .product-partner .buttons{margin-bottom: 20px;}
    .product .product-partner{padding-bottom: 0; display: table}

    /* support page */
    .support.container{width: 92%; margin-top: 80px;}
    .support .left{width: 100%; float: none; display: block; margin: 0 auto}
    .support .right{width: 100%; float: none; display: block; max-width: 340px; margin: 0 auto}
    .support .left p{width: auto;}
    .support .left a.buttons{display: block; padding: 10px 15px; width: 100%; text-align: center;max-width: 310px; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;}

    /* partners page */
    .partners.details.container,.partners.container{width: 92%; margin-top: 80px;}
    .partners.details .left,.partners .left{width: 100%; float: none; display: block; margin: 0 auto}
    .partners.details .right,.partners .right{width: 100%; float: none; display: block; max-width: 340px; margin: 0 auto}
    .partners.details .left p,.partners .left p{width: auto;}
    .partners.details .left a.buttons,.partners .left a.buttons{display: block; padding: 10px 15px; width: 100%; text-align: center;max-width: 310px}

    /* blog page */
    .blog-container{}
    .blog-mob-filter{display: block}
    .blog-mob-filter ul{background-image: url("/content/site/about_sidebar_bkg_repeater.jpg"); -webkit-box-shadow: 0 8px 13px -4px rgba(0, 0, 0, 0.63);box-shadow: 0 8px 13px -4px rgba(0, 0, 0, 0.63); padding: 20px 0; max-width: 270px; margin: 0 auto; margin-bottom: 30px; position: relative; padding-bottom: 70px;}
    .blog-mob-filter ul li{display: block; padding: 5px 0}
    .blog-mob-filter ul li a{font-size: 16px;}
    .blog-mob-filter .fancy-select{bottom: 10px;}
    .blog-mob-filter .fancy-select div.trigger{width: 218px; margin-top: 5px;}
    .blog-mob-filter .fancy-select ul.options{width: 100%; max-width: 227px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 42px; padding: 0}
    .blog-mob-filter .fancy-select ul.options.open{min-width: inherit}
    .blog-mob-filter .fancy-select ul.options li{width: 227px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;}

    /* blog detail page */
    .blog.details .news-details .top{width:92%;}
    .blog.details .news-details .top .columns{height: auto}
    blockquote, q{font-size: 18px; line-height: 22px}
    .blog-container #load-more{max-width: 516px; width: 80%; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 20px;margin-bottom: 20px}

    /* contact page */
    .contact-info .content{padding-top: 95px}
    .contact-info .content .container{width: 92%}
    .contact-info .bottom .container.contact-form{width: 92%}
    .contact-info .content .container .left{width: 100%}
    .contact-info .content .container .right{width: 100%}
    .contact-info .content .container .right img{position: relative; top: 20px;max-width: 75%}
    .dform_container .dform_container input.text{width:100%; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; max-width: 487px; margin:0 auto;}
    .dform_textarea .dform_container textarea{width: 100%; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; margin:0 auto; padding: 10px 6px; max-width: 487px}
    .contact-info .content .container p{width: 95%}
    .contact-info .bottom .container{padding-top: 45px;}
    .contact-info  .dfcolumns .column{width: 100% !important}
    .dform_container .dform_container input.text{padding: 10px 6px; }

    /* careers page */
    .careers .top .left h2,.careers .bottom .right h2{margin-top: 25px;margin-left: 15px;}
    .careers .top div,.careers .bottom div{width: 100%}
    blockquote, q{font-size: 21px; line-height: 26px}
    .careers .bottom .right ul{margin-bottom: 15px;}
    .job-opportunities .container{width: 92%; padding: 25px 0 20px;}
    .job-opportunities{width: 100%}
    .careers .bottom .right p, .careers .top .left p{padding: 14px 15px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .careers .right ul li{margin: 0 auto; margin-left: 30px; width: calc(96% - 30px);  width: -webkit-calc(96% - 30px);}
    .job-opportunities .container a .job{width: -webkit-calc(100% - 6px); width: calc(100% - 6px); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 466px; margin: 6px; height: auto}
    .job-opportunities .container a .job ul{margin-bottom: 10px}
    .job-opportunities .container h2{margin-bottom: 15px; padding: 0 5px; -webkit-box-sizing: border-box; box-sizing: border-box;}
    .job-opportunities .container a .job h4{font-size: 15px;}

    /* careers detail page */
    .job-detail.content .bottom .container{width: 92%; padding-top: 40px;}
    input.submit{padding: 10px 57px}
    .contact-info .job-detail .container .right img{position: static; margin-bottom: 20px;}
    .contact-info .job-detail .container{width: 100%}
    .contact-info .job-detail .qualifications {width: 92%}
    .job-detail .image-container{width: 92%; margin: 0 auto; display: block; float: none;}
    .job-detail .image-container img{width: auto;}
    .job-detail .bottom:last-child h2{width: 92%;}
    .job-detail .bottom:last-child p{width: 92%;}
    .job-detail .dform{width: 92%}
    .contact-info .job-detail .container .left{width: 92%; margin: 0 auto; float: none}
    .job-detail .dform .dform_container{margin: 0 auto}
    .job-detail .image-container{height: auto}

    /* case study */
    .casestudy-body{padding-top: 90px;}
    .casestudy-body .container{width: 92%; padding-bottom: 20px;}
    .casestudy-body .container .case{width: 100%; float: none; display:block; margin-bottom: 5px; max-width: 380px; height: auto; margin: 0 auto; float: none; margin-bottom: 20px; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box;}
    .casestudy-body .container .case .inner-container{margin: 15px;}
    .casestudy-body .container #load-more{max-width: 420px;position: static; float: none; clear: both; display: table; margin: 0 auto; width: auto; }
    .casestudy-body .container #load-btn{display: inline-block; margin: 0 auto;margin-top: 10px; }
    .casestudy-body .buttons{padding: 10px 45px}
    .case-mob-nav{height: 56px}

    /* case study detail page */
    .details .case-details{width:92%}
    .details .case-details .columns p{margin: 0 auto; margin-bottom: 10px;}
    .details .case-details .top h5,.details .case-details .top p{margin-left: 0}
    .details .case-details .columns p:first-child{font-size: 13px;}
    .gallery .gallery-image{height: auto; margin:5px;  width: -webkit-calc(50% - 10px); width:calc(50% - 10px);-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .gallery{padding-bottom: 30px;  padding-top: 15px;}
    .details .callout-container a{display: inline-block; margin-bottom: 20px; vertical-align: top}
    .details .featured-products .callout-container{height: auto; padding-bottom: 20px}
    .details h1{padding-top: 25px;}
    .details .featured-products{height: auto}
    .gallery .gallery-image:hover .overlay{left: 0; right: 0;}
    .gallery .gallery-image img{height: auto; width: auto; max-width: 100%; display: block; width: 100%}
    .details .social-links{padding-bottom: 20px;}
    .details .details.casestudy-body{height: auto !important}
    .details .featured-products .container .callouts{width: 100%; max-width: 130px; display: block !important; vertical-align: top}
    .details .featured-products .callout-container{width: 92%; float: none}
    .case-mob-filter{display: block}
    .case-mob-filter .dd-container .category-dd{margin: 0 auto; width: 218px; margin-bottom: 20px; float: none}
    .case-mob-filter .dd-container .submenu{width: 225px; top: 55px; position: absolute; z-index: 1; padding-left: 0}
    .case-mob-filter .dd-container .submenu ul{width: 100%; min-width: 100px;}
    .case-mob-filter .dd-container .submenu ul li{width: 100%; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
    .case-mob-filter  .dd-container .submenu ul li:hover{margin-left: 0; padding-left: 10px;}
    .case-mob-filter ul.dd-container{background-image: url("/content/site/about_sidebar_bkg_repeater.jpg"); -webkit-box-shadow: 0 8px 13px -4px rgba(0, 0, 0, 0.63);box-shadow: 0 8px 13px -4px rgba(0, 0, 0, 0.63); padding:20px 0 50px; max-width: 270px; margin: 0 auto; margin-bottom: 30px; position: relative;}
    .case-mob-filter ul li{display: block; padding: 5px 0}
    .case-mob-filter ul li a{font-size: 16px;}
    .case-mob-filter .fancy-select{bottom: 10px; margin: 0 auto; float: none; left: 0; right: 0; width: 227px;}
    .case-mob-filter .fancy-select div.trigger{width: 218px; margin-top: 5px;}
    .case-mob-filter .fancy-select ul.options{width: 100%; max-width: 227px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 42px; padding: 0}
    .case-mob-filter .fancy-select ul.options.open{min-width: inherit}
    .case-mob-filter .fancy-select ul.options li{width: 227px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;}
    .caro{width: 92%; margin-top: 17%;}
    .main-overlay img.close{left: 0; right: 0; margin: 0 auto}
    .detail-case-filter{padding-top: 20px}
    .owl-controls{top: 40%; display: none !important}

}

/* 2. iPad responsive css 768px to 1024px
-----------------------------------------*/
@media (min-width:768px) and (max-width:1024px) {
    /* default  */
    body{min-width: inherit;}
    h1{font-size: 21px;}
    h2{font-size: 18px;}
    h3{font-size: 15px;}
    h4{}
    h5{}
    h6{}
    p{font-size: 14px;}
    p a{}
    img{max-width: 100%}
    .container{width: 100%;}
    .full-width{min-width: inherit; width: 100%; padding: 0 2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    #wrapper{min-width: inherit; width: 100%}
    .not-found.auto-height{ height: calc(100vh - 417px); height: -webkit-calc(100vh - 417px)}

    /* header part */
    #header .container{width: 100%; max-width: 960px;}
    .navbar{width: 73%; height: 80px;}
    #header .logo{}

    /* footer part */
    #footer{min-width: inherit; width: 100%; height: 75px;}
    #footer .footer-container{width: 96%}
    #footer .footer-container p{padding-top: 28px; margin: 0 auto}
    #wrapper{margin-bottom: -75px;}
    #push{height: 75px;}
    #footer .footer-container .footer-social{margin-top:22px;}

    /* home page */
    #banner .cycle-pager{max-width: 100%}
    .circle .circle-shadow{max-width: 120px; width: 100%; bottom: 21px}
    .circle .circle-image{top: -30px;}
    #banner{height: 445px;}
    #vid{min-height: inherit; height: 100%}
    #banner .banner-image{padding: 0}
    #banner .container .content-container{margin-top: 140px;}
    #home-body .white .container{width: 96%; min-width: inherit; max-width: 960px;}
    .home-products-content .callout-container,.home-blog .callout-container{width: 100%}
    #home-body .container .image-container.relative.left{max-width: 120px; width: 100%; margin: 0 auto; height: auto; min-height: 135px; float: none; display: inline-block; vertical-align: top}
    #home-body .container .left .content p{width:auto; display:block; float: none; height: auto; margin-top: 25px;}
    #home-body .container .left .content {width: -webkit-calc(100% - 135px); float: none; display: inline-block; vertical-align: top; padding-left: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; width:calc(100% - 135px);}
    #home-body .container .left{margin: 0 auto; width:73%;}
    #home-body .container .right{margin: 0 auto; width: 27%; display: inline-block; vertical-align: top; margin-top: 25px; float: none}
    #home-body .white .right .buttons{display: table; margin: 0 auto; padding: 10px 53px;}
    .home-products-content .callouts{width: 31.8%; margin: 0 5px 10px 5px;}
    .home-products-content .content-container{width: auto; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .home-blog{height: auto; padding-bottom: 20px;}
    .home-blog .callout-container .callouts{width: 31.9%; height: 460px; margin:0 5px 20px 5px;}
    .home-blog .callout-container .callouts .adjust-img{width: auto; height: auto; max-width: 70%}
    .home-blog .callout-container .callouts .callout-content{width: auto; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .home-blog .callout-container .callouts .buttons{left: 0; right: 0; display: table; margin: 0 auto; bottom: 20px;}
    .home-partners .left .content-container{width: auto; margin:35px 10px auto auto}
    .home-partners .left .content-container .buttons{padding: 10px 22px;}
    .home-partners .img-container{background-position: top center}
    .product .top .right ul li img{height: auto; max-width: 40px;}

    /* about us */
    .about .double-banner img{padding-top: 122px;}
    .about .container{width: 96%}
    .about .container .body p{margin: 0 auto; margin-bottom: 20px}
    .second-navbar{height: 42px;}
    .second-navbar ul{margin-top: 10px; min-width: inherit; width: 100%}
    .second-navbar ul li{margin: 10px 20px 10px}
    .second-navbar ul li a{padding-bottom: 10px;}
    .about .container h1{margin-top: 35px; margin-bottom: 10px;}
    .about .container h2{padding-top: 20px; margin-bottom: 30px;}
    .about .container .body p:first-child,.about .container .body p{font-size: 14px;}
    .about .quad-banner{margin-top: 35px;}

    /* product */
    .product .container{width: 96%;}
    .product .top .left p:first-child{font-size: 14px;}
    .product .top .right ul li{display: -webkit-inline-flex;display: -ms-inline-flexbox;display: inline-flex; margin: 20px auto; }
    .product .top .right ul li div{display: inline-block; vertical-align: top; position: static; width: 40px; padding-right: 10px; text-align: left}
    .product .top .right ul li div{height: auto; display: block; text-align: left}
    .product .top .right{width: 35%}
    .product .services .left{width: 50%}
    .product .services .left .content{width: 100%; right: 0; padding: 0 2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    .product .services .right{width: 50%}
    .product .gallery .gallery-image{height: auto; margin: 0 auto;  padding: 0 5px; width: 25%; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; float: left}
    .product .gallery .gallery-image img{height: auto; width: auto; display: block}
    .product .gallery .gallery-image:hover .overlay{left: 5px; right: 5px;}
    .product .gallery {margin-bottom: 40px;}
    .main-overlay .container{width: 96%}

    .owl-carousel .owl-item img{height: auto; width: auto; max-width: 100%; }
    .caro{width: 100%; height: auto}
    .main-overlay img.close{left: 49%; top: -17%}
    .owl-controls.clickable{top: 45%; width: auto; right: 0; left: 0}
    .owl-prev{left: -40px}
    .owl-next{right: -40px}
    .owl-controls,.owl-controls.clickable {height: 30px;left: 60px; position: absolute; top: 48%; width: 60%; margin: 0 auto; left: 0; right: 0}

    /* product detail page */
    .blog-container .callout-container{width: 96%}
    .blog-container .callout-container .callouts{width: 31.4%; height:auto; margin:0 5px 20px 5px; padding-bottom: 50px; display: inline-block; vertical-align: top; float: none}
    .blog-container .callout-container .callouts .adjust-img{width: auto; height: auto; max-width: 70%}
    .blog-container .callout-container .callouts .callout-content{width: auto; padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .blog-container .callout-container .callouts .buttons{left: 0; right: 0; display: table; margin: 0 auto; bottom: 20px;}
    .product .white .top .left iframe{width: 48% !important; display: inline-block; vertical-align: top}
    .product .white .divider{padding: 15px 0 !important}

    /* support */
    .support.container{width: 96%}
    .support .left{width: 59%; float: none; display: inline-block; vertical-align: top; padding-right: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; }
    .support .right{width: 39%; float: none; display: inline-block; vertical-align: top}
    .support .left p{width: auto;}
    .support .left a.buttons{display: block; padding: 10px 15px; width: 100%; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

    /* partners page  nad detail page*/
    .partners.details.container,.partners.container{width: 96%}
    .partners.details  .left,.partners .left{width: 59%; float: none; display: inline-block; vertical-align: top; padding-right: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; }
    .partners.details .right,.partners .right{width: 39%; float: none; display: inline-block; vertical-align: top}
    .partners.details .left p,.partners .left p{width: auto;}
    .partners.details .left a.buttons,.partners .left a.buttons{display: block; padding: 10px 15px; width: 100%; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

    /* blog page */
    .dd-container .fancy-select{width: 210px;}
    .fancy-select div.trigger::after{top: 7px;}
    .second-navbar.blog-bar ul li:first-child{left: 0;  bottom: -9px}
    .second-navbar.blog-bar ul li:nth-child(4){margin-right: 141px;}
    .second-navbar.blog-bar ul li{margin: 10px 15px}
    .fancy-select div.trigger.open::after{top: 12px; right: 20px;}
    .fancy-select div.trigger{width: 165px; margin-top: 56px; padding: 7px 0 5px 10px}
    .fancy-select ul.options{width: 100%; max-width: 175px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .fancy-select ul.options.open{min-width: inherit}
    .blog-bar .fancy-select ul.options li{width: 175px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;}
    .blog.details .double-banner img{padding-top: 122px;}

    /* blog detail page */
    .blog.details .news-details .top{width:96%;}

    /* contact page */
    .contact-info .content .container{width: 96%}
    .contact-info .bottom .container.contact-form{width: 96%}
    .dform_container .dform_container input.text{width: calc(100% - 10px); width: -webkit-calc(100% - 10px); -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; max-width: 487px; margin:0 5px;}
    .dform_textarea .dform_container textarea{width: calc(100% - 10px); width: -webkit-calc(100% - 10px); -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box; margin:0 5px;}
    .dftop_label .dform_label{margin-left: 5px !important}
    .dform_element .dform_error{margin-left: 5px;}
    .contact-info .content .container p{width: 95%}
    .contact-info .content .container .right img{top: 110px;}
    .contact-info .bottom .container{padding-top: 45px;}

    /* careers page */
    .careers .top .left h2,.careers .bottom .right h2{margin-top: 25px;margin-left: 15px;}
    .careers .top div,.careers .bottom div{width: 100%}
    blockquote, q{font-size: 21px; line-height: 26px}
    .careers .bottom .right ul{margin-bottom: 15px;}
    .job-opportunities .container{width: 96%}
    .job-opportunities{width: 100%}
    .careers .bottom .right p, .careers .top .left p{padding: 14px 15px; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .careers .right ul li{margin: 0 auto; margin-left: 30px}

    /* careers detail page */
    .job-detail.content .bottom .container{width: 96%}
    .contact-info .job-detail .container{width: 100%}
    .contact-info .job-detail .qualifications {width: 96%}
    .job-detail .image-container{width: 100%; height: auto}
    .contact-info .job-detail .container .right img{top:30px}
    .contact-info .job-detail .image-container{height: auto; width: 100%; max-width: 410px; margin-right: 0}
    .job-detail .bottom:last-child h2{width: 96%;}
    .job-detail .bottom:last-child p{width: 96%;}
    .job-detail .dform{width: 96%}
    .contact-info .job-detail .container .left{padding-left: 15px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
    .job-detail .dform .dform_container{margin: 0 auto}

    /* case study */
    .casestudy-body .container{width: 96%}
    .casestudy-body .container .case{width: 48.1%; float: none; display: inline-block; vertical-align: top; margin-bottom: 5px; height: 200px;}
    .casestudy-body .container .case .inner-container{margin: 15px;}
    .casestudy-body .container #load-more{max-width: 420px;position: static; float: none; clear: both; display: table; margin: 0 auto; margin-top: 10px;}
    .casestudy-body .container #load-btn{ margin: 0 auto;margin-top: 20px; clear: both; display: -webkit-flex; -webkit-flex-direction: row-reverse;display: flex; flex-direction: row-reverse;}
    .casestudy-body .container #load-btn.hide{display: none}
    .case-mob-nav{height: 56px}

    /* case study detail page */
    .details .case-details{width:96%}
    .gallery .gallery-image{height: auto; margin: 0 5px 40px; width: -webkit-calc(25% - 10px); width:calc(25% - 10px);-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    .gallery .gallery-image:hover .overlay{left: 0; right: 0;}
    .gallery .gallery-image img{height: auto; width: auto; max-width: 100%; display: block}
    .details .case-details .columns p:first-child{font-size: 14px;}
    .details .details.casestudy-body{height: auto}
    .details .featured-products .container .callouts{vertical-align: top}
    .dd-container .category-dd{height: 25px; margin-top: 56px;}
    .double-banner img{padding-top: 140px; }
    .case-mob-nav .dd-container .fancy-select,.case-details .dd-container .fancy-select{width: 180px;}
    .case-mob-nav .dd-container,.case-details .dd-container{width: 500px;}
    .caro{width: 92%}
    .main-overlay img.close{left: 0; right: 0; margin: 0 auto}
    .detail-case-filter{padding-top: 20px}

    .about hr.horizontalrule{display: inline-block; margin: 20px 0}
    /*input.submit{border:2px solid #ababab}*/
    .fancy-select{right: -95px}
    .fancy-select div.trigger{margin-top: 61px;}
    .fancy-select ul.options.open{top: 90px}


}

/* 3.  mobile responsive css 320px to 480px
----------------------------------------------------*/
@media (min-width:320px) and (max-width:480px) {

    .owl-carousel .owl-item img{max-height: 220px}
    .about h4 img{display: block !important; float: none !important; }

}

/* 4. Other media-query
------------------------------------------------*/
@media (width:1024px){#vid{height:130%;}
    .home-products-content .callouts{width: 32.3%}
    .home-blog .callout-container .callouts{height: 500px;}
    .not-found.auto-height{ height: calc(100vh - 471px); height: -webkit-calc(100vh - 471px)}

    .home-blog .callout-container .callouts{width: 31%;}
    .blog-container .callout-container .callouts{width: 31%}
    .contact-info .content .container .right img{top: 20px;}
    .careers .top div,.careers .bottom div{width: 50%}
    .gallery .gallery-image:hover .overlay{right: 5px}
    .owl-prev{left:0}
    .owl-next{right: 0}

}

@media (min-width:320px) and (max-width:480px) {

    .home-partners .left .content-container .buttons{display: table;}
    #home-body .container .left .content {width:100%; float: none; display:block; padding: 0; margin-bottom: 10px;}
    #home-body .container .left .content p{width:auto; display:block; float: none; height: auto; margin-top: 5px;}
    .contact-info .content h1{padding: 0 15px; -webkit-box-sizing: border-box;   box-sizing: border-box;}


}