html
{
	max-width:100%;
	}
	body
	{
  
	width:100%;
	float:right;
	height:100%;
	margin:0;
	padding:0;
	text-align:center;
	font-family: 'PT Sans', sans-serif;
	}
	.loader {

position : fixed;
z-index: 9999;
background : url('icon-loader.gif') 50% 50% no-repeat;
top : 0px;
left : 0px;
height : 100%;
width : 100%;
cursor : wait;
}
#imgload{
position:absolute;
bottom:0;
right:0;
float:right;
width:1px;
height:1px;
z-index:-5;
}
#imgload img{
position:absolute;
bottom:0;
right:0;
float:right;
width:1px;
height:1px;
}	
	.wrapper 
{
	margin:0;
	padding:0;
	max-width:200%;
	display: grid;
	grid-gap: 0px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: 1fr 1fr 1fr;
	float:right;
	z-index:1400;
	}
	.one 
{
	width: calc(100vw / 3);  
	height: calc(56.25vw/ 3);
	align-self: center;
	justify-self: center;
	align-items:center;
	vertical-align: middle;
	background: url(45FILMS_site_01.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	.two 
{
 
	width: calc(100vw / 3);  
	height: calc(56.25vw/ 3);
	background: url(45FILMS_site_02.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	.three 
{
	width: calc(100vw / 3);  
	height: calc(56.25vw/ 3);
	background: url(45FILMS_site_03.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	.four 
{
	width: calc(100vw / 3);  
	height: calc(56.25vw/ 3);
	background: url(45FILMS_site_04.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	.five 
{
	width: calc(100vw / 3);  
	height: calc(56.25vw / 3);
	 
	background: url(45FILMS_site_05.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	.six 
{
	width: calc(100vw / 3);  
	height: calc(56.25vw/ 3);
	background: url(45FILMS_site_06.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	.sept
{
	width: calc(100vw / 3);  
	height: calc(56.25vw/ 3);
	background: url(45FILMS_site_07.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	.huit 
{
	width: calc(100vw / 3);  
	height: calc(56.25vw/ 3);
	background: url(45FILMS_site_08.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	.neuf 
{
	width: calc(100vw / 3);  
	height: calc(56.25vw/ 3);
	background: url(45FILMS_site_09.png) no-repeat top center;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#plane
{
	width: calc(100vw / 9);  
	text-align:center;
	height: calc(56.25vw/ 6);
	background: url(avion.png) top center no-repeat; 
	display: block;
	margin: 14% auto auto auto;
	padding:0;
	z-index:1000;
	-webkit-background-size: cover; 
	background-size: cover; 
	float:right;
	}
	a#plane:hover
{
	background: url(anim_avion.gif) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#usine
{
	width: calc(56.25vw / 3.6);  
	height: calc(56.25vw/ 3.8);
	display: block;
	margin: 5% 0 auto auto;
	padding:0;
	z-index:1000;
	background: url(usine.png) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	float:right;
	}
	a#usine:hover
{
	background: url(anim_usine.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#drone
{
	width: calc(100vw / 12);  
	height: calc(56.25vw/ 9);
	display: block;
	margin: 5% auto auto auto;
	padding:0;
	z-index:1000;
	background: url(drone.png) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#drone:hover
{
	background: url(anim_drone.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#perso
{
	width: calc(56.25vw / 8.64);  
	height: calc(56.25vw / 9.6);
	display: block;
	margin: 38.5% 0 auto auto;
	padding:0;
	z-index:1200;
	background: url(montagne.png) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	float:right;
	}
	a#perso:hover
{
	background: url(anim_perso.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#hant
{
	width: calc(100vw / 4.3);  
	height: calc(56.25vw/ 4.3);
	display: block;
	margin: 5% auto auto auto;
	padding:0;
	float:left;
	z-index:1000;
	background: url(hant.png) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#hant:hover
{
	background: url(anim_hant.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#foot
{
	width: calc(56.25vw / 3);  
	height: calc(56.25vw / 6);
	display: block;
	margin: 15% auto auto 5%;
	padding:0;
	z-index:1;
	background: url(foot.png) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	float:left;
	}
	a#foot:hover
{
	background: url(anim_foot.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#tournage
{
	width: calc(56.25vw / 5.2);  
	height: calc(56.25vw / 7.2);
	display: block;
	margin: 22% 2% 0 auto;
	padding:0;
	z-index:1200;
	background: url(equipe_tournage.png) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	float:right;
	}
	a#tournage:hover
{
	background: url(anim_equipe_tournage.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#mairie
{
	width: calc(56.25vw / 3.9);  
	height: calc(56.25vw / 4.5);
	display: block;
	margin: 0 auto auto 0;
	padding:0;
	z-index:1200;
	background: url(mairie.png) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	float:left;
	}
	a#mairie:hover
{
	background: url(anim_mairie.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#hotel
{
	width: calc(56.25vw / 4);  
	height: calc(56.25vw/ 4);
	display: block;
	margin: 5% auto auto 0;
	padding:0;
	z-index:1000;
	background: url(hotel.png) bottom center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	float:left;
	}
	a#hotel:hover
{
	background: url(anim_hotel.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#pomme
{
	width: calc(56.25vw / 3.6);  
	height: calc(56.25vw/ 6);
	display: block;
	margin: 5% auto auto 0;
	padding:0;
	z-index:1000;
	background: url(arbres.png) bottom center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	float:right;
	} 
	a#pomme:hover
{
	background: url(anim_arbres.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#immeubles
{
	width: calc(56.25vw / 3.8);  
	height: calc(56.25vw / 3);
	display: block;
	margin: 2% auto auto auto;
	padding:0;
	z-index:1200;
	background: url(immeubles2.png) top center no-repeat; 
	-webkit-background-size: cover; 
	background-size: cover; 
	}
	a#immeubles:hover
{
	background: url(anim_immeubles2.gif) top center no-repeat;
	-webkit-background-size: cover; 
	background-size: cover; 
	}

#menu {
	position:absolute;
	top:1%;
	left:2%;
	/*width: calc(100vw / 3.2); 
	height: calc(100vw / 25.6);   */
}
#menu a{
	display:block;
	width: calc(100vw / 25.6);  
	height: calc(100vw / 25.6); 
	margin:5px;
	padding:2px;
	float:left;
}
#menu a#tel{
	background:url(menu_01.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#tel:hover{
	background:url(menu_06.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#mel{
	background:url(menu_02.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#mel:hover{
	background:url(menu_07.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#inst{
	background:url(menu_03.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#inst:hover{
	background:url(menu_08.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#face{
	background:url(menu_04.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#face:hover{
	background:url(menu_09.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#vim{
	background:url(menu_05.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu a#vim:hover{
	background:url(menu_10.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
/* MENU TROP MOCHE*/
#menu2 {
	position:absolute;
	top:1%;
	left:2%;
	/*width: calc(100vw / 3.2); 
	height: calc(100vw / 25.6);   */
}
#menu2 a{
	display:block;
	width: calc(100vw / 50);  
	height: calc(100vw / 50); 
	margin:0px;
	padding:1px;
	float:left;
	/*border: 1px solid red;*/
}
#menu2 a#tel2{
	background:url(menu2_01.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#tel2:hover{
	background:url(menu2_02.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#mel2{
	background:url(menu2_03.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#mel2:hover{
	background:url(menu2_04.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#inst2{
	background:url(menu2_05.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#inst2:hover{
	background:url(menu2_06.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#face2{
	background:url(menu2_07.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#face2:hover{
	background:url(menu2_08.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#vim2{
	background:url(menu2_09.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
#menu2 a#vim2:hover{
	background:url(menu2_10.png);
	-webkit-background-size: cover; 
	background-size: cover; 
}
/*FIN MENU TROP MOCHE*/
	#turn
	
{
display:none;
	visibility:hidden;
	}
	
a,a:link,a:active,a:visited,a:focus,a:hover {
    text-decoration: none;
	border: 0 none;
  }

	@media screen and (max-width: 390px) 
{
	#turn
	
{
display:inline;
	visibility:visible;
	}}
	@media only screen and (max-width:800px) 
{
	#turn
	
{
display:inline;
	visibility:visible;
	}}