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

body {
	background-color : rgba(var(--main-color), 0.8);
	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 : absolute;
	z-index : 0;
	top : 0px;
	left : 0px;
	width : 100vw;
	height : 100vh;
}

img#logo_left {
	display : none;
	position : fixed;
	bottom : 2vw;
    left : 40vw;
    width : 20vw;
	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 : 34vw; 
		    /*height : 33.6vw; */
		    margin : -0.7vw;
		}

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 : 85vw;
	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) * 1.5);
	color : white;
	top : 50%;
	transform : translateY(-50%);
  	margin-top : -30vw;
  	opacity : 0;
}


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

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

		img#logo {
			position : relative;
			width : 90vw;
			bottom : 1vw;
			margin-left : 6vw;
		}

		a.line {
		    display : block;
			margin-left : auto;
		    margin-right : auto;
			font-size : calc(var(--font-size) * 1.2);
			text-align : center;
			color : white;
		}

		a.line.highlight {
			font-size : calc(var(--font-size) * 1.6);
		}


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

div.item {
	position : relative;
	display : none;
	width : 82vw;
	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 : 40vw;
    margin-bottom : -5vw;
}

a.link {
	text-decoration : none;
}

iframe {
	width : 90vw;
	height : 50.625vw;
	margin-left : -4vw;
}

img#tuto {
	display : none;
}

img#contact {
	position : relative;
	display : none;
	width : 20vw;
	margin-left : auto;
	margin-right : auto;
  	margin-bottom : -4vw; 
	top : 50%;
  	transform : translateY(-50%);
  	opacity : 0;
}

a.action {
	display : block;
    margin-top : 1vw;
    margin-left : auto;
    margin-right : auto;
    margin-bottom : 0.5vw;
    width : 30vw;
    border-radius : 2vw;
    padding : 2vw;
    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;
	}

}