.banner { 
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: height 0.6s;
    display: flex;
    justify-content: center;
}

.banner .banner-images {
    width: 100%;
}

.banner .banner-image {
    width: 100%;
    position: absolute;
    display: none; /* this will be managed by plugin - changing between "none" and "flex" */
    justify-content: center;
}

.banner .banner-image[onclick] {
    cursor: pointer;
}

.banner .banner-image img {
    max-height: 100%;
    max-width: 100%;
}

.banner .banner-left, 
.banner .banner-right
{
    position: absolute;
    top: 50%;
    z-index: 1000;
    display: none; /* this will be managed by plugin - changed to "block" only if there's more then one image */
}

.banner .banner-left
{
    left: 0;
}

.banner .banner-right
{
    right: 0;
}

.banner .banner-left .banner-arrow, 
.banner .banner-right .banner-arrow
{
    background-color: rgba(0, 0, 0, 0.25);
    margin-top: -50%;
    padding: 8px 18px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.banner .banner-left .banner-arrow 
{
    border-radius: 0 3px 3px 0;
}

.banner .banner-right .banner-arrow
{
    border-radius: 3px 0 0 3px;
}

/* PAGINATION */
.banner .banner-dots
{
    display: flex;
    justify-content: center;
    z-index: 1001;
    position: absolute;
    bottom: 10px;
    cursor: pointer;
}

.banner .banner-dot,
.banner .banner-dot-selected
{
    color: rgba(0, 0, 0, 0.75);
    font-size: 12px;
}

/* Find the very last element (in this case "i" elements) located in span */
.banner .banner-dot span,
.banner .banner-dot-selected span
{
    font-size: 10px;
}

/* Find the very last element (in this case "i" elements) located in span */
.banner .banner-dot span > *:last-child,
.banner .banner-dot-selected span > *:last-child
{
    font-size: 12px;
}