// picParade.css Slideshow CSS https://www.w3schools.com/howto/howto_js_slideshow.asp
// crew713.com/styles/picParade.css
* {box-sizing:border-box}
   /* Slideshow container... */
.slideshow-container {
   width:600px;
   max-width: 1000px;
   position: relative;
   margin: auto;
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
}
   /* Hide the images by default... */
.mySlides {
   display: none;
}
   /* Next & previous buttons... */
.prev, .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   margin-top: -22px;
   padding: 16px;
   color: #ffd700;;
   font-weight: bold;
   font-size: 20px;
   text-shadow: 3px 3px 3px black;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
}
   /* Position the "next button" to the right... */
.next {
   right: 0;
   border-radius: 3px 0 0 3px;
}
   /* 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);
}
   /* Caption (cutline) text... */
.text {
   //color: #f2f2f2;
   color: #ffd700;
   text-shadow: 2px 2px 2px black;
   font-size: 15px;
   font-weight:bold;
   padding: 8px 12px 8px 0px;
   position: absolute;
   bottom: 8px;
   width: 100%;
   text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
   //color: #f2f2f2;
   color: #ffd700;
   text-shadow: 2px 2px 2px black;
   font-size: 12px;
   font-weight:bold;
   padding: 8px 12px;
   position: absolute;
   top: 0;
}
   /* The dots/bullets/indicators... */
.dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbbbbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
}
.active, .dot:hover {
    //background-color: #603913;
    background-color: #8b4513;
}
   /* Fading animation... */
.fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 0s;
   animation-name: fade;
   animation-duration: 0s;
}
@-webkit-keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
}
#goback:hover {
   content: url('../gfx/arrows/gobackglow.png');
}
@keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
}