@charset "utf-8";
/* ================================================================ 
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/menus/cssplay-details-summary-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated html may be modified in any 
way to fit your requirements.
=================================================================== */

#menu,#menu-toggle{font-family:var(--sans-serif)}
#menu-toggle{position:absolute;top:0;right:10px;cursor:pointer}
#menu-toggle summary::marker{content:''}

#menu-toggle summary .m-open,
#menu-toggle summary .m-close {font-size:36px}

#menu-toggle summary .m-open{color:var(--gold)}
#menu-toggle summary .m-close{color:#f00}

#menu-toggle:not([open]) summary .m-open{display:block}
#menu-toggle:not([open]) summary .m-close{display:none}

#menu-toggle[open] summary .m-open{display:none}
#menu-toggle[open] summary .m-close{display:block}

/*#menu-toggle summary .m-open{color:var(--gold)}
#menu-toggle summary .m-close{color:#f00}
#menu-toggle:not([open]) summary .m-open{display:block;}
#menu-toggle:not([open]) summary .m-close{display:none}*/

/*#menu-toggle summary{;color:#fff;background-color:#000}
#menu-toggle summary::-webkit-details-marker{font-size:0px;display:none}
#menu-toggle:not([open]) summary .menu-close,#menu-toggle[open] summary .menu-open{display:none}
#menu-toggle[open] summary .menu-close{display:block;color:red;font-size:36px;font-weight:800}
#menu-toggle:not([open]) summary .menu-open{display:block;color:var(--gold)}
#menu-toggle:not([open]) summary .menu-close{display:none}*/


/*#menu-toggle, #menu {font-family:var(--sans-serif)}
#menu-toggle {position:absolute; top:0; right:10px; cursor:pointer;}
#menu-toggle summary{font-size:30px; color:#fff; background-color:#000}
#menu-toggle summary::marker {content:'';}
#menu-toggle summary::-webkit-details-marker {font-size:0px; display:none;}
#menu-toggle[open] summary .menu-open {display:none;}
#menu-toggle[open] summary .menu-close {display:block; color:#f00; font-size:36px; font-weight:800}
#menu-toggle:not([open]) summary .menu-open {display:block; color:#fff}
#menu-toggle:not([open]) summary .menu-close {display:none;}*/




#slides {width:100vw;position:relative; top:0; background-color:#655; height:auto; display:flex; justify-content:center;}

#slides .show {display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows 0.75s; width:100%; position:absolute; left:0; top:50px; background:#fff; border-bottom:1px solid #000}
#slides .show-end { position:relative; left:100px; min-height:0; align-self:end; display:flex; background:#0000; justify-content:center; width:100%;  max-width:1400px; margin:0 auto; flex-wrap:wrap;}

#slides .show-end > ul {
	min-width:120px;
	padding:0;
	margin:70px auto; 
	list-style-type: none;
}
#slides .show-end ul li {font-size:clamp(16px, 2vw, 22px); color:#000;}
#slides .show-end ul li a {display:block; width:100%; color:#333; text-decoration:none;}
#slides .show-end ul li a:hover {color:#33d; text-decoration:underline;}
#slides .show-end ul ul {margin:1rem auto;}

#slides .titles {margin:10px auto;}
#slides details {display:inline-block; width: clamp(120px, 12vw, 200px); margin:0; box-sizing:border-box; cursor:pointer; text-align:center; list-style-type:none;}
#slides details:hover {color:var(--gold); background-color:var(--black)}
#slides details[open] + div {grid-template-rows:1fr; transition:grid-template-rows 0.75s;}
#slides details[open] {border:1px dotted #fff}

#slides summary {position: relative;}
#slides summary::marker {content: '';}
#slides summary::-webkit-details-marker {font-size:0px; display:none;}
#slides summary::before,
#slides summary::after {content: '';}
#slides summary::after {width: 8px; height: 8px; border: 2px solid #fff; border-width:2px 2px 0 0; position: absolute; top: calc(50% - 5px); right: 10px; transition:transform 0.25s;}
#slides summary::after {transform: rotate(45deg); transform-origin: 50% 50%;}
#slides [open] summary::after {transform: rotate(135deg);}
#slides summary.notog::marker, #slides summary.notog::before, #slides summary.notog::after {content: ''; display: none;}
#slides summary .notog {border-bottom:1px solid #999}

@media screen and (min-width: 750px) {
	#menu-toggle{display:none}
	#slides {top:20px}
	#slides .show-end { position:relative; left:0}
	.tagline{display:inline-block}
	.show-end div.flexed-sb article { max-width:250px}
	.show-end .flexed-sb section {width:48%}
	.flexed-sb article:nth-of-type(even) { margin-left:4rem}
	#slides summary {color:var(--gold);padding:6px; font-family:var(--sans-serif); text-decoration:none; font-weight:600}
	#slides summary:hover {background-color:var(--gold); color:var(--black)}
	ul.inline li {display:inline; margin:0 1rem}
	#slides .show-end ul li a {
		display: inline-block;
		width: fit-content;
		color: #333;
		text-decoration: none;
	}
}

@media only screen and (min-width: 900px) { .showend ul > li {display: inline-block; margin: 0 1rem;} }


@media only screen and (max-width: 900px) {
	#menu {position:fixed; width:100%; min-height:calc(100dvh - 60px); left:-150vw; transition:left 0.5s; padding:0; top:60px; overflow:hidden; overflow-Y:scroll; background-color:#cde;}
	#slides details {position:relative; left:10px; display:block; width:calc(100vw - 60px); cursor:pointer; text-align:left}
	#slides details summary {height:40px; padding:10px 0 0 10px; background-color:#655 }
	#slides details:last-child {margin-bottom:50px;}
	#slides .show {position:static;  border-bottom:1px solid #cde;}
	#slides .show-end {background:#0000; justify-content:left; position:relative; left:10px; width:95%}
	#slides .show-end ul {margin:10px 20px 0 0}
	#slides .show-end ul li:last-of-type { margin-bottom:2rem}
	#menu-toggle[open] + #menu {left:0; top:50px}
	body:has(#menu-toggle[open]) {overflow:hidden;}
}