@media all and (min-width : 681px)  {

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

body {
	background-color : rgb(255, 255, 255);
	margin : 0;
	padding : 0;
	overflow-x : hidden;

	font-family : Avenir;
	color : grey;
}

/*html, body {
  height: 100%;
}*/

div#screen {
	display : none;
}

section#header, section#footer {
	display : none;
}

div#keyboard {
	display : none;
}


/************************************************ VIDEO ***********************************************/

iframe#video {
	position : absolute;
	z-index : 1;
	top : 0;
	left : 0;
	width : 100vw;
	height : 100vh;
}

/*img#thumbnail_image {
	position : absolute;
	z-index : 2;
	top : 0;
	left : 0;
	width : 100%;
}*/

div#layer {
	position : absolute;
	/*z-index : 3;
	top : 0;
	left : 0;
	width : 100vw;
	height : 20vw;*/
}

div#content_layer {
	position : absolute;
	background : linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	z-index : 4;
	top : 0;
	left : 0;
	width : 100vw;
	height : 20vw;
}

img#logo_imago {
	position : absolute;
	z-index : 5;
	opacity : 0.8;
	top : 1vw;
	left : 40vw;
	width : 20vw;
}

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

/*img#logo_play, img#logo_play_off {
	position : absolute;
	z-index : 5;
	top : 20vw;
	left : 43vw;
	width : 14vw;

	-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#logo_play:hover, img#logo_play_off:hover {	
	-webkit-transform : scale(1.05); 
	-moz-transform : scale(1.05); 
	-ms-transform : scale(1.05); 
	-o-transform : scale(1.05); 
	transform : scale(1.05);
}

div#placeholder {
	position : fixed;
	z-index : 5;
	opacity : 0.5;
	right : 0;
	bottom : 0;
	height : 40px;
	width : 120px;		
}*/


div#line {
	position : absolute;
	margin : auto; 
	left : 15px;
	right : 15px;
	height : 1px; 
	background-color : rgb(200, 200, 200); 
}

section#video_thumbnail {
	position : relative;
	margin : 20px;
	padding-bottom : 0px;
	border-radius : 10px;
	box-shadow : 0px 0px 15px #888;
}

		div.thumbnail {
			position : relative;
			top : 15px;
		}

		img.squared {
			position : relative;
			left : 15px;
			width : 60px;
			height : 60px;
			border-radius : 4px;
		}

		img#play { display : none; }

		div.resume_bar_13 { display : none; }
		div.resume_bar_21 { display : none; }

		div.info {
			position : absolute;
			left : 5px;
			right : 5px;
		}

		div._1 {
			position : absolute;
			top : -45px;
			left : 80px;
			right : 5px;
			font-size : 18px;
			color : grey;

			white-space : nowrap; 
			overflow : hidden;
  			text-overflow : ellipsis;
	
		}

		div._1:hover {
			color : black;
		}

			@-moz-keyframes scroll {
				0%   { -moz-transform: translateX(50%); }
				100% { -moz-transform: translateX(-100%); }
			}

			@-webkit-keyframes scroll {
				0%   { -webkit-transform: translateX(50%); }
				100% { -webkit-transform: translateX(-100%); }
			}

			@keyframes scroll {
				0%   { 
			 		-moz-transform: translateX(50%);
			 		-webkit-transform: translateX(50%);
			 		transform: translateX(50%); 		
			 	}

				100% { 
			 		-moz-transform: translateX(-100%);
			 		-webkit-transform: translateX(-100%);
			 		transform: translateX(-100%); 
			 	}
			}


		div._2 { display : none; }
		div._3 { display : none; }
		div._4 { display : none; }
		div._5 { display : none; }


/******************************************* AUDIO PLAYER ******************************************/

div#audio_player {
	position : relative;
	left : 0px;
	height : 190px;
}

		img#current_audio {
			position : absolute;
			top : 15px;
			left : 15px;
			width : 160px;
			height : 160px;
			border-radius : 4px;
		}

		div#episod_name {
			position : absolute;
			top : 15px;
			left : 190px;
			right : 100px; 
			font-size : 22px;

			white-space : nowrap; 
			overflow : hidden;
  			text-overflow : ellipsis;			
		}

		div#audio_control {
			position : absolute;
			top : 105px;
			left : 190px;
			right : 15px; 
		}

				div#progress_bar_background {
					position : absolute;
					width : 100%;
					height : 25px;
				}

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

						div#progress_bar_completed {
							position : absolute;
							top : 10px;
							width : 100%; 
							height : 5px;
							background-color : rgb(200, 200, 200);
						}

						div#time_display {
							position : absolute;
							top : -10px;
							font-size : 15px;							
						}

						a#timecode {
							display : none;
							position : absolute;
							opacity : 0.9;
							top : -15px;
							padding : 4px 10px 1px 10px;
							border-radius : 6px;
							font-size : 14px;
							color : white;	
							background-color : rgb(150, 150, 150);
						}


				img.embed_icon {
					position : absolute;
					opacity : 0.7;
					top : 30px;
					width : 40px;
				}

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

						img#embed_share {
							/*margin-left : 45px;	*/
							right : 0px;				
						}

				div#player_control {
					margin-top : 10px;
					text-align : center;
				}

						img.control_icon {
							position : relative;
							opacity : 0.7;
							top : 20px;
							width : 40px;
						}

						img#download {
							margin-right : 20px;
						}

						a#download {
							text-decoration : none;
						}

						img#mute {
							margin-left : 20px;
						}

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

				img#embed_logo {
					position : absolute;
					opacity : 0.7;
					top : 15px;
					right : 15px;
					width : 80px;
					/*transform : rotate(90deg)	*/
				}

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

div#donation {
	display : none;
}

div#connection_pop_up {
	display : none;
}

div#confirm_pop_up {
	display : none;
}

}








@media all and (max-width : 680px)  {

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

body {
	background-color : rgb(255, 255, 255);
	margin : 0;
	padding : 0;
	overflow-x : hidden;

	font-family : Avenir;
	color : grey;
}

/*html, body {
  height: 100%;
}*/

div#screen {
	display : none;
}

section#header, section#footer {
	display : none;
}

div#keyboard {
	display : none;
}


/************************************************ VIDEO ***********************************************/

div#line {
	position : absolute;
	margin : auto; 
	left : 15px;
	right : 15px;
	height : 1px; 
	background-color : rgb(200, 200, 200); 
}

section#video_thumbnail {
	position : relative;
	margin : 20px;
	padding-bottom : 20px;
	border-radius : 6px;
	box-shadow : 0px 0px 15px #888;
}

		div.thumbnail {
			position : relative;
			top : 15px;
		}

		img.squared {
			position : relative;
			left : 15px;
			width : 60px;
			height : 60px;
			border-radius : 4px;
		}

		img#play { display : none; }

		div.resume_bar_13.list { display : none; }
		div.resume_bar_21.list { display : none; }

		div.info {
			position : absolute;
			left : 5px;
			right : 5px;
		}

		div._1 {
			position : absolute;
			top : -45px;
			left : 80px;
			right : 5px;
			font-size : 18px;
			color : grey;

			white-space : nowrap; 
			overflow : hidden;
  			text-overflow : ellipsis;
	
/*			-moz-animation: scroll 15s linear infinite;
			-webkit-animation: scroll 15s linear infinite;
			animation: scroll 15s linear infinite;

			animation-delay : 8s;*/
		}

		div._1:hover {
			color : black;
		}

			/* Move it (define the animation) */

			@-moz-keyframes scroll {
				0%   { -moz-transform: translateX(50%); }
				100% { -moz-transform: translateX(-100%); }
			}

			@-webkit-keyframes scroll {
				0%   { -webkit-transform: translateX(50%); }
				100% { -webkit-transform: translateX(-100%); }
			}

			@keyframes scroll {
				0%   { 
			 		-moz-transform: translateX(50%); /* Browser bug fix */
			 		-webkit-transform: translateX(50%); /* Browser bug fix */
			 		transform: translateX(50%); 		
			 	}

				100% { 
			 		-moz-transform: translateX(-100%); /* Browser bug fix */
			 		-webkit-transform: translateX(-100%); /* Browser bug fix */
			 		transform: translateX(-100%); 
			 	}
			}


		div._2 { display : none; }
		div._3 { display : none; }
		div._4 { display : none; }
		div._5 { display : none; }


/******************************************* AUDIO PLAYER ******************************************/

div#audio_player {
	position : relative;
	width : 85vw;
	height : 90vw;
}

		img#current_audio {
			position : absolute;
			margin-top : 10vw;
			margin-left : 15vw;
			width : 60vw;
			height : 60vw;
			border-radius : 2vw;
		}

		div#episod_name {
			position : absolute;
			top : 15px;
			left : 15px;
			right : 5px; 
			font-size : 22px;

			white-space : nowrap; 
			overflow : hidden;
  			text-overflow : ellipsis;

/*  			-moz-animation: scroll 15s linear infinite;
			-webkit-animation: scroll 15s linear infinite;
			animation: scroll 15s linear infinite;

			animation-delay : 8s;*/
		}

			/* Move it (define the animation) */

			@-moz-keyframes scroll {
				0%   { -moz-transform: translateX(50%); }
				100% { -moz-transform: translateX(-100%); }
			}

			@-webkit-keyframes scroll {
				0%   { -webkit-transform: translateX(50%); }
				100% { -webkit-transform: translateX(-100%); }
			}

			@keyframes scroll {
				0%   { 
			 		-moz-transform: translateX(50%); /* Browser bug fix */
			 		-webkit-transform: translateX(50%); /* Browser bug fix */
			 		transform: translateX(50%); 		
			 	}

				100% { 
			 		-moz-transform: translateX(-100%); /* Browser bug fix */
			 		-webkit-transform: translateX(-100%); /* Browser bug fix */
			 		transform: translateX(-100%); 
			 	}
			}

		div#audio_control {
			position : absolute;
			top : 75vw;
			left : 2vw;
			width : 100%; 
		}

				div#progress_bar_background {
					position : absolute;
					width : 100%;
					height : 5vw;
				}

						div#progress_bar {
							position : absolute;
							top : 2vw;
							width : 0px; 
							height : 1.2vw;
							background-color : grey;
						}

						div#progress_bar_completed {
							position : absolute;
							top : 2vw;
							width : 100%; 
							height : 1.2vw;
							background-color : rgb(200, 200, 200);
						}

						div#time_display {
							position : absolute;
							top : -2vw;
							font-size : 2.8vw;							
						}

						a#timecode {
							display : none;
							position : absolute;
							opacity : 0.9;
							top : -3vw;
							padding : 0.8vw 2vw 0.2vw 2vw;
							border-radius : 1vw;
							font-size : 2.8vw;
							color : white;	
							background-color : rgb(150, 150, 150);
						}


				img.embed_icon {
					position : absolute;
					opacity : 0.7;
					top : -66vw;
					left : 76vw;
					width : 8vw;					
				}

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

						img#embed_share {
							margin-top : 8vw;					
						}

				div#player_control {
					margin-top : 2.5vw;
					text-align : center;
				}

						img.control_icon {
							position : relative;
							opacity : 0.7;
							top : 2vw;
							width : 8vw;
						}

						img#download {
							margin-right : 10vw;
						}

						a#download {
							text-decoration : none;
						}

						img#mute {
							margin-left : 10vw;
						}

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

				img#embed_logo {
					position : absolute;
					opacity : 0.7;
					top : 60vw;
					right : -2vw; 
					width : 16vw;
					transform : rotate(90deg)
				}

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

div#donation {
	display : none;
}

div#connection_pop_up {
	display : none;
}

div#confirm_pop_up {
	display : none;
}

}