@media only screen and (min-width: 768px) and (max-width: 1024px)/* Smaller than standard 960 (devices and browsers) */ {

    /* Home */
    body{ min-width: inherit;}
    .wrapper{ width: 96%;}
    header .brand{ width: 370px;}
    header nav{ padding: 22px 0 0 15px; width: 345px;}
    header nav li{ padding: 0 12px 10px;}
    header nav li a{ font-size: 14px;}
    #home_content .home_slider li{ width: 100%; padding-right: 0; background-size: cover !important;}
    #home_content .home_slider_container .wrapper.pos_rel{ left: 0;}
    #home_content .home_slider li .caption{ padding: 40px 20px 22px 20px;}
    #home_content .home_slider li .caption h2{ font-size: 26px; line-height: 30px;}
    #home_content .home_slider li .caption em{ font-size: 14px;}
    #home_content .about_conainer .graphics{ width: 100%; padding-right: 0;}
    #home_content .about_conainer .graphics img{ max-width: 100%;}
    #home_content .about_conainer{ padding-bottom: 30px;}
    #home_content .btm_container ul{ margin-top: 40px; text-align: center;}
    #home_content .btm_container ul li{ float: none; display: inline-block; vertical-align: top; margin: 0 15px 15px 15px;}
    #home_content .btm_container h1::before, #home_content .btm_container h1::after{ width: 35%;}
    footer .unit-1{ width: 120px;}
    footer .unit-2{ padding: 0 20px 0 0;}
    footer .unit-3{ padding: 0;}

    /* About */
    #inner_content .banner .wrapper{ width: 100%; height: auto; padding-right: 0; margin-bottom: 40px;}
    #inner_content .banner .wrapper img#about{ width: 100%;}
    #inner_content .sidebar{ padding-right: 2%; width: 28%;}
    #inner_content .mainbar{ width: 67%; padding-left: 2%; padding-right: 0;}
    #inner_content .mainbar img{ max-width: 100%;}
    #inner_content .sidebar blockquote{ width: auto; padding: 10px 10px; font-size: 18px; line-height: 30px;}

    /* team */
    #inner_content .list_item .avtar{ margin: 0 2%;}
    #inner_content .list_item .description{ width: 50%; padding-right: 2%;}
    #inner_content .item_wrapper{ padding-left: 0;}
    #inner_content .item_wrapper .item_left{ width: 32%;}
    #inner_content .item_wrapper .item_right{ width: 66%;}

    /* projects */
    #inner_content .sub_navbar a{ margin: 0 7px;}
    #inner_content .projects_container{ padding-left: 0;}
    #inner_content .projects_container .box{ width: 48%; margin-right: 2%;}
    #inner_content .projects_container .box img{ max-width: 100%;}
    #inner_content.project_detail .top_container .wrapper{ width: 96%; padding: 0;}
    #inner_content.project_detail .canvas img{ max-width: 100%;}
    #inner_content .gallery_wrap{ width: 96%; padding-left: 0;}
    #inner_content.project_detail .sidebar{ width: 30%; margin-right: 0;}
    #inner_content.project_detail .mainbar{ width: 67%; }

    #home_banner{ width: 100% !important;}
    div#slider-nav{ left: 40px !important;}
    .project_wrapper{ width: 96% !important;}

    /* Contact */
    #inner_content .top_wrap{ padding: 20px 0 20px 0;}
    #inner_content .top_wrap .unit.first{ padding: 25px 2% 0 0; width: 30%;}
    #inner_content .top_wrap .unit{ width: 30%; padding-left: 2%;}
    #inner_content .bottom_wrap{ text-align: center;}
    #inner_content .bottom_wrap .unit{ width: 220px; margin-right: 10px; height: 220px; background-size: cover !important;}
    #inner_content .bottom_wrap .unit .overlay{ padding: 20% 10% 0; height: 80%; width: 80%;}

    /* 404 */
    #inner_content.thank_wrap .mainbar{ padding-left: 0; padding-right: 2%;}
    #inner_content.thank_wrap .sidebar{ width: 30%; padding-left: 0;}
    #inner_content .mainbar ul{ list-style-position: inside;}
    #inner_content .banner .wrapper img{ max-width: 100%;}

}

@media screen and (max-width: 767px)/* max-width 767px, mobile-only styles, use when QAing mobile issues */{

    /* Mobile Menu */
    .mobile_menu_icon{ display:block !important; }
    .mobile_menu_icon span {position: absolute; top: 50%; left: 25%; display: block; padding: 0; width: 30px; height: 2px; background-color: #363636; font-size: 0px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background-color 0.3s; transition: background-color 0.3s;}
    .mobile_menu_icon span:after {position: absolute; left: 0px; width: 100%; height: 100%; background: #363636; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; top: 3px;}
    .mobile_menu_icon span:before{position: absolute; left: 0px; width: 100%; height: 100%; background: #363636; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; top: -3px;}
    .mobile_menu_icon span:after { -webkit-transform: translateY(250%); transform: translateY(250%);}
    .mobile_menu_icon span:before {-webkit-transform: translateY(-250%); transform: translateY(-250%);}
    .mobile_menu_icon.active span{-webkit-background: none; 	-moz-background: none; 	-ms-background: none; 	-o-background: none;	background: none;}
    .mobile_menu_icon.active span:before{-webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); background: #fff;}
    .mobile_menu_icon.active span:after{-webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); top: -2px; background: #fff;}
    ul.mobile_nav{ border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 10px; padding: 20px 30px 0; overflow: scroll; height: 100%;}
    ul.mobile_nav li{ display: block;padding: 0;text-align: left; position: relative;}
    ul.mobile_nav li a{ color: #E5E3E0; font-size: 14px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; display: block; padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
    ul.mobile_nav li a.active{ background: #fff; color: #000;}

    ul.mobile_nav li em{ position: absolute; right: 0; display: block; width: 50px; height: 42px; top: 0; z-index: 99;}
    ul.mobile_nav li em.level_1:after{ position: absolute; content: ''; width: 14px; height: 2px; left: 45%; top: 20px; background: #FBBE60;}
    ul.mobile_nav li em.level_1:before{ position: absolute; content: ''; width: 14px; height: 2px; left: 45%; top: 20px; background: #FBBE60; transform: translateY(0px) rotate(90deg); -moz-transform: translateY(0px) rotate(90deg); -webkit-transform: translateY(0px) rotate(90deg); -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
    ul.mobile_nav li em.level_1.active:before{ transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -webkit-transform: translateY(0px) rotate(0deg); opacity: 0;}
    ul.sub_nav{ display:none; padding:10px 5px; background:rgba(255, 255, 255, 0.1); max-height: 180px; overflow-y: scroll;}
    ul.sub_nav li a{ font-size:14px; padding:0 10px 0 20px; border-bottom: none; color: #fff; text-transform: none; letter-spacing: 0; line-height: 30px;}
    ul.sub_nav li a.current{ background: #202020;}
    ul.sub_nav li a:hover{  color: #fff;}
    ul.sub_nav li a span{ padding: 0 0 2px; margin: 0 0 2px; color: #726960; font-size: 16px; border-bottom: 1px solid #423930;}
    .mobile_menu_icon{ display: block;}
    .social {float: right; padding: 13px 0 0 0; position: absolute; left: 40px; top: 0;}
    .social ul li {list-style: none; display: inline-block; padding-right: 15px;}

    /* Home */
    body{ min-width: inherit;}
    .wrapper{ width: 92%;}
    header .brand{ width: 260px;}
    header nav{ padding: 22px 0 0 15px; width: 345px; display: none;}
    header nav li{ padding: 0 12px 10px;}
    header nav li a{ font-size: 14px;}
    #home_content .home_slider li{ width: 100%; padding-right: 0; background-size: 100% auto !important; height: auto; padding-top: 61%;}
    #home_content .home_slider_container .wrapper.pos_rel{ left: 0;}
    #home_content .home_slider li .caption{ padding: 20px 20px 22px 20px; position: relative; top: 0; width: 100%; box-sizing: border-box; min-height: 170px;}
    #home_content .home_slider li .caption .common_btn{ float: none;}
    #home_content .home_slider li .caption::after{ top: 15px; left: 50%; margin-left: -20px;}
    #home_content .home_slider li .caption h2{ font-size: 20px; line-height: 26px; text-align: center;}
    #home_content .home_slider li .caption em{ font-size: 14px; margin: 10px 0;}
    #home_content .about_conainer .graphics{ width: 100%; padding-right: 0; height: auto;}
    #home_content .about_conainer .graphics img{ max-width: 100%;}
    #home_content .about_conainer{ padding-bottom: 30px; clear: both; padding-top: 30px;}
    #home_content .btm_container ul{ margin-top: 40px; text-align: center;}
    #home_content .btm_container ul li{ float: none; display: inline-block; vertical-align: top; margin: 0 15px 15px 15px !important;}
    #home_content .btm_container h1::before, #home_content .btm_container h1::after{ width: 20%;}
    footer .unit-1{ width: 120px; margin-bottom: 10px;}
    footer .unit-2{ padding: 0 0 10px 0; width: 100%;}
    footer .unit-3{ padding: 0;}
    header .brand a{ padding: 15px 10px 5px 10px;}
    header::after{ width: 40%; display: none;}
    #home_content .home_slider li .btm_caption{ position: relative; bottom: 8px; padding: 20px 10px; box-sizing: border-box; font-size: 14px;}
    #home_content .home_slider li .btm_caption::after{ bottom: 10px; height: 70px;}
    footer .unit-4{ width: 100%; margin-left: 0;}
    footer{ text-align: center;}
    #home_content .home_slider_container{ height: auto; clear: both;}
    #home_content .home_slider_container::after{ display: none;}
    #home_content h1{ font-size: 20px; letter-spacing: 2px;}
    #home_content{ margin-top: 48px;}
    #main_container{ height: auto;}

    /* About */
    #inner_content .banner .wrapper{ width: 100%; height: auto; padding-right: 0; margin-bottom: 20px;}
    #inner_content .banner .wrapper img#about{ width: 100%;}
    #inner_content .sidebar{ padding-right: 0; width: 100%;}
    #inner_content .mainbar{ width: 100%; padding-left: 0; padding-right: 0;}
    #inner_content .mainbar img{ max-width: 100%;}
    #inner_content .sidebar blockquote{ width: auto; padding: 10px 30px; font-size: 18px; line-height: 30px;}
    #inner_content h1{ font-size: 20px; letter-spacing: 2px; padding-top: 0;}
    header{ margin-top: -48px;}
    #inner_content{ margin-top: 48px;}

    /* team */
    #inner_content .list_item .avtar{ margin: 0 2%;}
    #inner_content .list_item .description{ width: 50%; padding-right: 2%;}
    #inner_content .comp_overview{ padding: 0 10px 20px;}
    #inner_content h1::after{ top: 50%;}
    .common_btn{ float: right;}
    #inner_content .list_item{ clear: both; overflow: hidden; margin-top: 30px;}
    #inner_content .banner .wrapper img#team{ width: 100%;}
    #inner_content .item_wrapper{ padding-left: 0;}
    #inner_content .item_wrapper .item_left{ width: 32%; margin-right: 2%;}
    #inner_content .item_wrapper .avtar{ width: 100%; height: auto;}
    #inner_content .item_wrapper .item_left img{ max-width: 100%;}
    #inner_content .item_wrapper .item_right{ width: 65%;}

    /* awards */
    #inner_content .award_list{ padding-left: 0;}
    #inner_content .award_list .award_detail{ margin: 0; width: 100%;}
    #inner_content h5{ margin-bottom: 0;}
    #inner_content p{ padding: 10px 0;}
    #inner_content.cmp_award{ padding-top: 55px;}

    /* projects */
    #inner_content .sub_navbar a{ margin: 5px 0; display: block;}
    #inner_content .projects_container{ padding-left: 0;}
    #inner_content .projects_container .box{ width: 48%; margin-right: 2%; height: auto; margin-bottom: 20px !important;}
    #inner_content .projects_container .box img{ max-width: 100%;}
    #inner_content .projects_container .caption{ width: 100%; box-sizing: border-box; padding: 0 20px 10px; position: relative; height: auto;}
    #inner_content .projects_container .caption .common_btn{ float: none;}
    #inner_content .projects_container .box img{ display: block;}
    #inner_content .projects_container .box:hover .caption{ height: auto; padding-top: 0;}
    #inner_content .projects_container h4{ padding: 10px 0 0;}
    #inner_content .paginate{ margin: 10px 0; }
    #inner_content.project_landing .comp_overview{ padding: 10px;}
    #inner_content.project_detail .top_container .wrapper{ width: 92%; padding: 0;}
    #inner_content.project_detail .canvas img{ max-width: 100%;}
    #inner_content .gallery_wrap{ width: 92%; padding-left: 0; text-align: center; padding-top: 4px;}
    #inner_content.project_detail .sidebar{ width: 100%; margin-right: 0; padding: 10px 0; margin-top: 0;}
    #inner_content.project_detail .mainbar{ width: 100%; padding-left: 0;}
    #inner_content.project_detail h1{ font-size: 16px; margin-bottom: 20px;}
    #inner_content.project_detail h1::after{ bottom: -10px;}
    #inner_content .gallery_wrap a{ margin: 4px 2px 0; width: 140px;}
    #inner_content .lead_back{ margin-bottom: 0;}
    #slider-nav #next:hover, #slider-nav #prev:hover{ background-position: 0 0;}
    #slider-nav #prev.active{ background-position: 0 -56px;}
    #slider-nav #next.active{ background-position: 0 -56px;}

    #home_banner{ width: 100% !important;}
    div#slider-nav{ left: 40px !important; bottom: -96px !important;}
    .project_wrapper{ width: 92% !important;  padding-bottom: 40px;}
    #home_banner .home_slide_content{ width: 300px; max-height: 200px;}
    #home_banner .home_slide_content img{ max-width: 100%; max-height: 200px;}
    #inner_content h1 span{ padding: 0 2%; width: 60%; display: inline-block;}
    #inner_content.project_detail h1 span{ display: block; width: 100%; box-sizing: border-box;}

    /* Contact */
    #inner_content .top_wrap{ padding: 20px 0 20px 0;}
    #inner_content .top_wrap .unit.first{ padding: 10px 0 10px 0; width: 100%;}
    #inner_content .top_wrap .unit{ width: 100%; padding-left: 0; border-right: none; border-bottom: 1px solid #d1d1d0; height: auto; padding-top: 10px; padding-bottom: 10px;}
    #inner_content .top_wrap .unit.last{ border-bottom: none;}
    #inner_content .bottom_wrap{ text-align: center;}
    #inner_content .bottom_wrap .unit{ width: 278px; margin: 10px 5px; height: 278px; background-size: cover !important; }
    #inner_content .bottom_wrap .unit .overlay{transform: scale(0.999); -moz-transform: scale(0.999); -webkit-transform: scale(0.999);}

    /* 404 */
    #inner_content.thank_wrap .mainbar{ padding-left: 0; padding-right: 0;}
    #inner_content.thank_wrap .sidebar{ width: 100%; padding-left: 0;}
    #inner_content .mainbar ul{ list-style-position: inside;}
    #inner_content .banner .wrapper img{ max-width: 100%;}

    #sb-container{  z-index: 999999 !important;}
    #sb-container #sb-wrapper{  overflow: scroll; width: 300px !important; left: 50% !important; margin-left: -150px;}
    #sb-container #sb-wrapper #sb-wrapper-inner{ width: 650px !important; overflow: visible !important;}
    #sb-container #sb-wrapper #sb-wrapper-inner img{ width: 1000px !important; height: 1000px !important;}
    #sb-nav-close{ right: 2% !important; position: fixed !important; top: 26px !important;}


}

@media screen and (max-width: 480px)/* max-width 480px, mobile-only styles, use when QAing mobile issues */{

    /* team */
    #inner_content .list_item{ text-align: center;}
    #inner_content h5::after{ left: 0; margin-left: -15px;}
    #inner_content .list_item .description{ width: 100%; padding-right: 0; padding-bottom: 10px;}
    .common_btn{ float: none;}
    #inner_content .list_item .avtar{ margin: 0 0 10px 0;}
    #inner_content .item_wrapper .item_left{ width: 100%; margin-right: 0; margin-bottom: 10px;}
    #inner_content .item_wrapper .item_right{ width: 100%;}

    /* projects */
    #inner_content .projects_container{ text-align: center;}
    #inner_content .projects_container .box{ width: 280px; margin-right: 0;}
}