/* Overlay */
div#overlay {position:fixed; inset:0; height:100%; width:100%; max-height:var(--vph); z-index:80; box-shadow:var(--boxshadow);}
div#overlay {background-color:var(--overlaybackcolor); display:flex; flex-direction:column; align-items:center; /* justify-content:center; */ padding:2rem 1rem;}
div#overlay {cursor:pointer; overflow:auto;}
/* Overlay Modes */
div#overlay {visibility:hidden; opacity:0; pointer-events:none; transform:translateY(10rem); transition:.375s;}
div#overlay.active {visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0);}




/* Overlay Background */
/* div#overlay aside.bg {background-color:var(--overlaybackcolor); cursor:pointer;} */
/* div#overlay aside.bg {position:absolute; position:fixed; inset:0; height:100%; width:100%; z-index:25;} */




/* Overlay Display */
div#overlay div.display {position:relative; /* max-height:calc( 100vh - 4*var(--overlayedge) ); */ /* overflow:hidden; */ z-index:50;}
div#overlay div.display {--overlayedge:2rem; max-width:calc( 100vw - 2*var(--overlayedge) );}
div#overlay div.display {background-color:var(--overlaydisplaybackcolor); border-radius:var(--overlaydisplaycorner); /* margin:0 auto; */}
div#overlay div.display {display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch;}
div#overlay div.display {cursor:initial; color:var(--forecolor); /* font-weight:100; */}
div#overlay div.display {max-width:var(--appwidth);}

/* Overlay Display: Closer */
div#overlay div.display div.closebtn {position:absolute; top:0; /* left:100%; */ right:0; z-index:30;}
div#overlay div.display div.closebtn {background-color:black; display:grid; place-items:center; border-radius:10em; margin:1.5rem;}
div#overlay div.display div.closebtn {min-height:var(--overlayclosebtnsize); min-width:var(--overlayclosebtnsize);}
div#overlay div.display div.closebtn {color:white; font-size:2.75rem; font-weight:100; line-height:0; cursor:pointer;}




/* Overlay Display: Head */
/* div#overlay div.display div.head {display:none;} */
div#overlay div.display div.head {position:relative; overflow:hidden;}
div#overlay div.display div.head {background-color:var(--blkglss);--blkglss:#0002; border-radius: var(--overlaydisplaycorner) var(--overlaydisplaycorner) 0 0;}


/* Overlay Display Head: Background Poster */
div#overlay div.display div.head div.backposter {position:relative; z-index:10; padding-top:var(--overlayposteraspectratio);}
div#overlay div.display div.head div.backposter video.sneakpeek {display:none;}
div#overlay div.display div.head div.backposter video.sneakpeek {position:absolute; inset:0; height:100%; width:100%; object-fit:cover; /* z-index:20; */}
/* div#overlay div.display div.head div.backposter iframe.sneakpeek {display:none;} */
div#overlay div.display div.head div.backposter iframe.sneakpeek {background-color:white;}
div#overlay div.display div.head div.backposter iframe.sneakpeek {position:absolute; inset:0; height:100%; width:100%; /* z-index:30; */ border:0 none;}
div#overlay div.display div.head div.backposter iframe.sneakpeek {height:var(--framesize); width:var(--framesize); transform:translate( var(--trXY) , var(--trXY) );}
div#overlay div.display div.head div.backposter iframe.sneakpeek {scale:.125; --framesize:800%; --trXY:-350%;}
div#overlay div.display div.head div.backposter iframe.sneakpeek {scale:.25; --framesize:400%; --trXY:-150%;}
div#overlay div.display div.head div.backposter iframe.sneakpeek {scale:.5; --framesize:200%; --trXY:-50%;}
div#overlay div.display div.head div.backposter iframe.sneakpeek {opacity:.375; opacity:.875; transition:all .25s, height 0s, width 0s, transform 0s;}
div#overlay div.display div.head div.backposter iframe.sneakpeek:hover {opacity:1;}
/* div#overlay div.display div.head div.backposter::after {content:''; background:linear-gradient( transparent , var(--overlaydisplaybackcolor) 50%); height:2rem;} */
/* div#overlay div.display div.head div.backposter::after {position:absolute; right:0; bottom:0; left:0; width:100%;} */
/* Overlay Display Head: Background Poster (Page Mode) */
/* div#overlay.p div.display div.head div.backposter {} */
/* div#overlay.p div.display div.head div.backposter video.sneakpeek {display:none;} */
/* div#overlay.p div.display div.head div.backposter iframe.sneakpeek {display:block;} */
/* Overlay Display Head: Background Poster (Video Mode) */
/* div#overlay.v div.display div.head div.backposter {} */
/* div#overlay.v div.display div.head div.backposter video.sneakpeek {display:block;} */
/* div#overlay.v div.display div.head div.backposter iframe.sneakpeek {display:none;} */


/* Overlay Display Head: Foreground Poster */
div#overlay div.display div.head div.foreposter {position:absolute; top:0; right:0; left:0; width:100%; z-index:20;}
div#overlay div.display div.head div.foreposter {display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding:3rem;}
div#overlay div.display div.head div.foreposter {background:linear-gradient( 0 , transparent , var(--overlaydisplaybackcolor) ); user-select:none;}
div#overlay div.display div.head div.foreposter {opacity:0; visibility:hidden; transition:.5s .5s;}
div#overlay div.display div.head:hover div.foreposter {opacity:1; visibility:visible; transition:.25s;}

/* Overlay Display Head: Foreground Poster Vignette */
div#overlay div.display div.head div.foreposter div.vignette {color:white; /* padding:0 2rem; */}
div#overlay div.display div.head div.foreposter div.vignette h2.mediahead {font-size:2rem; text-transform:uppercase; margin:0;}
/* div#overlay div.display div.head div.foreposter div.vignette h2.mediahead span.caption {} */
/* div#overlay div.display div.head div.foreposter div.vignette h2.mediahead span.caption:empty {} */
div#overlay div.display div.head div.foreposter div.vignette h2.mediahead span.caption:empty::after {background-color:gainsboro; content:''; display:block; height:.75em; width:7em; border-radius:10em; margin:.25rem 0;}
/* div#overlay div.display div.head div.foreposter div.vignette h3.mediasubhead {visibility:hidden;} */
div#overlay div.display div.head div.foreposter div.vignette h3.mediasubhead {display:flex; align-items:center; font-size:1.125rem; text-transform:uppercase; margin:0;}
/* div#overlay div.display div.head div.foreposter div.vignette h3.mediasubhead span.n {display:none;} */
div#overlay div.display div.head div.foreposter div.vignette h3.mediasubhead span.n {font-size:1.5em; color:crimson; margin-right:.25rem;}
/* div#overlay div.display div.head div.foreposter div.vignette h3.mediasubhead span.n::after {content:'N';} */
/* div#overlay div.display div.head div.foreposter div.vignette h3.mediasubhead span.caption {} */
/* div#overlay div.display div.head div.foreposter div.vignette h3.mediasubhead span.caption:empty {} */
div#overlay div.display div.head div.foreposter div.vignette h3.mediasubhead span.caption:empty::after {background-color:gainsboro; content:''; display:block; height:.75em; width:7em; border-radius:10em; margin:.25rem 0;}

/* Overlay Display Head: Foreground Poster Vignette Action Box */
div#overlay div.display div.head div.foreposter div.vignette div.actionbox {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; /* padding:0 2rem; */ margin-top:1rem;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox {display:none;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn {color:white; margin-right:.5rem; cursor:pointer;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.play {background-color:white; color:black; padding:.25rem .75rem .1rem; border-radius:.25rem;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.play {display:flex; flex-direction:row; align-items:center;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.play svg.icon {font-size:1.75rem; margin-bottom:1px;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.play span.caption {font-size:.875rem; font-weight:800; margin-right:.5rem;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round {background-color:var(--blksht);--blksht:#0008; display:grid; place-items:center; min-height:3rem; min-width:3rem; border-radius:50%;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round {transition:10ms; border:2px solid #FFFA;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round:hover {border-color:white;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round svg.icon {display:block; font-size:1rem;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round svg.icon.on {display:none;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round span.caption {font-size:1.5rem;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round.active svg.icon {display:none;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round.active svg.icon.on {display:block;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round.lucent {opacity:.65; transition:.25s;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.btn.round.lucent:hover {opacity:1;}
div#overlay div.display div.head div.foreposter div.vignette div.actionbox div.space {flex-grow:1;}




/* Overlay Display: Body */
div#overlay div.display div.body {position:relative; min-height:12rem; /* overflow:auto; */}
div#overlay div.display div.body {display:flex; flex-direction:column; gap:3rem; padding:3rem; padding:1rem; /* margin-top:1rem; */}
/* div#overlay div.display div.body {display:none;} */
/* div#overlay div.display div.body::before {background-color:inherit; display:block; content:''; height:3rem;} */
/* div#overlay div.display div.body::before {position:absolute; inset:0; bottom:auto;} */


/* Overlay Display Body: Related */
/* div#overlay div.display div.body section {display:block !important;} */
div#overlay div.display div.body section.xyz {display:none;}
div#overlay div.display div.body section div.sectionhead {padding:.75em 2rem;}
div#overlay div.display div.body section div.sectionhead h2.head {font-size:2em; font-weight:500; margin:0;}
/* div#overlay div.display div.body section div.sectionhead h2.head span.caption {} */
div#overlay div.display div.body section div.sectionhead h2.head span.caption svg.star {color:var(--starcolor);}
div#overlay div.display div.body section div.sectionhead h2.head span.caption svg.star.on {color:var(--starcoloron);}
/* div#overlay div.display div.body section div.sectionhead h2.head span.caption:empty {} */
div#overlay div.display div.body section div.sectionhead h2.head span.caption:empty::after {background-color:gainsboro; content:''; display:block; height:.75em; width:7em; border-radius:10em; margin:.25rem 0;}
div#overlay div.display div.body section div.sectionhead h3.subhead {display:none;}
div#overlay div.display div.body section div.sectionhead h3.subhead {font-size:1.25em; font-weight:400; margin:0;}
/* div#overlay div.display div.body section div.sectionhead h3.subhead span.caption {} */
/* div#overlay div.display div.body section div.sectionhead h3.subhead span.caption:empty {} */
div#overlay div.display div.body section div.sectionhead h3.subhead span.caption:empty::after {background-color:gainsboro; content:''; display:block; height:.75em; width:7em; border-radius:10em; margin:.25rem 0;}
/* div#overlay div.display div.body section div.sectionbody {} */


/* Overlay Display Body: Related */
/* div#overlay div.display div.body section.related {display:none;} */

/* Overlay Display Body: Related Media List */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist {} */
div#overlay div.display div.body section.related div.sectionbody ul.medialist {display:grid; grid-template-columns:repeat( var(--overlaybodyrelatedgridcolcount) , 1fr );}
div#overlay div.display div.body section.related div.sectionbody ul.medialist {--overlaybodyrelatedgridcolcount:4;}
/* Overlay Display Body: Related Media List Item */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem {} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink {} */
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink:hover {background-color:var(--forecolor1); /* color:var(--backcolor); */ transition:.375s;}
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.preview {position:relative;} */
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.preview img.thumbnail {aspect-ratio:1.77; width:100%; object-fit:cover;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge {display:flex; flex-direction:column; justify-content:center;}
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge div.top {} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge div.top span.medialabel {white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom {display:none;} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediarating {} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediacounter {} */
/* Overlay Display Body: Related Media List Item (hover) */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem:hover {} */
/* Overlay Display Body: Related Media List Item (design) */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem {} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink {padding:.5rem;} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge {aspect-ratio:1.75; border-radius:calc( var(--mediacorner) / 1.5 );} */

/* Overlay Display Body: Related Media List (alternative flat design) */
div#overlay.flat div.display {max-width:var(--overlaywidth);}
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist {display:flex; flex-direction:column;}
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem {padding:var(--cellgap) 0;}
/* div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink {flex-direction:row; align-items:center;} */
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink {display:grid; grid-template-columns:1fr 4fr;}
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink.on {background-color:var(--forecolor);}
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.preview {position:relative;}
/* div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.preview::after {display:none;} */
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.preview::after {content:none;}
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge {flex-direction:row; justify-content:space-between;}
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom {display:grid; gap:0 1.5em;}
/* div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediarating {display:none;} */
div#overlay.flat div.display div.body section.related div.sectionbody ul.medialist li.mediaitem a.medialink div.mediabadge div.bottom div.mediacounter {flex-direction:row-reverse;}

/* Overlay Display Body: Related Project List */
div#overlay div.display div.body section.related div.sectionbody ul.medialist {counter-reset:epnum;}
/* Overlay Display Body: Related Project List Item */
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem {cursor:pointer; padding:1.5rem 4rem; border-bottom:1px solid var(--overlaydisplaybackcolor1); counter-increment:epnum;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem.active {background-color:var(--overlaydisplaybackcolor1);}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner {position:relative; /* border:1px solid black; */}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; align-items:stretch;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner:before {content:''counter(epnum); position:absolute; left:0; top:50%; transform:translate(-50%,-50%); font-size:1.5rem; margin-left:-1.5rem;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.thumbnail {min-width:4rem; display:flex; flex-direction:column; justify-content:center; width:8rem; border-radius:.25rem; margin-right:1rem; overflow:hidden; position:relative;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.thumbnail div.img {padding-top:56.25%; position:relative; background-color:#FFF1;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.thumbnail div.img img {position:absolute; top:0; left:0; height:100%; width:100%; object-fit:cover;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.thumbnail div.playbtn {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-height:3rem; min-width:3rem; background-color:#0004; border:1px solid var(--forecolor); border-radius:50%;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.thumbnail div.playbtn {visibility:hidden; opacity:0; transition:.25s;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.thumbnail div.playbtn svg.play {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2.5rem; margin-left:1px;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.metadata {flex-grow:1; display:flex; flex-direction:column; justify-content:center;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.metadata div.top {display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.metadata div.top {color:var(--overlaydisplayforecolor); font-size:1rem;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.metadata div.top h4.title {font-weight:400; text-transform:uppercase; margin:0; margin-bottom:.5rem;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.metadata div.top span.duration {font-weight:200;}
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner div.metadata div.desc {color:var(--overlaydisplayforecolor1); font-size:.875rem; font-weight:200;}
/* Overlay Display Body: Related Project List Item (hover) */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem:hover {} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem:hover div.inner {} */
/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem:hover div.inner div.thumbnail {} */
div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem:hover div.inner div.thumbnail div.playbtn {visibility:visible; opacity:1;}


/* Overlay Display Body: Metadata */
/* div#overlay div.display div.body section.metadata {} */
div#overlay div.display div.body section.metadata a.browselink {color:inherit; text-decoration:none;}
/* div#overlay div.display div.body section.metadata a.browselink:after {content:',';} */
div#overlay div.display div.body section.metadata a.browselink:hover {text-decoration:underline;}
/* Overlay Display Body: Metadata A */
div#overlay div.display div.body section.metadata.a {display:flex; flex-direction:row; align-items:flex-start;}
div#overlay div.display div.body section.metadata.a div.col {flex-shrink:0;}
div#overlay div.display div.body section.metadata.a div.col div.line {line-height:1.5; margin-bottom:1.25rem;}
div#overlay div.display div.body section.metadata.a div.col.left {width:67%;}
div#overlay div.display div.body section.metadata.a div.col.left div.line {display:flex; flex-direction:row; justify-content:flex-start; align-items:center;}
div#overlay div.display div.body section.metadata.a div.col.left div.line span.piece {margin-right:.75rem;}
div#overlay div.display div.body section.metadata.a div.col.right {width:33%; font-size:.875rem; margin-left:2rem;}
div#overlay div.display div.body section.metadata.a div.col.right div.line span.key {color:#686868;}
div#overlay div.display div.body section.metadata.a div.col.right div.line span.key::after {content:': '; /* margin-right:.35rem; */}
/* Overlay Display Body: Metadata B */
div#overlay div.display div.body section.metadata.b {font-size:.875rem;}
div#overlay div.display div.body section.metadata.b h3.head:before {content:'About '; font-weight:100;}
div#overlay div.display div.body section.metadata.b div.line {line-height:1.5; margin-bottom:.5rem;}
div#overlay div.display div.body section.metadata.b div.line span.key {color:#686868;}
div#overlay div.display div.body section.metadata.b div.line span.key::after {content:': '; /* margin-right:.35rem; */}
div#overlay div.display div.body section.metadata.metadata {display:none;}




/* Overlay Display Tail */
div#overlay div.display div.tail {display:none;}

/* Overlay Row Navigator */
div#overlay div.display div.tail div.rownav {display:none;}
div#overlay div.display div.tail div.rownav {position:absolute; top:50%; transform:translateY(-50%); /* z-index:50; */}
div#overlay div.display div.tail div.rownav div.navbtn {cursor:pointer;}
div#overlay div.display div.tail div.rownav div.navbtn {background-color:var(--shiftercolor); transition:.25s; padding:5em .375em; border-radius:10em; /* margin:0 2em; */}
div#overlay div.display div.tail div.rownav div.navbtn:hover {background-color:var(--shiftercolorhover);}
div#overlay div.display div.tail div.rownav div.navbtn svg.icon {display:block; font-size:4em;}

/* Overlay Row Navigator (left) */
div#overlay div.display div.tail div.leftnav {right:100%;}
div#overlay div.display div.tail div.leftnav.on {display:block;}
div#overlay div.display div.tail div.leftnav div.navbtn {border-radius:var(--mediacorner) 0 0 var(--mediacorner);}

/* Overlay Row Navigator (right) */
div#overlay div.display div.tail div.rightnav {left:100%;}
div#overlay div.display div.tail div.rightnav.on {display:block;}
div#overlay div.display div.tail div.rightnav div.navbtn {border-radius:0 var(--mediacorner) var(--mediacorner) 0;}











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

	/* Overlay */
	/* div#overlay {} */

	/* Overlay Background */
	/* div#overlay aside.bg {} */

	/* Overlay Display */
	/* div#overlay div.display {} */
	/* Overlay Display: Head */
	/* div#overlay div.display div.head {} */
	/* Overlay Display: Body */
	/* div#overlay div.display div.body {} */
}


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

	/* Overlay */
	/* div#overlay {} */

	/* Overlay Background */
	/* div#overlay aside.bg {} */

	/* Overlay Display */
	/* div#overlay div.display {} */
	/* Overlay Display: Head */
	/* div#overlay div.display div.head {} */
	/* Overlay Display: Body */
	/* div#overlay div.display div.body {} */
	/* div#overlay div.display div.body section.related {} */
	div#overlay div.display div.body section.related div.sectionbody ul.medialist {--overlaybodyrelatedgridcolcount:3;}
}


/* Small Smartphone */
@media screen and (max-width:48rem) {
	div#overlay div.display div.body section.related div.sectionbody ul.medialist {--overlaybodyrelatedgridcolcount:2;}
}


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

	/* Overlay */
	/* div#overlay {} */

	/* Overlay Background */
	/* div#overlay aside.bg {} */

	/* Overlay Display */
	/* div#overlay div.display {} */
	/* Overlay Display: Head */
	/* div#overlay div.display div.head {} */
	/* Overlay Display: Body */
	/* div#overlay div.display div.body {} */
	div#overlay div.display div.body section {margin:.875rem;}
	/* div#overlay div.display div.body section {margin:3rem 1.5rem;} */
	/* Overlay Display Body: Metadata */
	div#overlay div.display div.body section.metadata.a {flex-direction:column;}
	div#overlay div.display div.body section.metadata.a div.col.col {width:100%; margin:0;}
	/* Overlay Display Body: Related */
	/* div#overlay div.display div.body section.related {} */
	div#overlay div.display div.body section.related div.sectionbody ul.medialist {--overlaybodyrelatedgridcolcount:1;}
	div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem {padding:1.5rem 1rem;}
	/* div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner {} */
	div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner:before {display:none;}
	div#overlay div.display div.body section.related div.sectionbody ul.medialist li.projectitem div.inner:before {margin-left:-1rem;}



	/* Playlist Section */
}


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

	/* Overlay */
	/* div#overlay {} */

	/* Overlay Background */
	/* div#overlay aside.bg {} */

	/* Overlay Display */
	div#overlay div.display {--overlayedge:1rem;}
	/* Overlay Display: Head */
	/* div#overlay div.display div.head {} */
	/* Overlay Display: Body */
	/* div#overlay div.display div.body {} */
}