@include falken-section-top-negative(section-overview);
.section-overview {

    @include section-color($colorGrey3);

    .overview-row-1 {
        .fl-row-content {
            padding: 0 0 190px;
        }

        .tire-gallery {
            margin: -120px 0 0;
            position: relative;
            z-index: 3;
        }

        .fl-module-html {
            margin: -120px 0 0;
            position: relative;
            z-index: 5;
        }

        .fl-html {
            #{$not-editor-not-mobile} & {
                opacity: 0; // before the animation starts

                &.aos-animate {
                    opacity: 1;
                }
            }

            margin: 0;
            padding: 55px 60px 70px 65px;
            position: relative;
            text-align: left;

            @include bevel-and-shadow($colorOverviewBackground, 38px);

            h1, .h1 {
                @include h1(50px);
                color: $colorOverviewHeader;
                margin: 0 0 0.5em;
            }

            p {
                color: $colorOverviewFont;
                margin: 0;
                font-size: 16px;
                line-height: 1.8;
                @include clearfix();

                &.buttons {
                    text-align: center;
                }

                &.read-more {
                    display: none;
                }
            }

            .btn {
                margin: 0;
                min-width: 47%;
                float: left;

                &:first-child {
                    @include btn-default-mix($colorOverviewBtnDefault, $colorOverviewBtnDefaultHover);
                }

                &:last-child {
                    @include btn-primary-mix($colorOverviewBtnPrimary, $colorOverviewBtnPrimaryHover);
                    float: right;
                }

                .ico-fit-arrow {
                    &:before {
                        @include ico-fit-arrow();
                    }

                    width: 1.8em;
                    height: 0.8em;
                    position: relative;
                    display: inline-block;

                    &:before {
                        position: absolute;
                        font-size: 1.2em;
                        top: 50%;
                        left: 0;
                        transform: translateY(-0.5em);
                    }
                }
            }
        }

        @include desktop() {
            .fl-html {
                min-height: 680px;
                padding-bottom: 150px;

                p.buttons {
                    min-height: 137px;
                    position: absolute;
                    bottom: 0;
                    left: 65px;
                    right: 60px;
                }
            }
        }

        @include mobile() {

            .fl-row-content {
                padding-bottom: 12vw;
            }

            .fl-row-content > .fl-col-group > .fl-col {
                width: 100% !important;
                max-width: 9999px;
                padding: 0 30px;
            }

            .fl-html {
                h1, .h1 {
                    @include h1(35px);
                }

                padding: 40px 30px;
                @include bevel-and-shadow($colorOverviewBackground, 26px);

                p {
                    &.buttons {
                        margin: 0;
                    }
                }

                .btn {
                    width: calc(100% - 20px);
                    min-width: 0;
                    max-width: 240px;
                    display: inline-block;
                    margin: 28px 10px 0;
                    float: none !important;
                }
            }

            .tire-gallery {
                margin: 40px auto 0;
                float: none;

                .tire-gallery-image {
                    height: calc(100vw - 60px);
                    max-height: 400px;
                }

                .fl-col-group {
                    width: calc(100% + 14px) !important;
                    font-size: 0;
                    margin: 0 -7px;

                    .fl-col {
                        max-width: calc(33.333% - 14px) !important;
                        margin: 0 7px;


                        .fl-module-content {
                            margin: 0;
                        }

                        .fl-photo-content {
                            max-width: calc(33.333vw - 34px);
                            max-height: calc(33.333vw - 34px);
                            width: 120px;
                            height: 120px;
                        }
                    }
                }
            }
        }

        @include phone-medium() {
            .fl-html {
                p {
                    max-height: 200px;
                    overflow: hidden;
                    @include transition(max-height 0.4s ease);
                }

                p.read-more {
                    display: block;
                    margin: 0;
                    text-align: center;

                    .btn {
                        @include btn-read-more($colorReadMoreOverview, $colorReadMoreOverviewText);
                    }
                }
            }
        }
    }

    .overview-row-2 {
        @include section-fullwidth();

        .fl-photo,
        .fl-photo-content,
        img {
            height: 790px;
            max-height: 50vw;
            width: auto;
            max-width: 9999px;
        }

        .fl-col {
            width: 50% !important;
            float: left !important;
            clear: none !important;
            overflow: hidden;

            &.tire-column {
                position: absolute;
                width: 400px !important;
                height: 100%;
                left: calc(50% - 200px);
                top: 0;
                z-index: 1;
                overflow: visible;

                img {
                    height: 125%;
                    max-height: 9999px;
                    width: auto;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    max-width: 9999px;
                    @include transform(translate(-50%, -50%));
                }
            }
        }
    }

    .overview-row-3 {
        background: $colorMain;
        @include section-fullwidth();

        .fl-row-content-wrap {
            padding-bottom: 130px;
        }

        #{$not-editor} & {
            .background-image {
                position: absolute;
                top: 100px;
                left: 0;
                max-width: 100%;

                .fl-photo-content {
                    margin: 0;

                    img {
                        max-width: 100%;
                    }
                }
            }
        }

        .fl-rich-text {
            text-align: center;
            max-width: $default-width;
            margin: 0 auto;
            position: relative;

            h1, .h1 {
                @include section-h1($colorFalkenAdvantageFont, 130px 0 40px);
            }

            p {
                font-size: 18px;
                font-weight: normal;
                line-height: 1.6;
                max-width: 1000px;
                margin: 0 auto;
                color: $colorFalkenAdvantageFont;
            }
        }

        .fl-photo-content {
            margin: 50px 0 25px;

            img {
                max-width: calc(100% - 60px);
            }
        }

        .fl-module-photo {
            @include desktopMobileSwitch();
        }

        .text-comment .fl-rich-text p {
            font-size: 12px;
            font-weight: 500;
            font-style: italic;
            text-transform: uppercase;
            opacity: 0.7;
            max-width: 700px;
        }

        @include mobile() {

            .fl-row-content-wrap {
                padding-bottom: 85px;
            }

            #{$not-editor} & {
                .background-image {
                    top: 30px;
                }
            }

            .fl-photo-content {
                margin: 20px 0;
            }

            .fl-rich-text {
                padding: 0 30px;

                h1, .h1 {
                    margin-bottom: 30px;
                }

                p {
                    font-size: 18px;
                }
            }
        }
    }

    .overview-row-4 {

        @include section-fullwidth();

        position: relative;

        .fl-row-content-wrap {
            padding-bottom: 100px;
        }

        .wheel {
            .fl-photo-content {
                position: relative;

                img {
                    margin-top: -60px;
                }
            }
        }

        .fl-rich-text {
            h1, .h1 {
                @include h1(140px);
                line-height: 0.8;
                color: $colorMain;
                text-align: center;
                position: relative;
                z-index: 1;
                margin: 0;

                #{$not-editor} & {
                    margin-top: -2.3em;

                    @include phone() {
                        margin-top: -4em;
                    }

                    @include tablet() {
                        margin-top: -3em;
                    }
                }
            }
        }

        @include mobile() {

            .fl-row-content-wrap {
                padding-bottom: 0;
            }

            .fl-rich-text {
                h1, .h1 {
                    @include h1(14vw);
                    margin: 0 30px;
                }
            }

            .wheel {
                .fl-photo-content {
                    img {
                        max-width: calc(100% - 60px);
                    }
                }
            }
        }

        @include tablet() {
            .fl-rich-text {
                h1, .h1 {
                    @include h1(100px);
                }
            }
        }
    }
}