.spaces {
    .main {
        @include phone-only {
            width: 100%;
        float: left;
        overflow: hidden;
        }
        
        .after {
            transition: all 0.5s ease;
            width: 0;
            height: 0;
            border-bottom: 100px solid transparent;
            border-top: 0px solid transparent;
            content: '';
            z-index: 1;
            position: absolute;
            border-left: 100px solid #73674d;
            top: 0;
            opacity: 0.8;
            @include tablet {
                transition: all 0.5s ease;
                width: 0;
                height: 0;
                border-bottom: 650px solid transparent;
                border-top: 0px solid transparent;
                content: '';
                z-index: 1;
                position: absolute;
                border-left: 650px solid #73674d;
                top: 0;
                opacity: 0.8;
            }
        }
        .row {
            position: relative;
        }
        &__animation-overlay {
            position: absolute;
            $box-width-mobile: 400px;
            $box-width: 550px;
            width: $box-width-mobile;
            height: $box-width-mobile;
            transform-origin: center;
            top: 100px;
            z-index: 2;
            left: 60px;
            transform: rotate(270deg);
            @include tablet {
                left: 100px;
                top: 100px;
                width: $box-width;
                height: $box-width;
                z-index: 2;
            }
            .u__angle-box-1 {
                &:before {
                    display: none;
                }
            }
            *,
            *:after,
            span {
                background-color: #b5a272;
            }
            *:before {
                border-color: #b5a272;
            }
            .arrow-right {
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-right: 22px solid #b5a272;
                width: 0;
                height: 0;
                content: '';
                position: absolute;
                z-index: 1;
                left: -40px;
                background: transparent;
                top: -4px;
            }
            .arrow-bottom {
                border-top: 22px solid #b5a272;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                width: 0;
                height: 0;
                content: '';
                background: transparent;
                position: absolute;
                z-index: 1;
                right: -4px;
                bottom: -41px;
            }
        }
        &__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_spaces.jpg');
            }
        }
        &__content {}
        &__titles {
            position: relative;
            z-index: 3;
            text-align: center;
            h1 {
                line-height: .95em;
                text-transform: uppercase;
                margin-top: 30px;
                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;
                    }
                }
            }
            h2 {
                line-height: 1.3em;
                font-weight: normal;
                font-size: 1.9em;
                margin-top: 0px;
                color: $muddy-white;
                @include tablet {
                    font-size: 3.6em;
                }
                @include desktop {
                    font-size: 3vw;
                }
                @include large {
                    font-size: 3.6em;
                }
            }
        }
    }
}

.types {
    @include phone-only {
        overflow: hidden;
        width: 100%;
        float: left;
    }
    .row {
        @include tablet {

        }
    }
    padding-top: 80px;
    &__bg {
        @extend .u__bg;
        &:before {
            @include triangle(top,
            400);
        }
    }
    &__intro-container {}
    &__intro {}
    &__intro-animation {
        position: absolute;
        top: 100px;
        left: -7px;
        @include tablet {
            top: 10px;
        }
        .u__mobile-only {
            width: 100%;
        }
        &:before {
            transition: all 0.5s ease;
            width: 0;
            height: 0;
            border-bottom: 150px solid transparent;
            border-top: 0px solid transparent;
            content: '';
            z-index: -1;
            position: absolute;
            border-right: 150px solid #73674d;
            top: 10px;
            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: -1;
                position: absolute;
                border-left: 300px solid #73674d;
                border-right: none;
                top: 55px;
                left: 30px;
                opacity: 0.8;
                right: auto;
            }
        }
    }
    &__intro-top {
        @include desktop {
            padding-left: 56px;
        }
    }
    &__intro-left {
        float: left;
        width: 100%;
        @include tablet {
            text-align: right;
            float: left;
            width: 50%;
        }
    }
    &__intro-right {
        float: left;
        width: 100%;
        @include tablet {
            width: 50%;
            float: right;
        }
         @include desktop {
            width: 50%;
            float: right;
            padding-left: 73px;
        }
    }
    &__intro-top-title {
        font-size: 18px;
        line-height: 1.2em;
        text-align: left;
        margin-bottom: 100px;
        @include tablet {
            font-size: 20px;
            line-height: 1.2em;
            text-align: left;
            margin-bottom: 100px;
        }
        @include desktop {
            max-width: 500px;
            font-size: 36px;
            line-height: 1.2em;
            text-align: right;
            margin-bottom: 100px;
        }
        &: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: 14px;
            line-height: 1.5em;

            float: right;
        }
        @include desktop {
            padding: 0;
            font-size: 22px;
            line-height: 1.5em;
            max-width: 580px;
            margin-top: 187px;
            float: left;
            &:before {
                content: '';
                width: 100px;
                height: 2px;
                background-color: #7cb9c7;
                position: absolute;
                top: -30px;
            }
        }
    }
    &__item {}
}

.home-theater {
    margin-top: 90px;
    width: 100%;
    clear: both;
    float: left;
    //overflow: hidden;
    @include tablet {
        margin-top: 100px;
       
    }
    &__half-container {
        float: left;
        width: 100%;
        &.title {
            @include tablet {
                float: right;
                width: 50%;
                padding-left: 10px;
                padding-top: 100px;
                //transform: scale(.8);

            }
            @include desktop {
                padding-left: 30px;
                //transform: scale(1);

            }
            @include large {
                padding-left: 50px;
            }
        }
        &.image {
            margin-top: 35px;
            @include tablet {
                margin-top: 0;
                float: left;
                width: 50%;
            }
            img {
                width: 100%;
            }
        }
    }
    &__sup-title {
        font-size: 12px;
        font-weight: bold;
        color: #bfbfbf;
        padding-bottom: 10px;
        text-transform: uppercase;
        @include tablet {
            padding-bottom: 20px;
            font-size: 22px;
        }
    }
    &__title {
        text-transform: uppercase;
        font-weight: lighter;
        color: white;
        span {
            display: block;
            float: left;
            width: 100%;
            line-height: 0.9;
        }
        span:first-child {
            font-size: 32px;
            @include tablet {
                font-size:  32px;
            }
            @include desktop {
                font-size: 50px;
            }
            @include large {
                font-size: 70px;
            }
        }
        span:last-child {
            width: 800px;
            display: block;
            font-size: 60px;
            color: #927d4b;
            font-weight: bold;
            @include tablet {
                font-size: 70px;
            }
            @include desktop {
                font-size: 100px;
                width: 640px;
            }
            @include large {
                font-size: 132px;
            }
        }
    }
    &__description {
        @include tablet {
            width: 1000px;
            height: 400px;
            left: 50%;
            position: absolute;
            top: 119px;
            margin-left: -300px;
            transform: scale(.6);
        }
        @include desktop {
            width: 1000px;
            height: 400px;
            left: 50%;
            position: absolute;
            top: 219px;
            margin-left: -220px;
            transform: scale(.8);
        }
        @include large {
            transform: scale(1);
            width: 1000px;
            height: 400px;
            left: 50%;
            position: absolute;
            top: 298px;
            margin-left: -130px;
        }
        p {
            width: 100%;
            font-family: Lora;
            font-size: 12px;
            color: #ffffff;
            line-height: 1.5em;
            padding-top: 18px;
            display: block;
            float: left;
            @include tablet {
                max-width: 613px;
                color: #bfbfbf;
                margin: 0 auto;
                padding-top: 116px;
                float: none;
                font-size: 22px;
            }
        }
    }
    &__description-animation {
        display: none;
        @include tablet {
            display: block;
            max-width: 900px;
            width: 100%;
            height: 324px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: .3;
        }
    }
    &__items {
        @include tablet {
            max-width: 1212px;
            margin: 0 auto;
            padding-top: 122px;
        }
    }
    &__item {
        text-align: center;
        width: 100%;
        float: left;
        padding: 20px 0px;
        @include tablet {
            text-align: center;
            width: 33.333%;
            float: left;
            padding: 50px 30px;
        }
    }
    &__item-icon {
        float: left;
        width: 68px;
        img {
            width: 68px;
            @include tablet {
                width: auto;
            }
        }
        @include tablet {
            width: auto;
            float: none;
            margin-bottom: 20px;
        }
        &.surround {}
        &.drop-down {}
        &.4k {}
    }
    &__item-title-container {
        float: left;
        width: calc(100% - 68px);
        @include tablet {
            display: table;
            height: 80px;
            width: 100%;
        }
    }
    &__item-title {
        text-transform: uppercase;
        font-weight: bold;
        color: #927d4b;
        font-size: 18px;
        text-align: left;
        padding-left: 20px;
        line-height: 1em;
        @include tablet {
            display: table-cell;
            font-size: 24px * .6;
            width: 100%;
            padding-left: 0px;
            text-align: center;
            text-transform: uppercase;
            font-weight: bold;
            color: #927d4b;
            line-height: 1.25em *.8;
            vertical-align: middle;
        }
        @include desktop {
            font-size: 24px;
            line-height: 1.25em;
        }
    }
    &__item-description {
        p {
            margin-top: 5px;
            font-size: 12px;
            line-height: 1.5em;
            text-align: left;
            padding-top: 0px;
            font-family: lora;
            padding-left: 20px;
            float: left;
            width: calc(100% - 68px);
            @include tablet {
                margin-top: auto;
                text-align: center;
                padding-left: 0px;
                font-size: 20px *.6;
                line-height: 1.5em;
                padding-top: 0px;
                font-family: lora;
                width: auto;
                float: none;
            }
            @include desktop {
                font-size: 20px;
                line-height: 32px;
            }
        }
    }
}

.outdoor {
    .blas-1 {
        display: block;
        @include tablet  {
            display: none;
        }
    }
    .blas-2 {
        display: none;
        @include tablet {
            display: block;
                height: 500px;
        }
    }
    padding: 40px 0px;
    &__half {
        width: 100%;
        float: left;
        position: relative;
        &.image {
            @include tablet {
                width: 40%;
            }
        }
        &.info {
        }
        @include tablet {
            width: 50%;
            float: left;
            
        }

         @include desktop {
            width: 50%;
            float: left;
            height: 800px;
        }
    }
    &__info {
        z-index: 2;
        position: relative;
        @include tablet {
            padding-left: 30px;
            line-height: 1;
            padding-right: 20px;
        }
        @include desktop {
            padding-left: 100px;

        }
        .pu__bullet-item-icon {
            left: -73px;
            top: -17px;
            display: none;
            @include desktop {
                display: block;
            }
        }
        img {
            width: 100%;
        }
    }
    &__sup-title {
        font-size: 12px;
        padding-bottom: 10px;
        color: #bfbfbf;
        font-weight: bold;
        text-transform: uppercase;
        @include tablet {
            font-size: 22px;
            padding-bottom: 10px;
            color: #bfbfbf;
            font-weight: bold;
            text-transform: uppercase;
        }
    }
    &__title {
        width: 100%;
        color: #927d4b;
        font-size: 40px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1;
        padding-bottom: 13px;
        @include tablet {
            width: 745px;
            color: #927d4b;
            font-size: 92px *.8;
            font-weight: bold;
            text-transform: uppercase;
            padding-bottom: 0px;
        }
        @include desktop {
            width: 745px;
            color: #927d4b;
            font-size: 92px;
            font-weight: bold;
            text-transform: uppercase;
            padding-bottom: 0px;
        }
       
    }
    &__subtitle {
        font-size: 18px;
        max-width: 520px;
        padding-top: 10px;
        line-height: 1.3em;
        color: white;
        padding-bottom: 10px;
        @include tablet {
            font-size: 36px *.8;
            max-width: 520px;
            padding-top: 10px;
            line-height: 46px *.8;
            color: white;
            padding-bottom: 10px;
        }
        @include desktop {
            line-height: 46px;

            font-size: 36px;
            max-width: 520px;
        }
    }
    &__image {
        position: absolute;
        bottom: 0;
        left: 0;
       
            top: 0;
    @include tablet {
        top: auto;
    }
        &.back {
            filter: blur(4px);
            width: 127%;
            @include tablet {
                top: 0px;
            }
            @include desktop {
                top: 0;
            }
        }
        &.front {

        }
        img {
            width: 100%;

        }
    }
}

.kitchen {
    width: 100%;
    float: left;
    margin-top: 60px;
    margin-bottom: 100px;
    &__half {
        @extend .u__half;
    }
    &__animation {
        position: absolute;
        $box-width-mobile: 700px;
        $box-width: 550px;
        width: $box-width-mobile;
        height: $box-width-mobile;
        transform-origin: center;
        transform: rotate(270deg);
        display: none;
        @include tablet {
            width: $box-width;
            height: $box-width;
            display: block;
        }
    }
    &__top-titles {
        @include tablet {
            margin-left: -100px;
            line-height: 4em;
            float: left;
            position: relative;
        }
    }
    &__sup-title {
        @extend .pu__sup-title;
        padding-bottom: 30px;
        float: left;
        width: 100%;
    }
    &__title-top {
        font-weight: lighter;
        font-size: 40px;
        color: #927d4b;
        text-transform: uppercase;
        @include tablet {
            font-size: 92px*.8;
            color: white;
        }
        @include desktop {
            font-size: 92px;
            color: white;
        }
    }
    &__info-title {
        font-size: 70px;
        color: #fff;
        margin-left: 70px;
        position: relative;
        text-transform: uppercase;
        line-height: 1em;
        font-weight: bold;
        padding-top: 10px;
        z-index: 3;
        @include tablet {
            padding-top: 0px;
            font-size: 132px *.8;
            color: #927d4b;
        }
        @include desktop {
            padding-top: 0px;
            font-size: 132px;
            color: #927d4b;
        }
    }
    &__info {
        width: 100%;
        float: left;
        @include tablet {
            margin-left: -38px;
        }
        @include desktop {
            margin-left: 0px;
            padding-left: 30px;
        }
        @include large {
            padding-left: 30px;

        }
    }
    &__image {
        opacity: 0.8;
        margin-top: -10px;
        margin-left: -20px;
        position: relative;
        @include tablet {
            margin-top: 50px;
            margin-left: 0;
        }
        .before {
            @include triangle(bottom,
            #927d4b,
            200px);
            position: absolute;
            right: -10px;
            top: -30px;
            z-index: 0;
            opacity: 0.8;
            @include tablet {
                @include triangle(bottom,
                #927d4b,
                230px);
                position: absolute;
                top: -40px;
                right: -56px;
                margin-left: 100px;
                z-index: 1;
            }
            @include desktop {
                @include triangle(bottom,
                #927d4b,
                440px);
                position: absolute;
                top: -200px;
                right: -76px;
                margin-left: 100px;
                z-index: 1;
            }
        }
        img {
            width: 100%;
        }
    }
    &__description {
        @include tablet {
               padding-left: 89px;
        }
        @include desktop {
            padding-left: 85px;
        }
        p {
            font-size: 12px;
            line-height: 1.4;
            font-family: lora;
            @include tablet {
                font-size: 24px;
                line-height: 36px;
                //max-width: 445px;
            }
             @include desktop {
                font-size: 24px;
                line-height: 36px;
                max-width: 445px;
            }
        }
    }
    .pu__bullets {
        @include tablet {
            margin-top: 40px;
            float: left;
            margin-left: 85px;
        }
        .pu__bullet-item-icon {
            display: none;
            @include desktop {
                display: block;
            }
        }
        .pu__bullet-item-icon {
            left: -73px;
            top: -17px;
        }
        img {
            width: 80%;
        }
    }
    .pu__bullet-item-title {
        color: #73c0d1;
    }
    &__animation {
        position: absolute;
        left: -90px;
        top: 0px;
        *,
        *:after,
        span {
            background-color: #b5a272;
        }
        *:before {
            border-color: #b5a272;
        }
        .u__angle-box-1 {
            &:before {
                display: none;
            }
        }
    }
    .arrow-right {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 22px solid #b5a272;
        width: 0;
        height: 0;
        content: '';
        position: absolute;
        z-index: 1;
        left: -40px;
        background: transparent;
        top: -4px;
    }
    .arrow-bottom {
        border-top: 22px solid #b5a272;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        width: 0;
        height: 0;
        content: '';
        background: transparent;
        position: absolute;
        z-index: 1;
        right: -4px;
        bottom: -41px;
    }
}

.bedrooms {
    width: 100%;
    float: left;
    background-color: black;
    position: relative;
    height: 400px;
    @include tablet {
        height: 925px;
    }
    .container {
        @include tablet {
            float: none;
            margin-top: -1000px;
            position: relative;
            float: left;
            padding-left: 100px;
            z-index: 2;
            padding-top: 260px;
        }
    }
    .row {
        line-height: 4em;
        position: relative;
    }
    &__bg-half {
        display: none;
        @include tablet {
            background-color: black;
            width: 50%;
            float: left;
            display: block;
            position: relative;
            height: 1000px;
        }
        &.image {
            z-index: 1;
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .u__bg {
            z-index: 1;
        }
    }
    &__sup-title {
        @extend .pu__sup-title;
        @include tablet {
           
        }
    }
    &__title {
        font-size: 36px;
        font-weight: bold;
        color: #927d4b;
        text-transform: uppercase;
        @include tablet {
            font-size: 92px;
            line-height: 1em;
        }
    }
    &__description {
        font-family: Lora;
        font-size: 12px;
        line-height: 1.5em;
        max-width: 244px;
        padding-top: 10px;
        @include tablet {
            font-size: 24px;
            max-width: 474px;
            padding-top: 30px;
            line-height: 36px;
        }
    }
    &__info {
        line-height: 2em;
        @include tablet {
                line-height: 1em;
        }
    }
    &__ipad {
        img {
            height: 300px;
            margin-top: -100px;
            @include tablet {
                width: auto;
                height: auto;
            }
        }
        @include tablet {
            position: absolute;
            bottom: -50px;
            right: -55px;
            z-index: 2;
            transform: scale(.8);
        }
    }

}
.take-off {
    display: none !important ;
    @include tablet {
        display: block !important;
    }
}
.bedrooms__bg-half .u__bg {
    transform:scale(1.4);
}