html, body, .fullContainer
{
    margin: 0; padding: 0; width: 100%; height: 100%;
	font-family: 'Futura Std Medium';
}

html::-webkit-scrollbar {
	display: none;
}

.fullContainer {
	position: absolute;
	overflow: hidden;
}

/* Hide scrollbar for IE and Edge */
html {
	overflow: scroll;
	-ms-overflow-style: none;
}
body{
	overflow: hidden;
}

@font-face {
	font-family: 'Futura Std Bold';
	src: url('fonts/FuturaStdBold.eot?#iefix') format('embedded-opentype'),
	url('fonts/FuturaStdBold.woff') format('woff'),
	url('fonts/FuturaStdBold.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Futura Std Medium';
	src: url('fonts/FuturaStdMedium.eot?#iefix') format('embedded-opentype'),
	url('fonts/FuturaStdMedium.woff') format('woff'),
	url('fonts/FuturaStdMedium.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Futura Std Heavy';
	src: url('fonts/FuturaStd-Heavy.eot?#iefix') format('embedded-opentype'),
	url('fonts/FuturaStd-Heavy.woff') format('woff'),
	url('fonts/FuturaStd-Heavy.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

#lang{
	position:fixed;
	bottom:5px;
	right:5px;
}

#lang a{
	text-decoration:none;
	color:#fff;
	display:inline-block;
	margin:0 2px;
	font-weight:300;
	letter-spacing:1px;
	font-size:14px;
}

#openfl-content { 
	width:100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: none;
}
#game-container {
	width: 100%;
	height: 100%;
}

.hide {
	display: none !important;
}

html.mobile .hideOnMobile, .unactive, html.desktop .hideOnDesktop{
	display:none !important;
}
@media (orientation: landscape) {
	.hideOnLandscape {
		display:none !important;
	}
}

@media (orientation: portrait) {
	.hideOnPortrait {
		display:none !important;
	}
}


#accueil .txt-title em{
	font-style:normal;
	display:block;
	margin-top:20px;
}

#accueil #reglement{
	position:absolute;
	bottom:5px;
	right:5px;
	color:#fff;
	text-decoration:none;
	font-size: 12px;
}

.waiting{
	visibility: hidden;
}

.inline {
	display: inline-block;
	
}

.vAlign {
		vertical-align: middle;
}
.textVAlign {
	transform: translateY(-50%) !important;
	top: 50%;
	position: absolute;
}
.divVAlign {
	transform: translateY(-50%) !important;
	top: 50%;
	position: relative;
}

.absoluteCenter {
	position: absolute;
    height: 50%;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);	
}
.flaconCenter{
	position: absolute;
    height: 66%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -32%);
}

.aCenter {
	text-align: center;
}

.txt-white {
	color: white;
}

.backIndex{
	z-index: -1;
}

.frontIndex{
	z-index: 100;
}

.bb{
	background-color: #000000;
}

.maxW100 {
	max-width: 100px !important;
	max-height: 100px !important;
}

.mt20 {
	margin-top: 20px;
}
.mb20 {
	margin-bottom: 20px;
}

/* CONTAINERS ... */
.interface {
	position: absolute;
}
.left {
	width: 50%;
	height: 100%;
	float: left;
}

.right {
	width: 50%;
	height: 100%;
	float: left;
	background-color: black;
}

.button {
	color: black;
    width: 33%;
    padding: 0 1vh;
    max-height: 100px;
    margin: 11px auto 7.31vh;
    background: rgb(179,145,97);
    background: linear-gradient(90deg, rgb(179,145,97), rgba(239,243,218,1));
    font-family: 'Futura Std Bold';
    font-size: 1.7vh;
    height: 5vh;
    cursor: pointer;
    max-width: 100%;
    text-align: center;
}

.level2 .button {
	color: white;
	border: 4px solid;
	border-image: radial-gradient(circle 18.5vh at center, #E59C65, #61231D) 1;
	background-image: url(img/html/cuivre.png);
	background-size: cover;
    background-position: center;
}

.button:last-of-type
{
	margin-bottom:15px;
}

.button-txt {
	display: flex;
    justify-content: center;
    flex-direction: column;
	width: 100%;
    height: 100%;
	position: relative;
	text-transform:uppercase;
}

a.button-txt {
	color:white;
	text-decoration:none;
}
.button:hover {
	cursor: pointer;
	transform: scale(1.08);
	transition: 0.2s;
}

.alpha {
	background: none !important;
	background-color: transparent !important;
}

.img1 {
	background-image: url("img/html/Azzaro 1080x1080.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.portrait .img1 {
	background-image: url("img/html/Azzaro 9x16.jpg");
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: cover;
	top: 18% !important;
}

.img2 {
	background-image: linear-gradient(270deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/voiture_inte_sansdegrade.jpg);
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.img3 {
	background-image: linear-gradient(270deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/flacon_voiture_grosplan_sansdegrade.jpg);
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.img4 {
	background-image: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%), url(img/html/flacon_0_desktop.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
}

.flacon1 .img4 {
	background-image: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%),  url(img/html/flacon_1_desktop.jpg);
}

.flacon2 .img4 {
	background-image: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%),  url(img/html/flacon_2_desktop.jpg);
}

.flacon3 .img4 {
	background-image: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%),  url(img/html/flacon_3_desktop.jpg);
}

.flaconfr .img4 {
	background-image: url(img/html/flacon_fr.jpg);
}

.flacon0 .congrats-0, .flaconfr .congrats-0 {
	display: block;
}

.flacon1 .congrats-1 {
	display: block;
}

.flacon2 .congrats-2 {
	display: block;
}

.flacon3 .congrats-3 {
	display: block;
}

.imgend {
	background-image: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 20%), url(img/html/flacon_fr.jpg);
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.score-page .logo, #formcontact .logo, .thankyou .logo, .thankyoufr .logo {
	-webkit-mask-image: url(/assets/img/html/logo.svg);
	-webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
	background-color: white;
	width: 100%;
	height: 7.35vh;
	margin: 2.6vh auto 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.thankyoufr .logo {
	margin: 2.6vh auto 7.31vh;
}

.flacon0 .score-page .logo, .flacon1 .score-page .logo, .flacon0 #formcontact .logo, .flacon1 #formcontact .logo, .flacon0 .thankyou .logo, .flacon1 .thankyou .logo {
	-webkit-mask-image: url(/assets/img/html/logo_simple.svg);
	-webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
	background-color: white;
	height: 4.99vh;
}

.buttons-bottom {
	bottom: 1vh;
    position: absolute;
	width: 100%;
}

.landscape .page-content{
	margin: 8vh 0;
    overflow: auto;
}
.landscape .score-page .page-content .score{
	margin: 8vh 0;
}
.landscape .score-page .page-content .replay-bt{
	margin: 8vh auto;
    display: inline-block;
}
.landscape .buttons-bottom{
	bottom: 8vh;
}


.img5 {
	background-image: linear-gradient(270deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/thanks-screen.jpg);
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.flaconfr .img5 {
	background-image: url(img/html/flacon_fr.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.imgcontact{
	background-image: linear-gradient(270deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/bg-contact.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;	
}

.textContainer {
	padding: 1rem 3rem;
}


.textContainer .logo {
	margin: 26px auto 32px;
    display: block;
	max-width: 290px;
    max-height: 154px;
    height: 15vh;
	-webkit-mask-image: url(/assets/img/html/logo.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-color: white;
    width: 100%;
}

.txt-title {
	color: #EDE3BA;
    font-size: 3.3vh;
    text-align: center;
	font-family: 'Futura Std Medium';
	text-transform: uppercase;
}

#accueil .txt-title {
	font-family: 'Futura Std Bold';
	font-size: 3vh;
}

#accueil .txt-title em{
	font-family: 'Futura Std Medium';
}

.flip-container {
	display: inline-flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
	height: 50vh;
    margin: auto;
}
.flip-arrow {
	max-height: 50%;
	margin-left: 70px;
}
.flip {
    height: 100%;
    position: relative;
	display: block;
}
.flip-bt {
	width: 100%;
    position: absolute;
    top: calc(100% - (0.3448 * 100%));
	transform: rotateX(0deg);
	cursor: hand;
}

.pulse{
	transform: scale(1);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}



.flip-bt img {
	width: 100%;
}
.flip-coin {
	transition: all 1.5s ease 0s;
	transform: rotateX(720deg);
    top: 0% !important;
}

.flip-bg {
	height: 100%;
	display: block;
}

#accueil .textContainer {
	display: flex;
    flex-direction: column;
    height: calc(100% - 1rem);
    align-items: center;
	padding-bottom: 0;
}

.gameui {
	pointer-events: none;
	z-index: 5;
}

.gameui .logo{
	height: 7.6vh;
	width: 14.3vh;
    max-height: 82px;
	margin-top: 10px;
	z-index: inherit;
	-webkit-mask-image: url(/assets/img/html/logo.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-color: #1d1d1b;
}

.gameui .progression {
	width: 460px;
	position: relative;
	height: 18px;
	margin-top: 15px;
	z-index: inherit;
}

.landscape .gameui .progression {
	position: absolute;
    left: calc(50% - 230px);
}

.gameui .progression .checkpoint {
	width: 28px;
	height: 28px;
	min-width: 28px;
	border: 2px solid #2D2D44;
	border-radius: 50%;
	z-index: inherit;
}
.gameui .progression .current {
	background-color: #2D2D44;
}
.gameui-header {
	display: flex;
    margin: 10px 66px 0 54px;
    justify-content: space-between;
	z-index: inherit;
}
.progression-timeline {
	display: flex;
    z-index: inherit;
    align-items: center;
}
.progression .car {
    display: block;
    position: absolute;
	transform: translate(calc(-50% + 14px),calc(-50% + 2px));
	z-index: 6;
	background-image: url("img/html/little car.png");
	width: 52px;
	height: 29px;
}
.level2 .progression .car {
	background-image: url("img/html/little moto.png");
}
.progression .line {
	width: 120px;
    height: 0px;
    border-top: 1px solid #2D2D44;
    border-bottom: 1px solid #2D2D44;
	z-index: 4;
}
.gameui .score {
	max-width: 440px;
    max-height: 60px;
    width: 40.74vh;
    height: 5.55vh;
	background-color: #2D2D44;
	border: 2px solid #C9C598;
    text-align: center;
	z-index: inherit;
	text-transform: uppercase;
	position: relative;
	
}
.level2 .gameui .score {
	background-color: #411B05;
}
.gameui .score .score-txt {
	color: white;
	font-size: 2.4vh;
	top: 50%;
    position: relative;
    transform: translateY(-50%);
}

.zoomInAndOut{
	animation: zoomInOut 0.2s ease-in-out 1 alternate;
}

@keyframes zoomInOut {
	0% {
		transform: scale(1.0);
	}
	100% {
		transform: scale(1.5);
	}
}

.tutorial{
	width: auto;
    margin-top: 11.6vh;
	pointer-events: none;
	z-index: inherit;
}
.tutorial-page {
	z-index: inherit;
}
.tutorial-page.t1, .tutorial-page.t2 {
	display: flex;
    justify-content: center;
}
.tutorial-page.t1 {
	flex-direction: row-reverse;
}
.tutorial .turn-text{
	color: #2C2836;
    font-size: 2.5rem;
	z-index: inherit;
	text-transform: uppercase;
}
.tutorial .t1 .turn-text{
	 margin-right: 50px;
}
.tutorial .t2 .turn-text{
	 margin-left: 50px;
}
.turn-right{
	transform: scaleX(-1);
}
.zup{
	z-index: 5;
}
.tutorial-page.t3{
	width: 40%;
	text-align: center;
	position: relative;
	margin: auto;
}
.tutorial-page.t3 .tuto-img{
	max-width: 100%;
}
.tuto-text1{
	font-family: 'Futura Std Bold';
	color: black;
	font-size: 4.44vh;
	text-align: center;
	text-transform:uppercase;
}
.tuto-text2{
	font-family: 'Futura Std Bold';
	color: black;
	font-size: 4.44vh;
	text-align: center;
	text-transform:uppercase;
}

.tuto-coins {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}
.tuto-coins > div {
	width: 48%;
	max-width: 200px;
	margin: 0 20px;
}

.tuto-pts{
	font-size: 3.5rem;
}
.smaller {
	font-size: 60%;
}

.next-content {
	text-align:center;
}

.score-page {
	/*height: 100vh;*/
    background: radial-gradient(circle at center, transparent 25%, transparent 25.5%);
    background-size: 100% 100%;
    background-position: 50% 50%;
    /*transition: all 2s ease;*/
	color: white;
    text-align: center;
}
.score-page .score {
	margin: 2vh auto;
	font-size: 2.89vh;
	font-family: 'Futura Std Bold';
    text-transform: uppercase;
}
.congrats {
    margin-top: 4.63vh;
    margin-bottom: 4.63vh;
	display: none;
	font-family: 'Futura Std Medium';
	font-size: 2.67vh;
	text-transform: uppercase;
	color:#fff;
	text-align:center;
}
.congrats .bigger
{
	font-family: 'Futura Std Heavy';
	font-size: 130%;
}

.landscape .video-landscape{
	width: 89%;
}
.portrait .video-landscape {
	width: calc((100vw - 6rem) * 0.89);
	height: calc((100vw - 6rem) * 0.89 * 9/16);
}
.wrapper-video{
	border: 2px solid #C9C598;
    margin: auto;
    display: flex;
	position: relative;
}
.wrapper-video video {
	 width: 100%;
	 object-fit: cover;
}
.wrapper-video .content {
	background-color: rgba(0,0,0,0.5);
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.play-f{
	background: url(img/html/play.png);
    width: 54px;
    height: 59px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
	cursor: pointer;
}

.play{
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%) !important;
	cursor: pointer;
    width: 25.55vh;
    height: 6.85vh;
	color: black;
    background: rgb(179,145,97);
    background: linear-gradient(90deg, rgb(179,145,97), rgba(239,243,218,1));
	font-family: 'Futura Std Bold';
	font-size: 2vh;
	cursor: pointer;
	max-width: 100%;
	text-align:center;
}

.play:hover{
	cursor: pointer;
    transform:translate(-50%, -50%) scale(1.08) !important;
    transition: 0.2s;
}

.content-mobile {
	position: absolute;
	left: 50%;
	bottom: 25%;
}


.exclu .button {
    margin: 30px auto 0px;
    width: 25.55vh;
    max-width: 276px;
    height: 6.85vh;
    max-height: 74px;
}

.exclu .logo {
	max-height: 130px;
	height: 12.03vh;
}

.wrapper-exclu2 {
	font-size: 2.4vh;
    position: relative;
	border: 2px solid #C9C598;
    line-height: 150%;
    padding: 3%;
    margin: 5% auto 2%;
	text-transform: uppercase;
}

.videobg {
	width: 100%;
    
}

.videobg-mobile {
	position: absolute;
    bottom: 0;
}

.videobg-desktop {
	object-fit: cover;
    width: 100%;
    height: 100%;
}

.nextlevel-page {
	background: url(/assets/img/html/gradient1px.jpg);
	background-size: contain;
}
	
.nextlevel-page .logo {
	height: 7.35vh;
	/*width: 13.86vh;*/
    margin: 2.6vh auto 0;
	-webkit-mask-image: url(/assets/img/html/logo.svg);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-color: #1d1d1b;
    width: 100%;
}
.nextlevel-anim-start {
	-webkit-mask: radial-gradient(farthest-side,#fff 98%,transparent 100%) center/10px 10px no-repeat,    linear-gradient(#fff,#fff);
	mask: radial-gradient(farthest-side,#fff 98%,transparent 100%) center/10px 0 no-repeat,    linear-gradient(#fff,#fff);
	-webkit-mask-size: 1px 1px;
	-webkit-mask-composite:destination-out;
	mask-composite:exclude;
}
.nextlevel-anim {
	transition: -webkit-mask-size 3s;
	-webkit-mask-size: max(120vw, 120vh) max(120vw, 120vh);
}

.topright {
	position: absolute;
	top: 12px;
	right: 12px;
	max-width: 10%;
}

.bottomleft {
	position: absolute;
	bottom: 12px;
	left: 12px;
	max-width: 10%;
}

.bottomright {
	position: absolute;
	bottom: 12px;
	right: 12px;
	max-width: 10%;
}

.ingredients {
	display: flex;
    justify-content: space-evenly;
    max-width: 45%;
    margin: auto;
}
.ingredient {
	text-transform: uppercase;
	font-size: 70%;
	margin:0 8px;
}
.ingredient img {
	width: 10.27vh;
	height: 10.27vh;
}

.landscape .video-portrait
{
	width: calc(48vh * 1080 / 1350);
    max-height: 48vh;
}
.portrait .video-portrait {
	width: calc(33vh * 1080 / 1350);
    height: 33vh;
}

.videoLoop {
	position: absolute;
    z-index: -10;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile .videoLoop {
	object-fit: fill;
	height: 100% !important;
}

/* ANIMATION */
@keyframes opacity{0%{opacity:0;visibility:hidden;}to{opacity:1;visibility:visible;}}
@keyframes animationTop{0%{transform:translateY(-10px);opacity:0;visibility:hidden;}to{transform:translateY(0px);opacity:1;visibility:visible;}}
@keyframes animationBottom{0%{transform:translateY(10px);opacity:0;visibility:hidden;}to{transform:translateY(0px);opacity:1;visibility:visible;}}
@keyframes animationLeft{0%{transform:translateX(-10px);opacity:0;visibility:hidden;}to{transform:translateX(0px);opacity:1;visibility:visible;}}
@keyframes animationLeftFix{0%{transform:translateX(-10px) translateY(-15px) scaleX(-1);opacity:0;visibility:hidden;}to{transform:translateX(0px) translateY(-15px) scaleX(-1);opacity:1;visibility:visible;}}
@keyframes animationLeftFix2{0%{transform:translateX(-10px) scaleX(-1);opacity:0;visibility:hidden;}to{transform:translateX(0px) scaleX(-1);opacity:1;visibility:visible;}}
@keyframes animationRight{0%{transform:translateX(10px);opacity:0;visibility:hidden;}to{transform:translateX(0px);opacity:1;visibility:visible;}}
@keyframes animationRightFix{0%{transform:translateX(10px) translateY(-15px) scaleX(-1);opacity:0;visibility:hidden;}to{transform:translateX(0px) translateY(-15px) scaleX(-1);opacity:1;visibility:visible;}}
@keyframes animationRightFix2{0%{transform:translateX(10px) translateY(-15px); opacity:0;visibility:hidden;}to{transform:translateX(0px) translateY(-15px);opacity:1;visibility:visible;}}

@keyframes barrilet{0%{transform:translate(-50%, 50%);opacity:0;visibility:hidden;}to{ transform: translate(-50%, -32%); opacity:1;visibility:visible;}}


/* STEP 1 */
.animated:not(.unactive) .anim-container:not(.unactive) > *:nth-child(1):not(.no-anim), .anim-b1{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
.animated:not(.unactive) .anim-container:not(.unactive) > *:nth-child(2):not(.no-anim), .anim-b2{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
.animated:not(.unactive) .anim-container:not(.unactive) > *:nth-child(3):not(.no-anim), .anim-b3{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.4s;animation-fill-mode: both;}
.animated:not(.unactive) .anim-container:not(.unactive) > *:nth-child(4):not(.no-anim), .anim-b4{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.45s;animation-fill-mode: both;}
.animated:not(.unactive) .anim-container:not(.unactive) > *:nth-child(5):not(.no-anim), .anim-b5{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.5s;animation-fill-mode: both;}
.animated:not(.unactive) .anim-container:not(.unactive) > *:nth-child(6):not(.no-anim), .anim-b5{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.55s;animation-fill-mode: both;}
.animated:not(.unactive) .anim-container:not(.unactive) > *:nth-child(7):not(.no-anim), .anim-b5{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.6s;animation-fill-mode: both;}

.anim-l1{animation: animationLeft 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
.anim-21{animation: animationLeft 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
.anim-l1fix{animation: animationLeftFix 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
.anim-l1fix2{animation: animationLeftFix2 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}

.anim-r1{animation: animationRight 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
.anim-r1fix{animation: animationRightFix 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
.anim-r1fix2{animation: animationRightFix2 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}

.anim-barrilet {animation: barrilet 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}

.anim-1t{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
.anim-2t{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
.anim-3t{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.4s;animation-fill-mode: both;}
.anim-4t{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.45s;animation-fill-mode: both;}
.anim-5t{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.5s;animation-fill-mode: both;}
.anim-6t{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.55s;animation-fill-mode: both;}
.anim-7t{animation: animationTop 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.6s;animation-fill-mode: both;}

.anim-1b{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
.anim-2b{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.35s;animation-fill-mode: both;}
.anim-3b{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.4s;animation-fill-mode: both;}
.anim-4b{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.45s;animation-fill-mode: both;}
.anim-5b{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.5s;animation-fill-mode: both;}
.anim-6b{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.55s;animation-fill-mode: both;}
.anim-7b{animation: animationBottom 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.6s;animation-fill-mode: both;}

.anim-a1{animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.1s;animation-fill-mode: both;}
.anim-a2{animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.15s;animation-fill-mode: both;}
.anim-a3{animation: opacity 0.6s cubic-bezier(0.250, 0.100, 0.250, 1.000) 0.2s;animation-fill-mode: both;}


/** RESPONSIVE **/

@media screen and (orientation:landscape) and (max-width:1367px) {
	.ingredients {
		max-width: 65%;
	}
}

@media screen and (orientation:landscape) and (max-width:1025px) {
	.textContainer .logo {
		max-width: 50%;
	}
	.gameui .score {
		width: 29vh;
	}
	.exclu .congrats .title {
		font-size: 2.3vh;
	}
	#score-page .score{
		font-size: 1.7rem;
	}
	.ingredients {
		max-width: 65%;
	}
}

@media screen and (orientation:portrait) {
	.congrats {
		font-size: 1.68vh;
	}
	.flip-container{
	    padding-top: 40%;
	}
	
	.right:not(.mobileSame){
		width: 100%;
		float: none;
		position: absolute;
		left: 0;
		top: 0;
		background: transparent;
	}
	
	#accueil .right:not(.mobileSame), #end .right:not(.mobileSame){
		background: linear-gradient(180deg, rgba(0,0,0,1) 29%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0) 60%);
	}
	
	 
	
	
	#formcontact .right:not(.mobileSame){
		background: rgba(0,0,0,0.73);
	}
	
	.thankyou .right:not(.mobileSame){
		background: rgba(0,0,0,0.55);
	}
	
	.left:not(.mobileSame) {
		background-position: center top;
		background-size: cover;
		width: 100%;
		float: none;
		height: 100%;
		top: 0;
		position: absolute;
	}
	
	.gameui-header {
		position: relative;
		align-items: center;
	}
	.gameui .progression {
		position: absolute;
		top: 110px;
		width: 100%;
		margin: 0;
	}
	
	.progression .line {
		width: 100%;
	}
	
	.gameui .logo
	{
		height: 51px;
	}
	
	.gameui .score {
		width: 330px;
		height: 45px;
	}
	
	.tutorial-page.t1, .tutorial-page.t2 {
		
		margin: auto;
		width: 65%;
		text-align: center;
		flex-direction: column;
		align-content: center;
		align-items: center;
	}
	
	
	
	.tutorial-page.t3 {
		
		width: 100%;
	}
	
	.exclu .button {
		left: calc(50% - 25.55vh / 2);
		bottom: 26px;
		position: absolute;
	}
	
	#formcontact .button {
		position: static;
	}
	
	.ingredients {
		max-width: 45%;
	}
	
	.ingredient {
		font-size: 1vh;
	}
	
	.ingredient-name {
		max-width: 5.85vh;
	}
	
	.ingredient img {
		width: 5.85vh;
		height: 5.85vh;
	}
	
	.exclu .congrats .title {
		font-size: 1.5rem;
	}
	.congrats-smaller-margin-mobile {
		margin-top: 2vh;
		margin-bottom: 2vh;
	}
	.congrats-smaller-mobile{
		font-size: 1.8vh;
	}
	
	
	.img2 {
		background-image: linear-gradient(180deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/voiture_inte_sansdegrade_mob.jpg);
		background-position: 0 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.img3 {
		background-image: linear-gradient(180deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/flacon_voiture_grosplan_sansdegrade_mob.jpg);
		background-position: 0 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.img4 {
		background-image: url(img/html/flacon_0.jpg);
		background-position: 0 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.flacon1 .img4 {
		background-image: url(img/html/flacon_1.jpg);
	}

	.flacon2 .img4 {
		background-image: url(img/html/flacon_2.jpg);
	}

	.flacon3 .img4 {
		background-image: url(img/html/flacon_3.jpg);
	}
	
	.flaconfr .img4 {
		background-image: url(img/html/flacon_fr.jpg);
		background-position: center;
	}

	.img5 {
		background-image: url(img/html/thanks-screen.jpg);
		background-position: 0 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	
	.flaconfr .img5 {
		background-image: url(img/html/flacon_fr.jpg);
		background-position: center;
	}
	
	.topright {
		top: 6px;
		right: 6px;
	}
	.bottomleft {
		bottom: 6px;
		left: 6px;
	}
	.bottomright {
		bottom: 6px;
		right: 6px;
	}
}
/* Portrait only */
@media (orientation: portrait) {
	.turn-left-icon-mobile, .turn-right-icon-mobile
	{
		content: " ";
		display: inline-block;
		height: 15vh;
		background-repeat: no-repeat;
		margin-right: 4px;
	}
	.turn-left-icon-mobile{
		
		background: url(img/html/TurnLeft.svg);
		
	}
	.turn-right-icon-mobile
	{
		background: url(img/html/TurnRight.svg);
	}
	.tutorial .t2 .turn-text {
		font-family: 'Futura Std Bold';
	}
	.tutorial .t1 .turn-text {
		font-family: 'Futura Std Bold';
	}
}
/* 
Ipad */
@media only screen and (device-aspect-ratio: 1024/1366) and (orientation : portrait) {
	#score-page .score {
		margin-top: 5vh;
	}
	.video-landscape {
		width: calc((100vw - 6rem) * 0.8);
		height: calc((100vw - 6rem) * 0.8 * 9/16);
	}
	.video-portrait {
		width: calc((100vw - 6rem) * 0.40);
		height: calc((100vw - 6rem) * 0.40 * 1350/1080);
	}
	.play {
		transform: translate(-50%,-50%);
	}
	
}
@media only screen and (device-aspect-ratio: 768/1024) and (orientation : portrait) {
	#score-page .score {
		margin-top: 5vh;
	}
	.video-landscape {
		width: calc((100vw - 6rem) * 0.8);
		height: calc((100vw - 6rem) * 0.8 * 9/16);
	}
	.video-portrait {
		width: calc((100vw - 6rem) * 0.40);
		height: calc((100vw - 6rem) * 0.40 * 1350/1080);
	}
	.play {
		    transform: translate(-50%,50%) !important;
	}
}

/* iphone x */
@media screen and (orientation:portrait) and (max-width:767px) {
	.textContainer .logo {
		max-height: 77px;
		height: 9.48vh;
		margin: 3.2vh auto 3.94vh;
	}
	.textContainer .txt-title {
		font-size: 2.56vh;
	}
	
	#accueil .txt-title{
		font-size: 2vh;	
	}
	
	.flip-container{
		max-height: 270px;
	}
	.gameui-header {
		margin: 15px 15px 0 15px;
		position: relative;
		align-items: center;
	}
	.gameui .progression {
		position: absolute;
		top: 90px;
		left: 0;
		width: 100%;
		margin: 0;
	}
	
	.gameui .logo
	{
		height: 42px;
		margin-right: 15px;
	}
	.gameui .score {
		width: 220px;
		height: 30px;
	}
	
	.gameui .progression .checkpoint {
		width: 14px;
		height: 14px;
		min-width: 14px;
	}
	
	.progression .car img {
		transform: translate(calc(-50% + 8px),calc(-50% + 2px));
		height: 16px;
	}
	
	.turn-text, .turn-left, .turn-right {
		max-width: 50%;
	}
	.tutorial .t2 .turn-text {
		margin: auto;
		font-size: 1.68rem;
		display: contents;
		font-family: 'Futura Std Bold';
	}
	.tutorial .t1 .turn-text {
		margin: auto;
		font-size: 1.68rem;
		display: contents;
		font-family: 'Futura Std Bold';
	}
	.tutorial {
		margin: 125px 20px;
	}
	.tuto-pts{
		font-size: 4.73vh;
	}
	.button {
		max-height: 50px;
		margin-bottom: 4.92vh;
		text-transform: uppercase;
	}
	.tutorial-page .left, .tutorial-page .right {
		width: 50%		
	}
	.tutorial-page.t3 .tuto-text1, .tutorial-page.t3 .tuto-text2{
		font-size: 3.15vh;
	}
	
	.exclu .congrats .title {
		font-size: 1.97vh;
	}
	.exclu .button {
		width: 200px;
		margin: auto;
		height: 38px;
		left: calc(50% - 100px);
		bottom: 26px;
		position: absolute;
	}
	.exclu .logo {
		max-height: 74px;
		height: 9.11vh;
	}
	.mPadding .textContainer {
		padding: 1rem;
	}
}
/* other screens */
@media screen and (orientation:portrait) and (max-height:767px) {
	.txt-title {
		font-size: 1.5rem;
	}
	.tutorial {
		margin-top: 100px;
	}
	.tuto-coins{
		width: 80%;
		margin: 2rem auto;
	}
}

@media screen and (orientation:portrait) and (max-height:640px) {
	.flaconfr .congrats-0 {
		margin-bottom: 2.5vh;
	}
}

#formcontact .congrats{
	letter-spacing:1px;
}

#formcontact .congrats #formcontact-title{
    font-family: 'Futura Std Medium';
}

#formcontact .congrats #formcontact-score{

}

#formcontact .congrats #formcontact-classement{
	font-size: 2.25vh;
	margin-bottom:20px;
}

#formcontact .congrats #formcontact-reward{
    font-family: 'Futura Std Medium';
	font-size: 2.25vh;
}

#formcontact .congrats #formcontact-reward b{
    font-family: 'Futura Std Bold';
}

#formcontact .right form#register{
	padding:0 20%;
}

#formcontact .right form#register .form-item{
	margin-bottom:1rem;
	width:100%;
	position:relative;
}

#formcontact .right form#register .form-item label{
	color:#fff;
	display:block;
	letter-spacing:2px;
	margin-bottom:3px;
    font-family: 'Futura Std Medium';
}


#formcontact .right form#register .form-item select,
#formcontact .right form#register .form-item input{
	background:#fff;
	width:100%;
	height:30px;
	border-radius:1px;
	border:none;
	padding:0 10px;
	border:solid 1px #fff;
	width:100%;
    font-family: 'Futura Std Medium';
}

#formcontact .right form#register .form-item input{
	width:calc(100% - 20px);
}

input::placeholder  {
     color: #000; 
     opacity: 1;
}

#formcontact .right form#register .form-item select.form-error,
#formcontact .right form#register .form-item input.form-error{
	border-color:red;
}

#formcontact .right form#register .form-item.check input{
	display:inline-block;
	width:auto;
	margin:0 0 0 0px;
	vertical-align:top;
	height:auto;
}

#formcontact .right form#register .form-item.check span{
	font-weight:500;
	font-size:12px;
	display:inline-block;
	vertical-align:top;
	letter-spacing:1px;
}

#formcontact .right form#register .form-item.check span.form-error{
	color:red;
}

#formcontact .right form#register .form-item.check span{
	color:#fff;
}

#formcontact .right form#register .form-item.check span a{
	color:#fff;
}

#formcontact .right form#register .form-item.check span.form-error{
	color:red;
}

#formcontact .right form#register .form-item.check span.form-error a{
	color:red;
}

#formcontact .right form#register .form-item.check #require-field{
	color:#fff;
	letter-spacing:1px;
	font-size:11px;
}

#formcontact .right form#register .form-item.check #msg-error{
	color:red;
	letter-spacing:1px;
	font-size:11px;
	display:block;
}

#formcontact .right form#register .form-action{
	text-align:left;
}

#formcontact .right form#register .form-action .button{
	margin:15px 0 0 0;
    width: 18vh;
    max-width: 220px;
    height: 4.75vh;
    max-height:50px;
}

#formcontact .right form#register .form-action .button.disable{
	opacity:0.2;
	pointer-events:none;
}

#formcontact .button-txt{
	text-align:center;
}

.action {
	text-align: center;
    color: white;
    font-size: 2.67vh;
	margin: 4.63vh 0;
}

.thankyou .action {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Futura Std Medium';
    text-transform: uppercase;
    font-size: 230%;

}
.portrait .thankyou .action {
	width: 70%;
}

.click-next-page .action {
	position: relative;
	top: 19vh;
	color: black;
	font-size: 150%;
	width: 50%;
	margin: auto;
	font-family: 'Futura Std Heavy';
}

.click-next-page .action p {
	margin: 0;
}

.action .bigger {
	font-size: 230%;
	margin: 0;
}

.thankyoufr .action {
	font-size: 2.1vh;
	margin: 2.63vh 0;
}

.thankyoufr .action .bigger {
	font-size: 120%;
}

.mobile.form-focus .form-item.check p {
	margin: 0;
	font-size: 50%;
}
.mobile.form-focus .form-item.check #option-text2 {
	font-size: 80%;
}


/* RESPONSIVE */
@media screen and (max-width:1441px) {
	.wrapper-exclu2{
		font-size: 1.8vh;
	}
	
	#classement #box-classement{
		width:80%;
	}
	
	#classement #box-nocibe{
		width:84%;
	}
	
	#classement .right .logo {
		margin: 10px auto;
		height: 10vh;
	}
}

@media screen and (max-width:1281px) {
	#formcontact .right strong {
		margin-top: 2vh;
		margin-bottom: 2vh;
	}
	
	#formcontact .right form#register {
		padding: 0 10%;
	}
	
	#formcontact .right form#register .form-item {
		margin-bottom:0.5rem;
		width: 100%;
	}
	
	#formcontact .right form#register .form-item label{
		font-size:12px;
	}
	
	#formcontact .right form#register .form-item select,
	#formcontact .right form#register .form-item input{
		font-size:12px;
		height:24px;
	}
}

@media screen and (max-width:1025px) {
	.wrapper-exclu2{
		font-size: 1.4vh;
	}
}

@media screen and (max-width:780px) {
	.wrapper-exclu2{
		font-size: 1.5vh;
	}
	
	#formcontact .right strong{
		font-size:2vh;
	}
	
	#formcontact .right form#register .form-item {
		margin-bottom:1rem;
	}
	
	#formcontact .right form#register .form-item label{
		font-size:16px;
	}
	
	#formcontact .right form#register .form-item select,
	#formcontact .right form#register .form-item input{
		font-size:16px;
		height:30px;
	}
}

@media screen and (max-width:681px) {
	.play{
		transform: translate(-50%,50%) !important;
	}
	
	#accueil .txt-title em{
		margin-top:10px;
	}
	
	.wrapper-exclu2{
		font-size: 1.3vh;
	}
	
	.textContainer {
		padding: 1rem 2rem;
	}

	
	#formcontact .congrats #formcontact-reward {
		font-size: 1.8vh;
	}
	
	#formcontact .right form#register {
		padding: 0 15px;
		margin-bottom:20px;
	}
	
	#formcontact .right form#register .form-item {
		margin-bottom: 4vh;
	}
	
	#formcontact .right form#register .form-item label{
		font-size:14px;
	}
	
	#formcontact .right form#register .form-item select,
	#formcontact .right form#register .form-item input{
		font-size:14px;
		height:26px;
	}
	
	#formcontact .right form#register .form-item.check span{
		font-size:10px;
	}
	
	#classement  .img5 {
		background-image: linear-gradient(180deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80%), url(img/html/thanks-screen.jpg);
	}
	
	#classement #box-classement{
		width:86%;
	}
	
	#classement #box-nocibe{
		width:90%;
	}
	
	#classement .button{
		width: 40vh;
		font-size: 1.5vh;
	}
	
	#classement .right #trousse-offerte{
		font-size:9px;
	}


	#end .txt-title {
		margin-top:3vh;
	}

	#end .txt-subtitle{
		margin-top:3vh;
	}

	#end #end-cta{
		margin-top:45vh;	
	}


}

@media screen and (max-width:401px) {
	#formcontact .right form#register .form-item label{
		font-size:12px;
	}
	
	#formcontact .right form#register .form-item select,
	#formcontact .right form#register .form-item input{
		font-size:12px;
		height:22px;
	}
	
	#formcontact .right form#register .form-item.check span{
		font-size:9px;
	}
}