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

body {
	background-color : rgba(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));
}

div#screen {
	position : fixed;
	z-index : 0;
	top : 0px;
	left : 0px;
	width : 100vw;
	height : 100vh;
}

img#logo_left {
	display : none;
	position : fixed;
	top : 0vw;
	left : 1vw;
	width : 7vw;
	margin-left : 0px;
	margin-right : 0px;
}

div#item_list {
	position : fixed;
	top : 2vw;
	color : white;
	width : 100vw;
	text-align : center;
	font-size : calc(var(--font-size) * 1.2);
}

	a.item {
		margin : 2vw;
	}

	div#item_selector {
		position : absolute;
		height : 2px;
		background-color : white;
	}


/********************************** MOSAIC **********************************/

img.background {
	position : fixed;
	top : 0px;   
	height: 100vh;
    left: 50%;
    transform: translateX(-50%);
}

div#mosaic {
	position : fixed; 
	top : 0px;   
    background-color : black;
}

		.mosaic_cover {
			position : relative;
		    width : 12.7vw; 
		    /*height : 12.7vw; */
		    margin : -0.25vw;
		}

div#mosaic_black_layer {
	position : fixed;
	top : 0px;
	left: 0px;
	width : 100vw;
	height : 100vh;
	background-color : black;
	opacity : 0.8;
}


/********************************** SPLASHSCREEN **********************************/

img#splashscreen_image {
	position : relative;
	display : block;
	width : 45vw;
	margin-left : auto;
	margin-right : auto;
	top : 50%;
  	transform : translateY(-50%);
  	margin-top : -8vh;
 	opacity : 0;
}

a#splashscreen_title {
	position : relative;
	display : block;
	margin-bottom : 3.5vw;
	text-align : center;
	font-size : calc(var(--font-size) * 2.5);
	color : white;
	top : 50%;
	transform : translateY(-50%);
  	margin-top : -18vw;
  	opacity : 0;
}


/********************************** INFO **********************************/

div#info {
	position : relative;
	width : 45vw;
	top : 48%;
  	transform : translateY(-50%);
	margin-left : auto;
	margin-right : auto;
}

		img#logo {
			position : relative;
			width : 45vw;
		}

		a.line {
		    display : block;
			margin-left : auto;
		    margin-right : auto;
			font-size : 1.5vw;
			text-align : center;
			color : white;
		}

		a.line.highlight {
			font-size : 2vw;
		}


/************************************ ITEM ************************************/

div.item {
	position : relative;
	display : none;
	width : 100vw;
	margin-left : auto;
	margin-right : auto;
	top : 50%;
  	transform : translateY(-50%);
  	text-align : center;
  	font-size : calc(var(--font-size) * 1.2);
  	color : white;
}

		a.text_title {
			font-size : calc(var(--font-size) * 1.8);
			color : white;
		}

img.project {
	width : 19vw;
}

a.link {
	text-decoration : none;
}

iframe {
	position : relative;
	width : 45vw;
	height : 25.31vw;
}

img#tuto {
	position : absolute;
	top : -4.86vw;
	width : 100vw;
	left : 0px;
}

img#contact {
	position : relative;
	width : 8vw;
	margin-left : auto;
	margin-right : auto;
	top : 50%;
  	transform : translateY(-50%);
}

a#address {
	position : relative;
	display : block;
	top : 50%;
	transform : translateY(-50%);
	margin-top : -1vw;
}

		a#address:hover {
			cursor : pointer
		}

/************************************ FUNCTION ************************************/

div#functions {
	position : relative;
	display : none;
	width : 100vw;
	margin-left : auto;
	margin-right : auto;
	top : 50%;
  	transform : translateY(-50%);
  	text-align : center;
  	font-size : 1.5vw;
  	color : white;
}

	div.function {
		display : inline-block;
		width : 18vw;
		height : 18vw;
		margin : 2vw;
		border-radius : 2vw;
		/*background-color : rgb(240, 140, 60);*/
		box-shadow : rgba(var(--shadow-color)) 1vw 1vw 1vw;

		-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.function:hover {
			box-shadow : rgba(var(--shadow-color)) 1.2vw 1.2vw 1.2vw;

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

	}

	img.function {
		position : absolute;
		width : 16vw;
		height : 16vw;
		margin-left : -8vw;
		/*margin-top : -1vw;*/
	}

a.action {
	display : block;
    margin-top : 1vw;
    margin-left : auto;
    margin-right : auto;
    margin-bottom : 0.5vw;
    width : 10vw;
    /*font-size : 1.2vw;*/
    border-radius : 0.8vw;
    padding : 0.5vw;
    color : rgb(var(--font-button-color));
    background-color : rgb(var(--button-color)); 
    text-align : center;
    text-decoration : none;	
}

	a.action {
		cursor : pointer;
	}

	a.action.start {
		position : relative;
		top : 50%;
		/*margin-top : -2vw;*/
		transform : translateY(-50%);
		opacity : 0;
	}
}