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;
}


#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;
}

.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-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: 48.15vh;
    /* max-width: 520px; */
    height: 9.25vh;
    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: 2vh;
	cursor: pointer;
	max-width: 100%;
}

.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;
}

.button-txt:after {
	content: "";
    background-image: url(img/html/arrow.svg);
    position: absolute;
    right: 0;
    width: 2.77vh;
    height: 1.76vh;
	transform: translateX(calc(2.77vh - 1px));
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    z-index: -1;
}

.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/homme_assis.jpg);
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.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(270deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/flacon_grosplan_sansdegrade.jpg);
	/*background-image: linear-gradient(270deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/bg-ingredient.jpg);*/
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.img5 {
	background-image: linear-gradient(270deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/homme_grosplan_sansdegrade.jpg);
    background-position: 0 50%;
    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: 264px;
    max-height: 140px;
    height: 12.96vh;
}

.txt-title {
	color: #EDE3BA;
    /* font-size: 2rem; */
    font-size: 3.3vh;
    text-align: center;
	font-family: 'Futura Std Medium';
	text-transform: uppercase;
}
.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 {
	/*max-width: 179px;*/
    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;
    max-height: 82px;
	margin-top: 10px;
	z-index: inherit;
}

.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;
}
.progression .car img {
	position: absolute;
	transform: translate(calc(-50% + 14px),calc(-50% + 2px));
	z-index: 6;
}
.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;
	
}
.gameui .score .score-txt {
	color: #F6F1D5;
	font-size: 2.4vh;
    /* font-size: 1.4rem; */
	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;
	/* margin-top: 125px; */
	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: 3rem; */
	font-size: 4.44vh;
	text-align: center;
	text-transform:uppercase;
}
.tuto-text2{
	color: black;
	/* font-size: 3rem; */
	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%;
}
#score-page .score {
	margin: 9.26vh auto;
	/* margin: 100px auto 22px; */
	/* font-size: 1.95rem; */
	font-size: 2.89vh;
	font-family: 'Futura Std Bold';
    text-transform: uppercase;
}
.congrats {
	/* margin-top: 50px; */
    /* margin-bottom: 50px; */
    margin-top: 4.63vh;
    margin-bottom: 4.63vh;
}
.congrats .title
{
	font-family: 'Futura Std Bold';
	font-size: 2.67vh;
	/* font-size: 1.8rem; */
	text-transform: uppercase;
}
.congrats .subtitle
{
	font-family: 'Futura Std Medium';
	font-size: 2.67vh;
	/* font-size: 1.8rem; */
	text-transform: uppercase;
}

.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;
	/* font-size: 1.8rem; */
    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%;
}

.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) {
	.flip-container{
	    padding-top: 40%;
	}
	
	.right:not(.mobileSame){
		width: 100%;
		float: none;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(180deg, rgba(0,0,0,1) 35%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0) 60%)
	}
	
	
	#formcontact .right:not(.mobileSame){
		background: linear-gradient(180deg, rgba(0,0,0,1) 35%, rgba(0,0,0,0.85) 80%, rgba(0,0,0,0) 100%)
	}
	
	.left:not(.mobileSame) {
		background-position: center;
		background-size: cover;
		width: 100%;
		float: none;
		height: 70%;
		bottom: -3vh;
		position: absolute;
	}
	
	.gameui-header {
		/*margin: 15px 15px 0 15px;*/
		position: relative;
		align-items: center;
	}
	.gameui .progression {
		position: absolute;
		top: 110px;
		width: 100%;
		margin: 0;
	}
	
	.progression .line {
		width: 100%;
	}
	
	.gameui .logo
	{
		height: 51px;
		/*margin-right: 15px;*/
	}
	
	.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: linear-gradient(180deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/flacon_grosplan_sansdegrade_mob.jpg);
		background-position: 0 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.img5 {
		background-image: linear-gradient(180deg, rgba(0,0,0,1) 1%, rgba(0,0,0,0) 51%), url(img/html/homme_grosplan_sansdegrade_mob.jpg);
		background-position: 0 50%;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.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;
		/*width: 1.68rem;*/
		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: 1.3rem; */
		font-size: 2.56vh;
	}
	.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: 2.4rem; */
		font-size: 4.73vh;
	}
	.button {
		max-height: 50px;
		/* margin-bottom: 40px; */
		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: 1.6rem; */
		font-size: 3.15vh;
	}
	
	.exclu .congrats .title {
		/* font-size: 1rem; */
		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;
	}
}






/* FORM CONTACT */
#formcontact .right .logo{
    margin: 26px auto 32px;
    display: block;
    max-width: 264px;
    max-height: 140px;
    height: 12.96vh;
}



#formcontact .right strong{
    font-family: 'Futura Std Bold';
    font-size: 2.67vh;
    text-transform: uppercase;
	color:#fff;
	margin-top: 4.63vh;
    margin-bottom: 4.63vh;
	width:100%;
	display:block;
	text-align:center;
}


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

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

#formcontact .right form#register .form-item label{
	color:#fff;
	text-transform:uppercase;
	display:block;
	letter-spacing:2px;
	margin-bottom:3px;
}


#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%;
}

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

#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 #option-text.form-error{
	color:red;
}

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

#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;
}


/* RESPONSIVE */
@media screen and (max-width:1441px) {
	.wrapper-exclu2{
		font-size: 1.8vh;
	}
}

@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;
	}
	
	/*
	.textContainer .button{
		width:35vh;
	}
	*/
	
	#formcontact .right form#register {
		padding: 0 15px;
		margin-bottom:20px;
	}
	
	#formcontact .right form#register .form-item {
		margin-bottom:0.5rem;
	}
	
	#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;
	}
}

@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;
	}
}