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

#layout{
    font-family: 'Montserrat';
    font-size:1vw;
    margin: 0;
    background-color:#000;
	overflow:hidden;
}
#layer1{
	position: absolute;
	left: 0;
	/* height: 100vh; */
	transition: all 0.5s;
	right: 0;
	top: 0;
	bottom: 0;
	overflow:hidden;
}

h1{
    font-family: 'Montserrat';
    color:#333;
}
h2{
    font-family: 'Montserrat';
    color:#fff;
}
a{
    text-decoration:none;
}
.clear{
    clear:both;
    display:block;
}

.layout{ /* voor de scrollbar */}
.layout::-webkit-scrollbar, .layout #gridLock::-webkit-scrollbar  {width: 0.2vw;}
.layout::-webkit-scrollbar-track,.layout #gridLock::-webkit-scrollbar-track {background-color: rgba(255,255,255,.15);width:15px;}
.layout::-webkit-scrollbar-thumb, .layout #gridLock::-webkit-scrollbar-thumb  {background-color: #cccdd4;border-radius: 0.35em;}
.layout::-webkit-scrollbar-thumb:hover {background-color:#bfc0c6;}

.layout::-webkit-scrollbar-track,
.layout #gridLock::-webkit-scrollbar-track {
	background-color: #000;
	width: 0.2vw;
}
.layout::-webkit-scrollbar-thumb,
.layout #gridLock::-webkit-scrollbar-thumb {
	background-color: #383838;
	border-radius: 8px;
}



#gridLock{
    position: absolute;
    padding-left: 1vw;
    top: 5vw;
    bottom: 0;
    left: 22vw;
    right: 0;
    overflow: auto;
}

#gridLock ._item{
	width: 8.1%;
	height: 9vw;
	position: relative;
	overflow: hidden;
	border-radius: 4%;
	border: 0.2vw solid #3a3a3a;
	box-sizing: border-box;
	background-color: antiquewhite;
	float: left;
	margin: 0.5vw;
	transition: all 0.3s;
	transform-origin: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

#gridLock ._item[data-state="active"]{
border: 0.2vw solid #FFF;
}
#gridLock ._item[data-available="false"]{
	border: 0.2vw solid #333;
/*transform: scale(0.6,0.6);*/
}
#gridLock ._item[data-available="false"]:before{

opacity: 0.8;
content: '';
display:block;
z-index:2;
position: absolute;
left:0;right:0;top:0;bottom:0;
background-color:#333;
}

#gridLock ._item ._image{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-size: cover;
	transition: all 0.5s;
	background-repeat: no-repeat;
}

#gridLock ._item:hover ._image{
transform:scale(1.25,1.25);
transform-origin: center center;
}

#gridLock ._item ._title{
position:absolute;
bottom:0;
left:0;right:0;
font-size: 0.75em;
box-sizing:border-box;
padding:0.5vw;
color:#FFF;
background-color:#000000bd;
z-index:1;
opacity: 0;
transition: opacity 0.3s;
}

#gridLock h2{
	padding-left: 0.5vw;
}

#gridLock ._item:hover ._title{
    opacity:1;
}

#log{
    color:#FFF;
}

#userbar{
    width: 22vw;
    box-sizing: border-box;
    position:absolute;
    left:0;
    top:0;
bottom:60vh;
padding:1vw;

padding-top:8vh;
}


#userbar ._button{
	height: 2em;
	line-height: 2em;
	background-color: #333;
	border-radius: 12px;
	color: #FFF;
	display: block;
	padding-left: 1vw;
	box-sizing: border-box;
	font-size: 1.5vh;
	margin-top:0.5vw;
}


#details{
	width: 20vw;
	position:absolute;
	left:1vw;
	top:40vh;
	bottom:1vw;
	z-index:1;
	border-radius: 1vw;
	overflow:hidden;
}
#details ._cnt{	
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 3vw;
	z-index:2;
}
#trailer,#YTT{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index: 2;
	height:30vh;
}
#details ._bg{	
	position: absolute;
	left: 0;
	right: 0;
	padding-top: 1vw;
	bottom: 0;
	background-repeat: no-repeat;
	background: linear-gradient(to bottom, transparent 0%, transparent 50%, black 100%);
	z-index:2;
}
#details ._cnt ._poster{
	float:left;
	height:10vw;
	width:7vw;
	border-radius:1vw;
	overflow: hidden;
	margin:1vw;
	margin-top:0;
	
	background-size:contain;
	background-position: center;
	background-repeat: no-repeat;
}
#details ._cnt ._title{
	color:#fff;
	font-size:1em;
	padding:0 1vw 0 1.5vw;
	text-shadow: 1px 1px 2px white, 0 0 1em black, 0 0 0.2em black;
	line-height:normal;
	margin-bottom:0;
	line-height:1.25em;
}
#details ._cnt ._desc{
	font-size:0.8em;
	color:#fff;	
	padding:0 1vw 0 1.5vw;
	text-shadow: 1px 1px 2px white, 0 0 1em black, 0 0 0.2em black;
	line-height:1.25em;;
}
#details ._cnt ._seasons{
	font-size: 0.65vw;
	color: #fff;
	background-color: #aa0000;
	border-radius: 0.2vw;
	padding: 0.25vw 1vw 0.25vw 1vw;
	line-height: 1.25em;
	display: inline-block;
}






/*series details */
#seriesInfo{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 30vh;
}
#seriesInfo ._cnt{
	position: absolute;
	left: 0%;
	right: 0;
	top: 0;
	bottom: 0;

	padding-top: 2vw;
	z-index: 2;
}
#seriesInfo ._bg{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	padding-top: 1.5vw;
	padding-left: 20%;
	padding-right: 20%;
	bottom: 0;
	background-repeat: no-repeat;
	background: linear-gradient(to bottom, transparent 0%, transparent 50%, #000000e0 100%);
	z-index: 2;
}
#seriesInfo ._cnt ._poster{
	float: left;
	height: 10vw;
	width: 7vw;
	border-radius: 1vw;
	overflow: hidden;
	margin: 1vw;
	margin-top: 0;
	display:none;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
#seriesInfo ._cnt ._title{
	color: #fff;
	font-size: 3em;
	padding: 0 1vw 0 1.5vw;
	text-shadow: 1px 1px 2px white, 0 0 1em black, 0 0 0.2em black;
	line-height: normal;
	margin-bottom: 0;
	line-height: 1.25em;
}
#seriesInfo ._cnt ._desc{
	font-size: 0.8em;
	color: #fff;
	padding: 0 1vw 0 1.5vw;
	text-shadow: 1px 1px 2px white, 0 0 1em black, 0 0 0.2em black;
	line-height: 1.25em;;
}
#seriesInfo ._cnt ._seasons{
	font-size: 0.65vw;
	color: #fff;
	background-color: #aa0000;
	border-radius: 0.2vw;
	padding: 0.25vw 1vw 0.25vw 1vw;
	line-height: 1.25em;
	display: inline-block;
	margin-left:1.5vw;
}



#search{
    position:absolute;
    top:1vw;
    height:3vw;
    left:23.5vw;
    right:1vw;
}

#search ._key{
	position: absolute;
	right: 1vw;
	display: block;
	background-color: #CCC;
	border-radius: 100%;
	color: #000;
	box-sizing: border-box;
	overflow: hidden;
	width: 2vw;
	height: 2vw;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	margin-top: 0.5vw;
	line-height: 2vw;
}

#searchField{
    position: absolute;
    top: 0;
    height: 3vw;
    left: 0vw;
    right: 0;
    border: 0;
    border-radius: 0.5vw;
    box-sizing: border-box;
    padding: 1em;
    font-size: 1.25em;
    background-color: #2b2b2b;
    color: #FFF;
}

#dlUnp{
	position: absolute;
	left:0;bottom:0;
	top:0;right:0;
	transform: translateX(100%);
	transition: all 0.5s;
	z-index:3;
	display:none;
}

#layout[data-player-state="active"] #layer1{
	transform: translateX(-100%);
}
#layout[data-player-state="active"] #dlUnp{
	transform: translateX(0%);
	display:block;
}

#dlplayer{
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

#closeSeries,
#closePlayer{
	display:block;
	background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 -960 960 960'  fill='%23e8eaed'%3E%3Cpath d='m287-446.67 240 240L480-160 160-480l320-320 47 46.67-240 240h513v66.66H287Z'/%3E%3C/svg%3E");
	background-position: center;
	background-size: contain;
	position: absolute;
	z-index: 4;
	left: 1vw;
	top: 3.5vw;
	background-color: #00000054;
	border-radius: 100%;
	background-repeat: no-repeat;
	width:3vw;height:3vw;
}



#seriesOverlay{
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background-color: #000000e8;
	display: none;
	z-index: 3;
	background-position:top center;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	
}
#layout[data-episodes="show"] #seriesOverlay{
	display:block;	
}

#seriesList{
	position: absolute;
	left: 0;
	bottom: 0;
	top: 30vh;
	right: 0;
	width: 100%;
	border: 0;	
	background-repeat: no-repeat;

background-color: #000000e0
}
#seriesList #seasonList{
	width:20%;
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	background-repeat: no-repeat;	

	overflow: auto;

}
#seriesList #episodeList{
	width:80%;
	position: absolute;
	left:20%;
	top:0;
	bottom:0;	
	overflow: auto;
}

#seasonList ._season{
	display: block;
	color: #FFF;
	border-bottom: 0.1vw solid #636363;
	box-sizing: border-box;
	padding: 0.5vw;
	/* border-radius: 0.75vw; */
	margin: 1vw;
}
#seasonList ._season[data-active="true"]{
	color:#ffeb3b;
	font-size:1.25em;
}


#episodeList ._item{
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	/* float: left; */
	margin: 1.5%;
	padding-bottom: 1.5%;
	border-bottom: 0.1vw solid #636363;
	box-sizing: border-box;
	cursor: pointer;
}


#episodeList ._item[data-available="false"]{

	/*transform: scale(0.6,0.6);*/
}

#episodeList ._item[data-available="false"]:before{
	opacity: 0.8;
	content: '';
	display: block;
	z-index: 2;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #000000;
}


#episodeList ._item ._image{
	float: left;
	width: 25%;
	height: 11vw;
	/* outline: 0.5vw solid #fff; */
	border-radius: 4%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	/* margin-bottom: 2%; */
	margin-right: 2vw;
}


#episodeList ._item ._details{
	/* float: left; */
	/* width: 75%; */
	/* height: 14vw; */
	overflow: hidden;
	box-sizing: border-box;

}


#episodeList ._item ._details ._episode{
	color: #ccc;	    font-size: 1em;
}

#episodeList ._item ._details ._title{
	color: #FFF;	
	font-size: 1.25em;
}
#episodeList ._item ._details ._desc{
	font-size: 1em;
	padding: 2% 0;
	color: #FFF;
}
.innerItem ._item ._details ._desc{
	display:none;
}

#prevEpisode{
	position: absolute;
	left:2vw;
	top:50%;
	transform: translateY(-50%);
	background-color: #333;
	z-index: 4;
}
#nextEpisode{
	position: absolute;
	right:2vw;
	top:50%;
	transform: translateY(-50%);
	background-color:#333;

	z-index:4;
}

.innerItem{
	border-radius: 4%;
	overflow:hidden;height: 11vw;
	width: 19vw;
	box-shadow: 0px 0px 16px 3px #000000;
	outline: 0vw solid #efefef;
}
.innerItem  ._item{
	position: relative;
	box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	width:100%;
	height:100%;
}


.innerItem  ._item[data-available="false"]{

	/*transform: scale(0.6,0.6);*/
}

.innerItem  ._item[data-available="false"]:before{
	opacity: 0.8;
	content: '';
	display: block;
	z-index: 2;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #333;
}


.innerItem  ._item ._image{
	position: absolute;
	top:0;right:0;bottom:0;left:0;
	/* outline: 0.5vw solid #fff; */
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	/* margin-bottom: 2%; */
}


.innerItem  ._item ._details{
	/* float: left; */
	/* width: 75%; */
	/* width: 75%; */
	/* height: 14vw; */
	overflow: hidden;
	box-sizing: border-box;
	position: absolute;
	right:0;bottom:0;left:0;
	z-index: 1;
	padding: 0.5vw;
	background-color: #000000e3;
}


.innerItem  ._item ._details ._episode{
	color: #ccc;
	font-size: 1em;
}

.innerItem  ._item ._details ._title{
	color: #FFF;
	font-size: 1.25em;
}
.innerItem  ._item ._details ._desc{
	font-size: 1em;
	padding: 2% 0;
	color: #FFF;
}

/* VIEW: Responsive (alles) */
@media only screen and (max-width: 759px), screen and (max-width: 759px) and (-webkit-device-pixel-ratio: 2){
	
	
	#gridLock ._item {
	width: 18.1%;
	height: 21vw;
	}
	
	
	
	
	
}