:root {

	/* Numbers */
	--closebtnsize:2.375rem;
	--pagewidth:75rem;
	/* --pagewidth:50rem; */
}




/* Overlay */
div#overlay {position:fixed; inset:0; height:100%; width:100%; min-height:100vh; z-index:80; box-shadow:var(--boxshadow);}
div#overlay {display:grid; place-items:center; overflow:auto; padding:2rem 1rem; padding-top:2rem;}
div#overlay {visibility:hidden; opacity:0; pointer-events:none; transition:.25s;}
div#overlay.active {visibility:visible; opacity:1; pointer-events:auto;}



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



/* Overlay Display */
div#overlay div.display {background-color:var(--overlaydisplayback); color:white; font-weight:100; width:100%; max-width:var(--pagewidth);}
div#overlay div.display {position:relative; overflow:hidden; z-index:50;}
div#overlay div.display {display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; border-radius:.5rem; margin:0 auto;}


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

div#overlay div.display div.head div.cover {position:absolute; bottom:0; right:0; left:0; width:100%; z-index:20;}
div#overlay div.display div.head div.cover {display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding:3rem;}
div#overlay div.display div.head div.cover {background:linear-gradient(transparent,#181818); user-select:none;}
div#overlay div.display div.head div.cover div.label {color:white; /* padding:0 2rem; */}
div#overlay div.display div.head div.cover div.label h2.title {font-size:2rem; text-transform:uppercase; margin:0;}
/* div#overlay div.display div.head div.cover div.label h2.title span.caption {} */
/* div#overlay div.display div.head div.cover div.label h2.title span.caption:empty {} */
div#overlay div.display div.head div.cover div.label h2.title span.caption:empty::after {background-color:gainsboro; content:''; display:block; height:.75em; width:7em; border-radius:10em;}
div#overlay div.display div.head div.cover div.label h3.eyebrow {visibility:hidden;}
div#overlay div.display div.head div.cover div.label h3.eyebrow {display:flex; align-items:center; font-size:.75rem; text-transform:uppercase; margin:0;}
div#overlay div.display div.head div.cover div.label h3.eyebrow span.n {font-size:1.5em; color:crimson; margin-right:.25rem;}
/* div#overlay div.display div.head div.cover div.label h3.eyebrow span.caption {} */
div#overlay div.display div.head div.cover div.panel {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.cover div.panel div.btn {color:white; margin-right:.5rem; cursor:pointer;}
div#overlay div.display div.head div.cover div.panel div.btn.play {background-color:white; color:black; padding:.25rem .75rem .1rem; border-radius:.25rem;}
div#overlay div.display div.head div.cover div.panel div.btn.play {display:flex; flex-direction:row; align-items:center;}
div#overlay div.display div.head div.cover div.panel div.btn.play svg.icon {font-size:1.75rem; margin-bottom:1px;}
div#overlay div.display div.head div.cover div.panel div.btn.play span.caption {font-size:.875rem; font-weight:800; margin-right:.5rem;}
div#overlay div.display div.head div.cover div.panel div.btn.round {background-color:#0008; display:grid; place-items:center; min-height:3rem; min-width:3rem; border-radius:50%;}
div#overlay div.display div.head div.cover div.panel div.btn.round {transition:10ms; border:2px solid #FFFA;}
div#overlay div.display div.head div.cover div.panel div.btn.round:hover {border-color:white;}
div#overlay div.display div.head div.cover div.panel div.btn.round svg.icon {display:block; font-size:1rem;}
div#overlay div.display div.head div.cover div.panel div.btn.round svg.icon.on {display:none;}
div#overlay div.display div.head div.cover div.panel div.btn.round span.caption {font-size:1.5rem;}
div#overlay div.display div.head div.cover div.panel div.btn.round.active svg.icon {display:none;}
div#overlay div.display div.head div.cover div.panel div.btn.round.active svg.icon.on {display:block;}
div#overlay div.display div.head div.cover div.panel div.btn.round.lucent {opacity:.65; transition:.25s;}
div#overlay div.display div.head div.cover div.panel div.btn.round.lucent:hover {opacity:1;}
div#overlay div.display div.head div.cover div.panel div.space {flex-grow:1;}


/* Overlay Display Body */
div#overlay div.display div.body {display:none; min-height:20rem;}
div#overlay div.display div.body section {margin:3rem;}
div#overlay div.display div.body section.xyz {display:none;}
div#overlay div.display div.body section.related {display:none;}
div#overlay div.display div.body section.suggestions {display:none;}
div#overlay div.display div.body section h3.head {font-size:1.45rem; font-weight:400;}

/* 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; */}

/* Overlay Display Body: Playlist */
div#overlay div.display div.body section.playlist {display:none;}
div#overlay div.display div.body section.playlist ul.list {list-style:none; padding:0; margin:0; counter-reset:epnum;}
div#overlay div.display div.body section.playlist ul.list li.item {cursor:pointer; padding:1.5rem 4rem; border-bottom:1px solid #333; counter-increment:epnum;}
div#overlay div.display div.body section.playlist ul.list li.item.active {background-color:#333;}
div#overlay div.display div.body section.playlist ul.list li.item div.inner {position:relative; /* border:1px solid black; */}
div#overlay div.display div.body section.playlist ul.list li.item div.inner {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; align-items:stretch;}
div#overlay div.display div.body section.playlist ul.list li.item 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.playlist ul.list li.item 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.playlist ul.list li.item div.inner div.thumbnail div.img {padding-top:56.25%; position:relative; background-color:#FFF1;}
div#overlay div.display div.body section.playlist ul.list li.item 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.playlist ul.list li.item 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 white; border-radius:50%;}
div#overlay div.display div.body section.playlist ul.list li.item div.inner div.thumbnail div.playbtn {visibility:hidden; opacity:0; transition:.25s;}
div#overlay div.display div.body section.playlist ul.list li.item:hover div.inner div.thumbnail div.playbtn {visibility:visible; opacity:1;}
div#overlay div.display div.body section.playlist ul.list li.item div.inner div.thumbnail div.playbtn svg.icon.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.playlist ul.list li.item div.inner div.metadata {flex-grow:1; display:flex; flex-direction:column; justify-content:center;}
div#overlay div.display div.body section.playlist ul.list li.item 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.playlist ul.list li.item div.inner div.metadata div.top {color:#FDFDFD; font-size:1rem;}
div#overlay div.display div.body section.playlist ul.list li.item 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.playlist ul.list li.item div.inner div.metadata div.top span.duration {font-weight:200;}
div#overlay div.display div.body section.playlist ul.list li.item div.inner div.metadata div.desc {color:#CCC; font-size:.875rem; font-weight:200;}

/* Overlay Display Body: Suggestions */
/* div#overlay div.display div.body section.suggestions {} */

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


/* Overlay Display Closer */
div#overlay div.display div.closebtn {position:absolute; top:0; right:0; min-height:var(--closebtnsize); min-width:var(--closebtnsize); border-radius:50%; margin:1rem;}
div#overlay div.display div.closebtn {background-color:black; color:white; font-size:1.75rem; font-weight:100; cursor:pointer;}
div#overlay div.display div.closebtn {display:grid; place-items:center;}






/* 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 {} */
	/* Overlay Display Closer */
	/* div#overlay div.display div.closebtn {} */
}


/* 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 {} */
	/* Overlay Display Closer */
	/* div#overlay div.display div.closebtn {} */
}


/* 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: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: Playlist */
	/* div#overlay div.display div.body section.playlist {} */
	/* div#overlay div.display div.body section.playlist ul.list {} */
	div#overlay div.display div.body section.playlist ul.list li.item {padding:1.5rem 1rem;}
	/* div#overlay div.display div.body section.playlist ul.list li.item div.inner {} */
	div#overlay div.display div.body section.playlist ul.list li.item div.inner:before {display:none;}
	div#overlay div.display div.body section.playlist ul.list li.item div.inner:before {margin-left:-1rem;}
	/* Overlay Display Closer */
	/* div#overlay div.display div.closebtn {} */



	/* 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 {} */
	/* Overlay Display Head */
	/* div#overlay div.display div.head {} */
	/* Overlay Display Body */
	/* div#overlay div.display div.body {} */
	/* Overlay Display Closer */
	/* div#overlay div.display div.closebtn {} */
}