.hero-container {}

/* SLIDER */

.slider-container {
    max-width: 100%;
    min-height: 40vw;
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;
}

.slider-image {
    width: 100%;
    height: 80vh;
}

.slider-image img {
    width: 100%;
    height: 80vh;
    min-height: 40vw;
    object-fit: cover;
    vertical-align: middle;
    transition: 2s;
}

.slider-directions {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}

.slider-directions a {
    color: var(--white);
    display: inline-block;
    padding: 5em 1.5em;
    text-decoration: none;
}

.slider-directions a:hover {
    background: rgba(255, 255, 255, 0.5);
    transition: .6s;
}

.slider-bars {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.slider-bar {
    cursor: pointer;
    height: .3em;
    width: 25px;
    margin: 0 2px;
    background-color: var(--white);
    display: inline-block;
    margin-left: 3px;
    opacity: .8;
}

.active {
    background-color: var(--blue2);
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

@media screen and (max-width: 350px) {
    .slider-container {
        max-height: 50vh;
    }

    .slider-image,
    .slider-image img {
        height: 50vh;
    }
}