

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@100;200;300;400;500;600;700&display=swap');



* {box-sizing:border-box;}



:root {


	/* App Size */
	--appwidth:80rem;
	--appwidth:100rem;
	--appwidth:120rem;

	/* Gap/Edge Sizes */
	--rowgap:3rem;
	--cellgap:.25rem;
	--edgewidth:3.5rem;
	--slidercorner:.375rem;

	/* Font Numbers */
	--minfontsize:.625rem;
	--maxfontsize:10rem;
	font-size:clamp( var(--minfontsize) , 1vmax , var(--maxfontsize) );
	/* font-size:1vmax; */
	/* font-size:1vh; */
	/* font-size:1vw; */


	/* Billboard Content Level */
	--billboardcontentlevel:40%;
	--billboardcontentlevel:60%;
	/* --billboardcontentlevel:35%; */
	/* --billboardcontentlevel:0%; */
	/* Billboard Aspect Ratio */
	--billboardrowaspectratio:50%;
	--billboardrowaspectratio:40%;
	--billboardrowaspectratio:max( 10vh , 40% , 37.5vh );
	--billboardposteraspectratio:57.14285714%;
	--billboardposteraspectratio:max( 10vh , 57.14285714% , 50vh );

	/* Slider Row Pages */
	--sliderpagedelta:0;
	--slideritemsperpage:5;
	--sliderpagewidth:calc( 100vw - 2*var(--shiftbtnwidth) );
	--rowslidetime:.5s;
	/* Slider Row Shift Button */
	--shiftbtnwidth:var(--edgewidth);
	/* --shiftbtnwidth:calc( var(--edgewidth) - var(--cellgap) ); */
	/* Slider Row Thumbnail Aspect Ratio */
	--thumbnailaspectratio:33.3%;			/* 3:1 */
	--thumbnailaspectratio:40%;				/* 5:2 */
	--thumbnailaspectratio:56.25%;			/* 16:9 */
	--thumbnailaspectratio:60%;				/* 5:3 */
	/* --thumbnailaspectratio:75%; */		/* 4:3 */
	/* --thumbnailaspectratio:100%; */		/* 1:1 */


	/* Box Shadows */
	--boxshadow:0 0 1rem 0 #0002;
	--boxshadow:0 0 .25rem 0 #0003;


	/* Theme Colors */
	--seemoreteal:#54b9c5;			/* slider row see more button */

	/* White Glass */
	--whitesheet1:#ffffffbf;		/* billboard poster vignette actionbox playbtn */
	--whitesheet:#ffffffb3;		/* billboard poster vignette actionbox morebtn */
	--whiteglass:#ffffff80;		/* billboard poster vignette actionbox playbtn */

	/* Off White */
	--navbaroffwhite:#e5e5e5;		/* navbar text */
	--ratingboxoffwhite:#dcdcdc;	/* ratingbox edge color */

	/* Grey Glass */
	--greysheet:#6d6d6eb3;			/* billboard poster vignette actionbox morebtn */
	--greyglass:#6d6d6e66;			/* billboard poster vignette actionbox morebtn */

	/* Light Black Glass */
	--ltrblackglass:#3339;			/* ratingbox bg color */
	--ltblack:#222;				/* mediaitem backuptext */
}

:root {--slideritemsperpage:5;}



body {background-color:var(--backcolor); font-family:Nunito,sans-serif; transition:.5s; margin:0;}
.freeze {overflow:hidden;}



body {


	/* Light Grey Color */
	--dotlistongrey:#aaa;		/* sliderow dotlist */

	/* Dark Grey Color */
	--dotlistoffgrey:#4d4d4d;		/* sliderow dotlist */

	/* Overlay Display Background */
	--overlaydisplayback:#181818;

	/* Black Color */
	--blkfull:#141414;
	/* Black Glass */
	--blk5:#141414b3;				/* shift btn (hover) */
	--blk4:#14141494;				/* billboard bottom-edge gradient */
	--blk3:#14141480;				/* shift btn (default) */
	--blk2:#14141459;				/* billboard bottom-edge gradient */
	--blk1:#14141426;				/* billboard bottom-edge gradient */
	--blk0:#14141400;				/* billboard bottom-edge gradient */

	/* Dark Black Glass */
	--drkblacksheet:#000000b3;		/* navbar bg gradient */
	--drkblackglass:#0009;			/* billboard left-edge gradient */
	--drkblackglasss:#0005;

	/* Navbar Colors */
	/* Navbar Gradient */
	--navbargradient:linear-gradient( 180deg , var(--drkblacksheet) 10% , transparent );
	/* --navbargradient:linear-gradient( 180deg , black 10% , white ); */

	/* Billboard Gradients */
	--billboardleftedgegradient:linear-gradient( 75deg , var(--drkblackglass) , transparent 85% );
	/* --billboardleftedgegradient:linear-gradient( 75deg , black , white 85% ); */
	--billboardbottomedgegradient:linear-gradient( 180deg , var(--blk0) , var(--blk1) , var(--blk2) , var(--blk4) , var(--blkfull) , var(--blkfull) );
}
body {


	/* Background Color */
	--backcolor:var(--blkfull);
	/* Foreground Color */
	--forecolor:white;
	--forecolor1:#BBB;


	/* Billboard Text Shadow */
	--billboardtextshadow:0 0 .25rem var(--drkblackglass);


	/* Media Link Caption */
	--medialinktextbgcolor:var(--drkblackglasss);
}

body.lite {


	/* Light Grey Color */
	--dotlistongrey:#505050;		/* sliderow dotlist */
	--dotlistongrey:#808080;		/* sliderow dotlist */

	/* Dark Grey Color */
	--dotlistoffgrey:#b2b2b2;		/* sliderow dotlist */
	--dotlistoffgrey:#d0d0d0;		/* sliderow dotlist */

	/* White Color */
	--whtfull:#ECECEC;
	/* White Glass */
	--wht5:#ECECECb3;				/* shift btn (hover) */
	--wht4:#ECECEC94;				/* billboard bottom-edge gradient */
	--wht3:#ECECEC80;				/* shift btn (default) */
	--wht2:#ECECEC59;				/* billboard bottom-edge gradient */
	--wht1:#ECECEC26;				/* billboard bottom-edge gradient */
	--wht0:#ECECEC00;				/* billboard bottom-edge gradient */

	/* Bright White Glass */
	--brtwhitesheet:#ffffffb3;		/* navbar bg gradient */
	--brtwhiteglass:#fff9;			/* billboard left-edge gradient */
	--brtwhiteglass:#fffB;			/* billboard left-edge gradient */
	--brtwhiteglasss:#fff5;

	/* Navbar Colors */
	/* Navbar Gradient */
	--navbargradient:linear-gradient( 180deg , var(--brtwhitesheet) 10% , transparent );
	/* --navbargradient:linear-gradient( 180deg , black 10% , white ); */

	/* Billboard Gradients */
	--billboardleftedgegradient:linear-gradient( 75deg , var(--brtwhiteglass) , transparent 85% );
	/* --billboardleftedgegradient:linear-gradient( 75deg , black , white 85% ); */
	--billboardbottomedgegradient:linear-gradient( 180deg , var(--wht0) , var(--wht1) , var(--wht2) , var(--wht4) , var(--whtfull) , var(--whtfull) );
}
body.lite {


	/* Background Color */
	--backcolor:var(--whtfull);
	/* Foreground Color */
	--forecolor:black;
	--forecolor1:#777;
	--forecolor1:#555;


	/* Billboard Text Shadow */
	--billboardtextshadow:none;


	/* Media Link Caption */
	--medialinktextbgcolor:var(--brtwhiteglasss);
}





/* Box */
/* div#container {background-color:dodgerblue; background:#1fc8db linear-gradient(141deg,#9fb8ad 0%,#1fc8db 51%,#2cb5e8 75%);} */
/* div#container {display:grid; place-items:center;} */
div#container {min-height:100vh;}
/* div#container div.grid {max-width:var(--pagewidth); margin:0 auto;} */




/* Navbar */
div#container nav.navbar {position:fixed; /* position:sticky; */ inset:0; bottom:auto; width:100%; z-index:10;}
div#container nav.navbar {display:flex; align-items:center; justify-content:center; padding:1.5rem var(--edgewidth);}
div#container nav.navbar {background:var(--navbargradient); color:var(--navbaroffwhite); transition:1.25s;}
/* div#container nav.navbar {display:none;} */
div#container nav.navbar.scr {background-color:var(--blkfull);}
div#container nav.navbar a.homelink {color:inherit; text-decoration:none; margin-right:.75rem; margin-right:1.5rem;}
div#container nav.navbar a.homelink img.logo {background-color:red; height:2.75rem; width:8rem; border:0 none;}
div#container nav.navbar a.homelink img.logo {height:2.75rem; height:6rem; width:auto; border-radius:50%; /* margin-right:2rem; */}
div#container nav.navbar a.homelink img.logo {display:block; object-fit:contain;}
div#container nav.navbar a.homelink img.logo/* [src='xyz'],
div#container nav.navbar a.homelink img.logo[src=''] */ {background-color:transparent; color:red; font-size:1.5rem; font-weight:700; letter-spacing:-1px; text-transform:uppercase;}
div#container nav.navbar ul.navlist {display:flex; flex-direction:row;}
div#container nav.navbar ul.navlist {list-style:none; padding:0; margin:0;}
div#container nav.navbar ul.navlist/* .x */ {display:none;}
div#container nav.navbar ul.navlist li.navitem {color:var(--forecolor); margin-left:1.25rem;}
div#container nav.navbar ul.navlist li.navitem.current {color:var(--forecolor1);}
div#container nav.navbar ul.navlist li.navitem a.navlink {color:inherit; font-size:.875rem; /* font-weight:bold; */ text-decoration:none;}
/* div#container nav.navbar ul.navlist li.navitem a.navlink:hover {} */




/* Media Library */
div#container div.library {position:relative; min-height:100vh; max-width:var(--appwidth); margin:0 auto;}
div#container div.library div.panel {position:absolute; position:fixed; top:0; right:0; z-index:90;}
div#container div.library div.panel {display:flex; flex-direction:row; align-items:center; gap:.5rem; margin:1rem;}
div#container div.library div.switch {cursor:pointer;}
div#container div.library div.switch svg.icon {display:block; color:var(--backcolor); font-size:2rem; transition:.5s;}
div#container div.library div.switch svg.icon.on {display:none;}
div#container div.library div.switch svg.icon.off {display:block;}
.lite div#container div.library div.switch svg.icon.on {display:block;}
.lite div#container div.library div.switch svg.icon.off {display:none;}




/* Footer */
div#container footer.footer {color:grey; padding:var(--rowgap) var(--edgewidth); margin-top:calc(2*var(--rowgap)); margin-top:var(--rowgap);}
div#container footer.footer {display:flex; flex-direction:column; /* gap:3em; */}
div#container footer.footer/* .xyz */ {position:relative; /* min-height:20rem; */}
/* div#container footer.footer div.links {} */
div#container footer.footer div.legallinks {text-align:center; margin-top:2em;}
/* div#container footer.footer div.legallinks span.caption {} */
/* div#container footer.footer div.legallinks span.entityname {} */
div#container footer.footer div.sociallinks {display:flex; flex-direction:row; justify-content:center;}
div#container footer.footer div.sociallinks {color:var(--forecolor); font-size:2em;}
div#container footer.footer div.memberlinks {display:flex; flex-direction:row; gap:.5rem;}
div#container footer.footer div.memberlinks {display:grid; grid-template-columns:repeat( var(--colcount) , 1fr ); grid-gap:1rem; --colcount:4;}
div#container footer.footer div.memberlinks {display:none;}
div#container footer.footer div.links ul.linklist {list-style:none; padding:0; margin:0;}
div#container footer.footer div.sociallinks ul.linklist {display:flex; flex-direction:row; align-items:center; /* gap:1em; */}
div#container footer.footer div.memberlinks ul.linklist {display:flex; flex-direction:column; /* align-items:center; */}
/* div#container footer.footer div.links ul.linklist li.linkitem {} */
div#container footer.footer div.sociallinks ul.linklist li.linkitem {padding:0 .625em;}
div#container footer.footer div.memberlinks ul.linklist li.linkitem {margin-top:1em;}
div#container footer.footer div.links ul.linklist li.linkitem a.link {color:inherit; text-decoration:none;}
div#container footer.footer div.links ul.linklist li.linkitem a.link svg.icon {display:block;}
/* div#container footer.footer div.links ul.linklist li.linkitem a.link svg.icon {} */
/* div#container footer.footer div.links ul.linklist li.linkitem a.link span.caption {} */






/* Large Smartphone */
@media screen and (max-width:64rem) {


	/* Navbar */
	/* div#container nav.navbar {} */


	/* Footer */
	/* div#container footer.footer {} */
}


/* Medium Smartphone */
@media screen and (max-width:52rem) {


	/* Navbar */
	/* div#container nav.navbar {} */


	/* Footer */
	/* div#container footer.footer {} */
}


/* Small Smartphone */
@media screen and (max-width:36rem) {


	/* Navbar */
	/* div#container nav.navbar {} */


	/* Footer */
	/* div#container footer.footer {} */
	/* div#container footer.footer div.memberlinks {--colcount:2;} */
}


/* Small Smartphone */
@media screen and (max-width:24rem) {


	/* Navbar */
	/* div#container nav.navbar {} */


	/* Footer */
	/* div#container footer.footer {} */
	div#container footer.footer div.memberlinks {--colcount:2;}
}
