/* CSS VARIABLES */
:root {
	--primary: #141414;
	--primary-alt: #191919;
	--light: #F3F3F3;
	--dark: #686868;
}

html, body {
	width: 100%;
	/*min-height: 100vh;*/
	margin: 0;
	padding: 0;
	background-color: var(--primary);
	color: var(--light);
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	line-height: 1.4;
}

img {
	max-width: 100%;
}

h1 {
	padding-top: 60px;  
}

.wrapper {
	margin: 0;
	padding: 0;
}

/* HEADER */
header {
	padding: 20px 20px 10px 20px;
	position: fixed;
	top: 0;
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 1fr 4fr 1fr;
	grid-template-areas: "nt mn mn sb . . . ";
	background-color: var(--primary-alt);
	width: 100%;
	margin-bottom: 0px;
	z-index: 9999;
}

.logo {
	grid-area: nt;
	object-fit: cover;
	width: 130px;
	max-height: 100%;

	padding-left: 30px;
	padding-top: 0px;  
}

.logo img {  
	height: 35px;     
}

#logo {
	color: #E50914;  
	margin: 0; 
	padding: 0; 
}


.main-nav {
	grid-area: mn;
	padding: 0 30px 0 20px;
}

.main-nav a {
	color: var(--light);
	text-decoration: none;
	margin: 5px;  
}

.main-nav a:hover {
	color: var(--dark);
}

.sub-nav {
	grid-area: sb;
	padding: 0 40px 0 40px;
}

.sub-nav a {
	color: var(--light);
	text-decoration: none;
	margin: 5px;
}

.sub-nav a:hover {
	color: var(--dark);
}


/* MAIN CONTIANER */
.main-container {
	padding: 50px;
}

.season-box {
	overflow-y: auto;
	margin-top: 20px;
    height: calc(100% - 80px);
	padding: 0px 20px;
	//align-items: baseline;
}

.episode-box {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(4, 1fr);
	overflow-y: auto;
	margin-top: 20px;
    height: calc(100% - 60px);
	padding: 0px 20px;
}

.movie-container > .episode-box {
	padding: 0px;
}

.episode-box .duration {
	float: left;
    position: relative;
    top: 0px;
    height: 0px;
	font-size: 25px;
	text-shadow: 0px 0px 5px black;
	padding: 0px 5px;
}

.movie {
	display: flex;
	width: calc(100% - 40px);
	padding: 10px 20px 0px 20px;
	height: 60%;
}

.movie .cover {
	flex: 0;
	aspect-ratio: 314 / 445;
}

.movie .info {
	flex: 1;
	height: 100%;
	padding-left: 10px;
	padding-right: 0px;
	overflow-y: auto;
}

.movie h1, .movie h2 {
	padding-top: 0px;
	margin: 0px;
	text-align: left;
}

.movie-box {
	width: calc(100% - 40px);
	padding: 20px 20px;
}

.movie-box a:first-child {
	border-top: 1px solid gray;
}

.movie-box a {
	transition: transform .3s;
	color: white;
	text-decoration: none;
	text-shadow: 0 0 5px black;
	width: 100%;
	font-size: 30px;
	display: block;
	border-bottom: 1px solid gray;
	padding: 8px 0px;
}
.movie-box a:hover {
	color: gray;
	font-size: 30px;
}

.box, .season-box {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(8, 1fr);
	align-items: flex-start;
}

.box a, .episode-box a, .season-box a {
	transition: transform .3s;
	color: white;
	text-decoration: none;
	text-shadow: 0 0 5px black;
}

.box a:hover {
	transition: transform .3s;
	-ms-transform: scale(1.4);
	-webkit-transform: scale(1.4);  
	transform: scale(1.4);
	z-index: 1;
}

.box img, .episode-box img, .season-box img {
	border-radius: 2px;
	max-height: 350px;
	width: 100%;
}

.box img {
	aspect-ratio: 298 / 425;
	width: 100%;
}

.season-box img {
	aspect-ratio: 314 / 445;
	width: 100%;
}

/* LINKS */
.link {
	padding: 50px;
}

.sub-links ul {
	list-style: none;
	padding: 0;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}

.sub-links a {
	color: var(--dark);
	text-decoration: none;
}

.sub-links a:hover {
	color: var(--dark);
	text-decoration: underline;
}

.logos a{
	padding: 10px;
}

.logo {
	color: var(--dark);
}


/* FOOTER */
footer {
	padding: 20px;
	text-align: center;
	color: var(--dark);
}



.logon, #whackwatch>div {
	background-color: #303030;
	position: fixed;
	width: 100%;
	max-width: 450px;
	height: 400px;
	margin: auto;
	top: 60px;
	right: 0px;
	left: 0px;
	border-radius: 10px;
}

.logon form {
	margin: 40px;
}

.logon .textbox, #whackwatch>div .textbox {
	width: 100%;
}
.logon .submit, #whackwatch>div .btn {
	width: 100%;
	height: 40px;
	color: black;
	font-size: 25px;
}

.textbox {
	border: 1px solid white;
	border-width: 0px 0px 1px 0px;
	height: 40px;
	font-size: 25px;
	background-color: transparent;
	padding: 0px 5px;
	color: white;
}

select#staffel {
	font-size: 30px;
	margin: 10px 0px 0px 20px;
    width: calc(100% - 100px);
}

#close-preview {
	font-size: 40px;
	margin: 20px;
	width: 30px;
	color: white;
	text-shadow: 0 0 5px black;
	height: 60px;
    vertical-align: sub;
}
#close-whackwatch {
	font-size: 30px;
	margin: 20px;
	width: 30px;
	color: white;
	float: right;
	top: 0px;
    right: 0px;
    position: absolute;
}

.preview {
	position: fixed;
	top: 40%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	background-color: var(--primary);
	border-top: 1px solid var(--dark);
	z-index: 2;
}
.preview iframe {
	width: 100%;
	height: 100%;
	border: 0px;
}

.player {
	position: fixed;
	top: 0%;
	right: 0%;
	bottom: 0%;
	left: 0%;
	background-color: var(--primary);
	z-index: 2;
}
.player iframe {
	width: 100%;
	height: 100%;
	border: 0px;
}

.player .overlay {
	opacity: 1;
	transition: linear 0.3s;
}
.player .overlay.hidden {
	opacity: 0;
}
.player .overlay {
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}
.player .upper-right {
	top: 40px;
	right: 50px;
	position: absolute;
}
.player .upper-right a {
	font-size: 60px;
	margin-left: 40px;
	width: 30px;
	color: white;
	text-decoration: none;
	text-shadow: 0 0 5px black;
}
.player .middle-left a {
	font-size: 30px;
	color: white;
	text-decoration: none;
	text-shadow: 0 0 5px black;
}
#close-video {
	font-size: 70px;
}
.player .lower-right, .player .lower-right-skip {
	bottom: 100px;
	right: 100px;
	position: absolute;
}
.player .lower-right div {
    font-size: 30px;
}
.player .lower-right {
    padding: 20px;
}
.player .lower-right input, .player .lower-right-skip input {
	width: 300px;
    height: 50px;
    font-size: 30px;
    border: none;
	color: white;
    background-color: red;
}
.player .upper-left {
	left: 15px;
	top: 15px;
	position: absolute;
	font-size: 45px;
	pointer-events: none;
	text-shadow: 0 0 5px black;
}

.player .upper-left-yt {
	left: 15px;
	top: 15px;
	position: absolute;
	font-size: 45px;
	width: 50%;
}

.player .middle-right {
	right: 0px;
    top: 0px;
    bottom: 0px;
    height: fit-content;
    margin: auto;
    position: fixed;
    text-align: right;
	font-size: 20px;
	background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
}
.player .middle-right p {
	margin: 0px 0px 3px 0px;
}
.player .middle-left {
	left: 0px;
    top: 0px;
    bottom: 0px;
    height: fit-content;
    margin: auto;
    position: fixed;
    text-align: left;
	font-size: 20px;
	background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
}
.player .overlay .playback {
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	margin: auto;
	height: 75px;
	width: 350px;
	position: absolute;
	text-shadow: 0 0 5px black;
}
.player .overlay .playback td {
	text-align: center;
	width: 20%;
}
.player .overlay .playback a {
	font-size: 20px;
	color: white;
	text-decoration: none;
}
.player .overlay .playback a i {
	font-size: 65px;
}

.player .video {
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

#fitWidth, #unfitWidth {
	/*font-size: 50px;*/
}

.player .video video {
	background-color: black;
}

.player .video video.fit-to-width {
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    height: 200%;
}

.player .video video::-webkit-media-controls-fullscreen-button {
        display: none !important;
}

.player .lower-middle {
	height: 50px;
	width: 100%;
	right: 0px;
	bottom: 0px;
	left: 0px;
	position: absolute;
	/*background-color: rgba(0, 0, 0, 0.5);*/
	text-shadow: 0 0 5px black;
}

.current-track__progress__start,
.current-track__progress__finish {
	width: 10%;
	font-size: 18px;
}

.current-track__progress__start {
	text-align: right;
}
.current-track__progress__finish {
	text-align: left;
}

#preview-seek-panel {
	position: absolute;
    bottom: 28px;
    left: 0px;
    width: 20%;
}

#preview-seek-canvas {
	position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
	border: 1px solid black;
}

#seek-duration {
	position: absolute;
	bottom: 6px;
	left: 0px;
    width: 100%;
    height: 30px;
	font-size: 30px;
	text-align: center;
	text-shadow: 0 0 5px black;
}


.current-volume {
	position: absolute;
	right: 40px;
	bottom: 80px;
	height: 150px;
}

.current-volume > .fas {
	padding-top: 10px;
	text-align: left;
	font-size: 25px;
}

.current-track__progress {
  width: 100%;
  padding: 15px 0px;
  color: white;
  font-size: 11px;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}
.current-track__progress__bar {
  width: 75%;
  width: calc(80% - 30px);
  padding: 0 5px;
}
.current-track__progress__bar .noUi-target {
  border: none;
  height: 12px;
}
.current-volume_bar .noUI-target {
  border: none;
  width: 12px;
}

.current-track__progress__bar .noUi-base,
.current-volume_bar .noUi-origin {
  background: red;
  border-radius: 0px;
}
.current-track__progress__bar .noUi-origin,
.current-volume_bar .noUi-base {
  background: #5e5e5e;
  border-radius: 0px;
}
.current-track__progress__bar .noUi-handle,
.current-volume_bar .noUi-handle {
  background: red;
  width: 24px;
  height: 24px;
  margin-bottom: -12px;
  border-radius: 50%;
  box-shadow: none;
  border: none;
  display: none;
}
.current-track__progress__bar .noUi-handle {
  left: 0;
  margin-bottom: 0px;
  margin-left: -12px;
}

.current-track__progress__bar .noUi-handle:before, .current-track__progress__bar .noUi-handle:after,
.current-volume_bar .noUi-handle:before, .current-volume_bar .noUi-handle:after {
  background: none;
}
.current-track__progress:hover .noUi-handle,
.current-volume:hover .noUi-handle {
  display: block;
}

.movie-container {
	padding: 30px 80px 0px 80px;
}



#whackwatch, #whackwatch>div {
	top: 60px;
	right: 0px;
	left: 0px;
	position: fixed;
	margin: auto;
}
#whackwatch>div {
	padding: 50px;
	height: 200px;
}
#whackwatch {
	z-index: 2;
}
.progress {
	background-color: gray;
	width: 100%;
	height: 2px;
}
.progress>div {
	background-color: red;
	height: 2px;
}

@media(max-width: 10000px) {
	
	.box, .season-box {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(12, 1fr);
	}
	
	.episode-box {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media(max-width: 2300px) {
	
	.box, .season-box {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(10, 1fr);
	}
	
}

@media(max-width: 2000px) {
	
	.box, .season-box {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(8, 1fr);
	}
	
	.episode-box {
		grid-template-columns: repeat(4, 1fr);
	}
}


@media(max-width: 1600px) {
	
	.box, .season-box {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(6, 1fr);
	}
	
}


/* MEDIA QUERIES */
@media(max-width: 900px) {

	header {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
		"nt nt nt  .  .  . sb . . . "
		"mn mn mn mn mn mn  mn mn mn mn";
	}

	.episode-box {
		grid-template-columns: repeat(3, 1fr);
	}

	.box, .season-box {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(4, minmax(100px, 1fr));
	}
	
	.player .upper-left {
		font-size: 30px;
	}
   
	.player .upper-right a,
	.player .middle-left a	{
		font-size: 30px;
		margin-left: 20px;
	}
	
	#close-video {
		font-size: 41px;
	}
	
	.player .lower-right div {
		font-size: 15px;
	}
	
	.player .lower-right input, .player .lower-right-skip input {
		font-size: 18px;
		width: 200px;
		height: 30px;
	}
	
	.player .lower-right, .player .lower-right-skip {
		bottom: 50px;
		right: 50px;
	}
	
	.player .lower-right {
		padding: 5px;
	}
}

@media(max-width: 700px) {

	header {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
		"nt nt nt  .  .  . sb . . . "
		"mn mn mn mn mn mn  mn mn mn mn";
	}

	.box {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(3, minmax(100px, 1fr));
	}
	
	.season-box {
		grid-template-columns: repeat(3, 1fr);
	}

	.sub-links ul {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(3, 1fr);
	}
	
	.player .upper-left {
		font-size: 20px;
	}
   
	.player .upper-right a,
	.player .middle-left a {
		font-size: 20px;
		margin-left: 10px;
	}
	
	#close-video {
		font-size: 28px;
	}
}

@media(max-width: 500px) {

	.wrapper {
		font-size: 15px;
	}

	header {
		margin: 0;
		padding: 20px 0 0 0;
		position: static;
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(1, 1fr);
		grid-template-areas: 
		"nt"    
		"mn"
		"sb";
		text-align: center;
	}
	
	.episode-box {
		grid-template-columns: repeat(2, 1fr);
	}

	.logo {
		max-width: 100%;
		margin: auto;
		padding-right: 20px;
	}

	.main-nav {
		display: grid;
		grid-gap: 0px;
		grid-template-columns: repeat(1, 1fr);
		text-align: center;
	}

	h1 {
		text-align: center;
		font-size: 18px;
	}
	h2 {
		text-align: center;
		font-size: 14px;
	}



	.box {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(2, 1fr);
		text-align: center;    
	}
	
	.season-box {
		grid-template-columns: repeat(3, 1fr);
	}

	.box a:hover {
		transition: transform .3s;
		-ms-transform: scale(1);
		-webkit-transform: scale(1);  
		transform: scale(1.2);
	}

	.logos {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(2, 1fr);
		text-align: center;
	}

	.sub-links ul {
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(1, 1fr);
		text-align: center;
		font-size: 15px;
	}
	.episode-box .duration {
		font-size: 15px;
	}
	
	.box a, .episode-box a, .season-box a {
		font-size: 12px;
	}
	
	.movie-container {
		padding: 0px 20px;
	}
}

.loading-bar {
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 5px;
	background-color: red;
	position: fixed;
	animation: pulseing 1s infinite linear;
	z-index: 1;
}

@keyframes pulseing {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100%  { opacity: 0; }
}


#video-buffer { 
	width: 100%;
    height: 3px;
    background: rgba(0,0,0,0);
    position: absolute;
	z-index: 1;
	pointer-events: none;
}