:root {
    --dot_size: 1em;
    --arrow_size: 2em;
}

/*TODO Fix slideShow appearing over navbar*/
/*Main container, containing all slideshow elements*/
.slide_show_container {
    /*position: relative;*/ /*TODO*/
    /*z-index: 8001;*/
}

.slide_show_container img {
    /*z-index: 8002;*/
}

/*Container for slideshow navigation (arrows and dots)*/
.slide_show_nav_container {
    display: block;
    position: relative;
    bottom: 3em;
    bottom: calc(var(--arrow_size) * 1.5);
    margin: 0 auto;
    text-align: center;
}

/*Slideshow arrows*/
.slide_show_arrow {
    /*position: relative;*/
    cursor: pointer;
    font-size: 2em;
    font-size: var(--arrow_size);
    font-weight: bolder;
    color: #e27d60;
}

/*Container to be populated a number of dots, depending on number of images class="slide_show_container", by jQuery,*/
.slide_show_dot_container {
    margin: 0;
    width: 100%;
    height: 100%;
}

w3-animate-fading{
    animation:fading 10s infinite
}@keyframes fading{
     0%{opacity:0}50%{opacity:1}100%{opacity:0}
 }

 /*Dot for image currently showing*/
.selectedDot{
    font-weight: normal;
    font-size: var(--dot_size);
}

/*Dots for images that are currently hidden*/
.unselectedDot{
    font-weight: bold;
    font-size: var(--dot_size);
}

/*Slideshow dots*/
.dot {
    height: 1em;
    height: var(--dot_size);
    width: 1em;
    width: var(--dot_size);
    border-color: white;
    border-style: solid;
    border-radius: 50%;
    border-width: calc(var(--dot_size) * 0.25);
    border-width: 0.25em;
    display: inline-block;
    z-index: 1000;

}

.dotSel {
    height: 1em;
    height: var(--dot_size);
    width: 1em;
    width: var(--dot_size);
    background-color: white;
    border-color: #e27d60;
    border-style: solid;
    border-radius: 50%;
    display: inline-block;
}

@media screen and (max-width:961px)  {
    :root {
        --dot_size: 0.75em;
        --arrow_size: 1.5em;
    }
}