/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-auto-manual-slideshow-v2.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated html may be modified in any 
way to fit your requirements.
=================================================================== */
#slideshow {width:98%; max-width:600px; margin:10px auto 20px auto; position:relative; aspect-ratio:1/1; border:1px solid red; border:2px solid #000; border-bottom-width:30px; background:#000;
--slides:2; /* edit this */
--still:4s;
--slide:1s;

/* do not alter variables below */
--delay:calc(var(--slide) * (-1));
--time:calc(var(--still) + var(--slide));
--total:calc(var(--time) * var(--slides));
}
#slideshow #inner {display:block; width:100%; height:100%; position:relative; overflow:hidden; background-size:contain; background-repeat:no-repeat; background-position:center center;}
#slideshow #inner > div {width:100%; height:100%; position:absolute; left:100%; animation: slide var(--total) var(--delay) infinite; z-index:-1; background:#000;}

/* slide animation delay times */
#slideshow #inner > div:nth-of-type(1) {animation-delay:var(--delay);}
#slideshow #inner > div:nth-of-type(2) {animation-delay:calc(var(--delay) + var(--time));}

/* make image fit the available width/height */
#slideshow #inner > div img {display:block; width:100%; height:100%; object-fit:contain;}

/* Slide timings */
@keyframes slide {
0% {left:100%; z-index:-1;}
/* edit following four lines */
10% {left:0%; z-index:10;} /* second calculation : first calculation * (--slide / (--still + --slide)) : 11.111% * 1/5 = 2.222% */
50% {left:0%; z-index:10;} /* first calculation : 100% / number of slides = 11.1111% */
60% {left:-100%; z-index:10;} /* third calculation : fist calculation + second calculation : 11.111% + 2.222% = 13.333% */
60.001% {left:100%;-1;} /* fourth calculation : third calculation + 0.001% : 13.333% + 0.001% = 13.334% */
/* end edit */
100% {left:100%;-1;}
}

/* slide animation change of delay times on click/tap of buttons */
#key1:checked ~ #slideshow {--delay:calc(var(--slide) * (-1));}
#key2:checked ~ #slideshow {--delay:calc(var(--slide) * (-1) - var(--time));}

[name="slides"] {display:none;}
/* Restart animations from beginning on click/tap */
[name="slides"]:active ~ #slideshow #inner div,
[name="slides"]:active ~ #slideshow #selector div {display:none; outline: 0 !important;-webkit-tap-highlight-color: transparent;}

/* show selected slide as a background image when click/tap buttons to stop a blank flash as animation restarts */
[name="slides"]:active ~ #slideshow #inner {outline: 0 !important;-webkit-tap-highlight-color: transparent;}
#key1:active ~ #slideshow #inner {background-image:url('tamu/IMG_9225-crop.jpg');}
#key2:active ~ #slideshow #inner {background-image:url('tamu/IMG_9221-crop.jpg');}

/* selector button styles */
#slideshow #selector {position:absolute; left:0; bottom:-27px; width:100%; height:23px; background:#000; z-index:100;}
/* edit width to match first calc */
#slideshow #selector label {display:inline-block; width:50%; height:22px; padding:0; margin:0; background-image: linear-gradient(#8c8, #040, #8c8); border:1px solid #000; box-sizing:border-box;  z-index:1; cursor:pointer;}

/* current slide indication (edit width to match first calc*/
#slideshow #selector div {display:block; width:50%; height:22px; background:#fff6; position:absolute; z-index:10; left:0; top:0; animation:counter var(--total) calc(var(--delay)) steps(var(--slides)) infinite; border:1px solid #000; box-sizing:border-box;}

@keyframes counter {
0% {left:0%}
100% {left:100%;}
}

/* Show small image of slide when hovering a slide button */
#slideshow #selector label::after {display:block; content:""; position:absolute; bottom:150%; left:-9999px; transform:translateX(-50%); width:30%; aspect-ratio:1/1; background-size:contain; background-position:center center; background-repeat:no-repeat; background-color:#0008; opacity:0; transition:opacity 0.5s;} 
/* small images shown on hover of buttons */
#slideshow #selector label:nth-of-type(1)::after {background-image:url('tamu/IMG_9225-crop.jpg');}
#slideshow #selector label:nth-of-type(2)::after {background-image:url('tamu/IMG_9221-crop.jpg');}
/*#slideshow #selector label:hover::after {left:50%; opacity:1;}*/

/* styles for information panels */
#slideshow #inner div div {display:flex; width:100%; height:100%; position:absolute; top:-100%; left:0; align-items:center; background:#0007; transition:0.5s;}
#slideshow #inner div div h1 {width:100%; text-align:center; color:#aaa9; font:500 90px/90px arial, sans-serif;}
#slideshow #inner div div h1 span {display:block; font:300 40px/40px arial, sans-serif; color:#fff; transform: translateY(-40px);}
/*#slideshow #inner div:hover div {top:0;}*/

/* PLAY/PAUSE styles */
#label-holder {width:100px; height:35px; display:block; margin:0 auto 30px auto; position:relative;}
#label-holder div {width:100%; height:0; position:absolute; left:0; top:0; background:#0000; z-index:100; animation: coverslide var(--time) steps(1) infinite;}
#label-holder #slide-control span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font:500 18px/36px arial, sans-serif; transition:0.5s; cursor:pointer;}
#label-holder #slide-control span.play {background-image: linear-gradient(#888, #040, #888); color:#fff;}
#label-holder #slide-control span.pause {background-image: linear-gradient(#8c8, #040, #8c8); color:#fff;}

/* cover play/pause button when image is sliding */
@keyframes coverslide {
0% {height:0%;}
/* edit this line */
50% {height:100%;} /* 100% - first calculation from @keyframes slide : 100% - 16.666% = 88.889% */
100% {height:100%;}
}

#play-pause {display:none;}
#play-pause:checked + #slideshow #inner,
#play-pause:checked + #slideshow #inner div,
#play-pause:checked + #slideshow #selector div,
#play-pause:checked ~ #label-holder div {animation-play-state: paused;}

#play-pause:checked ~ #label-holder #slide-control span.pause {opacity:0;}
#play-pause:checked ~ #slideshow #selector label {background-image: linear-gradient(#888, #040, #888);}