.process {
    .main {
        position: relative;
        .row {
            position: relative;
        }
        &__bg {
            @extend .u__bg;
            background-image: url('/assets/img/bg_spaces-mobile.jpg');
            background-position: top right;
            @include tablet {
                background-image: url('/assets/img/bg__process.jpg');
            }
        }
        &__titles {
            text-align: center;
            h1 {
                line-height: .95em;
                text-transform: uppercase;
                margin-top: 30px;
                margin-bottom: 0px;
                font-size: 13vw;
                //transition: font-size 0.5s ease;
                @include tablet {
                    font-size: 9.2em;
                }
                @include desktop {
                    font-size: 6vw;
                }
                @include large {
                    font-size: 9.2em;
                }
                br {
                    display: none;
                    @include tablet {
                        display: none;
                    }
                }
            }
            .skinny {
                font-weight: normal;
            }
        }
    }
}

.process-intro {
    height: 900px * .5;
    background-color: #29282c;

    @include tablet {
        height: 900px;
    }
    .row {
        @include tablet {
            padding: 0px;
        }
    }
    padding-top: 80px;
    &__bg {
        @extend .u__bg;
        &:before {
            @include triangle(top,
            400);
        }
    }

    &__intro-container {}
    &__intro {}
    &__intro-animation {
        position: absolute;
        top: 100px;
        left: -7px;
        .u__mobile-only {
            width: 100%;
        }
    }
    &__intro-top {
        @include tablet {
            padding-left: 56px;
        }
    }
    &__intro-left {
        float: left;
        width: 100%;
        @include tablet {
            text-align: right;
            float: left;
            width: 40%;
        }
    }
    &__intro-right {
        float: left;
        position: relative;
        width: 100%;
            margin-bottom: 100px;
            margin-top: 160px;

        @include desktop {
            margin: 0px;
        }
        .before {
            transition: all 0.5s ease;
            width: 0;
            height: 0;
            border-bottom: 200px solid transparent;
            border-top: 0px solid transparent;
            content: '';
            z-index: 0;
            position: absolute;
            border-right: 200px solid #73674d;
            top: -20px;
            right: 10px;
            opacity: 0.8;
            @include tablet {
                transition: all 0.5s ease;
                width: 0;
                height: 0;
                border-bottom: 300px solid transparent;
                border-top: 0px solid transparent;
                content: '';
                z-index:0;
                position: absolute;
                border-right: 300px solid #73674d;
                border-left: none;
                top: -90px;
                right: 10px;
                opacity: 0.8;
                //right: auto;
            }
            @include desktop {
                transition: all 0.5s ease;
                width: 0;
                height: 0;
                border-bottom: 300px solid transparent;
                border-top: 0px solid transparent;
                content: '';
                z-index:0;
                position: absolute;
                border-right: 300px solid #73674d;
                border-left: none;
                top: 55px;
                right: 10px;
                opacity: 0.8;
                //right: auto;
            }
        }
        @include tablet {
            width: 60%;
            float: right;
            padding-left: 80px;
        }
         @include desktop {
            width: 60%;
            float: right;
            padding-left: 153px;
        }
    }
    &__bg-box {
        background-image: url(/assets/img/process_box.png);
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        width: 873px * .45;
        height: 746px * .45;
        left: -30px;
        top: -40px;

        @include tablet {
            background-image: url(/assets/img/process_box.png);
            background-size: cover;
            background-repeat: no-repeat;
            position: absolute;
            width: 700px;
            height: 600px;
            left: -62px;
            top: -80px;
        }
       @include desktop {
        background-image: url(/assets/img/process_box.png);
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        width: 740px;
        height: 639px;
        left: -92px;
        top: -120px;
       }
        
    }
    &__intro-top-title {
        max-width: 500px;
        font-size: 18px;
        line-height: 1.5em;
        text-align: left;
        margin-bottom: 60px;
        @include tablet {
            max-width: 500px;
            font-size: 36px *.6;
             
            text-align: right;
            margin-bottom: 100px;
        }
        @include desktop {
                   padding-left: 102px;
            max-width: 649px;
            font-size: 28px;
            line-height: 1.2em;
            text-align: right;
            margin-bottom: 100px;
        }
        @include large {
                padding-left: 100px;
                  font-size: 30px;

        }
        @include max {
             padding-left: 80px;
                  font-size: 36px;
        }
        &:before {
            content: '';
            width: 100px;
            height: 2px;
            background-color: #7cb9c7;
            position: absolute;
            top: -20px;
            @include tablet {
                display: none;
            }
        }
    }
    &__intro-top-description {
        position: relative;
        font-size: 12px;
        line-height: 1.5em;
        padding: 17px 30px;
        @include tablet {
            font-size: 22px *.8;
            line-height: 1.5em *.8;
            max-width: 590px;
            float: right;
        }
        @include desktop {
            padding: 0;
            font-size: 22px;
            line-height: 1.5em;
            max-width: 590px;
            margin-top: 187px;
            float: left;
            &:before {
                content: '';
                width: 100px;
                height: 2px;
                background-color: #7cb9c7;
                position: absolute;
                top: -30px;
            }
        }
    }
    &__item {}
}

.team .process-architecture {
    padding-top: 60px;
    &__bg {
        background-image: url('/assets/img/team-back.jpg');
    }
}

.process-architecture {
    position: relative;
    float: left;
    width: 100%;
    @include tablet {
        padding-top: 160px;
        padding-bottom: 230px;
    }
    .row {
        padding: 0px;
        @include tablet {
            padding: 0 20px;
        }
    }
    &__bg {
        background-image: url('/assets/img/process__architecture.jpg');
        //img {width: 100%;}
    }
    &__left {
        width: 100%;
        float: left;
        @include tablet {
            width: 70%;
            float: left;
        }
    }
    &__image {
        img {
            width: 100%;
        }
    }
    &__right {
        width: 100%;
        float: left;
        @include tablet {
            width: 30%;
        }
    }
    &__box {
        width: 100%;
        max-width: 260px;
        
        position: absolute;
        right: 0px;
        top: -60px;
        @include tablet {
            position: relative;
            top: auto;
            right: auto;
            width: 168%;
            max-width: 562px;
            margin-left: -10%;
            margin-top: 100px;
            //background-color: #000;
            float: right;
            height: 656px;
        }
    }
    &__box-bg {
        @extend .u__bg;
        background-color: black;
        z-index: 0;
    }
    &__title {
        @extend .u__title--bold;
        margin-left: -80px;
        padding-top: 111px;
         position: relative;
                z-index: 3;

        @include tablet {
            margin-bottom: 40px;
            margin-top: 111px;
            position: relative;
            z-index: 3;
            margin-left: -20px;
            font-size: 92px * .8;
        }
         @include desktop {
             margin-left: -80px; 
            margin-bottom: 40px;
            margin-top: 111px;
            position: relative;
            z-index: 3;

            font-size: 92px;
        }
    }
    &__description {
           position: relative;
                z-index: 3;
        p {
            padding: 7px 14px 40px 40px;
            max-width: 243px;
            width: 100%;
            @extend .u__description;
            @include tablet {
                padding: 7px 14px 0 60px;
                max-width: 551px;
                position: relative;
                z-index: 3;
            }
        }
    }
}

.builders {
    width: 100%;
    float: left;
    position: relative;
    @include tablet {
        height: 800px;
    }
    &__bg {
        background-image: url('/assets/img/bg_process_builderswshadow-mobile.jpg');
        @include tablet {
            background-image: url('/assets/img/bg_process_builderswshadow.jpg');
        }
        z-index: -1;
    }
    &__animation {
        padding: 50px;
        position: relative;
        .before {
            @include triangle(right,
            #73674d,
        520px * .5);
            position: absolute;
            left: 50px;
            top: 80px;
            opacity: 0.8;
            z-index: -1;
        }
        @include tablet {
            .before {
                @include triangle(right,
                #73674d,
                530px);
                left: 0px;
                top: 0px;
                z-index: -1;
            }
        }
    }
    &__box {
        margin: 80px 0;
        padding: 0px 30px 0 0px;;
        @include tablet {
            padding: 0px;
            margin: 120px 0;
        }
    }
    &__title {
        @extend .u__title--bold;
        @include tablet {
            padding-top: 0px;
        }
         @include desktop {
               margin-left: 85px;
        }
        @include large {
                margin-left: 65px;
        }
        @include max {
            margin-left: 20px;
        }
    }
    &__description {
        padding-left: 90px;
        padding-top: 10px;
        @include tablet {
            padding-left: 90px;
            padding-top: 20px;
        }
        p {
            @extend .u__description;
            max-width: 214px;
            @include tablet {
                max-width: 466px;
            }
        }
    }
}

.wrapper-bottom {
    width: 100%;
    float: left;
    position: relative;

    &__image {
        background-image: url('/assets/img/bg_process_bottom.jpg');
    }
}

.int-design {
    width: 100%;
    position: relative;
    float: left;
    padding-top: 50px;
    height: 900px * .5;

    @include tablet {
        height: auto;
        padding-bottom: 300px;
    }

    &__image {
        background-image: url('/assets/img/bg_int-design.jpg');

        @include tablet {
            display: none;
        }
    }

    &__left {
        width: 100%;
        float: left;
        @include tablet {
            width: 50%;
        }
        @include desktop {
            width: 50%;
             z-index: 5;
             position: relative;
        }
        img {
            width: 100%;
        }
    }
    &__left-animation {
        transform: rotate(180deg);
        transform-origin: center center;
        top: 155px;
        left: -50px;
        .u__angle-box-1 {
            width: 70%;
            right: 0;
            z-index: 1;
        }
    }
    &__right {
        width: 100%;
        float: left;
        position: relative;
        @include tablet {
            width: 50%;
            padding: 80px 40px 40px 40px ;
        }
         @include desktop {
            width: 50%;
           
        }
    }
    &__right-animation {
        $box-width-mobile: 200px;
        $box-width: 550px;
        width: $box-width-mobile;
        height: $box-width-mobile;
        transform: scale(0.7);
        transform-origin: top right;
        right: 0px;
        top: 25px;
        left: auto;
        z-index: 0;
        position: absolute;
        @include desktop {
            transform: scale(1);
            right: 80px;
            top: 0px;
            width: $box-width;
            height: $box-width;
        }
        &:before {
            @include triangle(bottom,
            #73674d,
            $box-width-mobile);
            position: absolute;
            right: 20px;
            top: 20px;
            opacity: 0.8;
            @include desktop {
                @include triangle(bottom,
                #73674d,
                300px);
                right: 70px;
                top: 70px;
            }
        }
        *,
        *:after,
        span {
            background-color: #b5a272;
        }
        *:before {
            border-color: #b5a272;
        }
        .u__angle-box-1 {
            &:before {
                display: none;
            }
        }
        .u__angle-box-1 {
            width: 120%;
            right: 0;
            z-index: 1;
        }
    }
    &__title {
        font-size: 92px * .5;
        text-transform: uppercase;
        color: white;
        line-height: 1em;
        position: relative;
        padding-left: 90px;
        &:before {
            @include triangle(bottom,
            #403e3f,
            380px);
            position: absolute;
            right: -40px;
            top: -20px;
             opacity: 0.3;
            z-index: -1;
            @include tablet {
                opacity: 1;
            }
        }
        @include tablet {
            padding:0px;
            font-size: 92px * .45;
            margin-left: -5px;
        }
        @include desktop {
            font-size: 92px * .7;
        }
        @include max {
            font-size: 92px;
        }
        span {

            font-weight: bold;
            color: #927d4b;
            display: block;
            @include tablet {
                font-size: 132px * .45;
                margin-left: -2px;
            }
            @include desktop {
                font-size: 132px * .6;
            }
            @include max {
                font-size: 132px;
            }
        }
        @include tablet {}
    }
    &__description {
        padding-left: 90px;
        padding-top: 20px;
        z-index: 2;
        position: relative;
        @include tablet {
            padding-left: 0px;
        }
        p {
            //float: right;
            @extend .u__description;
            max-width: 238px;
            @include phone {
                width: 100%;
                max-width: 100%;
               
            }
            width: 100%;
            strong {
                color: #73c0d1;
            }
            @include tablet {
                max-width: 490px;
                width: 100%;
                 padding-right: 0px;
            //loat: left;
            }
            @include desktop {
                max-width: 430px;
                width: 100%;
                 padding-right: 30px;
            //loat: left;
            }
        }
    }
}

.land-arch{
    margin-top: -150px;
    position: relative;
    float: left;
   @include phone-only {
     overflow: hidden;
   }
    .row {
        @include desktop {
           // padding: 0px 50px;
           padding: 0px 140px;
        }
        @include large {
         padding: 0px 80px;
        }        
    }
    width: 100%;
    @include tablet {}
    &__bg {
        @include tablet {}
    }
    &__shadow {
        // bg_builders_shadow.png
    }
    &__animation {
        display: none;
        width: 100%;
       
        @include tablet {
            display: block;
            background-color: black;
            position: absolute;
            top: -100px;
            left: 100px;
            z-index: 0;
            height: 800px;
        }
        img {
            display: none;
            @include tablet {
                margin: 30px;
                display: block;
                position: absolute;
                width: 1800px;
                margin-left: 0px;
            }
        }
    }
    &__left {
        width: 100%;
        float: left;
        
        @include tablet {
            width: 55%;
            float: left;
        }
    }
    &__right {
        width: 100%;
        float: left;
        @include tablet {
            width: 45%;
            float: left;
        }
    }
    &__box {
        //background-color: black;
        position: relative;
        text-align: left;
        //margin-right: -70px;
        margin-top: 166px;
        @include tablet {
            text-align: right;
            padding-right: 70px;
        }
    }
    &__title {
       @extend .u__title--bold;
        color: #927d4b;
        position: relative;
        z-index: 3;
        @include tablet {
            padding:0px;
            font-size: 92px * .5;
        }
        @include desktop {
            font-size: 92px * .7;
        }
        @include max {
            font-size: 92px;
        }
        
    }
    &__description {
        position: relative;
        z-index: 3;
        p {
            float: right;
            @extend .u__description;
            max-width: 400px * .5;
                width: 100%;
            @include phone {
                max-width: 100%;

            }
            @include tablet {
                max-width: 400px;
                width: 100%;
            }
        }
    }
}

%builders {
    @include tablet {}
    &__bg {
        @include tablet {}
    }
    &__shadow {
        // bg_builders_shadow.png
    }
    &__animation {
        @include tablet {}
    }
    &__box {
        @include tablet {}
    }
    &__title {
        @include tablet {}
    }
    &__description {
        p {
            @extend .u__description;
            @include tablet {}
        }
    }
}