/* virtuelindex.css */

@keyframes fadein {from {opacity:0;}to {opacity:1;}}

@media screen and (min-width: 15px) and (max-width: 700px){img{width:100%;}

	h4{font-size:1.3vw; color:white; width:35%;}
	.numpage{position:absolute; text-decoration:none; font-size:1.8vw; color:white; top:4%; left:60%; width:10%}
	.banniere{position:absolute; top:0%; left:2%; width:38%;}
	.construction{position:absolute; top:0%; left:0%; width:0%; font-size:0vw; opacity:0;}

	.alcool{top:0%; left:0%; width:0%;opacity:0;-webkit-animation: fadein 15s; opacity:0;}
	.cookie{top:0%; left:0%; width:0%;opacity:0;-webkit-animation: fadein 15s; opacity:0;}

	.p35a{position:fixed; top:10%; left:6%; width:10%;}
	.p35b{position:fixed; top:10%; left:6%; width:10%; opacity:0;}

	.p36a{position:fixed; top:10%; left:18%; width:10%;}
	.p36b{position:fixed; top:10%; left:18%; width:10%; opacity:0;}

	.p2a{position:fixed; top:10%; left:30%; width:10%;}
	.p2b{position:fixed; top:10%; left:30%; width:10%; opacity:0;}

	.p3a{position:fixed; top:10%; left:42%; width:10%;}
	.p3b{position:fixed; top:10%; left:42%; width:10%; opacity:0;}

	.p2b:hover, .p2b:focus, .p3b:hover, .p3b:focus, .p35b:hover, .p35b:focus, .p36b:hover, .p36b:focus{opacity:1;}}


@media screen and (min-width: 701px) and (max-width: 1000px){img{width:100%;}

	.construction{position:absolute; top:0%; left:0%; width:0%; font-size:0vw; opacity:0;}
	.alcool{top:0%; left:0%; width:0%;opacity:0;-webkit-animation: fadein 15s; opacity:0;}
	.cookie{top:0%; left:0%; width:0%;opacity:0;-webkit-animation: fadein 15s; opacity:0;}

	.p35a{position:fixed; top:11%; left:7%; width:8%;}
	.p35b{position:fixed; top:11%; left:7%; width:8%; opacity:0;}

	.p36a{position:fixed; top:11%; left:17%; width:8%;}
	.p36b{position:fixed; top:11%; left:17%; width:8%; opacity:0;}

	.p2a{position:fixed; top:11%; left:27%; width:8%;}
	.p2b{position:fixed; top:11%; left:27%; width:8%; opacity:0;}

	.p3a{position:fixed; top:11%; left:37%; width:8%;}
	.p3b{position:fixed; top:11%; left:37%; width:8%; opacity:0;}

	.p2b:hover, .p2b:focus, .p3b:hover, .p3b:focus, .p35b:hover, .p35b:focus, .p36b:hover, .p36b:focus{opacity:1;}}


@media screen and (min-width: 1001px) and (max-width: 8000px){img{width:100%;}

	.construction{position:absolute; top:55%; left:1%; width:25%; font-size:1.5vw;}
	.alcool, .cookie{position:fixed;}
	.alcool{top:30%; left:40%; width:35%;opacity:0;-webkit-animation: fadein 15s;}
	.cookie{top:55%; left:50%; width:35%;opacity:0;-webkit-animation: fadein 15s;}

	.p35a{position:fixed; top:10%; left:52%; width:5%;}
	.p35b{position:fixed; top:10%; left:52%; width:5%; opacity:0;}

	.p36a{position:fixed; top:10%; left:58%; width:5%;}
	.p36b{position:fixed; top:10%; left:58%; width:5%; opacity:0;}

	.p2a{position:fixed; top:10%; left:64%; width:5%;}
	.p2b{position:fixed; top:10%; left:64%; width:5%; opacity:0;}

	.p3a{position:fixed; top:10%; left:70%; width:5%;}
	.p3b{position:fixed; top:10%; left:70%; width:5%; opacity:0;}

	.p2b:hover, .p2b:focus, .p3b:hover, .p3b:focus, .p35b:hover, .p35b:focus, .p36b:hover, .p36b:focus{opacity:1;}}