body header{display: none;}
body{padding-top: 0;}

.requiere{max-width:100% !important;padding-right: 0 !important;padding-left: 0 !important;}

#headerGame #mapa{z-index: 2;position: absolute;min-width: 250px; width: 20%; top: 2%; left: 12%}
#headerGame #et{z-index: 2;min-width: 25px; width: 2%; position: absolute;  top: 7%; left:50%; transform: translateX(-50%);}
#headerGame #campingGaz{z-index: 2;position: absolute;min-width: 250px; width: 30%; top:5%;right: 12%;}
#headerGame{position: relative; padding-top: 100vh; overflow: hidden}
#headerGame #bg{position: absolute; top: 0;right: 0; width: 100%; height: 100%; object-fit: cover; object-position: 10% center}
#headerGame #txt{
	height: 57vw;
	max-height: 80vh;
	max-width: 80vh;
	font-size: 0.85vw;
	position: absolute; bottom: 0; width: 57%;right: 0;
	background-size: 100% 100%; background-repeat: no-repeat;
background-image: url("../../_img/rond.png"); background-position: right bottom;}
#headerGame.gagner #txt{width:65%}
.centP100{color:#008bc4;font-size:min(3vw,2em); top:30%;position: absolute; left: 43%; top:20%; width: 48%; max-width: 50vh;
	transition-delay: 0.5s; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0, 1.4, 1, 1); transition-property: transform, opacity; opacity: 0; transform: scale(0.5);}
#headerGame #txt .centP100.animDone{ opacity: 1; transform: scale(1);}

#headerGame #txt .sixPlancha{position: absolute; left:15%; width: 37%; max-width: 33vh; top:60%}
#headerGame #txt .visuPlancha{position: absolute; left: 55%; width: 35%; top:60%}
#headerGame #txt .H1EtP{
	    padding-left: 24%; padding-bottom: 5%;
	position: absolute; bottom: 0; width: 100%;
}
#headerGame #txt .regles{padding-left:50px;line-height:1.3em; text-shadow: -1px 1px 1px #000;font-size: min(1.5vw, 16px); position: absolute; bottom: 3px; color: #FFF; left:calc(-100vw + 100%); text-align: right; width:100vw}
#headerGame #txt .regles span{display: inline-block; width: 100%;text-align: left;}


#headerGame .gant{position: absolute;top:0; left: 8%; width: 33%; padding-top:53%;background-image: url("../../_img/Jardin-quotidien-colors-bleu-1.png"); background-size: contain; background-repeat: no-repeat;
transition-delay: 0.7s; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0, 1.4, 1, 1); transition-property: transform, opacity; opacity: 0; transform: rotate(0deg) scale(0.5);}
#headerGame .gant.animDone{ opacity: 1; transform: rotate(180deg) scale(1); /*animation-name: gantZoom; animation-duration: 1s; animation-iteration-count: infinite;*/}
#headerGame .gant .trait{position: absolute;position: absolute; top:-25%; right: 10%; width: 50%}

#cta{
	width: 25%; min-width: 210px;
	max-width: 400px;
	position: absolute;left: 15%; bottom: 15%; text-transform: uppercase; transform: translate(-50%);
	}
	#cta a{text-decoration: none;display: block; }
	#cta span{margin-top: 2%;font-family: 'blogscript'; font-size: min(30px, 2.2vw);line-height: 1.4em; font-weight: 700; color:#FFF; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); display: block;}
	#cta span strong{font-size: 1.05em;}
	#cta:not(.notAnim) a{animation-name: gantZoom; animation-iteration-count: infinite; animation-duration: 1s}
body .form.formV2 form label.case{font-size: 1rem !important}

@keyframes showOpacity{
	0%{opacity:1;}
	25%{opacity:1;}
	50%{opacity:0.2;}
	275%{opacity:1;}
	100%{opacity:1;}
}
@keyframes gantZoom{
	0%{transform: scale(1);}
	50%{transform: scale(0.95);}
	100%{transform: scale(1);}
}




@media screen and (min-aspect-ratio: 16/9) {
	#headerGame #txt .H1EtP{font-size: 1.5vh}
	body #cta{left:30%; transform: translate(-100%);}
	.centP100{font-size:
		max(1.2vw,1.3em)}
/*	#headerGame #txt span{font-size: 1.4vh}*/
}
@media screen and (max-aspect-ratio: 16/10) {
	#headerGame #txt .H1EtP{font-size: 1.4vh}
	.centP100{font-size: max(2.2vw,2.3em)}
	#headerGame #et{top: 5%;}
}
@media screen and (max-aspect-ratio: 12/10) {
	body #cta{left:5%; bottom:43%; transform: none}
	#headerGame #txt .H1EtP{font-size: 1.05vw}
	.centP100{}
}

@media screen and (max-aspect-ratio: 8/10) {
	#headerGame #txt{height: 80vw; width: 82%;bottom: -5%}
	#headerGame #txt .H1EtP{font-size: 1.52vw}
	#headerGame #txt > img{width: 80%;right: -12%}
	#headerGame #txt .regles{ padding-left:80px;font-size: 1.4vh; transform: rotate(-90deg);text-align: center;

        transform-origin: right;right: 6%;padding-bottom: 45px; bottom:102vh;

	};
	#headerGame #txt .regles span{width: 50vh;text-align: center;  padding-left: 5px; padding-right: 5px}
	#headerGame #txt .regles span br{display: none}
	#cta span{font-size: 18px}
	.centP100{}
}

@media screen and (max-aspect-ratio: 7/10) {
	#headerGame #txt{width: 85%}

	body #cta{font-size: 2em}
	#headerGame{padding-top: calc(100vh - 83px)}
	#headerGame #txt .H1EtP{word-break:keep-all;;}
	#headerGame #txt > img{ width: 76%;right: -8%;}
	#headerGame #txt .regles{bottom:95vh; padding-bottom: 35px}
	.centP100{}
	
}
@media screen and (max-aspect-ratio: 6/10) {
	#headerGame #txt .regles{width: max-content;right: 8%; top:-44.8vh; left:auto; color: #FFF; text-shadow: -1px -1px 1px #000}
	#headerGame #txt .regles span{background: transparent}
	.centP100{}
}
@media screen and (max-aspect-ratio: 30/25) {
	#headerGame #et{filter: invert(1);}
	.centP100{font-size: max(2.2vw,1.9vh)}
}
@media screen and (max-width: 580px){
	#headerGame #et{top:120px; left:7%}
	#headerGame #campingGaz{filter: invert(1);top:130px;right: auto;left:15%}


}