#home {
    .top {
        $slider-width: 750px;
        $slider-height: 270px;
        $top-height: 470px;
        $video-height: 200px;

        $tablet-slider-width: 450px;
        $tablet-video-height: 100px;
        $tablet-video-width: $tablet-slider-width - 24px;

        $phone-video-height: 90px;
        $phone-calculator-height: 451px;
        $phone-top-height: $slider-height + 2 * $phone-video-height + $phone-calculator-height;

        height: $top-height;
        width: 100%;
        position: relative;

        @include breakpoint($phone) {
            height: $phone-top-height;
        }

        .left-side {
            float: left;
            width: $slider-width;
            position: relative;

            @include breakpoint($tablet) {
                width: $tablet-slider-width;
            }

            @include breakpoint($phone) {
                width: 100%;
            }
        }

        .top-slider {
            width: $slider-width;
            position: relative;

            @include breakpoint($tablet) {
                width: 100%;
                height: $slider-height;
            }

            @include breakpoint($phone) {
                width: 100%;
                height: $slider-height;
            }

            .slider-background {
                height: $top-height;
                width: 1140px;
                position: absolute;
                right: 0;
                float: right;
                z-index: -1;
                @include background-size(cover);

                @include breakpoint($phone) {
                    height: $slider-height;
                }
            }

            .prev-arrow,
            .next-arrow {
                position: absolute;
                width: 32px;
                height: 70px;
                display: inline-block;
                cursor: pointer;
                z-index: 1;
                top: ($slider-height - 70px) / 2;

                @include breakpoint($mobile) {
                    display: none !important;
                }
            }

            .prev-arrow {
                background-image: url("asset/img/home-slider-arrow-left.png");
            }

            .next-arrow {
                right: 35px;
                background-image: url("asset/img/home-slider-arrow-right.png");
            }

            .adwords-content {
                width: 100%;
                float: right;
                height: $top-height;
                color: #fff;

                @include breakpoint($tablet) {
                    width: $tablet-slider-width - 24px;
                }

                .inner {
                    padding: 0 68px;

                    @include breakpoint($mobile) {
                        padding: 0 25px;
                    }

                    display: table;
                    height: $slider-height;
                }

                .text {
                    display: table-cell;
                    vertical-align: middle;

                    h3 {
                        margin: 0;
                        font-size: 18px;
                        font-weight: 900;
                        line-height: 25px;
                        text-transform: uppercase;
                    }

                    .inner-text {
                        margin: 5px 0 0;
                        line-height: 23px;
                        font-size: 14px;

                        p {
                            margin: 0;
                        }
                    }

                    .button {
                        margin-top: 15px;
                        display: inline-block;
                    }

                    @include breakpoint($phone) {
                        margin-left: 15px;
                        margin-right: 15px;

                        h3 {
                            font-size: 16px;
                        }

                        p {
                            width: auto;
                        }
                    }
                }

            }

            ul {
                height: $top-height;
                width: $slider-width - 68px - 104px;
                margin-right: 104px;
                float: right;

                @include breakpoint($tablet) {
                    width: $tablet-slider-width - 24px;
                    margin-right: 0;
                }

                @include breakpoint($phone) {
                    height: $slider-height;
                    width: 100%;
                    margin-right: 0;
                }

                li {
                    height: $slider-height;
                    display: table;
                    color: #fff;
                    position: relative;
                    @include background-size(cover);

                    @include breakpoint($mobile) {
                        height: $slider-height;
                    }

                    img {
                        position: absolute;
                        right: 0;
                        float: right;
                        z-index: -1;

                        @include breakpoint($tablet) {
                            width: 200px;
                        }
                    }

                    .inner {
                        display: table-cell;
                        vertical-align: middle;
                        width: 90%;

                        @include breakpoint($tablet) {
                            padding: 0 25px;
                            right: auto;
                        }

                        @include breakpoint($phone) {
                            width: 100%;
                            right: auto;
                        }
                    }

                    .text {
                        h3 {
                            margin: 0;
                            font-size: 18px;
                            font-weight: 900;
                            line-height: 25px;
                            text-transform: uppercase;
                        }

                        .inner-text {
                            margin: 5px 0 0;
                            line-height: 23px;
                            font-size: 14px;
                        }

                        .button {
                            margin-top: 15px;
                            display: inline-block;
                        }

                        @include breakpoint($phone) {
                            margin-left: 15px;
                            margin-right: 15px;

                            h3 {
                                font-size: 16px;
                            }

                            p {
                                width: auto;
                            }
                        }
                    }
                }
            }
        }

        .video {
            position: absolute;
            right: 0;
            bottom: 0;
            height: $video-height;
            width: 360px;
            background-image: url("asset/img/home-video-bg.jpg");
            @include background-size(cover);
            float: right;
            z-index: 1;

            @include breakpoint($mobile) {
                width: $tablet-video-width;
                height: $tablet-video-height;
                background: none;
                float: left;
            }

            @include breakpoint($phone) {
                width: 100%;
                height: $phone-video-height;
            }

            .play {
                display: block;
                margin: 0 auto;
                margin-top: ($video-height - 69px) / 2;
                height: 69px;
                width: 69px;
                position: relative;
                background-image: url("asset/img/home-video-play.png");
                @include background-size(contain);

                @include keyframes(zoomi) {
                    5% {
                        @include transform(scaleX(1.15) scaleY(1.15));
                    }
                    10% {
                        @include transform(scaleX(1) scaleY(1));
                    }
                    15% {
                        @include transform(scaleX(1.15) scaleY(1.15));
                    }
                    20% {
                        @include transform(scaleX(1) scaleY(1));
                    }
                }

                @include animation(zoomi 6s 5s infinite);

                @include breakpoint($mobile) {
                    margin-top: -5px;
                }
            }
        }

        .videos {
            @include breakpoint($mobile) {
                background-image: url("asset/img/home-video-bg.jpg");
                @include background-size($tablet-video-width + 19px auto);
                position: absolute;
                top: $slider-height;
                right: 0;
                width: $tablet-video-width;
                height: $tablet-video-height * 2;
            }

            @include breakpoint($phone) {
                top: $slider-height + $phone-calculator-height;
                height: $phone-video-height * 2;
                width: 100%;
                @include background-size(105% auto);
                background-position: 0 50%;
            }

            @include breakpoint(max-width 350px) {
                @include background-size(105% 100%);
            }
        }

        .video-text {
            position: absolute;
            left: 0;
            bottom: 0;
            background-image: url("asset/img/home-video-text-bg.png");
            width: 408px;
            height: 200px;
            float: right;
            margin-right: -18px;
            color: #fff;

            @include breakpoint($mobile) {
                width: $tablet-video-width;
                height: $tablet-video-height;
                background: none;
                top: 0;
                float: left;
                position: relative;
            }

            @include breakpoint($phone) {
                width: 100%;
                height: $phone-video-height;
            }

            .text {
                position: absolute;
                margin: 45px 0 0 83px;

                h3 {
                    margin: 0;
                    font-size: 16px;
                    font-weight: 900;
                    line-height: 25px;
                    text-transform: uppercase;

                    @include breakpoint($tablet) {
                        line-height: $tablet-video-height;
                    }

                    @include breakpoint($phone) {
                        line-height: $phone-video-height;
                    }
                }

                p {
                    margin: 18px 0 0;
                    line-height: 23px;
                    width: 240px;
                }

                @include breakpoint($mobile) {
                    margin: 0;
                    width: 100%;
                    text-align: center;

                    p {
                        display: none;
                    }
                }
            }
        }

        .calculator {
            height: 100%;
            width: 390px;
            float: left;
            position: relative;
            text-transform: uppercase;
            color: #263437;

            @include breakpoint($tablet) {
                width: 295px;
            }

            @include breakpoint($phone) {
                width: 100%;
                height: $phone-calculator-height;
            }

            .cbg {
                background-image: url("asset/img/home-bg.jpg");
                background-repeat: no-repeat;
                position: absolute;
                left: 0;
                height: 100%;
                width: 780px;
                z-index: -1;
                @include background-size(cover);

                @include breakpoint($phone) {
                    display: none;
                }
            }

            #subpage-calculator {
                background-color: rgba(255,255,255,.9);
                height: 100%;
                width: 100%;
                padding: 0;

                .inner {
                    padding: 23px 55px 0;
                    @include transition(padding .4s);

                    @include breakpoint($tablet) {
                        padding: 35px 25px 0;
                        width: auto;
                    }

                    @include breakpoint($phone) {
                        padding: 40px 15px 0;
                        width: 290px;
                        margin: 0 auto;
                        display: block;
                    }

                    h3 {
                        font-size: 16px;
                        margin: 0 0 25px;
                        @include transition(margin .4s);
                    }

                    .form-group {
                        float: none;
                        margin: 16px 0 0;
                        @include transition(margin .4s);

                        &.loading,
                        &.unloading {
                            width: 100%;
                        }

                        &.loading {
                            .chosen-drop {
                                .chosen-results {
                                    max-height: 334px;

                                    @include breakpoint($phone) {
                                        max-height: 307px;
                                    }
                                }
                            }
                        }

                        &.unloading {
                            .chosen-drop {
                                .chosen-results {
                                    max-height: 242px;

                                    @include breakpoint($phone) {
                                        max-height: 215px;
                                    }
                                }
                            }
                        }

                        &.volume {
                            float: left;

                            @include breakpoint($tablet) {
                                width: 110px;
                            }
                        }

                        &.weight {
                            width: 153px;
                            float: right;

                            input {
                                float: left;
                                width: 70px;
                                border-right: 0;
                                padding-right: 0;
                                @include border-radius(5px 0 0 5px);
                            }

                            .select {
                                width: 83px;
                            }

                            @include breakpoint($tablet) {
                                width: 126px;

                                .select {
                                    width: 56px;
                                }

                                .chosen-single {
                                    padding: 25px 0px 25px 6px;

                                    div {
                                        right: 10px;
                                    }
                                }

                                .chosen-results {
                                    li {
                                        padding-left: 6px;
                                    }
                                }
                            }
                        }

                        &.sum {
                            @include breakpoint($tablet) {
                                position: relative;
                                right: auto;
                            }

                            @include breakpoint($phone) {
                                margin-top: 31px;
                                width: 118px;
                                float: left;
                            }

                            strong {
                                display: inline;
                            }
                        }

                        &.buttons {
                            float: none;

                            @include breakpoint($phone) {
                                margin-top: 20px;
                            }

                            .button {
                                margin-top: 0;
                                padding: 17px 36px;

                                @include breakpoint($phone) {
                                    width: 153px;
                                    float: right;
                                }
                            }
                        }

                        &.info {
                            display: block;
                            font-size: 10px;
                            font-weight: normal;
                            color: #636667;
                            text-align: center;
                            margin-top: 10px;

                            @include breakpoint($tablet) {
                                font-size: 8px;
                            }

                            @include breakpoint($phone) {
                                display: none;
                            }
                        }
                    }

                    .clear-or-not-to-clear {
                        clear: both;
                    }

                    .info-kontenery {
                        display: block;

                        text-transform: none;
                        background-color: #ffa64c;
                        color: #fff;
                        line-height: 18px;

                        text-align: center;
                        font-size: 13px;
                        font-weight: 500;

                        max-height: 0;
                        overflow-y: hidden;
                        padding: 0;
                        margin-left: -55px;
                        margin-right: -55px;
                        margin-top: 0;

                        @include transition(max-height .4s, padding .4s, margin-top .4s);

                        @include breakpoint($tablet) {
                            margin-left: -25px;
                            margin-right: -25px;
                        }

                        @include breakpoint($phone) {
                            margin-left: 0;
                            margin-right: 0;
                        }

                        a {
                            color: inherit;
                        }
                    }
                }

                &.kontenery {
                    .inner {
                        padding-top: 17px;

                        h3 {
                            margin: 0 0 13px;
                        }

                        .form-group {
                            margin: 12px 0 0;
                        }

                        .info-kontenery {
                            display: block;
                            padding: 9px 0;
                            margin-top: 14px;
                            max-height: 100px;

                            @include transition(max-height .4s, padding .4s, margin-top .4s);
                        }

                        .info {
                            margin-top: 8px;
                        }
                    }
                }
            }
        }
    }

    .boxes {
        margin-top: 40px;
        @include layout(3 4/9 split);
        @include container;

        @include breakpoint($phone) {
            margin-top: 0;
        }

        .box {
            @include span(1);
            position: relative;

            @include breakpoint($desktop) {
                .text {
                    display: block !important;
                }
            }

            @include breakpoint($tablet) {
                .text {
                    display: block !important;
                }
            }

            @include breakpoint($phone) {
                width: 100%;
                margin: 0;
                border-bottom: 1px solid #c9c9c9;

                .text {
                    padding: 0 15px 20px;
                    display: none;
                }
            }

            h1,
            h2,
            h3 {
                margin-top: 0;
                font-size: 16px;
                font-weight: 900;
                text-transform: uppercase;

                @include breakpoint($phone) {
                    line-height: 90px;
                    margin: 0;
                    padding: 0 15px;
                }
            }

            .content {
                min-height: 110px;

                @include breakpoint($phone) {
                    margin-bottom: 10px;
                    min-height: 0;
                }
            }

            p {
                margin: 20px 0 0;
                color: #263437;
                line-height: 26px;

                @include breakpoint($phone) {
                    margin-top: 0;
                }
            }

            ul {
                margin-top: 20px;
                line-height: 26px;

                @include breakpoint($phone) {
                    margin-top: 0;
                }

                a {
                    @include link(#263437);
                    text-decoration: none;
                    font-weight: 500;
                }
            }

            a.more {
                display: block;
                margin-top: 3px;
                @include link(#00b9b9);
                text-decoration: none;
                font-weight: 700;
                text-transform: uppercase;

                &.right {
                    text-align: right;

                    @include breakpoint($phone) {
                        text-align: left;
                    }
                }
            }

            &.contact {
                span {
                    display: block;
                }
            }

            &.rules {
                display: none;

                p {
                    margin: 1em 0;

                    &:first-of-type {
                        margin-top: 0;
                    }
                }

                @include breakpoint($phone) {
                    display: block;
                    border-bottom: 0;
                }
            }

            @include susy-breakpoint($tablet, 3 1/7 split) {
                &:nth-child(1) {
                    @include span(1);
                }

                &:nth-child(2) {
                    @include span(1);

                    .more.right {
                        text-align: left;
                    }
                }

                &:nth-child(3) {
                    @include span(1 last);

                    .content {
                        min-height: 50px;
                        @include layout(12 1/10 after);
                        @include container;

                        span {
                            display: inline-block;
                            margin-right: 43px;
                            text-align: center;
                            @include span(3);

                            &:first-child {
                                @include span(4);
                                text-align: left;
                            }

                            &:nth-child(2) {
                                @include span(2);
                            }

                            &:last-child {
                                margin-right: 0;
                                @include span(3 last);
                            }
                        }
                    }

                    .more.right {
                        text-align: left;
                    }
                }
            }

            @include breakpoint($phone) {
                &::after {
                    content: url("asset/img/dropdown-down.png");
                    height: 20px;
                    width: 20px;
                    position: absolute;
                    right: 29px;
                    top: 34px;
                    pointer-events: none;
                }

                &.open {
                    &::after {
                        content: url("asset/img/dropdown-up.png");
                    }
                }
            }


            &.how {
                @include span(3);

                h1 {
                    @include span(1 of 3 after);
                    font-size: 20px;
                    text-transform: none;
                }

                .text {
                    @include span(2 of 3 after last);

                    p {
                        margin-top: 0;
                    }
                }

                .content {
                    min-height: auto;
                }

                @include susy-breakpoint($tablet, 3 1/7 split) {
                    @include span(3);

                    h1 {
                        @include span(1 of 3 1/7 after);
                    }

                    .text {
                        @include span(2 of 3 1/7 after last);
                    }
                }

                @include breakpoint($phone) {
                    width: 100%;
                    margin: 0;

                    h1 {
                        font-size: 16px;
                        margin: 0;
                        width: 100%;
                        text-transform: uppercase;
                    }

                    .text {
                        width: auto;
                        margin: 0;
                    }
                }
            }
        }

        &.first {
            margin-top: 66px;

            @include breakpoint($desktop) {
                $border-color-from: #00b9b9;
                $border-color-to: #00dfae;
                border: 1px solid $border-color-from;
                -webkit-border-image: -webkit-linear-gradient(top, $border-color-from 0%, $border-color-to 100%);
                   -moz-border-image:    -moz-linear-gradient(top, $border-color-from 0%, $border-color-to 100%);
                     -o-border-image:      -o-linear-gradient(top, $border-color-from 0%, $border-color-to 100%);
                        border-image:   linear-gradient(to bottom, $border-color-from 0%, $border-color-to 100%);
                border-image-slice: 1;
            }

            @include breakpoint($phone) {
                margin-top: 0;
            }

            .box {
                h3 {
                    position: absolute;
                    padding: 0 25px;
                    margin-left: -25px;
                    background-color: #fff;
                    margin-top: -10px;

                    @include breakpoint($phone) {
                        position: relative;
                        margin: 0;
                        padding: 0 15px;
                    }
                }

                @mixin ellipse-box-content {
                    content: url('asset/img/home-box-ellipse.png');
                }

                @mixin ellipse-box-after {
                    padding-right: 5px;
                    &::after {
                        @include ellipse-box-content;
                        margin-left: 15px;
                    }
                }

                @mixin ellipse-box-before {
                    padding-left: 5px;
                    &::before {
                        @include ellipse-box-content;
                        margin-right: 15px;
                    }
                }

                h3 {
                    @include breakpoint($desktop) {
                        @include ellipse-box-before;
                    }
                }

                @include susy-breakpoint($tablet, 3 1/7 split) {
                    &:nth-child(1) {
                        @include span(1);
                    }

                    &:nth-child(2) {
                        @include span(1);
                    }

                    &:nth-child(3) {
                        margin-top: 0;
                        @include span(1 last);
                    }
                }

                p {
                    margin: 30px 0 40px;

                    @include breakpoint($phone) {
                        margin: 0;
                    }
                }
            }
        }
    }

    hr.after-boxes {
        margin-top: 40px;

        @include breakpoint($phone) {
            margin-top: 0;
        }
    }

    .partners {
        margin-top: 95px;
        padding-bottom: 60px;

        @include breakpoint($phone) {
            margin-top: 0;
            padding-bottom: 37px;
        }

        h3 {
            margin-top: 0;
            margin-bottom: 30px;
            font-size: 16px;
            font-weight: 900;
            text-transform: uppercase;
            margin-left: 3%;

            @include breakpoint($phone) {
                line-height: 90px;
                margin: 0;
                padding: 0 15px;
            }
        }

        .list {
            text-align: center;
            overflow: hidden;
            width: 100%;
            position: relative;

            .prev-arrow,
            .next-arrow {
                position: absolute;
                width: 32px;
                height: 70px;
                display: inline-block;
                cursor: pointer;
                z-index: 1;

                @include breakpoint($mobile) {
                    @include transform(scaleX(.7) scaleY(.7));
                }
            }

            .prev-arrow {
                top: 0;
                left: 0;
                background-image: url("asset/img/home-slider-blue-arrow-left.png");

                @include breakpoint($tablet) {
                    left: 23px;
                }

                @include breakpoint($phone) {
                    left: 15px;
                }
            }

            .next-arrow {
                top: 0;
                right: 0;
                background-image: url("asset/img/home-slider-blue-arrow-right.png");

                @include breakpoint($tablet) {
                    right: 23px;
                }

                @include breakpoint($phone) {
                    right: 15px;
                }
            }

            ul {
                padding: 0 42px;
                overflow: auto;
                width: 100%;

                @include breakpoint($tablet) {
                    padding: 0 65px;
                }

                @include breakpoint($phone) {
                    padding: 0 40px;
                }

                li {
                    line-height: 70px;
                    display: inline-block;

                    @include breakpoint($phone) {
                        width: 145px;
                    }

                    img {
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}