.frontpage-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0px 0px 50px 0px;
}

.frontpage-slider__viewport {
    width: 100%;
    overflow: hidden;
}

.frontpage-slider__track {
    display: flex;
    align-items: center;
    transition: transform 0.6s ease;
    will-change: transform;
}

.frontpage-slider__slide {
    position: relative;

    /* Bootstrap 4.2.1 - xl */
    flex: 0 0 1140px;
    max-width: 1140px;

    opacity: 0.45;
    filter: blur(4px);
    transform: scale(0.97);

    transition:
        filter 0.6s ease,
        opacity 0.6s ease,
        transform 0.6s ease;

    z-index: 1;
}

.frontpage-slider__slide.is-active {
    opacity: 1;
    filter: none;
    transform: scale(1);
    z-index: 2;
}

.frontpage-slider__slide a {
    display: block;
    position: relative;
}

.frontpage-slider__image {
    display: block;
    width: 100%;
    height: auto;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.frontpage-slider__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 3;
}


/*
|--------------------------------------------------------------------------
| Arrows
|--------------------------------------------------------------------------
*/

.frontpage-slider__arrow {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 60px;
    height: 100px;

    padding: 0;
    border: 0;

    background: transparent;

    cursor: pointer;

    z-index: 10;
}

.frontpage-slider__arrow:focus {
    outline: none;
}

.frontpage-slider__arrow--prev {
    left: calc(50% - 570px - 20px);
}

.frontpage-slider__arrow--next {
    right: calc(50% - 570px - 20px);
}


/*
|--------------------------------------------------------------------------
| Arrow icon
|--------------------------------------------------------------------------
*/

.frontpage-slider__arrow span {
    display: block;

    width: 42px;
    height: 42px;

    border-top: 6px solid #ed6670;
    border-left: 6px solid #ed6670;

    transition: border-color 0.2s ease;
}

.frontpage-slider__arrow--prev span {
    transform: rotate(-45deg);
}

.frontpage-slider__arrow--next span {
    transform: rotate(135deg);
}

.frontpage-slider__arrow:hover span {
    border-color: #ed1c24;
}


/*
|--------------------------------------------------------------------------
| LG
| Bootstrap container = 960px
|--------------------------------------------------------------------------
*/

@media (max-width: 1199px) {

    .frontpage-slider__slide {
        flex-basis: 960px;
        max-width: 960px;
    }

    .frontpage-slider__arrow--prev {
        left: calc(50% - 480px - 20px);
    }

    .frontpage-slider__arrow--next {
        right: calc(50% - 480px - 20px);
    }

}


/*
|--------------------------------------------------------------------------
| MD
| Bootstrap container = 720px
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {

    .frontpage-slider__slide {
        flex-basis: 720px;
        max-width: 720px;
    }

    .frontpage-slider__arrow--prev {
        left: calc(50% - 360px - 15px);
    }

    .frontpage-slider__arrow--next {
        right: calc(50% - 360px - 15px);
    }

}


/*
|--------------------------------------------------------------------------
| SM
| Bootstrap container = 540px
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

    .frontpage-slider {
        padding: 0;
    }

    .frontpage-slider__slide {
        flex-basis: 540px;
        max-width: 540px;

        opacity: 0.45;
        filter: blur(3px);
        transform: scale(0.97);
    }

    .frontpage-slider__slide.is-active {
        opacity: 1;
        filter: none;
        transform: scale(1);
    }

    .frontpage-slider__arrow--prev {
        left: 10px;
    }

    .frontpage-slider__arrow--next {
        right: 10px;
    }

}


/*
|--------------------------------------------------------------------------
| XS
|--------------------------------------------------------------------------
*/

@media (max-width: 575px) {

    .frontpage-slider {
        padding: 0;
    }

    .frontpage-slider__slide {
        flex-basis: 100%;
        max-width: 100%;

        opacity: 1;
        filter: none;
        transform: none;
    }

    .frontpage-slider__slide:not(.is-active) {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .frontpage-slider__arrow {
        width: 45px;
        height: 70px;
    }

    .frontpage-slider__arrow--prev {
        left: 5px;
    }

    .frontpage-slider__arrow--next {
        right: 5px;
    }

    .frontpage-slider__arrow span {
        width: 28px;
        height: 28px;
        border-width: 4px;
    }

}