@font-face {
	font-family : "Avenir";
	src : url("../font/AvenirLTStd-Light.woff2");
	font-display : swap;
}

html {
	background-color : black;
}

body {
	margin : 0px;
	padding : 0px;
	font-family : Avenir;
	color : grey;
}

/*video {
  object-fit : fill
}*/

div#screen {
	display : none;
}

section#video_player {
	position : fixed;
	overflow : hidden;
	width : 100vw;
	height : 100vh;
	box-shadow : 0vw 0vw 2vw 1vw #000;
	background-color : black;
}

video#video {
	position : absolute;
}

iframe#main_player {
	position : absolute;
	top : 0px;
	left : 0px;
	width : 100%;
	height : 100%;
}

		#player_size {
			position : fixed;
		  	width : 100vw;
		}

		#cropping_div {
		  overflow : hidden;
		}

		#div_to_crop {
		  overflow: hidden;
		  margin-top: -51%;
		  margin-bottom: -20%;
		}

		#player_wrapper {
		  position: relative;
		  overflow: hidden;
		  padding-top: 128.25%;
		}

		#player {
		  position: absolute;
		  top: 0;
		  width: 100%;
		  height: 124%;
		  
		}

div#container {
	position : absolute;
	top : 0px;
	left : 0px;
	width : 100%;
	height : 100%;
	vertical-align : middle;
}

		div#player_transparent_layer, div#player_black_layer {
			position : absolute;
			top : 0px;
			left : 0px;
			width : 100%;
			height : 100%;
		}

		div#player_black_layer {
			background-color : black;		
		}

		img#thumbnail, img#info_layer{
			position : absolute;
		}

		img#info_layer{
			display : none;
			opacity : 0.5;
		}

		/*img#thumbnail_podcast {
			position : absolute;
			left : 50%;
			height : 100vh;
			transform : translate(-50%, 0%);
			box-shadow : 0vw 0vw 2vw 1vw #000;
		}*/

		img#play, img#pause, img#radio_on{
			display : none;
			position : absolute;
			top : 50%;
			left : 50%;
			transform : translate(-50%, -50%);
			cursor : auto;
			opacity : 0.8;
		}

		img#radio_on {
			opacity : 0.4;
		}
 
		img#download_start {
			display : none;
			position : absolute;
			bottom : 20px;
			left : 50%;
			transform : translate(-50%);
			cursor : auto;
			opacity : 0.8;
		}

				img#download_start:hover {
					cursor : pointer;
					opacity : 1;
				}

		img#app_access {
			position: absolute;
			top : 50%;
			right : 0px;
			width : 70px;
			transform : translate(0, -50%);
			opacity : 0.5;
		}

				img#play:hover, img#pause:hover, img#app_access:hover {
					cursor : pointer;
					opacity : 1;
				}


div#subtitle_container {
	position : absolute;
	bottom : 15vw;
	left : 10%;
	width : 80%;
	/*height : 5vw;*/
}

		a#subtitle {
			display : none;
			position : absolute;
			bottom : 0vw;
			left : 0vw;
			margin : auto;
			padding : 5px;
			width : 100%;
			font-size : 20px;
			text-align : center;
			background-color : black;
			color : white;
			opacity : 0.8;
		}

/*div#fact_check {
	display : none;
	position : fixed;
	top : 10px;
	left : 10px;
	width : 65vw;
	padding : 20px;
	padding-right : 100px;
	padding-left : 30px;
	border-radius : 10px;
	background-color : black;
	opacity : 0.8;
}

		img#fact_check {
			position : absolute;
			width : 40px;
		}

				img#fact_check:hover {
					cursor : pointer;
				}

		a.fact_check {
			position : relative;
			left : 50px;
			font-size : 20px;
			color : white;
		}

				a#fact_source {
					color : grey;
					text-decoration : none;
				}

				a#fact_source:hover {
					color : white;
				}

		img#fact_close {
			position : absolute;
			right : 15px;
			bottom : 15px;
			opacity : 0.6;
		}*/

div#transparent_layer {
	display : none;
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
}

div#pwd_pop_up {
	display : none;
	position: absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	padding-top : 30px;
	padding-bottom : 20px;
	padding-left : 60px;
	padding-right : 60px;
	border-radius : 30px;
	text-align : center;
	background-color : rgb(0, 0, 0, 0.8); 
}

		a.item_title {
			font-size : 20px;
		}

		input.item_value {
			margin-top: 10px;
			border-top : none;
			border-left : none;
			border-right : none;
			border-bottom-color : grey; 
			font-size : 16px;
			background-color : transparent;	
			height : 20px;
			width : 250px;
			color : grey;
		}

		a.action {
			display : block;
			margin-top : 30px;
			margin-left : auto;
			margin-right : auto;
			margin-bottom : 8px;
			width : 150px;
			color : grey;
			border-radius : 8px;
			padding : 8px;
			background-color : rgb(20, 20, 20);
			text-decoration : none;
		}

				a.action:hover {
					cursor : pointer;
					color : white;
				}

/******************************************* PLAYER ******************************************/

audio {
	position : absolute;
	top : 90px;
	width : 100%;
	height : 50px;
}

		div#top_bar {
			display : none;
			position : absolute;
			top : -50px;   /*0px*/
			width : 100%;
			height : 50px; 
			background-color : rgb(0, 0, 0, 0.7);
			color : white;
		}

				div#consumption_container {
					position : relative;
					left : 10px;
				}

						a#warning, a#lowka, a#hosting {
							position : relative;
							top : 15px;
							opacity : 0.5;
						}

						a#lowka {
							opacity : 1;
							color : white;
							text-decoration : none;
						}

								/*a#lowka:hover {
									cursor : pointer
									opacity : 1;
								}*/

						img#consumption {
							position : absolute;
							top : 2px;
							left : 10px;
							width : 50px;
						}

								img.consumption:hover {
									cursor : pointer;
								}

						a#consumption_text {
							position : absolute;
							top : 15px;
							left : 70px;
						}

				div#time_container {
					position : relative;
				}

						img#time {
							display : none;
							position : absolute;
							top : 10px;
							left : 320px;
							width : 30px;
							opacity : 1;
						}

								img.time:hover {
									cursor : pointer;
								}

						a#time_text {
							position : absolute;
							top : 15px;
							left : 360px;
						}

				div#query_area {
					position : relative;
					margin : auto;
					top : 10px;
					width : 320px;
				}

						input#query {
							background-color : transparent;
							border-top : none;
							border-left : none;
							border-right : none;
							border-bottom-color : white;	
							width : 200px;
							color : white;
							font-size : 20px;
						}

						a#query_button {
							color : grey;
							font-size : 20px;
						}

								a#query_button:hover {
									cursor : pointer;
									color : white;
								}


				a#resolution_text {
					position : absolute;
					top : 15px;
					right : 50px;
				}

				img#resolution_img {
					display : none;
					position : absolute;
					top : 10px;
					right : 10px;
					width : 30px;
				}

						img.resolution_img:hover {
							cursor : pointer;
							/*opacity : 1;*/
						}

/*		img#link {
			position : absolute;
			top : 70px;
			left : 10px;
			width : 200px;
			box-shadow : 0.4vw 0.4vw 0.4vw #000;

			-webkit-transition : all 0.2s ease;
			-moz-transition : 0.2s ease;
			-o-transition : all 0.2s ease;
			-ms-transition : all 0.2s ease;
			transition : all 0.2s ease;
		}

				img#link:hover {
					box-shadow : 0.8vw 0.8vw 0.8vw #000;

		 			-webkit-transform : scale(1.02); 
					-moz-transform : scale(1.02); 
					-ms-transform : scale(1.02); 
					-o-transform : scale(1.02); 
					transform : scale(1.02);
				}*/


		div#control {
			/*display : none;*/
			position : absolute;
			bottom : -55px;  /*0px*/
			width : 100%;
			height : 55px; 
			background-color : rgb(0, 0, 0, 0.7);
		}

				div#progress_bar_background {
					position : absolute;
					top : -9px;
					width : 100%;
					height : 35px;
				}

						div#progress_bar_background:hover {
							cursor : pointer;
						}

						div#progress_bar {
							position : absolute;
							top : 10px;
							width : 0px; 
							height : 5px;
							background-color : white;
							opacity : 1;
						}

						div#progress_bar_completed {
							position : absolute;
							top : 10px;
							width : 100%; 
							height : 5px;
							background-color : white;
							opacity : 0.5;
						}

								div.query_icon {
									position : absolute;
									top : 6px;
									width : 12px;
									height : 12px;
									border-radius : 6px;
									background-color : white;
								}
								

						a#timecode {
							display : none;
							position : absolute;
							top : -30px;
							padding : 4px 10px 1px 10px;
							border-radius : 6px;
							background-color : black;
							opacity : 0.9;
							color : white;	
							font-size : 14px;
						}

				a#time_display_text {
					color : white;
				}

				div#player_control {
					position : absolute;
					margin-top : 10px;
					width : 100%;
				}

				div#left_button {
					display : inline-block;
					position : relative;
				}

				div#right_button {
					display : inline-block;
					position : relative;
					float : right;
				}

						img.control.icon {
							width : 40px;
							opacity : 0.6;
						}

						/*img#language, img#radio, img#download {
							display : none;
						}*/

						img.control.icon:hover {
							cursor : pointer;
							opacity : 1;
						}


				div#sound_bar_background {
					display : inline-block;
					position : relative;
					padding-left : 20px;
					padding-right : 20px;
					width : 100px;
					height : 40px;
				}

						div#sound_bar_background:hover {
							cursor : pointer;
						}

						div#sound_bar {
							position : absolute;
							top : 18px;
							width : 0px; 
							height : 4px;
							border-radius : 4px;
							background-color : white;
						}

						div#sound_bar_completed {
							position : absolute;
							top : 18px;
							width : 100px; 
							height : 4px;
							border-radius : 4px;
							background-color : grey;
						}

						div#sound_icon {
							display : none;
							position : absolute;
							top : 14px;
							width : 12px;
							height : 12px;
							margin-left : 14px; 
							border-radius : 6px;
							background-color : white;
						}

				div#time_display {
					display : inline-block;
					position : relative;
					top : -15px;
					text-align : center;
					font-size : 18px;
				}


div#quality_container {
	display : none;
	position : absolute;
	top : -150px;
	width : 40px;
	right : 45px;
	height : 150px;
}

		img.quality_icon {
			width : 40px;
			opacity : 0.6;
			border-radius : 50%;
			background-color : black;
		}

				img.quality_icon:hover {
					cursor : pointer;
					opacity : 1;
				}

				img#quality_sd {
					position : absolute;
					top : 100px;
				}

				img#quality_hd {
					position : absolute;
					top : 55px;
				}

				img#quality_hd_plus {
					position : absolute;
					top : 10px;
				}


div#language_container {
	display : none;
	position : absolute;
	top : -195px;
	width : 40px;
	right : 90px;
	height : 150px;

}

		img.language_icon {
			display : none;
			width : 40px;
			opacity : 0.6;
			border-radius : 50%;
			background-color : black;
			}

				img.language_icon:hover {
					cursor : pointer;
					opacity : 1;
				}

				img#language_0 {
					position : absolute;
					top : 145px;
				}

				img#language_1 {
					position : absolute;
					top : 100px;
				}

				img#language_2 {
					position : absolute;
					top : 55px;
				}

				img#language_3 {
					position : absolute;
					top : 10px;
				}


div#app_store {
	display : none;
	position : relative;
	color : grey;
	width : 576px;
	float : right;
	min-height : 100vh;
	background-color : rgb(35, 35, 35);
}

		div.app_access {
			position : relative;
			display : inline-block;
			color : grey;
			width : 200px;
			height : 200px;
			left : 65px;
			margin : 50px 50px 0px 0px;
			box-shadow : 0vw 0vw 1vw 0.5vw #000;
			border-radius : 20px;
			text-align : center;
		}

		img.app_access {
			width : 160px;
			left : 20px;
		}

		a.app_access {
			font-size: 22px;
		}

		div#app_load {
			display : none;
			position : absolute;
			top : 50%;
			left : 50%;
			transform : translate(-50%);
		}

		a#get_data {
			display : none;
			position : absolute;
			text-align : center;
			top : 50%;
			left : 50%;
  			transform : translate(-50%, -100%);
			opacity : 0;
		}

div#app_header {
	display : none;
	position : fixed;
	top : 0px;
	height : 50px;
	width : 576px;
	background-color : rgb(35, 35, 35);
	box-shadow : 0vw 0vw 2vw 1vw #000;
}

		a#generate_srt {
			position : absolute;
			text-align : center;
			top : 14px;
			left : 50%;
			transform : translate(-50%, -100%);
		}

		img#app_close {
			display : none;
			position : fixed;
			top : 12px;
			right : 12px;
			cursor : auto;
			opacity : 0.6;
		}

				img#app_close:hover {
					cursor : pointer;
					opacity : 1;
				}

div#transcription {
	visibility : hidden;
	padding-top : 50px;
}


		img.transcription_play {
			position: relative;
			width : 40px;
			top : 20px;
			left : 5%;
			opacity : 0.6;
		}

				img.transcription_play:hover {
					cursor : pointer;
					opacity : 1;
				}

		div.complete_slot {
			position : relative;
			top : -8px;
			height : 5px;
			background-color : grey;			
		}

		div.slot_background {
			position : relative;
			top : -20px;
			height : 30px;
			/*margin-bottom : -30px;*/
			/*background-color : orange;			*/
		}

				div.current_time_slot{
					position : relative;
					top : -16px;
					width : 12px;
					height : 12px;
					border-radius : 6px;
					background-color : white;					
				}

				div.slot_start_index{
					position : relative;
					top : 8px;
					width : 12px;
					height : 12px;
					border-radius : 6px;
					background-color : grey;					
				}

				div.slot_stop_index{
					position : relative;
					top : -4px;
					width : 12px;
					height : 12px;
					border-radius : 6px;
					background-color : grey;					
				}

		div.transcription_slot {
			position : relative;
			top : -55px;
			height : 5px;
			background-color : white;			
		}


		textarea.transcription {
			position : relative;
			width : 90%;
			top : -20px;
			padding : 0px;
			margin-left : 5%;
			margin-bottom : 15px;
			border-radius : 10px;
			color : grey;
			font-family : Avenir;
			font-size : 18px;
			border-color : rgb(50, 50, 50);
			background-color : transparent;
		}

				textarea:focus {
				    outline : 0;
				    outline : none;
				}

		a.number {
			position : absolute;
			left : 32px;
			font-size : 14px;
			float : right;
			margin-top : 35px;
			color : rgb(80, 80, 80);
		}

		img.save {
			position : absolute;
			width : 25px;
			margin-top : 35px;
			right : 27px;
			opacity : 0.1;
		}