/* This is slidshow custom css */

.carousel:hover .flickity-page-dots {
    opacity: 1;
    transition: opacity 0.3s;
}

.flickity-page-dots {
    bottom: 10px;
    opacity: 0;
}

.flickity-page-dots .dot {
    margin: 0 5px
}

.flickity-button-icon {
    fill: white;
}

.flickity-button {
    background: #333;
    /* background: none; */
}

button.flickity-button:hover {
    filter: none;
}

.flickity-button:hover {
    background: darkcyan;
}

.flickity-prev-next-button {
    border-radius: 5px;
    opacity: 0;
}

.carousel:hover .flickity-prev-next-button {
    opacity: 1;
    transition: opacity 0.3s;
}

.flickity-prev-next-button.previous {
    left: 3px;
}

.flickity-prev-next-button.next {
    right: 3px;
}

.carousel {
    /* background: #222; */
    background-color: inherit;
}

.carousel-cell {
    width: 100%;
    /* full page width */
    /* max-height: 300px; very useful for small screens */
    /* height: auto; */
    /* background: #222; */
    background-color: inherit;
    overflow: scroll;
}

.carousel-cell img {
    display: block;
    max-height: 100%;
    margin: 0 auto;
    max-width: 100%;
}