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

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

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

body {
	background-color : white;
	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 1.5vw #999;   /*0vw 0.5vw 0.5vw #999;*/
	background-color : rgb(255, 255, 255);
	/*backdrop-filter : blur(10px);*/
}

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

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

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 : grey; 
			opacity : 1;
			text-decoration : none;
		}

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

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 : 14.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 : 5vw;
			padding-left : 1.5vw;
			width : 9vw;
			color : rgb(102, 122, 132);
			font-size : 1.4vw;
		}

		ol.sub_list_header {
			position : fixed;
			z-index : 80;
			top : -36vw;
			margin-left : 87vw;
			padding-top : 0.5vw;
			padding-bottom : 0.5vw;
			padding-left : 2vw;
			padding-right : 2vw;
			background-color : white;
			border-radius: 0vw 0vw 1vw 1vw;
			list-style-type : none;
			box-shadow : 0vw 0.5vw 0.5vw #999;
		}
		
		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;
		}

		a.client:hover {
			opacity : 1; 			
		}

				a.client:hover {
					cursor : pointer;
					opacity : 0.6; 			
				}


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

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

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;
	/*border-right : 1px;*/
	box-shadow : 0.5vw 0vw 0.5vw #999;
	background-color : white;
}

		div#menu_right {
			margin-left : 102vw;
			/*border-left : 1px;*/
			box-shadow : -0.5vw 0vw 0.5vw #999;
		}

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

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

		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 : grey;
			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;
	}*/

	h1#screen_title {
		/*margin-top : -1.5vw; */
		margin-bottom : -1.5vw;
	}

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


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


/*************************************** 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 : grey;
		}

		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, button.action {
	display : block;
	margin-top : 2vw;
	margin-left : auto;
	margin-right : auto;
	margin-bottom : 0.5vw;
	width : 10vw;
	color : white;
	font-size : 1.2vw;
	border-radius : 0.8vw;
	padding : 0.5vw;
	background-color : rgb(100, 100, 100);
	text-decoration : none;
}

a.action {
	text-align : center;
}

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

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

button.action {
	width : 11vw;
	margin-top : 0vw;
	margin-bottom : 0.5vw;
	border : none;
}

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

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


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

img#page_back {
	display : none;
}

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


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

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 : white;
	position : relative;
	z-index : 100;
	width : 100vw;
	padding-top : 1.8vw;
	height : 10vw;
	text-align : center;
	box-shadow : 0vw -0.5vw 0.5vw 0vw #999;
}

a#info_footer {
	color : grey;
}

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; 
			opacity : 1;
			text-decoration : none;
		}

				.item_footer:hover {
					opacity : 0.8;
				}

}