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

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

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

	font-family : Avenir;
	font-size : 1.2vw;
	color : grey;
}

html {
  height: 100%;
}

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

		div#selector.header {
			border : 0.2vw solid;
			color : white;
			border-style : none none solid none;
		}

		div#selector.underline {
			margin-top : 0.2vw;
			border : 0.3vw solid;
			color : white;
			border-style : none none solid none;
		}

		div#selector.box {
			border : 0.3vw solid;
			border-color : white;
			box-shadow : inset 0px 0px 1px #000;
		}	

		div#selector.action {
			border : 0.3vw solid;
			border-color : white;
			border-radius : 0.8vw;
		}

		div#selector.key {
			border : 0.3vw solid;
			border-color : white;
		}

div#keyboard {
	display : none;
}


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

div#header {
	position : fixed;
	z-index : 1500;
	top : 0px;
	width : 100vw;
	height : 4vw;
	font-size : 1.4vw;
	box-shadow : 0vw 0.5vw 0.5vw #000;
	background-color : rgb(35, 35, 35);
}

img#menu_button {
	position : fixed;
	z-index : 102;
	opacity : 0.5;
	top : 1.2vw;
	left : 1.5vw;
	width : 2vw;
}

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

div#header_left {
	position : fixed;
	z-index : 101;
	top : 1.3vw;
	left : 5vw;
	text-align : left;
}

		a.header {
			padding-left : 0.3vw;
			padding-right : 0.7vw;
			color : white; 
			opacity : 0.5;
			text-decoration : none;
		}

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

div#header_center {
	display : block;
	position : fixed;
	text-align : center;
	width : 100vw;
	height : 4vw;
}

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

			-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: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#header_right {
	display : block;
	z-index : 101;
	position : fixed;
	top : 1.3vw;
	right : 4.5vw;
	text-align : right;
}

		img#search_button {
			position : fixed;
			top : 1.2vw;
			right : 29.5vw;
			width : 1.8vw;
		}

		input#header_query {
			position : fixed;
			background-color : transparent;
			border-top : none;
			border-left : none;
			border-right : none;
			border : none;
			border-bottom-color : grey; 	
			height : 1.5vw;
			top : 1.2vw;
			right : 20vw;
			padding-left : 1.5vw;
			width : 9vw;
			color : grey;
			font-size : 1.4vw;
		}

		ol.sub_list_header {
			position : fixed;
			z-index : 80;
			top : -15vw;
			margin-left : 80vw;
			padding-top : 0.5vw;
			padding-bottom : 0.5vw;
			padding-left : 2vw;
			padding-right : 2vw;
			background-color : rgb(35, 35, 35);
			list-style-type : none;
			box-shadow : 0vw 0.5vw 0.5vw #000;
		}
		
		ol.sub_list_header li {
			text-align : center;
			line-height: 160%;
		}

		a.sub_list_item_header {
			color : grey; 
			text-decoration : none;
		}

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


img#user_button {
	position : fixed;
	z-index : 102;
	opacity : 0.5;
	top : 1.2vw;
	right : 1.5vw;
	width : 2vw;
}

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

img#log_button {
	position : fixed;
	z-index : 102;
	top : 1vw;
	right : 1.2vw;
	width : 0.5vw;	
}


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

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

		div#menu_right {
			margin-left : 102vw;
			box-shadow : -0.5vw 0vw 0.5vw #000;
		}

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;
			margin-left : 1.5vw;
			vertical-align : middle;
		}

		a.text_item_menu {
			margin-left : 0.8vw;	
			vertical-align : middle;
			color : white;
			opacity : 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 : grey;
			text-decoration : none;
		}

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

div#item_menu_right_connect {
	margin-top : 2vw;
}

div#black_layer {
	display : none;
}


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

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

div.screen_title {
	margin-top : -0.5vw;
	margin-bottom : 2vw;
	text-align : center;
}

	h1.screen_title {
		position : relative;
		font-size : 2.4vw;
		color : rgb(200, 200, 200); 
		font-weight : normal;
	}

	a.screen_title_medium {
		font-size : 1.6vw;
	}

	a.screen_title_big {
		font-size : 1.8vw;
	}

	a.mouse_over {
		text-decoration : none;
		color : grey;
	}

			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 : 30;
	top : 6vw;
	width : 4vw;
	margin-left : 96vw;
}

		a.button_href {
			text-decoration : none;
		}

		img.button {
			z-index : 30;
			width : 3vw;
    		box-shadow: 4px 4px 8px #000;
    	}

		img.my_content {
			display : none;
		}

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

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

		img.arrow_page:hover { cursor : pointer }

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


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

a.title {
	position : relative;
	z-index : 10;
	margin-left : 5.4vw;
	color : grey; 
	font-size : 2.2vw;
	text-decoration : none;
}

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

				div.pager, div.pager_slideshow {
					display : inline-block;
					width : 0.8vw;
					height : 0.8vw;
					border-radius : 50%;
					background : rgb(60, 60, 60);
				}

				div.pager:hover {
					cursor : pointer;
				}


div.scrolling_container {
	position : relative;
}

div.list_container {
	margin-top : 0vw;
	margin-left : 4.5vw;
	margin-bottom : 2.5vw;

	/*overflow-y : hidden;*/
	white-space : nowrap;
}

		div.thumbnail {
			display : inline-block;
			position : relative;
			z-index : 10;
			margin : 1vw;
			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;
		}

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

				.panorama {
					width : 21vw;
					height : 11.8vw;
				}

				.portrait {
					width : 16vw;
					height : 21.3vw;
				}

				.squared {
					width : 13vw;
					height : 13vw;
				}

				.rounded {
					width : 8vw;
					height : 8vw;
					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 : 30%;
							left : 30%;
							width : 40%;
							height : 40%;
						}


						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 : 1.1vw;
			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._1 { color : white }


		/*  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 }


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

div#donation {
	display : none;
	position : absolute;
	z-index : 50;
	top : 11.5vw;
	left : 82vw; 	
	width : 20vw;
	height: 21vw;
	border-radius : 2vw;
	background-color : rgb(35, 35, 35);
	box-shadow: 0px 0px 30px 5px #000;
}

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

				a#donation_title {
					position : absolute;
					top : 0.5vw;
					left : 5vw;
					color : white;
					font-size : 1.5vw;
				}

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

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

				a.value {
					position : absolute;
					display : inline;
					top : 0.5vw;
					left : 8vw;
					font-size : 1.4vw;			
				}

				img.more {
					display : inline;
					position : absolute;
					margin-left : 15vw;
					width : 2.5vw;
				}


		a.donation_action {
			display : none;
			position : absolute;
			border-radius : 0.8vw;
			margin-bottom : 1vw;
			padding : 0.5vw;
			top : 4vw;
			left : 5vw;
			width : 8vw;
			text-align : center;
			background-color : rgb(20, 20, 20);
		}

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

		a#account_info {
			/*display : none;*/
			position : absolute;
			top : 8vw;
			left : 3vw;
			font-size : 1.1vw;
		}

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 : 1.1vw;
			text-align : center;
		}

		div#callback_2 {
			display : none;
			position : absolute;
			top : 14vw;
			left : 3vw;
			width : 12vw;
			font-size : 1.1vw;
			text-align : center;
		}

		a#reload {
			display : none;
			position : absolute;
			top : 17vw;
			left : 5vw;
			width : 10vw;
			text-decoration : none;
			color : grey;
			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_black_layer {
	display : none;
	position : absolute;
	z-index : 400;
	top : 0px;
	left : 0px;
	width : 100vw;
	height : 100vh;
	opacity : 0.7;
	background-color : black;
}

div#confirm_pop_up {
	display : none;
	position : fixed;
	z-index : 500;
	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(35, 35, 35); 
}

img#close_confirm_pop_up {
	z-index : 501;
	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 : 1.4vw;
	color : grey;
}

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;
	color : grey;
	font-size : 1.2vw;
	border-radius : 0.8vw;
	background-color : rgb(20, 20, 20);
	text-decoration : none;
}

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


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

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

div#connection_pop_up {
	display : none;
	position : fixed;
	z-index : 500;
	top : 15vw;
	left : 31vw;
	padding-top : 0vw;
	padding-bottom : 1vw;
	padding-left : 3vw;
	padding-right : 3vw;
	border-radius : 2vw;
	text-align : center;
	background-color : rgb(35, 35, 35); 
}

img#close_pop_up {
	z-index : 501;
	opacity : 0.5;
	position : fixed;
	top : 16vw;
	left : 66.5vw;
	width : 2vw;
}

a.title_pop_up {
	display : block;
	margin-top : 3vw;	
	margin-left : auto;
	margin-right : auto;
	margin-bottom : 1vw;
	color : rgb(200,200,200);
	font-size : 1.4vw;
	color : grey;
}

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

		a.item_title {
			display : block;
			float : left;
			width : 16vw;
			font-size : 1.2vw;
			color : rgb(200, 200, 200);
		}

		a.grey {
			color : grey;
		}

		input.item_value {
			border-top : none;
			border-left : none;
			border-right : none;
			border-bottom-color : grey; 
			background-color : transparent;	
			height : 1.5vw;
			width : 16vw;
			font-size : 1.2vw;
			color : grey;
		}

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

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

a.action {
	text-align : center;
}

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

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

a.message {
	visibility : hidden;
	color : red;
}

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


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

iframe#stripe {
	display : none;
	z-index : 100;
	position : fixed;
	top : 15vw;
	left : 30vw;
	width : 40vw;
	height : 25vw;
}

div#stripe {
	display : none;
	z-index : 100;
	position : fixed;
	border-radius : 2vw;
	top : 15vw;
	left : 30vw;
	width : 40vw;
	height : 25vw;
	background-color : rgb(35, 35, 35);
}

		a#title_pop_up {
			position : absolute;
			display : inline;
			text-align : center;
			width : 30vw;
			margin-top : 2vw;
			margin-left : 5vw;
			margin-right : 5vw;
			font-size : 1.8vw;			
		}

		img#less_0 {
			display : inline;
			position : absolute;
			margin-top : 9vw;
			margin-left : 10vw;
			width : 2.5vw;
		}

		img#more_0 {
			display : inline;
			position : absolute;
			margin-top : 9vw;
			margin-left : 27vw;
			width : 2.5vw;
		}

		input#value_0 {
			position : absolute;
			display : inline;
			margin-top : 8.8vw;
			margin-left : 13.5vw;
			font-size : 1.8vw;
			width : 5vw;
			border : none;
			color : grey;
			text-align : right;
			background-color : transparent;			
		}

		a#money_0 {
			position : absolute;
			display : inline;
			margin-top : 9vw;
			margin-left : 19vw;
			font-size : 1.8vw;			
		}

		a#pourcent {
			position : absolute;
			display : inline;
			margin-top : 21vw;
			margin-left : 4vw;
			font-size : 1.2vw;			
		}

		a#pourcent_tuto {
			position : absolute;
			display : inline;
			margin-top : 23vw;
			margin-left : 9vw;
			font-size : 1.2vw;			
		}

		a#warning_pop_up {
			position : absolute;
			display : inline;
			margin-top : 12vw;
			font-size : 1.4vw;
			width : 40vw;
			text-align : center;	
			color : orange;	
		}

		a#pay_pop_up {
			position : absolute;
			display : inline;
			margin-top : 15vw;
			margin-left : 15.5vw;
		}

div#email {
	display : none;
	position : absolute;
	margin-top : 9vw;
	background-color: orange;
}

		a.item_title_stripe {
			position : absolute;
			margin-left : 5vw;
			width : 16vw;
			font-size : 1.8vw;			
			color : grey;
		}

		input.item_value_stripe {
			position : absolute;
			margin-left : 17vw;
			border-top : none;
			border-left : none;
			border-right : none;
			border-bottom-color : grey; 
			background-color : transparent;	
			height : 1.5vw;
			width : 16vw;
			font-size : 1.5vw;
			color : grey;
		}

img#close_stripe {
	display : none;
	z-index : 100;
	opacity : 0.5;
	position : fixed;
	top : 16vw;
	left : 67vw;
	width : 2vw;
}

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

/*********************************************** COOKIES ***********************************************/

div#cookie_popup {
	display : none;
	background-color : rgb(20, 20, 20);
	position : fixed;
	z-index : 100;
	bottom : 0px;
	width : 100%;
	padding-top : 1vw;
	padding-left : 1vw;
	padding-right : 1vw;
	padding-bottom : 2vw;
	text-align : center;
	padding-top : 2vw;
	padding-bottom : 2vw;
}

img#close_cookies {
	position : fixed;
	opacity : 0.7;
	width : 2vw;
	height : 2vw;
	bottom : 2vw;
	right : 2vw;	
}


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

img#page_back {
	display : none;
}

img#page_up {
	position: fixed;
	z-index : 200;
	bottom : 0px;
	left : 50%;
	width : 7vw;
 	margin-left: -3.5vw;
}


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

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

		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 : 2.1vw;
			text-align : center;
			box-shadow : 0.4vw 0.4vw 0.4vw #000;
		}

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

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

a#info_footer {
	color : rgb(60, 60, 60);
}

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

		.item_footer {
			color : grey; 
			text-decoration : none;
		}

}