.slider {
    position: relative;

    &__item {
        position: relative;
        height: 100vh;
        background: no-repeat center / cover;
        //img {
        //    display: block;
        //    width: 100%;
        //}

        &-text {
            position: absolute;
            bottom: 140px;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
            z-index: 4;
            background: rgba(115,215,215,0.4);
            //position: relative;
        }

        &-content {
            color: #FFFFFF;
            font-size: 25px;
            font-weight: 300;
            letter-spacing: -0.2px;
            margin: 0 0 20px 0;

        }

        &-title {
            color: #FFFFFF;
            font-size: 60px;
            font-weight: 600;
            letter-spacing: -0.48px;
            margin: 0 0 15px 0;
        }

        &-btn {
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.14px;
            border-radius: 8px;
            background-color: #f12d34;
            padding: 15px 20px;
            border: none;
            transition: background 0.3s, color 0.3s;

            &:hover {
                background-color: lighten(#f12d34, 5%);
                //color: ;
            }

            &:hover {
                cursor: pointer;
            }
        }

    }

    &__nav {
        position: absolute;
        z-index: 3;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        // background: rgba(255,255,255,1);
        max-width: 1230px;
        margin: 0 15px;
        left: 50%;
        transform: translateX(-50%);
        display: block;
        //pointer-events: none;

        &-arrow {
            position: absolute;
            top: 50%;
            width: 33px;
            height: 53px;

            &:hover {
                cursor: pointer;
            }


            &--left {
                background: url("../img/arrow-left.svg"), blue;
                left: 0;
            }

            &--right {
                background: url("../img/arrow-right.svg"), blue;
                right: 0;
            }

        }
    }

    .slick-dots {
        position: absolute;
        bottom: 90px;
        z-index: 3;

        li {
            width: 14px;
            height: 15px;

            button {
                width: 100%; height: 100%;
                background-color: #ffffff;
                opacity: 0.67;
                border-radius: 50%;
                border: 2px solid transparent;

                padding: 0;
                box-sizing: content-box;
                transition: border 0.3s;

                &::before {
                    display: none;
                }

                &:hover::before {
                    display: none;
                }

            }

        }

        .slick-active {
            width: 14px;
            height: 15px;
        }

        .slick-active button {
            width: 100%; height: 100%;
            border: 2px solid #f43b40;
            background-color: #ffffff;
            border-radius: 50%;

            &::before {
                display: none;
            }

        }

    }



}

var slider = $('.slider__items').slick({
    dots: true,
    infinite: true,
    arrows: false,
});

$('.slider__nav-arrow--left').on('click', function () {
    slider.slick('slickPrev');
})
$('.slider__nav-arrow--right').on('click', function () {
    slider.slick('slickNext');
})