/*=========================
    05. MAIN SLIDER
===========================*/

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.main-slider {
    .slick-slide-container {
        box-sizing: content-box;
    }

    .slider-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
    }

    .slick-slide {
        position: relative;
        max-width: 100%;
        height: 550px;

        background-position: center center;
        background-size: cover;

        .slick-slide-container {
            position: relative;
            height: 100%;
        }

        .slick-slide-content {
            position: absolute;
            left: 0;
            top: 50%;
            width: 90%;
            @include transform( translateY(-49%) );

            h1,
            p {
                color: $white-color;
            }

            h1 {
                font-size: 60px;
                @include transition( all .3s ease-in );
            }
        }

        .slide-center {
            top: 50%;
            left: 50%;
            @include transform( translate(-50%, -50%) );
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .slick-dots {
        bottom: $inner-padding;

        button {
            &::before {
                color: darken( $white-color, 5% );
            }
        }

        .slick-active {
            button {
                &::before {
                    color: $white-color;
                }
            }
        }
    }

    .video-popup {
        display: inline-block;
    }

    .cta-buttons {
        >span {
            color: $white-color;
            padding: 0 $inner-padding/2;
        }
    }
}

.arrow-left,
.arrow-right {
    position: absolute;
    top: 50%;

    background-color: $white-color;
    font-size: $font-size*1.6;
    line-height: 40px;
    text-align: center;

    border-radius: 50%;
    @extend .pre-shadow;

    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1;

    @include transform( translateY( -50% ) );
}

.arrow-left {
    left: 2%;
}

.arrow-right {
    right: 2%;
}