@charset "UTF-8";
/* CSS Document */
/** {box-sizing: border-box}*/
/*body {font-family: Verdana, sans-serif;margin:0;}*/
/*.site { background-color: #300;}*/

.mySlides, .mySlidesB2, .mySlidesC3  {display: none;}

.slideshow-container {
    font-family: Verdana, sans-serif;
    position: relative;
    margin: auto;
    height: calc(100vh - 60px);
    border-top: 2px solid #600;
}

.mySlides > img,
.mySlidesB2 > img,
.mySlidesC3 > img {max-height: calc(90vh - 80px);}

.slideshow-container img {
    max-width: 96%;
    max-height: calc(85vh - 60px);
	margin-top: 48px;
    border-radius: 16px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 1.1em;
  background-color: #222;
  width: auto;
  padding: 12px 16px 8px 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {right: 1vw;}
.prev {left: 1vw;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}

/* The dots/bullets/indicators */
.dot, .dotB2, .dotC3 {
/*    , .dotD4*/
    display: inline-block;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    opacity: .6;
}

.active, .dot:hover, .dotB2:hover, .dotC3:hover {opacity: 1;}
/*, .dotD4:hover*/

/* Number text (ex: '1 / 10' etc) */
.slideNum {
    color: #AAAAAA;
    font-size: .7em;
    position: absolute;
    top: 2.5em;
    width: 100%;
    text-align: center;
}

/* Caption text */
.topCaption {
    color: #DDD;
    font-size: .9em;
    position: absolute;
    bottom: .5em;
    width: 90%;
    margin: 0 5%;
    padding: 2px 4px;
    text-align: center;
    background-color: rgba(92, 92, 92, 0.71);
    border-radius: 6px;
}

/*subdue the footer for w3s_slideshow*/
footer { background-color: #000;}
footer button {opacity: 90%;}
.pgTopBott {opacity: 90%;}
.noShowSm {visibility: hidden;}
/*
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
*/

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .prev, .next,.text {
        top: 1.6em;
        font-size: 11px;
        padding: 12px 16px 16px 16px;
    }
}

@media screen and (min-width: 425px) {
    .dot, .dotB2, .dotC3 {display: none;}
/*    , .dotD4*/
    
    .slideNum {display: none;}
    #footerText {background-color: #777; border-top-color: #555;}
    .topCaption {
        margin-top: 12px;
        line-height: .9em;
    }
    .slideshow-container img {
        margin-top: 0.1em;
        max-height: calc(98vh - 60px);
    }
}

@media screen and (min-width: 650px) {
    .dot, .dotB2, .dotC3 {display: inline-block;}
/*    , .dotD4*/
    
    .slideNum {
        display: inline-block;
        padding: 0 0 0 10px;
        top: 0;
        left: 0;
        text-align: left;
        width: auto;
        color: #AAA;
    }
    
    #footerText {background-color: #777; border-top-color: #555;}

    .slideshow-container img {
        margin-top: 2.5em;
        max-height: calc(90vh - 57px);
    }
    
    @media screen and (orientation: landscape) {
        .wikipedia {color: #fccd81;}
        .topCaption {
            top: 1em;
            padding: 8px 38px;
            margin-left: 50px;
            width: calc(100% - 100px);
            background-color: rgba(0, 0, 0, 0);
        }
        .slideshow-container img {
            margin-top: 2.5em;
            max-height: calc(85vh - 75px);
        } 
    }
}
    
@media screen and (min-width: 1015px) {
    #footerText {background-color: #000; border-top-color: #000;}
    
    .prev, .next {top: .1em;}
    
    .slideNum {
        color: #AAAAAA;
        top: 1.5em;
        margin-left: 5em;
    }

    .topCaption {color: #faebd7;}
}