/*
Font

Nunito Sans Bold 700
Banner top: 18pt        1.12em  1.4em

GFS Didot
Banner mid: 60pt        3.75em

Crimson Pro Bold 700 italic
Banner bottom: 18pt     1.12em

font-family: 'Nunito Sans', sans-serif;
font-family: 'GFS Didot', serif;
font-family: 'Crimson Pro', serif;
*/

.carousel {
    width: 100%;
}
  
.slide-box {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    text-align: center;
    animation-name: fadeInBottom;
}

@keyframes fadeInBottom {
  from {
      opacity: 0;
      transform: translateY(100%);
  }
  to { opacity: 1 }
}
@media (min-width: 320px) and (max-width: 767.98px) {
    .slide-box img {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .carousel-item .d-lg-block {
        height: 100%;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}
  
@media (min-width: 768px) and (max-width: 991.98px) {
    .slide-box img {
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}
  
@media (min-width: 992px) {
    .slide-box img {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}
  
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: .5rem;
}

.carousel-item {
    height: 100vh;
}

.carousel-item .d-lg-block{
    height:100%;
    background-size: cover;
}
  
.carousel-control-next, .carousel-control-prev {
    top: 50%;
    transform: translateY(-50%);
    bottom: unset;
}
@media only screen and (max-width: 991px) {
    .slide-box {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .carousel-item {
        height: 560px;
    }
    .carousel-control- {
        &prev, &next {
            opacity: 1;
            img {
                width: 40px;
            }
        }
    }
}
@media only screen and (max-width: 575px) {
    .carousel-item {
        height: 260px;
    }
    .carousel-control- {
        &prev, &next {
            img {
                width: 22px;
            }
        }
    }
    .carousel-indicators {
        margin-bottom: 0;
    }
}