.page-header {
    padding-top: 6rem;
    padding-bottom: 0;
}

.header-carousel-image {
    width: 100vw;
    height: 90vh;
    object-fit: cover;
}

header .slick-prev {
    left: 2rem;
    z-index: 100;
}

header .slick-next {
    right: 2rem;
    z-index: 100;
}

header .slick-prev:before {
    color: var(--accent);
    content: "\f060";
    font-family: "Font Awesome 5 Free";
    font-size: 2.7rem;
    font-weight: 900;
    opacity: .5;
}

header .slick-next:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
    font-size: 2.7rem;
    color: var(--accent);
    opacity: .5;
}

header .slick-dots li.slick-active button::before {
    color: var(--accent);
    opacity: 1;
}

header .slick-dots li button::before {
    color: var(--accent);
    font-size: 18px;
}

header .slick-dots {
    bottom: 3rem;
    margin-left: 6rem;
    text-align: left;
}

header .slick-slide {
	margin: 0 5px;
}

header .slick-list {
	margin: 0 -5px;
}

.header-carousel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

.header-carousel.slick-initialized {
    visibility: visible;
    opacity: 1;
}

@media only screen and (max-width: 997.92px) {

    header .slick-dots {
        bottom: 10px;
        margin-left: 0;
        text-align: left;
    }

    .header-carousel-image {
        width: 100%;
        height: 45vh;
    }

}

@media only screen and (max-width: 767.92px) {

    .page-header {
        padding-top: 8rem;
    }

    .header-carousel-image {
        width: 100%;
        height: 37vh;
    }

    header .slick-dots li button::before {
        color: var(--accent);
        font-size: 10px;
    }

}