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

/* Table of Contents
-----------------------------
1. Mobile
2. iPad
*/

@media (max-width:960px) {
  #navigation {right: 0}
  #navigation ul li {padding: 0 10px}
} 
@media (max-width:900px) {
  #navigation a {letter-spacing: 0}
}
@media (max-width:850px) {
  #navigation ul li {padding: 0 5px}
}  

/* 1. Mobile responsive css 767px
-----------------------------------*/
@media (max-width:767px) {

    body{min-width: inherit;padding-top: 64px;}
    .container{width: 100%;padding-left: 13px;padding-right: 13px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
    #wrapper{margin-bottom: 0;}
    h3{font-size: 20px;}
    .preloader{display: block;}

    /*----   header   ----*/
    /* mobile menu */
    .mobile-nav, #menu-trigger{display: block;}
    #menu-trigger{display: block;width: 30px;height: 30px;position: absolute;-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;z-index: 999;right: 10px;top: calc(50% - 15px);-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;border-radius: 5px}
    .mobile-nav .shield{position: fixed;top: 0;right: 0;width: 0;height: 100%;background: rgba(0, 0, 0, 0.80);-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;z-index: 99999;}
    .mobile-nav .shield.open{width: 100%;}
    #menu-trigger.open{z-index: 9999999;top: 6px;}
    #menu-trigger span {width: 26px;height: 2px;display: block;position: relative;top: 50%;margin-top: -1px;left: 0;margin: auto;}
    #menu-trigger span, #menu-trigger span:before, #menu-trigger span:after {background: #03b4e4;}
    #menu-trigger span:before, #menu-trigger span:after {content: '';position: absolute;top: -7px;left: 0;width: 100%;height: 2px;webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
    #menu-trigger span:after {bottom: -7px;top: initial;}
    #menu-trigger.open span:after, #menu-trigger.open span:before {background: #fff;}
    #menu-trigger.open span:before {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);top: 0;}
    #menu-trigger.open span:after {transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);bottom: 0;}
    #menu-trigger.open span {background: rgba(0,0,0,0.0);}
    #mobile-navbar{;position: fixed;top: 0;width: 100%;height: 100%;right: -100%;box-sizing: border-box;z-index: 99999;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;box-shadow: 0px 0px 20px 6px rgb(45, 44, 44);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0;-khtml-opacity: 0;  opacity:0;}
    #mobile-navbar.open{right: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity:1;opacity:1;}
    #mobile-navbar:after{content: '';position: fixed;top: 0;right: 0;width: 0;height: 47px;z-index: 99;background: rgba(77, 78, 78, 0.93);-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.open:after{width: 100%;}
    #mobile-navbar nav{padding-bottom: 20px;margin: 0;background: rgba(77, 78, 78, 0.93);position: absolute;top: 47px;right: 0;width: 100%;height: 100%;overflow-y: auto;box-sizing: border-box;}
    #mobile-navbar ul ul{display: none;background:#3A3C3C;position: relative;top: 0;border-width: 0;width: 100%;box-shadow: none;}
    #mobile-navbar ul ul ul{background:#3A3C3C}
    #mobile-navbar li{border-bottom:1px solid rgb(92, 97, 97);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: 12px;right: 17px;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;height: 2px;width: 9px;background: #ffffff;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: width 0.3s, -webkit-transform 0.3s;-moz-transition: width 0.3s, -moz-transform 0.3s;transition: width 0.3s, transform 0.3s;}
    #mobile-navbar li em:before{    right: 5px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
    #mobile-navbar li em:after{    right: 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
    #mobile-navbar li em.toggled:before, #mobile-navbar li em.toggled:after{width: 14px;}
    #mobile-navbar li em.toggled:before{-webkit-transform: translateX(5px) rotate(-45deg);-moz-transform: translateX(5px) rotate(-45deg);-ms-transform: translateX(5px) rotate(-45deg);-o-transform: translateX(5px) rotate(-45deg);transform: translateX(5px) rotate(-45deg);}
    #mobile-navbar li em.toggled:after {    -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
    #mobile-navbar li em.toggled:before, #mobile-navbar li em.toggled:after{background:#00b4e5}
    #mobile-navbar li a{color: #fff;padding: 10px 0px 8px 15px;margin-right: 46px;display: block;text-transform: uppercase;line-height: 20px;font-size: 14px;font-weight: 400;letter-spacing: 0.09em;font-family: 'Montserrat', sans-serif}
    #mobile-navbar li li{border-color: rgb(69, 68, 68)}
    #mobile-navbar li li a{text-transform: none;padding-left: 20px;margin-right: 0;padding-right: 10px;}
    #mobile-navbar li li li a{padding-left: 25px;margin-right: 0;}
    #mobile-navbar li a.active{color:#00b4e5;}
    header nav li ul li a:hover, header nav li ul li a.active{color: #00b4e5;background-color: transparent}
    header nav{display: none;}
    header #mobile-navbar nav{display: block;}
    header nav ul{text-align: left;}
    #mobile-navbar li a.current{color: #e4ae0a !important;}
    .overflow-hidden{overflow: hidden;height: 100%;}
    #mobile-navbar a.btn{display: block;position: absolute;z-index: 9999;top: 10px;left: 10px;color: #fff;background: #00A6DF;width: 135px;text-align: center;padding: 4px 0px 9px 0px;border-radius: 6px;letter-spacing: 0.04em;box-shadow: -2px -2px 3px #4D4E4E inset;font-weight: 700;text-shadow: 1px 2px 1px #4D4E4E;}

    /*--- header ----*/
    #header{top: 0;height: 64px;}
    #brand{width: 140px;left: 13px;top: 5px;}
    #brand img{max-width: 100%}
    #header .container{height: inherit}
    #header_start, #navigation{display: none;}

    /*--- footer ----*/
    #footer_wrapper{margin-top: 0 !important;height: auto;}
    #footer_wrapper .clear{display: none;}
    #footer{width: 100%;padding-left: 13px;padding-right: 13px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
    #footer_brand {width: 217px;float: initial;margin: 0 auto;padding-top: 0;}
    #footer_social{width: 100%;float: initial;display: block;padding: 10px 0;margin: 10px 0;}
    #footer_social p{width: 165px;margin: auto}
    #footer_newsletter{width: 100%;float: initial}
    #footer_newsletter input{display: inline-block;vertical-align: middle;width: calc(100% - 102px)}
    #footer_newsletter input.submit{display: inline-block;vertical-align: middle;}
    #footer_copyright p{float: initial}
    #footer_mobility{float: initial}

    /*--------- home page ------------*/
    #banner_shadow{min-width: 100%;}
    #home #callouts .callout {width: 100%;margin: 0 auto 40px auto;padding: 34px 15px 15px 15px;height: auto;box-sizing: border-box;max-width: 400px;float: initial;}
    #home #callouts {padding: 36px 0 0 0;}
    #home #services{min-width: 100%;height: auto;padding-top: 25px;}
    #home #services .service{    display: block;margin: 12px auto;width: 200px;height: 200px;border-radius: 50%;}
    #home #services .service .service_image{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 50%}
    #home #services .service .service_title{    width: 100%;height: 100%;background: rgba(0,0,0,.2);border-radius: 50%;}
    #home #services .background{min-width: 100%;height: 100%;background-image: url(/images/site/img_services_banner_v3.jpg);background-repeat: no-repeat;background-size: cover;}
    #home #services .background img{display: none;}

    /*--------- about page ------------*/
    .about #banner ,.staff #banner, .blog #banner, .services #banner, .performance #banner{min-width: 100%;height: calc(100vw / 2);min-height: 210px;}
    .mainbar{width:100% !important;float: initial;padding-bottom: 30px;}
    .about .container {margin: 25px auto auto auto;}
    .sidebar{float: initial;width: 100% !important;margin-bottom: 30px;}
    .side-nav .fb_iframe_widget iframe{width: 100% !important;}
    .about h3{margin-bottom: 10px;}

    /*--------- staff page ------------*/
    .staff .staff-callout .staff-pic{width: 100px;height: 100px;z-index: 99;margin-right: 10px;}
    .staff .staff-callout .staff-pic img{width: 100%;left: 0;}
    .staff .staff-callout .staff-pic a{width: 100%;height: 100%;}
    .staff .staff-callout .content {width: calc(100% - 110px);}
    .staff .staff-callout .blue-bar {display: none;}    
    .staff .staff-callout{margin: 0 auto 20px;padding: 0 0 10px 0;height: auto;border-bottom: 2px solid #00b4e5}
    .staff .staff-callout:last-child{border-width: 0}
    .staff-callout .content p{margin-bottom: 10px;}
    .staff-callout .content h3 {margin: 20px 0px 10px;}
    /* detail */
    .blog .details .left.content{width: 100%;}
    .blog .container.details{padding-top: 0;margin: 25px auto auto auto;padding-bottom: 20px;}
    .blog .container.details .left.content p img{float: initial !important;display: block;max-width: 100%;margin: 15px 0 !important;}
    .services .container .content img{margin: 15px 0 !important;} 

    /*--------- services page ------------*/
    .services .services-callout{width:100%;margin: auto;height: auto;padding-bottom: 25px;}
    .services .services-callout .bottom p{width: 100%}
    .services .services-callout .bottom h1{margin-bottom: 6px;}
    .services .container .content img{ max-width: 100%;display: block;float: none !important;margin-right: 0 !important;margin-left: 0 !important;}
    .services .container .content figure{max-width: 100%; display: block;float: none !important}
    .services .container .content iframe{width: 100% !important;display: block;margin-bottom: 15px;height: calc(100vw / 2) !important}
    .services .container{margin-top: 25px;}
    .services .details .content h3 br{display: none;}

    /*--------- performance-lab page ------------*/
    .performance .performance-callout{width:100%;margin: auto;height: auto;padding-bottom: 25px;}
    .performance .performance-callout .bottom p{width: 100%}
    .performance .performance-callout .bottom h1{margin-bottom: 6px;}
    .performance .container .content img{ max-width: 100%;display: block;float: none !important;margin-right: 0 !important;margin-left: 0 !important;}
    .performance .container .content figure{max-width: 100%; display: block;float: none !important}
    .performance .container .content iframe{width: 100% !important;display: block;margin-bottom: 15px;height: calc(100vw / 2) !important}
    .performance .container{margin-top: 25px;}
    .performance .details .content h3 br{display: none;}

    /*--------- recovery page ------------*/ 
    .term_conditions ul{padding-left: 17px;}
    .term_conditions {padding-bottom: 30px;}

    /*--------- contact page ------------*/
    .contact .container{width: 100%;margin-top: 15px;margin-bottom: 20px;}
    .contact #map{min-width: 100%;min-height: 450px;height: 450px}
    .contact #map iframe{min-width: 100%;min-height: 450px;height: 450px !important}
    .contact .container .top, .contact .container .bottom{width: 100%;box-sizing: border-box;padding: 15px;}
    .contact .container .top{padding-left: 40px;}
    #new_submission .dform_container input.text, #new_submission .dform_container textarea{width: 100%;box-sizing: border-box;display: block;padding: 6px;}

    /*--------- blog page ------------*/
    .blog .container{margin-top: 15px;}
    .blog .blog-callout{width: 100%;max-width: 600px;}
    .blog .blog-callout .content img{max-width: 100%}
    .blog .blog-callout .content{width: calc(100% - 56px);padding-bottom: 0;}
    .blog .blog-callout .content h2{font-size: 16px;}
    /* detail */
    .date-social:after,.date-social:before{display: table;content: ''}
    .date-social:after{clear: both;}
    .date-social{position: relative;margin-bottom: 20px;width: 100%;}
    .details .content figure{float: initial !important;margin: 5px 0 !important; }
    .details .content img{margin: 0;max-width: 100%}
    img{max-width: 100%}

}

/* 2. iPad responsive css 768px to 1024px
-----------------------------------------*/
@media (min-width:768px) and (max-width:1024px) {

    /*--- default ---*/
    body{min-width: inherit;}
    .container{width: 100%;padding-left: 13px;padding-right: 13px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

    /*--- header ---*/
    #header .container{max-width: 960px}
    #brand{width: 150px;left: 23px;}
    #brand img{max-width: 100%;}
    #navigation{margin-right: 13px;}
    #header_start{right: 26px;}

    /*--- footer ---*/
    #footer{width: 100%;padding-left: 13px;padding-right: 13px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} 
    #footer_brand{width: 220px;margin-right: 0}
    #footer_social{    width: calc(100% - 543px);box-sizing: border-box;padding: 15px 14px 0;}
    #footer_newsletter{width: 293px;}
    div#footer_social p {width: 165px;margin: auto;}

    /*--------- home page ------------*/
    #banner_shadow{min-width: 100%;}
    #home #callouts .callout {width: calc(33.33% - 8px);box-sizing: border-box;height: inherit;padding: 40px 10px 20px 10px;margin: 0 4px;min-height: 308px;}
    #home #services{min-width: 100%}
    #home #services .service{ width: 138px;height: 138px;    margin: 0 3px;    border-radius: 50%;}
    #home #services .service .service_title{width: 100%;height: 100%;}
    #home #services .service .service_title p{font-size: 15px;font-weight: 400;}
    #home #services .service .service_image{position: absolute;top:0;left: 0;width: 100%;height: 100%;}

    /*--------- about page ------------*/
    .about #banner , .staff #banner, .blog #banner, .services #banner{min-width: 100%;height: calc(100vw / 2);}
    .mainbar{max-width: calc(100% - 240px);box-sizing: border-box;padding-right: 30px;}

    /*--------- staff page ------------*/
    .staff .staff-callout .staff-pic{width: 110px;height: 110px;z-index: 99;}
    .staff .staff-callout .staff-pic img{width: 100%;left: 0;}
    .staff .staff-callout .staff-pic a{width: 100%;height: 100%;}
    .staff .staff-callout .content {width: calc(100% - 130px);}
    .staff .staff-callout .blue-bar {height: 100%;bottom: 0;left: 53px;}    
    .staff .staff-callout{margin: auto;padding: 0 0 10px 0;}

    /*--------- services page ------------*/
    .services .services-callout{width: calc(33.33% - 20px)}
    .services .services-callout .bottom p{width: 100%}
    .services .container .content img{max-width: 100%; display: block;}
    .services .container .content iframe{width: 100% !important;display: block;margin-bottom: 15px;}
    .services .details .left.content figure{margin-left: 0;margin-right: 0;float: left !important}

    /*--------- performance-lab page ------------*/
    .performance .performance-callout{width: calc(33.33% - 20px)}
    .performance .performance-callout .bottom p{width: 100%}
    .performance .container .content img{max-width: 100%; display: block;}
    .performance .container .content iframe{width: 100% !important;display: block;margin-bottom: 15px;}
    .performance .details .left.content figure{margin-left: 0;margin-right: 0;float: left !important}

    /*--------- recovery page ------------*/
    .mount-table{ box-sizing: border-box;padding: 0 12px !important; }
    .mount-table.no-margin ul{width: 25% !important;}
    .mount-table ul li:nth-child(1){font-size: 16px !important;line-height: 24px;margin-bottom: 14px;}
    .term_conditions ul{padding-left: 17px;}

    /*--------- contact page ------------*/
    .contact .container{width: 100%;}
    .contact .container.contactus_form{position: absolute;top: 135px;z-index: 999;left: 0;margin: 0;width: initial}
    .contact #map{min-width: 100%}

    /*--------- blog page ------------*/
    .blog .blog-callout{width: 100%;max-width: 600px}
    .blog .blog-callout .content img{max-width: 100%}
    .blog .blog-callout .content{width: calc(100% - 56px)}
    .blog .blog-callout .content h2{font-size: 18px;}
    /* detail */
    .details .content img{max-width: 100%}
}