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

body {
	background-color : rgb(var(--main-color));
	margin : 0;
	padding : 0;
	overflow-x : hidden;
	font-family : Font;
	font-size : var(--font-size);
	line-height : var(--line-height); 
	color : rgb(var(--font-color));
}

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

input:focus {
    outline : none;
}

img.lazy {
    opacity : 0;
    transition : opacity 0.5s ease-in-out;
}

img.fade-in {
    opacity : 1;
}

div#selector {
	display : none;
	position : absolute;
	z-index : 1000;
}

		div#selector.header {
			border : 0.2vw solid;
			color : rgb(var(--font-color));
			border-style : none none solid none;
		}

		div#selector.underline {
			margin-top : 0.2vw;
			border : 0.3vw solid;
			color : rgb(var(--font-color));
			border-style : none none solid none;
		}

		div#selector.box {
			border : 0.3vw solid;
			border-color : rgb(var(--font-color));
			border-radius : var(--radius);
			box-shadow : inset 0px 0px 1px rgb(var(--shadow-color));
		}	

		div#selector.action {
			border : 0.3vw solid;
			border-color : rgb(var(--font-color));
			border-radius : 0.8vw;
		}

		div#selector.key {
			border : 0.3vw solid;
			border-color : rgb(var(--font-color));
		}


/************************************************ HEADER ***********************************************/

div#header {
	position : fixed;
	z-index : 1000;
	top : 0px;
	width : 100vw;
	height : 4vw;
	font-size : calc(var(--font-size) * 1.2);
	box-shadow : 0vw 0.5vw 0.5vw 0vw rgba(var(--shadow-color), var(--header-opacity));
	background-color : rgb(var(--header-color));
}

img#menu_button {
	position : fixed;
	z-index : 100;
	opacity : 0.5;
	top : 0.5vw;
	left : 1vw;
	width : 3vw;
	vertical-align : bottom;
}

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

div#header_left {
	position : fixed;
	top : 1vw;
	left : 5vw;
	padding-top : var(--font-padding);
}

		a.header {
			display : inline-block;
			padding-left : 0.3vw;
			padding-right : 0.7vw;
			color : rgb(var(--font-color)); 
			opacity : 0.5;
		}

		a.header:hover {
			cursor : pointer;
			opacity : 1;
		}

		a.header {
			text-decoration : none;
		}

		a.sub_list_item_menu:hover {
			opacity : 1;
		}

div#header_center {
	text-align : center;
	width : 100vw;
}

		img#logo {
			padding-top : 0.5vw;
			height : 3vw;
		}

div#header_right {
	position : fixed;
	top : 1vw;
	right : 5vw;
	padding-top : var(--font-padding);
}

		img#search_button {
			top : 1.2vw;
			width : 1.8vw;
		}

		input#header_query {
			border : none;
			top : 1.4vw;
			padding-right : 1vw;
			width : 10vw;
			height : 1.5vw;
    		color : rgb(var(--font-color));
			opacity : 0.5;
			text-align : right;
			font-family : Font;    		
			font-size : calc(var(--font-size) * 1.2);
			background-color : transparent;
		}

				input#header_query:hover {
					cursor : pointer;
					opacity : 1;
				}
				

		ol.sub_list_header {
			display : inline-block;
			position : fixed;
			z-index : 100;
			top : -100vh;
			padding-top : 4vw;
			padding-bottom : 0.5vw;
			padding-left : 2vw;
			padding-right : 2vw;
			background-color : rgb(var(--header-color));
			list-style-type : none;
			border-radius : calc(var(--radius) / 2);
			box-shadow : 0vw 0vw 0.75vw 0.75vw rgba(var(--shadow-color), var(--header-opacity));  /*0.5vw 0.5vw 0.5vw 0vw*/
		}
		
		ol.sub_list_header li {
			text-align : center;
			line-height : 2.5vw;
		}

		a.sub_list_item_header {
			color : rgb(var(--font-color)); 
			opacity : 0.5;
			text-decoration : none;
		}

				a.sub_list_item_header:hover {
					cursor : pointer;
					opacity : 1;
				}


img#user_button {
	position : fixed;
	top : 0.5vw;
	right : 1vw;
	width : 3vw;
	opacity : 0.5;
}

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

img#log_button {
	position : fixed;
	top : 0.8vw;
	right : 1vw;
	width : 0.5vw;	
}


/************************************************* MENU ************************************************/

div.menu {
	position : fixed;
	z-index : 100;
	top : 0vw;
	padding-top : 7vw;
	margin-left : -22vw;
	width : 20vw;
	height : 100%;
	overflow-y : auto;
	box-shadow : 0.5vw 0vw 0.5vw rgba(var(--shadow-color), var(--header-opacity));
	background-color : rgb(var(--header-color));
}

		div#menu_right {
			margin-left : 102vw;
			box-shadow : -0.5vw 0vw 0.5vw rgba(var(--shadow-color), var(--header-opacity));;
		}

div.item_menu {
	position : relative; 
	opacity : 0.5; 
	width : 100%;
} 

		div.item_menu:hover {
			cursor : pointer;
			opacity : 1; 
		}  

		img.icon_item_menu {
			width : 2.5vw;
			height : 2.5vw;
			margin-left : 1.5vw;
			vertical-align : middle;
		}

		a.text_item_menu {
			margin-left : 0.8vw;	
			vertical-align : middle;
			color : rgb(var(--font-color));
			opacity : 1;
			font-size : calc(var(--font-size) * 1);
			text-decoration : none;
		}

		img.icon_item_down {
			width : 2.5vw; 
			float : right; 
			margin-right : 1.5vw;
		}

				img.icon_item_down:hover {
					cursor : pointer;
					/*color : white;*/
				}

div.item_padding {
	height : 2vw;
}

ol.sub_list_menu {
	display : none;
	list-style-type : none;
	margin : 0vw;
}

		ol.sub_list_menu li {
			margin-left : 4vw;
			line-height : 150%;
		}

		a.sub_list_item_menu {
			color : rgb(var(--font-color));
			opacity : 0.5;
			font-size : calc(var(--font-size) * 1);
			text-decoration : none;
		}

		a.sub_list_item_menu:hover {
			cursor : pointer;
			opacity : 1;
		}

div#black_layer {
	display : none;
}


/************************************************ TITLE ***********************************************/

div#screen {
	display : none;
	margin-top : 6vw;
	min-height : 40vw;
}

div.screen_title {
	margin-bottom : 3vw;
	text-align : center;
}

	h1.screen_title {
		position : relative;
		margin-top : 0vw;
		opacity : 0.8;
		font-size : calc(var(--font-size) * 2);
		font-weight : normal;
	}

	/*a.screen_title_medium {
		font-size : calc(var(--font-size) * 1);
	}

	a.screen_title_big {
		font-size : calc(var(--font-size) * 1.5);
	}*/

	/*a.mouse_over {
		text-decoration : none;
		color : white;
	}

			a.mouse_over:hover {
				color : white;
			}	

a#warning {
	margin-top : -0.5vw;
	margin-bottom : 2vw;
	margin-left : 39vw;
}*/


/********************************************* BUTTONS *********************************************/

section#button_list {
	display : none;
	position : fixed;
	z-index : 10;
	top : 6vw;
	width : 4vw;
	margin-left : 96vw;
}

		a.button_href {
			text-decoration : none;
		}

		img.button {
			width : 3vw;
    		box-shadow : 0.5vw 0.5vw 0.5vw 0vw rgba(var(--shadow-color), var(--header-opacity));
    	}

		img.my_content {
			display : none;
		}


/*********************************************** THUMBNAIL ***********************************************/

a.title {
	position : relative;
	z-index : 10;
	margin-left : 5.4vw;
	color : rgb(var(--font-color)); 
	opacity : 0.5;
	font-size : calc(var(--font-size) * 1.8);
	/*line-height : calc(var(--font-size) * 3);*/
	text-decoration : none;
}

		div.pager_container {
			text-align : center;
			margin-top : -2vw;
		}		

				div.pager, div.pager_slideshow {
					display : inline-block;
					width : 1vw;
					height : 1vw;
					margin : 0vw;
					padding : 0vw;
					border-radius : 50%;
					background : rgb(var(--font-color));
					opacity : 0.2;
				}

						div.pager, div.pager_slideshow:hover {
							cursor : pointer;
						}


div.scrolling_container {
	position : relative;
}

div.list_container {
	margin-left : 4.5vw;
	margin-bottom : 3vw;
	white-space : nowrap;
}

		div.thumbnail {
			display : inline-block;
			position : relative;
			z-index : 10;
			margin : 1vw;
			box-shadow : 0.5vw 0.5vw 0.5vw 0vw rgba(var(--shadow-color), var(--shadow-opacity));

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

				div.thumbnail:hover {
					box-shadow : 1vw 1vw 1vw 0vw rgba(var(--shadow-color), var(--shadow-opacity));

		 			-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.thumbnail.panorama {
					margin-right : 0.8vw;
					margin-left : 0.8vw;
				}

				.panorama {
					width : 21vw;
					height : 11.8vw;
					border-radius : var(--radius);
				}

				.portrait {
					width : 16vw;
					height : 21.3vw;
					border-radius : var(--radius);
				}

				.squared {
					width : 13vw;
					height : 13vw;
					border-radius : var(--radius);
				}

				.rounded {
					width : 16vw;
					height : 16vw;
					border-radius : 50%;
				}


						img.tag {
							position : absolute;
							/*z-index : 60;*/
							top : 0.4vw;
							left : -0.4vw;
							width : 10vw;
						}

						img#play.panorama {
							position : absolute;
							top : 30%;
							left : 38.75%;
							width : 22.5%;
							height : 40%;
						}

						img#play.squared {
							position : absolute;
							top : 3vw;
						    left : 3.5vw;
						    width : 6vw;
						    height : 6vw;
						}

						img.user_layer {
							position : absolute;
							display : none;
							top : 0vw;
							left : 0vw;
							width : 8vw;
						}

						img.user_action {
							position : absolute;
							display : none;
							top : 0.8vw;
							left : 1vw;
							width : 6vw;
						}


		/*  INFO  */

		div.info {
			position : absolute;
			width : 24vw;
			height : 0vw; 				/*  because div has also "format" class but should not have height  */
			/*font-size : calc(var(--font-size) * 0.9);*/
			/*line-height : calc(var(--font-size) * 1.1);*/
			text-align : center;
		}

				div.info.panorama { display : none }
				div.info.portrait { display : none }
				div.info.squared  { display : none }

				div.info.panorama { margin-left : -1.5vw }
				div.info.portrait { margin-left : -4vw }
				div.info.squared  { margin-left : -5.5vw }
				div.info.rounded  { margin-left : -8vw }

				div.line { margin : 0 auto }
				div.line._2 { opacity : 0.5 }


		/*  ARROWS  */

		img.arrow_container {
			position : absolute;
			z-index : 10; 
			width : 4vw;
			height : 8vw;
		}

				img.arrow_container.panorama { margin-top : -13.5vw }
				img.arrow_container.portrait { margin-top : -18vw }
				img.arrow_container.squared  { margin-top : -13.5vw }
				img.arrow_container.rounded  { margin-top : -11vw }

				img.arrow_container.right { right : 0vw }


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

div#pop_up_shadow {
	display : none;	
	position : fixed;
	background-color : rgb(var(--shadow-color));
	z-index : 10;
	opacity : 0.6;
	width : 100vw;
	height : 100%;
}

div#pop_up {
	display : none;	
	position : absolute;
	background-color : rgb(var(--main-color));
	z-index : 10;
	left : 25vw;
	width : 50vw;
	height : 100%;
	overflow : visible;
	box-shadow : 0vw 0vw 0.75vw 0.75vw rgba(var(--shadow-color), var(--shadow-opacity));
}

section#episod_title {
	display : none;
	position : relative;
	z-index : 10;
	top : 5vw;
    left : 1.8vw;
	max-width : 48vw;
}

	a#episod_name {
		font-size : calc(var(--font-size) * 1.5);
		line-height : 4vw;
		font-weight : normal;		
	}
	
	img#like, img#later, img#reco {
		display : none;
		width : 1.5vw;
	}


img#player_close {
	position : absolute;
	z-index : 10;
	opacity : 0.5;
	top : 5vw;
    left : 46vw;
    width : 3vw;
}


/********************************************* VIDEO PLAYER ********************************************/

section#video_player {
	display : none;
	position : absolute;
	z-index : 10;
	top : 9vw;
    left : 1.8vw;
}

		iframe#player, iframe#main_player/*, div#player_black_layer, div#custom-css*/ {
			position : absolute;
			width : 46.2vw; 
			height : 26vw;
			border : black;
			background-color : black;
			box-shadow : 0vw 0vw 2vw 0.5vw rgba(var(--shadow-color), var(--shadow-opacity));
		}

		/*iframe#player.fixed, iframe#main_player.fixed {
			position : fixed;
			left : 1.5vw;
			margin-top : 6vw;
			width : 21.5vw; 
			height : 12.1vw;
		}*/

		iframe#main_player {
			display : none;
			z-index : 10;
		}


section#audio_player {
	display : none;
}

#button {
	position : fixed;
	z-index : 100;
	top : 39vw;
	margin-left : 25vw;
	width : 50vw;
}


		div.resume {
			margin-top : -0.4vw;
    		height : 0.4vw;
			width : 0%;
			background-color : white;
		}

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

section#audio_player {
	display : none;
	position : absolute;
	z-index : 10;
	top : 3vw;
	left : 2vw;
}

		img.previous_audio, img.next_audio {
			position : absolute;
			z-index : 10;
			top : 9vw;
			width : 20vw; 
			height : 20vw;
			box-shadow : 0vw 0vw 2vw 0.5vw rgba(var(--shadow-color), var(--shadow-opacity));
		}

		img.previous_audio {
			left : 25vw;
		}

		img#current_audio {
			position : absolute;
			z-index : 10;
			top : 0vw;
			left : 9.5vw;
			margin-top : 6vw;
			width : 26vw; 
			height : 26vw;
			box-shadow : 0vw 0vw 2vw 0.5vw rgba(var(--shadow-color), var(--shadow-opacity));
		}

		div#audio_control {
			position : absolute;
			z-index : 10;
			background-color : black;
			opacity : 0.9;
			top : 28vw;
			left : 9.5vw;
			width : 26vw; 
			height : 4vw;
		}

		audio#audio_popup {
			position : absolute;
			z-index : 10;
			top : 27vw;
			left : 9.5vw;
			width : 26vw; 
			height : 5vw;			
		}

				div#progress_bar_background {
					position : relative;
					z-index : 10;
					padding-top : 0.5vw;
					padding-bottom : 0.5vw;
					top : -0.5vw;
					width : 26vw; 
					height : 0.35vw;
				}

						a#timecode {
							display : none;
							position : absolute;
							z-index : 10;
							background-color : black;
							opacity : 0.9;
							padding-top : 0.2vw;
							padding-left : 0.4vw;
							padding-right : 0.4vw;
							padding-bottom : 0vw;
							top : -2vw;
							/*color : white;	*/
							font-size : 0.9vw;
						}

						div#progress_bar {
							position : relative;
							z-index : 10;
							background-color : white;
							width : 0vw; 
							height : 0.35vw;
						}

						div#time_display {
							position : absolute;
							text-align : center;
							top : 1.5vw;
							left : 3vw;
							width : 26vw;
							font-size : 1vw;
						}

				div#player_control {
					margin-left : 1vw;
					margin-top : -1vw;
				}

						img.control_icon {
							position : relative;
							opacity : 0.6;
							top : 0.5vw;
							width : 2.5vw;
						}

						img#download {
							padding-right : 3vw;
							opacity : 0.1;
						}

						img#mute {
							float : right;
						    margin-right : 1vw;
						    margin-top : -3vw;
						}


				img#embed_logo {
					display : none;	
				}


/*************************************** EMBED / METADATA **************************************/

section.embed {
	position : absolute;
	top : 35.5vw;
    left : 1.8vw;
}

		a#embed_display {
			position : absolute;
			top : -1.5vw;
    	}

		input#embed_value {
			display : none;
			position : absolute;
			top : 3vw;
		    width : 45vw;
		    color : rgb(var(--font-color));
		    opacity : 0.5;
		    border-color : transparent;
		    background-color : transparent;
			font-size : calc(var(--font-size) * 1);
    	}

		a#embed_copy {
			display : none;
			position : absolute;
			left : 35vw;
    		top : 3vw;
    	}


/********************************************** FORM *********************************************/

div.item {
	margin-bottom : 0.8vw;
}

		a.item_title {
			display : block;
			float : left;
			width : 16vw;
		}

		a.grey {
			opacity : 0.5;
		}

		input.item_value { 
			border-top : none;
			border-left : none;
			border-right : none;
			border-bottom-color : white; 
			background-color : transparent;	
			height : 1.5vw;
			width : 16vw;
			font-family : Font;
			color : rgb(var(--font-color));
		}

		input.grey {
			border-bottom-color : rgb(255, 255, 255, 0.5);
		}

		input.item_value:-webkit-autofill {
		    background-color : transparent !important;
		    box-shadow : 0 0 0px 1000px white inset !important;
		}


a.action, label.action {
	display : block;
	margin-top : 2vw;
	margin-left : auto;
	margin-right : auto;
	margin-bottom : 0.5vw;
	width : 10vw;
	border-radius : 0.8vw;
	padding : 0.5vw;
	background-color : rgba(var(--action-color), 0.5);
	color : rgb(255, 255, 255, 0.5);
	text-decoration : none;
}

a.action {
	text-align : center;
}

		a.action:hover, label.action:hover {
			cursor : pointer;
			color : rgb(255, 255, 255, 0.8);
		}

label.action {
	margin-top : 0vw;
	margin-bottom : 0.5vw;
}

a.message {
	visibility : hidden;
}

img.check {
	margin-top : 1vw;
	vertical-align : -0.25vw;
	margin-right : 0.5vw;
	width : 1.5vw;
}


/********************************************  POP UP *******************************************/

div#pop_up_black_layer {
	display : none;
	position : absolute;
	z-index : 1000;
	top : 0px;
	left : 0px;
	width : 100vw;
	height : 100vh;
	opacity : 0.5;
	background-color : black;
}

div.pop_up {
	display : none;
	position : fixed;
	z-index : 10000;
	top : 50%;
  	transform : translateY(-50%);
	left : 30vw;
  	width : 36vw;
	height : 25vw;
	padding : 2vw;
	border-radius : 2vw;
	text-align : center;
	background-color : rgb(var(--header-color));
}

a#title_pop_up {
	display : block;
	width : 32vw;
	/*margin-top : 2vw;	*/
	margin-left : auto;
	margin-right : auto;
	margin-bottom : 3vw;
	opacity : 0.5;
	font-size : calc(var(--font-size) * 1.5);
}

img#close_pop_up {
	position : absolute;
	opacity : 0.5;
	margin-top : -1.5vw;
    margin-left : 16.5vw;
	width : 3vw;
}

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


/***************************************** PAYMENT POP UP ******************************************/

div#payment_pop_up {
	height : 30vw;
}

div#amount, div#email {
	margin-top : 2vw;
	width : 30vw;
	height : 6vw;
	margin-left : auto;
	margin-right : auto;
	/*background-color : orange;*/
}

		img.less_more {
			position : absolute;
			margin-top : 1vw;
			width : 3vw;
			border-radius : 50%;
			background-color : black;
			opacity : 0.5;			
		}

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

				img#less_pop_up { margin-left : -10vw; }
				img#more_pop_up { margin-left : 7vw; }


		input#value_pop_up {
			position : absolute;
			margin-top : 1.6vw;
			margin-left : -4.5vw;
			opacity : 1;
			width : 3vw;
			border : none;
			background-color : transparent;
			color : white;
			font-size : calc(var(--font-size) * 1.5);
			text-align : right;
		}

		a#money_pop_up {
			position : absolute;
			margin-top : 2vw;
			margin-left : -1vw;
			font-size : calc(var(--font-size) * 1.5);			
		}

		a#pourcent, a#pourcent_tuto {
			position : absolute;
			margin-top : 20vw;
    		margin-left : -15vw;
			width : 30vw;
			opacity : 0.5;
		}

				a#pourcent_tuto { margin-top : 22vw; }


		a#warning_pop_up {
			position : absolute;
    		margin-left : -15vw;
			width : 30vw;
		}

		a#payment_pop_up {
			margin-top : 1vw;
		}


div#email {
	display : none;
}

		a#item_title_email {
			position : absolute;
			margin-top : 2vw;
			margin-left: -18vw;
			width : 16vw;
			font-size : calc(var(--font-size) * 1.5);			
			color : white;
		}

		input#confirm_email {
			position : absolute;
			margin-top : 1.4vw;
			margin-left : -4.5vw;
			width : 18vw;
			border-top : none;
			border-left : none;
			border-right : none;
			border-bottom-color : rgb(255, 255, 255, 0.5); 
			background-color : transparent;
			color : white;
			font-size : calc(var(--font-size) * 1.5);
			text-align : left;
		}


iframe#stripe {
	display : none;
	z-index : 10000;
	position : fixed;
	top : 50%;
  	transform : translateY(-50%);
  	left : 0vw;
	width : 40vw;
	height : 20vw;
}


/******************************************* DONATION ******************************************/

div#donation {
	display : none;
	position : fixed;
	z-index : 10000;
	top : 15vw;
	/*top : 11.5vw;*/
	left : 82vw; 	
	width : 20vw;
	height : 21vw;
	border-radius : 2vw;
	background-color : rgb(var(--header-color));
	box-shadow : 0vw 0vw 1vw 0.5vw rgba(var(--shadow-color), var(--shadow-opacity));
}

		div#title {
			position : absolute;
			top : 1vw;
			width : 18vw;
			height : 3vw;
		}	

				a#donation_title {
					position : absolute;
					top : 0.5vw;
					left : 5vw;
					color : white;
					font-size : calc(var(--font-size) * 1.2);
				}

		img.donation_thumbnail {
			position : absolute;
			margin-top : 4.5vw;
			margin-left : 4.5vw;
			height : 5.6vw;
		}

		div#value {
			position : absolute;
			top : 11vw;
			width : 18vw;
			height : 3vw;
		}

				img.less {
					display : inline;
					position : absolute;
					margin-left : 1vw;
					width : 2.5vw;
					height : 2.5vw;
					border-radius : 50%;
					background-color : black;
					opacity : 0.5;
				}

				input.value {
					position : absolute;
					display : inline;
					margin-top : 0.5vw;
					margin-left : 4.5vw;
					width : 3vw;
					color : white;
					border : none;
					text-align : right;
					background-color : transparent;
					font-size : calc(var(--font-size) * 1.2);			
				}

				a.value {
					position : absolute;
					display : inline;
					top : 1vw;
				    left : 8vw;
				    font-size : calc(var(--font-size) * 1.2);		
				}

				img.more {
					display : inline;
					position : absolute;
					margin-left : 15vw;
					width : 2.5vw;
					height : 2.5vw;
					border-radius : 50%;
					background-color : black;
					opacity : 0.5;
				}

		a.donation_action {
			display : none;
			position : absolute;
			top : 2vw;
    		left : 4vw;
		}

		a#account_info {
			position : absolute;
			top : 8vw;
			left : 3vw;
			font-size : calc(var(--font-size) * 0.8);
			opacity : 0.5;
		}


img#close_donation_pop_up {
	display : none;
			
	position : absolute;
	opacity : 0.5;
	top : 1.5vw;
	left : 17.5vw;
	width : 1.6vw;
}

div.callback {
	position : absolute;
	top : 0vw;
}

		div#callback_1 {
			display : none;
			position : absolute;
			top : 7.5vw;
			left : 3vw;
			width : 14vw;
			font-size : calc(var(--font-size) * 1);
			text-align : center;
		}

		div#callback_2 {
			display : none;
			position : absolute;
			top : 14vw;
			left : 3vw;
			width : 12vw;
			font-size : calc(var(--font-size) * 1);
			text-align : center;
		}

		a#reload {
			display : none;
			position : absolute;
			top : 17vw;
			left : 5vw;
			width : 10vw;
			text-decoration : none;
			padding-top : 0.5vw;
			padding-bottom : 0.5vw;
			border-radius : 0.8vw;
			text-align : center;
			background-color : rgb(20, 20, 20);
		}

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


/*************************************** CONFIRM POP UP **************************************/

div#confirm_pop_up {
	display : none;
	position : fixed;
	z-index : 10000;
	top : 20vw;
	left : 34vw;
	padding-top : 0vw;
	padding-bottom : 1vw;
	padding-left : 3vw;
	padding-right : 3vw;
	border-radius : 2vw;
	width : 25vw;
	height : 10vw;
	text-align : center;
	background-color : rgb(var(--header-color)); 
}

/*img#close_confirm_pop_up {
	opacity : 0.5;
	position : fixed;
	top : 21vw;
	left : 62vw;
	width : 2vw;
}*/

a.confirm_text {
	display : block;
	margin-top : 3vw;	
	margin-left : auto;
	margin-right : auto;
	margin-bottom : 2vw;
	color : rgb(200,200,200);
	font-size : calc(var(--font-size) * 1);
}

a.confirm_action {
	margin-top : 6vw;
	margin-left : 1vw;
	margin-right : 1vw;
	margin-bottom : 0.5vw;
	padding-top : 0.5vw;
	padding-left : 2vw;
	padding-right : 2vw;
	padding-bottom : 0.5vw;
	width : 6vw;
	font-size : calc(var(--font-size) * 1);
	border-radius : 0.8vw;
	background-color : rgb(20, 20, 20);
	text-decoration : none;
}

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


/************************************************ FOOTER ***********************************************/

div#footer {
	display : none;
	position : relative;
	z-index : 10;
	width : 100vw;
	padding-top : 1.8vw;
	height : 10vw;
	text-align : center;
	box-shadow: 0vw -0.5vw 0.5vw 0vw rgba(var(--shadow-color), var(--header-opacity));
	background-color : rgb(var(--footer-color));
}

ol#footer_list {
	list-style-type : none;
	padding-left : 0px; 
	margin-left : 0px;
}

		ol#footer_list li { 
			display : inline;
			padding-left : 1vw; 
			padding-right : 1vw; 
		}

		a.item_footer {
			color : rgb(var(--font-color));
			opacity : 0.5; 
			text-decoration : none;
		}

				a.item_footer:hover {
					cursor : pointer;
					opacity : 1; 
				}


/************************************************ SCROLL ***********************************************/

img#page_back {
	display : none;
}

img#page_up {
	position : fixed;
	z-index : 100;
	bottom : -3.5vw;
    left : 50%;
    width : 7vw;
    margin-left : -3.5vw;
    background-color : rgba(0, 0, 0, 0.5);
    border-radius : 50%;
    opacity : 0.5; 
}

		img#page_up:hover {
			cursor : pointer;
			opacity : 0.8;
		}

/********************************************* RIGTH / LEFT *********************************************/

img.arrow_page {
	display : none;	
	position: fixed;
	cursor : default;
	z-index : 10;
	top : 50%;
	height : 7vw;
 	margin-top: -3.5vw;
 	opacity : 0.5;
}

		img.arrow_page:hover { 
			cursor : pointer;
			opacity : 0.8;
		}

		img.arrow_page.left { left : 0vw }	
		img.arrow_page.right { right : 0vw }


/************************************************ KEYBOARD ***********************************************/

div#keyboard {
	position : fixed;
	z-index : 100;
	bottom : -35vw;
	width : 100vw;
	height : 32vw;
	background-color : rgb(var(--header-color));
	box-shadow : 0vw -0.5vw 0.5vw rgba(var(--shadow-color), var(--shadow-opacity));
}

		div#keys {
			position : relative;
			top : 3vw;
			left : 3vw;
		}

		div.key {
			display : inline-block;
			position : relative;
			padding-top : 2.2vw;
			margin : 1vw;
			width : 7vw;
			height : 4.8vw;
			font-size : calc(var(--font-size) * 2);
			text-align : center;
			box-shadow : 0.5vw 0.5vw 0.5vw rgba(var(--shadow-color), var(--shadow-opacity));
		}

}