@media screen and (max-width: 1024px){
    .proj-slide img {
        height: 40vw;
        position: relative;
        z-index: 1;
        margin-right: 0;
        margin-top: 15.4%;
    }
}
@media screen and (max-width: 768px){
    .proj-slide img {
        height: 29vw;
        position: relative;
        z-index: 1;
        margin-right: 0;
        margin-top: 4.4%;
    }
    #menu{
        display:block;
    }
    .menu{
        display:none;
        position: relative;
        width: 100%;
        float: left;
        margin-top: 2%;
        clear: both;
        right: 0;
        left: 0;
        padding-bottom: 1%;
    }
    .menu a.active:before{
        display:none;
    }
    .menu a.active{
        margin-left: 0;
    }
    .menu a{
        font-size: 2vw;
        display: block;
        width: 100%;
        text-align: center;
        line-height: 3.6;
    }
    .slider-section{
        height: 66vw; 
    }
    .proj-slide img {
        height: 64%;
        position: absolute;
        z-index: 1;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
    }
    .slide_text {
        font-size: 125%;
        text-align: left;
        width: 100%;
        right: auto !important;
        left: 35% !important;
        margin: auto !important;
    }
    .we-word {
        right: auto !important;
        left: 30% !important;
        font-size: 4.2vw;
    }
    
    .hometitlee {
    font-size: 230%;
    padding: 10%;
    padding-top: 0;
    padding-bottom: 0;
    position: absolute;
    top: 4vh;
}
    .header {
        position: fixed;
        background: #0f0d0e;
        top: 2%;
        z-index: 9999;
        -moz-transition:       all 0.4s;
        -o-transition:         all 0.4s;
        -webkit-transition:    all 0.4s;
        transition:            all 0.4s;
        -webkit-transform: translate3d(0,0,0);
    }
    .project-slider{
        margin-top: 11%
    }
    .right_arrow,.left_arrow{
        width:3.3vw;
    }
    .logo {
        width: 25%;
        padding: 1.5% 0% 1.5% 5%;
        float: left;
    }
    .layer1, .layer2, .layer3, .layer4,.line,#to_top,.orange_bar,.layer6,.overlay_layer6,.layer7,.layer8,.layer9, .overlay_layer9{
        display:none
    }
    .text1,.text2,.text3,.text4{
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        margin: auto;
        text-align: left;
        line-height: 2;
        margin-bottom: 5%;
        padding-top: 5%;
        font-size: 2.5vw;
        display:block !important;
    }
    .text3,.text4{
        text-align: right;
    }
    .left,.right{
        width:80%;
        margin:auto;
        float: none;
    }
    .bg_section{
        width:100%;
        height:auto !important;
        position:relative;
        padding-top: 8%;
    }
    .bg_section:before{
        content: "";
        background: url(../images/mobile_line1.png);
        height: 77%;
        width: 8%;
        position: absolute;
        top: 4%;
        left: 0;
        background-position: top center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .bg_section:after{
        content: "";
        background: url(../images/mobile_line2.png);
        height: 77%;
        width: 11%;
        position: absolute;
        top: 20%;
        right: -2%;
        background-position: top center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .third_section{
        background-position: 23% 100%;
    }
    .inner_text_container {
        background: rgba(0,0,0,0.8);
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        bottom: 0;
        display: block !important;
        -webkit-animation-name: unset !important;
        animation-name: unset !important;
    }
    .inner_text {
        width: 80%;
        position: relative;
        top: 0%;
        text-align: left;
        left: 0;
        right: 0;
        margin: auto;
        line-height: 1.5;
        font-size: 2vw;
        display: block !important;
        -webkit-animation-name: unset !important;
        animation-name: unset !important;
    }
    .orange_bar {
        background: #ea7d1f;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 10px;
        width: 80%;
        display: block !important;
        -webkit-animation-name: unset !important;
        animation-name: unset !important;
        top: 19.3%;
    }
    div#services,.bottom_bar{
        height: auto;
    }
    .box{
        width:100% !important;
        position: relative !important;
        padding: 5% 0
    }
    .row1 {
        width: 100%;
        height: auto;
        float: none;
        display: block;
        clear: both;
    }
    .layer6_text,.overlay p, .overlay_orange p{
        position: relative;
        font-size: 2vw;
    }
    .layer6_text {
        width: 100%;
        right: 0;
        text-align: left;
        font-family: extralight;
        top: 0;
        display: block;
        z-index: 1;
        text-align: center;
    }
    .divided_boxes {
        width: 100%;
        height: auto;
        float: left;
    }
    .divided_boxes .box {
        width: 100%;
        height: auto;
    }
    .footer_sec{
        height: auto;
        float: left;
        display: block;
        clear: both;
    }
    .overlay:after{
        top: -5%;
        height: 110%;
    }
    .left_footer,.right_footer {
        width: 100%;
        height: auto;
        float: none;
        display: block;
    }
    .layer7_text,.layer8_text{
        position: relative;
        top: 0;
        left: 0;
        width: 80%;
        margin: auto;
        margin-bottom: 1%;
        font-size: 2vw;
        word-spacing: normal;
        text-align: left;
    }
    .layer9_title{
        right: auto;
        left: 0;
        position: relative;
        top: 0;
        margin-top: 4%;
        font-size: 3vw;
        margin-bottom: 4%;
    }
    .slider_footer_sec {
        width: 80%;
        margin: auto;
        position: relative;
        display: inline-block;
        left: 0%;
        height: 20vw;
        margin-top: 3%;
        bottom: 0;
        overflow: hidden;
    }
    img.right_arrow_footer,
     img.left_arrow_footer{
        width: 2.5vw;
    }
    .contact_info{
        width:100%;
        padding-bottom: 4%;
    }
    .contact_info a {
        font-size: 1vw;
        padding: 0;
        display: block;
        text-align: left;
        clear: both;
        margin-bottom: 2%;
        padding-left: 0 !important;
    }
    .copyright{
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 1.1vw;
    }
    .social {
        display: inline-block;
        width: 2em;
        position: absolute;
        right: 0;
        bottom: 34%;
    }
    .social a {
        display: inline-block;
        width: 100%;
        vertical-align: middle;
        margin-bottom: 6%;
    }
    .social a img {
        width: 75%;
    }
    .overlay_orange:after{
        top: -5%;
        height: 110%;
    }
    .social_desktop{
        display: none !important
    }
    .mobile_social{
        display:block !important
    }
    .inner_modal{
            width: 80.5%;
    }
    .close_modal{
            font-size: 3vw;
    }
    .inner_modal h1{
        font-size: 4vw;
    }
    .inner_modal div{
        font-size: 2.5vw;
    }
    img.left_arrow_footer{
        display: block;
    }
}

@media screen and (max-width: 767px){
    .text1, .text2, .text3, .text4,
    .inner_text,.layer6_text, .overlay p, .overlay_orange p,
    .layer7_text, .layer8_text,.slide_text{
        font-size: 3.5vw;
    }
    .menu a,.we-word{
        font-size: 4vw;
    }
    .contact_info a{
        font-size: 2.5vw;
        margin-bottom: 3%;
    }
    .close_modal{
            font-size: 4vw;
    }
    .inner_modal h1{
        font-size: 4vw;
    }
    .inner_modal div{
        font-size: 3.5vw;
    }
    .logo{
        width: 30vw;
    }
    .layer7_text, .layer8_text{
        width: 57%;
    }
    .copyright {
        font-size: 2.5vw;
        padding-bottom: 2%;
    }
    .social a img {
        width: 100%;
    }
    .contact_info a img {
        width: 4vw;
    }
    .social {
        display: inline-block;
        width: 3em;
        position: absolute;
        right: 0;
        bottom: 28%;
    }
    .slider-section {
        height: 75vw;
    }
    
    .proj-slide.multi-imgs img.first_img{
         width: 34%;
         left: -10%; 
    }
    .proj-slide.multi-imgs img.second_img{
            position: absolute;
    width: 27%;
    height: auto;
    bottom: 14%;
    z-index: 1;
    left: 34.5%;
    }
    .bottom_footer{
            margin-top: 3%;
    }
}
@media only screen and (max-width: 767px) and (orientation: portrait) {   

}