/* BANNER */
.banner {
    margin: 0.5em auto;
    color: #fff;
    position: relative;
    width: 40%;
    box-shadow: 0 10px 20px 0 #A8A8A8;
    background-color: #fff;
    cursor: default;
}

.white {
    background-color: #fff;
}

.black {
    background-color: #000 !important;
}

/* SLIDESHOW */
.slides {
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.active {
    opacity: 1 !important;
    z-index: 2;
    position: relative;
}

/* FADING ANIMATION */
.fade-1, .fade-2, .fade-3, .fade-4, .fade-5 {
    transition: opacity ease-in-out;
}
.fade-1 { transition-duration: 1s; }
.fade-2 { transition-duration: 1.5s; }
.fade-3 { transition-duration: 2s; }
.fade-4 { transition-duration: 2.5s; }
.fade-5 { transition-duration: 3s; }

/* MEDIA QUERIES */
@media (max-width: 1200px) {
    .banner {
        width: 50%;
    }
}

@media (max-width: 992px) {
    .banner {
        width: 60%;
    }
}

@media (max-width: 768px) {
    .banner {
        width: 80%;
    }
}

@media (max-width: 480px) {
    .banner {
        width: 90%;
        margin: 0.2em auto;
    }
}


/* MEDIA QUERIES */
@media screen and (max-width: 1200px) {
    .banner {
        width: 50%;
    }
}

@media screen and (max-width: 992px) {
    .banner {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    .banner {
        width: 70%;
        box-shadow: 0 5px 10px #A8A8A8;
    }
}

@media screen and (max-width: 480px) {
    .banner {
        width: 80%;
        margin: 0;
        box-shadow: none;
    }
}