.services {
    .main {
    overflow: hidden;
        video {
            display: none;
            @include desktop {
                display: block;
                height: 100%;
                width: 177.77777778vh;
                min-width: 100%;
                min-height: 56.25vw;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);}
                overflow: hidden;
            }
        &:before {
            @include tablet {
                background: rgba(0, 0, 0, 0.6);
                background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
                background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0)));
                background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
                background: -o-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
                background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0);
                z-index: 0;
                height: 300px;
                //background-color: red;
                display: block;
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                width: 100%;
                content: '';
            }
        }
        .after {
            @include tablet {
                transition: all 0.5s ease;
                width: 0;
                height: 0;
                border-top: 850px solid transparent;
                border-bottom: 0px solid transparent;
                content: '';
                z-index: 1;
                position: absolute;
                border-left: 850px solid #73674d;
                bottom: 0;
                opacity: 0.8;
            }
        }
        &__bg {
            @extend .u__bg;
            background-image: url('/assets/video/Services-Hero_BG.gif');
            @include desktop {
                background-image: none;
            }
        }
        &__content {}
        &__titles {
            h1 {
                line-height: .95em;
                text-transform: uppercase;
                margin-top: 30px;
                font-size: 13vw;
                text-align: center;
                //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: block;
                    @include desktop {
                        display: none;
                    }
                }
            }
        }
    }
    .services-intro {
        height: 300px;
        //vbackground-color: #29282c;
        padding-top: 60px;
        @include tablet {
            height: 300px;
            padding-top: 90px;
        }
         @include desktop {
            height: 450px;
            padding-top: 120px;
        }
        .row {
            @include tablet {
                padding: 0px;
            }
        }
        &__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 desktop {
                text-align: right;
                float: left;
                width: 40%;
            }
        }
        &__intro-right {
            float: left;
            width: 100%;
            @include desktop {
                width: 60%;
                float: right;
                padding-left: 103px;
            }
        }
        &__intro-top-title {
            position: relative;
            max-width: 800px;
            font-size: 18px;
            line-height: 1.5em;
            text-align: left;
            margin-bottom: 30px;
            z-index: 2;
            
            //background-color: blue;
            @include tablet {
                height: auto;
                font-size: 32px;
                text-align: left;
                margin-bottom: 70px;
                br {
                    display: none;
                    @include desktop {
                        display: block;
                    }
                }
            }
            @include desktop {
                height: 300px;
                line-height: 1.2em;
                text-align: right;
                margin-bottom: 100px;
            }
            &:before {
                content: '';
                width: 50px;
                height: 2px;
                background-color: #7cb9c7;
                position: absolute;
                top: -20px;
                left: 0;
                @include tablet {
                    width: 100px;
                    left: 0;
                    right: auto;

                }
                @include desktop {
                    right: 0;
                    left: auto;
                }
            }
        }
        &__intro-top-description {
            position: relative;
            font-size: 12px;
            line-height: 1.5em;
            padding: 17px 30px 17px 0px ;
            @include tablet {
                font-size: 22px;
                line-height: 1.5em;
                float: left;
                padding: 0 20px 0px 0px;
            }
            @include desktop {
                font-size: 22px;
                line-height: 1.5em;
                max-width: 600px;
                margin-top: 100px;
                float: left;
                margin-left: 0;
                // &:before {
                //     content: '';
                //     width: 100px;
                //     height: 2px;
                //     background-color: #7cb9c7;
                //     position: absolute;
                //     top: -30px;
                // }
            }
        }
    }
}

.services-menu {
    position: relative;
    clear: both;
    margin-top: 0px;
    @include tablet {
        margin-top: 80px;
    }
    @include desktop {
        margin-top: 45px;
    }
    &__top-box {
        background-color: black;
        width: 33.333%;
        float: left;
        padding: 20px 20px 40px 20px;
        transition: all 0.5s ease;
    }
    .special-box {
        position: absolute;
        width: 8000px;
        background-color: black;
        right: 0;
        bottom: 0;
        height: 100%;
        .special-box-content {
            position: relative;
            h4 {
                font-size: 36px;
                font-weight: normal;
            }
        }
    }
    &__top-decor {
        $box-width-mobile: 400px;
        $box-width: 550px;
        width: $box-width-mobile;
        height: $box-width-mobile;
        transform: scale(0.3) rotate(180deg);
        transform-origin: top right;
        transform-origin: center center;
        right: 0px;
        top: -40px;
        z-index: 0;
        position: absolute;
        @include tablet {
            transform: scale(.4) rotate(180deg);
            transform-origin: center center;
            bottom: 0px;
            top: -100px;
            left: -150px;
            right: auto;
            width: $box-width;
            height: $box-width;
        }
        @include desktop {
            right: 0px;
            transform: scale(.5) rotate(180deg);
            transform-origin: center center;
            bottom: 0px;
            left: auto;
            width: $box-width;
            height: $box-width;
        }
        &:before {
            @include triangle(bottom,
            #73674d,
            $box-width-mobile);
            position: absolute;
            right: 20px;
            top: 20px;
            opacity: 0.8;
            @include tablet {
                @include triangle(bottom,
                #73674d,
                $box-width);
                right: 20px;
                top: 20px;
            }
        }
        *,
        *:after,
        span {
            background-color: #b5a272;
        }
        *:before {
            border-color: #b5a272;
        }
        .u__angle-box-1 {
            &:before {
                display: none;
            }
        }
    }
    &__top-title {
        z-index: 1;
        position: relative;
        @include tablet {}
        h4 {
            color: white;
            margin: 0px;
            font-weight: normal;
            max-width: 280px;
            //text-transform: uppercase;
            font-size: 6vw;
            @include phone {
                font-size: 11vw;
            }
            @include tablet {
                margin-top: 100px;
                font-size: 36px;
                padding-left: 30px;
                line-height: 1.4em;
                max-width: 621px;
            }
            @include desktop {
                max-width: 280px;
                margin-left: 80px;
                line-height: 1em;
                font-size: 36px;
                padding-left: 0px;
                margin-top: 60px;
            }
            @include large {
                margin-left: 150px;
            }
            @include huge max {
                  margin-left: 100px;
            }
        }
    }
    &__top-paragraph {
        width: 93%;
        z-index: 1;
        position: relative;
        @include tablet {
            margin-left: 140px;
            max-width: 425px;
        }
        p {
            max-width: 300px;
            font-size: 15px;
            font-family: Lora;
            color: white;
            line-height: 1.5em;
            @include tablet {
                font-size: 24px;
                max-width: none;
            }
        }
    }
    &__category,
    .category {}
    .category {
        max-width: 1440px;
        margin: 0 auto;
        &__item:first-child {
            display: none;
            @include tablet {
                display: block;
            }
        }
        &__item {
            $height: 340px;
            display: table;
            background-color: black;
            position: relative;
            width: 50%;
            float: left;
            overflow: hidden;
            height: 40vw;
            transition: all 0.2s ease;
            @include desktop {
                width: 33.333%;
                //background-color: red;
                height: $height;
            }
            &:hover:not(:first-child) {
                @include desktop {
                    transform: scale(1.1);
                    z-index: 2;
                    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.55);
                    -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.55);
                    box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.55);
                    transition: all 0.6s ease;
                }
                .category__item-image {
                    @include desktop {
                        opacity: 0.5;
                        transition: opacity 0.6s ease;
                    }
                }
                .category__item-container {
                    @include desktop {
                        transform: scale(1.2);
                        transition: transform 0.6s ease;
                    }
                }
            }
            &.title {
                overflow: hidden;
                width: 100%;
                @include tablet {
                    overflow: visible;
                    z-index: 3;
                }
                @include desktop {
                     transform: translateX(109px);
                     width: 33%;
                }
                @include large {
                    transform: translateX(0px);
                    z-index: 3;
                }
            }
            &.security {
                margin-top: 0;
                @include desktop {
                    height: $height * 2;
                    padding-top: $height;
                }
                .category__item-image {
                    background-image: url('/assets/img/services-menu-security.jpg');
                }
                .category__item-container {
                    @include tablet {
                        //padding-top: 156px;
                    }
                }
            }
            &.av {
                @include desktop {
                    // margin-left: -100%;
                    margin-top: -$height;
                }
                .category__item-image {
                    background-image: url('/assets/img/services-menu-av.jpg');
                }
            }
            &.lighting {
                .category__item-image {
                    background-image: url('/assets/img/services-menu-lighting.jpg');
                }
            }
            &.climate {
                .category__item-image {
                    background-image: url('/assets/img/services-menu-climate.jpg');
                }
            }
        }
        &__item-image {
            z-index: 1;
            opacity: 0.3;
            transition: opacity 0.5s ease;
        }
        &__item-container {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            z-index: 1;
            position: relative;
            transition: transform 0.3s ease;
        }
        &__item-logo {
            img {
                height: 40px;
                @include tablet {
                    height: 75px;
                }
                @include desktop {
                    height: 67px;
                }
            }
        }
        &__item-description {
            text-transform: uppercase;
            font-weight: bold;
            color: white;
            margin-top: 50px;
            font-size: 14px;
            @include tablet {
                font-size: 18px;
                letter-spacing: -0.5px;
            }
            @include desktop {
                font-size: 22px;
                letter-spacing: 0px;
            }
        }
    }
}

.clouds-background {
    position: relative;
        background-color: #292929;
    .u__bg {
        background-image: url('/assets/img/bg_services-clouds.png');
        opacity: 0.3;
    }
}

.audio-video {
    margin-top: 90px;
    width: 100%;
    clear: both;
    float: left;
    @include tablet {
        margin-top: 100px;
    }
    @include phone-only {
            overflow: hidden;
    }
    &__half-container {
        float: left;
        width: 100%;
        &.title {
            @include tablet {
                float: left;
                width: 50%;
                padding-left: 50px;
                padding-top: 20px;
            }
            @include desktop {
                padding-left: 30px;
            }
            @include large {
                padding-left: 50px;
            }
        }
        &.image {
            margin-top: 35px;
            position: relative;
            .before {
                @include triangle(bottom,
                #927d4b,
                200px);
                position: absolute;
                right: -10px;
                top: -30px;
                z-index: 0;
                opacity: 0.8;
                @include tablet {
                    @include triangle(bottom,
                    #927d4b,
                    220px);
                    position: absolute;
                    top: -26px;
                    right: -26px;
                    margin-left: 100px;
                    z-index: 1;
                }
                @include desktop {
                    @include triangle(bottom,
                    #927d4b,
                    440px);
                    position: absolute;
                    top: -30px;
                    right: -30px;
                    margin-left: 100px;
                    z-index: 1;
                }
            }
            @include tablet {
                margin-top: 0;
            }
            img {
                width: 100%;
            }
            @include tablet {
                float: left;
                width: 50%;
            }
        }
    }
    &__sup-title {
        font-size: 12px;
        font-weight: bold;
        color: #bfbfbf;
        padding-bottom: 0px;
        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.7;
        }
        span:last-child {
            color: #927d4b;
            font-size: 32px;
            line-height: 1.5em;
            @include desktop {
                font-size: 50px;
            }
            @include large {
                font-size: 70px;
            }
        }
        span:first-child {
            display: block;
            font-size: 60px;
            color: white;
            font-weight: bold;
            @include tablet {
                font-size: 80px;
            }
            @include desktop {
                  width: 800px;
                font-size: 100px;
                width: 640px;
            }
            @include large {
                font-size: 132px;
            }
        }
    }
    &__description {
        width: 100%;
        float: left;
        @include tablet {}
        @include desktop {}
        @include large {}
        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 * .7;
            }
            @include desktop {
                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;
        }
    }
    &__black-background {
        .row {
            @include desktop {
                padding: 0 140px;
            }
            @include large {
                padding: 0 50px
            }
        }
        @include tablet {
            background-color: black;
            float: left;
            width: 100%;
            margin-top: -60px;
            padding-bottom: 170px;
            padding-top: 40px;
        }
        @include desktop {
            margin-top: -60px;
            padding-bottom: 100px;
        }
    }
    &__items {
        padding-top: 30px;
        @include tablet {
            max-width: 1212px;
            margin: 0 auto;
        }
        @include desktop {
            padding-top: 90px;
            height: 780px;
        }
    }
    &__item {
        text-align: center;
        width: 100%;
        float: left;
        padding: 20px 0px;
        @include tablet {
            text-align: center;
            width: 33.333%;
            float: left;
            padding: 50px 15px;
        }
        @include desktop {
            text-align: center;
            width: 33.333%;
            float: left;
            padding: 50px 30px;
        }
    }
    &__item-icon {
        float: left;
        width: 68px;
        img {
            height: 68px;
            @include tablet {
                height: 68px;
            }
        }
        @include tablet {
            width: auto;
            float: none;
            margin-bottom: 20px;
        }
        &.all-access {
            img {
                height: 35px;
                @include tablet {
                    height: 55px;
                }
            }
        }
        &.stunning {
            img {
                height: 35px;
                @include tablet {
                    height: 55px;
                }
            }
        }
        &.performance {
            img {
                height: 35px;
                @include tablet {
                    height: 55px;
                }
            }
        }
    }
    &__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;
        br {
            display: none;
            @include tablet {
                display: block;
            }
        }
        @include tablet {
            display: table-cell;
            font-size: 24px*.7;
            width: 100%;
            padding-left: 0px;
            text-align: center;
            text-transform: uppercase;
            font-weight: bold;
            color: #927d4b;
            line-height: 1.25em;
            vertical-align: middle;
        }
        @include desktop {
            font-size: 24px;
        }
    }
    &__item-description {
        p {
            margin-top: 5px;
           
            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: 32px *.6;
                padding-top: 0px;
                font-family: lora;
                width: auto;
                float: none;
            }
            @include desktop {
                font-size: 16px;
                line-height: 1.5em;
            }
            @include large {
                font-size: 20px;
                line-height: 32px;
            }
        }
    }
}

.security {
    float: left;
    width: 100%;
    @include desktop {
        padding: 0 40px;
    }
    @include tablet {
        margin-top: -150px;
    }
    &__third {
        float: left;
        width: 100%;
        padding-right: 20px;
        @include tablet {
            width: 33%;
        }
        @include desktop {}
        &.title {
            position: relative;
            padding-top: 80px;
            @include tablet {
                width: 36%;
            }
            @include desktop {}
            img {
                position: absolute;
                top: 0px;
                right: -250px;
                z-index: -1;
            }
        }
        &.image {
            width: 36%;

            img {
                width: 100%;
                position: relative;
            z-index:0;
                // padding-right: 30px;
            }
        }
        &.bullets {
            @include tablet {
                width: 28%;
                padding-right: 0px;
            }
            .pu__bullets {
                margin-top: 50px;
                @include desktop {
                    margin-top: 100px;
                }
            }
            .pu__bullet-item-description {
                p {
                    @include tablet {
                        font-size: 18px *.7;
                    }
                    @include desktop {
                        font-size: 18px;
                    }
                    @include huge {
                        font-size: 20px;
                    }
                }
            }
        }
    }
    &__suptitle {
        @extend .pu__sup-title;
    }
    &__title {
        line-height: 1.5em;
        font-weight: bold;
        font-size: 1.8em;
        color: #a4864d;
        font-size: 9vw;
        z-index: 3;
        position: relative;
        text-transform: uppercase;
        //transition: font-size 0.5s ease;
        @include tablet {
            line-height: 1em;
            font-size: 6.2em;
        }
        @include desktop {
            font-size: 6vw;
        }
        @include large {

        }
        @include huge {
            font-size: 9.2em;
            margin-left: -18%;
            width: 200%;
            max-width: 634px;
        }
    }
    &__description {
        p {
            @extend .u__description;
            font-family: DINPro;
            @include tablet {
                line-height: 1.5em;
                ;
            }
            @include large {
                font-size: 24px;
                line-height: 1.5em;
            }
        }
    }
}

.lighting-s {
    margin-top: 70px;
    width: 100%;
    clear: both;
        overflow-x: hidden;
    float: left;
    .row {
        @include desktop {
            padding: 0 140px;
        }
        @include large {
             padding: 0 140px;
        }
    }
    @include tablet {
        margin-top: 230px;
    }
    &__half-container {
        float: left;
        width: 100%;
        &.title {
            @include tablet {
                float: right;
                width: 50%;
                padding-left: 10px;
                padding-top: 70px;
            }
            @include desktop {
                padding-left: 30px;
                 padding-top: 100px;
            }
            @include large {
                padding-left: 70px;
            }
        }
        &.image {
            margin-top: 35px;
            position: relative;
            z-index: 0;
            .before {
                content: '';
                width: 100%;
                height: 100%;
                top: 50px;
                left: 50px;
                bottom: 0;
                right: 0;
                position: absolute;
                background: #212023;
                display: block;
                z-index: 0;
            }
            @include tablet {
                margin-top: 0;
            }
            img {
                width: 100%;
                z-index: 0;
                position: relative;
            }
            @include tablet {
                float: left;
                width: 50%;
            }
        }
    }
    &__sup-title {
        font-size: 12px;
        font-weight: bold;
        color: #bfbfbf;
        position: relative;
        padding-bottom: 10px;
        text-transform: uppercase;
        z-index: 1;
        @include tablet {
            padding-bottom: 20px;
            font-size: 22px;
        }
    }
    &__title {
        z-index: 1;
        position: relative;
        text-transform: uppercase;
        font-weight: lighter;
        color: white;
        span {
            display: block;
            float: left;
            width: 100%;
            line-height: 0.9;
        }
        span:last-child {
            font-size: 32px;
            color: #927d4b;
            @include desktop {
                font-size: 50px;
            }
            @include large {
                font-size: 70px;
            }
        }
        span:first-child {
            width: 800px;
            display: block;
            font-size: 60px;
            font-weight: bold;
            @include tablet {
                font-size: 80px;
            }
            @include desktop {
                font-size: 100px;
                width: 640px;
            }
            @include large {
                font-size: 132px;
            }
        }
    }
    &__description {
        @include tablet-only {
           max-width: 413px;
           padding-right: 20px;
           position: absolute;
           left: 50%;
           margin: 200px 20px 0px 10px;
        }
        @include desktop {
            width: 1000px;
            height: 400px;
            left: 50%;
            position: absolute;
            top: 219px;
            margin-left: -250px;
            transform: scale(.8);
        }
        @include large {
            transform: scale(1);
            width: 1000px;
            height: 400px;
            left: 50%;
            position: absolute;
            top: 300px;
            margin-left: -118px;
        }
        p {
            width: 100%;
            font-family: Lora;
            font-size: 12px;
            color: #ffffff;
            line-height: 1.5em;
            padding-top: 18px;
            display: block;
            float: left;
            @include desktop {
                max-width: 613px;
                color: #bfbfbf;
                margin: 0 auto;
                padding-top: 116px;
                float: none;
                font-size: 22px;
            }
        }
    }
    &__description-animation {
        display: none;
        @include desktop {
            display: block;
            max-width: 900px;
            width: 100%;
            height: 244px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: .3;
        }
    }
    &__items {

        @include desktop {
            //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 10px;
        }
        @include desktop {
            padding: 50px 30px;
        }
    }
    &__item-icon {
        float: left;
        width: 68px;
        img {
            width: 70%;
            @include tablet-only {
                width: 50px;
            }
            @include tablet {
                width: auto;
            }
        }
        @include tablet {
            width: auto;
            float: none;
        }
        @include desktop {
             margin-bottom: 20px;
        }
    }
    &__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: #73c0d1;
        font-size: 18px;
        text-align: left;
        padding-left: 20px;
        line-height: 1em;
        @include tablet {
            display: table-cell;
            font-size: 24px *.8;
            width: 100%;
            padding-left: 0px;
            text-align: center;
            text-transform: uppercase;
            font-weight: bold;
            color: #73c0d1;
            line-height: 1.25em;
            vertical-align: middle;
        }
        @include desktop {
            font-size: 24px;
        }
    }

    &__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: 32px *.6;
                padding-top: 0px;
                font-family: lora;
                width: auto;
                float: none;
            }
            @include desktop {
                font-size: 16px;
                line-height: 1.5em;
            }
            @include large {
                font-size: 20px;
                line-height: 32px;
            }
        }
    }
}

.climate-windows {
    width: 100%;
    float: left;
    &__half {
        float: left;
        width: 100%;
        overflow: hidden;
        @include tablet {
            width: 50%;
        }
        &.image {
            img {
                width: 100%;
            }
        }
        &.title {
            background-color: black;
            @include tablet {
                padding-top: 90px;
                padding-bottom: 40px;
                height: 1440px;
            }
            @include desktop {}
        }
        
    }
    &__info {
        float: right;
        max-width: 1440px * .5;
        width: 100%;
        padding-left: 20px;
        padding-top: 30px;
        @include tablet {
            //padding-left: 0px;
            padding-top: 0px;
        }
        @include desktop {
             padding-left: 140px;
        }
        @include large {
             padding-left: 140px;
        }
        @include huge{
            padding-left: 20px;
        }
    }
    &__sup-title {
        @extend .pu__sup-title;
        @include tablet {
            padding-bottom: 20px;
        }
    }
    &__title {
        font-size: 36px;
        //font-weight: bold;
        line-height: 0.9em;
        color: #927d4b;
        text-transform: uppercase;
        position: relative;
        z-index: 3;
        @include tablet {
            font-size: 92px *.6;
        }
        @include desktop {
            font-size: 90px;
        }
    }
    &__description {
        font-family: Lora;
        font-size: 12px;
        line-height: 1.5em;
        //max-width: 344px;
        padding-top: 10px;
        padding-right: 40px;
        @include tablet {
            font-size: 24px *.7;
            //max-width: 574px;
            padding-top: 50px;
            line-height: 36px *.7;
            padding-right: 80px;
        }
        @include desktop {
            font-size: 24px;
            //max-width: 574px;
            padding-top: 50px;
            line-height: 36px;
            padding-right: 80px;
        }
    }
    &__bullets {
        max-width: 100%;
        padding-right: 0px;
        padding-bottom: 50px;
        @include tablet {
            padding-right: 20px;
        }
        @include desktop {
            padding-right: 130px;
        }
    }
    .pu__bullet-item-description p {
       @include tablet {
        font-size: 18px;
       }
        line-height: 1.5em;
        font-family: Lora;
        margin-top: 5px;
        margin-bottom: 31px;
    }
}

.climate-control {
    float: left;
    width: 100%;
    @include tablet {
        margin-top: -400px;
    }
    &__ipad {
        float: left;
        display: none;
        @include tablet {
           position: absolute;
               left: -61px;
               z-index: -1;
               top: -132px;
               display: block;
        }
        @include desktop {
           position: absolute;
           left:-500px;
           //margin-left: -340px;
           z-index: -1;
           top: -100px;
        }
        img {
            @include tablet-only {
                width: 446px;
                margin-left: -100px;
            }
            @include desktop {
                width: 500px;
                margin-left: 81px;
                margin-top: 56px;
            }
        }
    }
    &__content {
        @include tablet-only {
            width: 100%;
            margin-left: 130px;
            padding-left: 50px;
        }
    }
    &__info {
        float: left;
        
        margin-top: 100px;
        position: relative;
        z-index: 1;
        @include tablet {
            transform: scale(0.7);
            float: right;
            width: 555px;
            margin-top: 0px;
            position: relative;
            z-index: 1;
        }
        @include desktop {
            transform: scale(1);
            float: right;
            width: 555px;
            margin-top: 100px;
            position: relative;
            z-index: 1;
        }


    }
    &__title {
        font-size: 36px;
        line-height: 0.9em;
        color: #927d4b;
        text-transform: uppercase;
        padding-bottom: 20px;
        @include tablet {
            font-size: 92px *.6;
            padding-bottom: 0px;
        }
        @include desktop {
            font-size: 92px;
            margin-left: -37%;
            width: 200%;
            margin-bottom: 45px;
        }
    }
    &__description {
        font-size: 24px *.5;
        line-height: 36px *.5;
        max-width: 515px;
        float: right;
        @include tablet {
            font-size: 24px *.8;
            line-height: 36px *.8;
            max-width: 489px;
            padding-top: 30px;
        }
        @include tablet-only {
            padding-left: 80px;
        }
        @include desktop {
            font-size: 24px;
            line-height: 36px;
            max-width: 489px;
        }
    }
    &__items {
        @include tablet {
            //max-width: 1212px;
            margin: 0 auto;
            padding-top: 142px;
        }
    }
    &__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: 38px;
        img {
            width: 100%;
            max-width: 50px;
            @include tablet {
                width: 100%;
            }
            @include desktop {
            width: 68px;

            }
        }
        @include tablet {
            width: auto;
            float: none;
            margin-bottom: 20px;
        }
    }
    &__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 *.8;
            width: 100%;
            padding-left: 0px;
            text-align: center;
            text-transform: uppercase;
            font-weight: bold;
            color: #927d4b;
            line-height: 1.25em;
            vertical-align: middle;
        }
        @include desktop {
            font-size: 24px;
        }
    }
    &__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: 32px *.6;
                padding-top: 0px;
                font-family: lora;
                width: auto;
                float: none;
            }
            @include desktop {
                font-size: 16px;
                line-height: 1.5em;
            }
            @include large {
                font-size: 20px;
                line-height: 32px;
            }
        }
    }
}