*{
user-select: text;
-webkit-user-select: text;
-moz-user-select: text;
-o-user-select: text;
}

*, *:before, *:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html{
-webkit-overflow-scrolling: touch;
}

body{
overflow-x: hidden;
font-size: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

section{
width: 100%;
}

img{
display: inline-block;
vertical-align: middle;
max-width: 100%;
height: auto;
}

a{
text-decoration: none;
color: #FFF;
}

strong{
font-weight: bold;
}

i{
font-style: italic;
}

html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif !important;
background-color: #374555;

-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.game{
	display: none;
width: 500px;
height:2000px;
background: rgba(44,50,56,0.8);
box-shadow: 0px 0px 60px 20px rgba(0,0,0,0.3);
position: absolute;
z-index: 5;
left: 50%;
top: 30%;

overflow: hidden;
transform-origin: 50% 0;
transform: rotateX(50deg) translate(-50%, -50%);

overflow: hidden;

}

html{
width: 100%;
height: 100%;
overflow: hidden;
}

body{
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;  
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
background-color: #3d454d;
overflow: hidden;
position: relative;
font-family: 'Montserrat', sans-serif !important;
}

*{
user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}

.lines{
position: absolute;
z-index: 2;
}

.line{
position: absolute;
width: 1px;
height: 100%;
background-color: rgba(256,256,256,.5);
z-index: 1;
}

.start{
width: 550px;
height: 5px;
margin-left: -290px;
margin-top:60px; 
background-color: rgba(256,256,256,.5);
position: absolute;
z-index: 1;
border-radius: 40px;
}


.barre{
width: 20px;
height: 80px;
border-radius: 40px;
position: absolute;
margin-left: -10px;
}

.rond{
width: 80px;
height: 80px;
border-radius: 40px;
position: absolute;
margin-left: -40px;
z-index: 3;
top:1440px;

transform:scale(.7);
transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-box-shadow: 0px 0px 52px -16px rgba(0,0,0,0.95);
-moz-box-shadow: 0px 0px 52px -16px rgba(0,0,0,0.95);
box-shadow: 0px 0px 52px -16px rgba(0,0,0,0.95);

cursor: pointer;
}

.active{
transform:scale(.9);
transition: all .1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.right{
background-color: #880c42;

}

.middle{
background-color: #888b8f;
}

.left{
background-color: #09778f;
}

.left.press{
background-color: #00d8ff;
-webkit-box-shadow: 0px 0px 45px 5px rgba(0,216,255,1);
-moz-box-shadow: 0px 0px 45px 5px rgba(0,216,255,1);
box-shadow: 0px 0px 45px 5px rgba(0,216,255,1);
z-index: 4;
}

.middle.press{
background-color: #fff;
-webkit-box-shadow: 0px 0px 45px 5px rgba(256,256,256,1);
-moz-box-shadow: 0px 0px 45px 5px rgba(256,256,256,1);
box-shadow: 0px 0px 45px 5px rgba(256,256,256,1);
z-index: 4;
}

.right.press{
background-color: #ff0065;
-webkit-box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
-moz-box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
z-index: 4;
}

.one{
left: 100px;
}

.two{
left: 250px;
}

.three{
left: 400px;
}

.high{
width: 30px;
height: 30px;
border-radius: 40px;
position: absolute;
z-index: 2;
border:0px solid #00d8ff;
margin-left: -15px;
top:1460px;
opacity: 1;
}

.h1{
-webkit-box-shadow: 0px 0px 45px 5px rgba(0,216,255,1);
-moz-box-shadow: 0px 0px 45px 5px rgba(0,216,255,1);
box-shadow: 0px 0px 45px 5px rgba(0,216,255,1);
}

.h2{
-webkit-box-shadow: 0px 0px 45px 5px rgba(256,256,256,1);
-moz-box-shadow: 0px 0px 45px 5px rgba(256,256,256,1);
box-shadow: 0px 0px 45px 5px rgba(256,256,256,1);
}

.h3{
-webkit-box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
-moz-box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
}


.down{
width: 120px;
height: 120px;
border-radius: 60px;
margin-left: -60px;
top:1420px;
opacity: 0;
transition: all .5s ;

}

.rond2 img{
position: absolute;
left: 21px;
top:27px;
}

.rond2.press img{
animation: bounce 0.3s  linear infinite alternate;
}
.rond1 img{
position: absolute;
left: 27px;
top:21px;
}
.rond1.press img{
animation: bounce_left 0.3s  linear infinite alternate;
}

.rond3 img{
position: absolute;
left: 32px;
top:21px;
}
.rond3.press img{
animation: bounce_right 0.3s  linear infinite alternate;
}

@keyframes bounce{
from {top: 24px;}
to   {top: 30px;}
}

@keyframes bounce_left{
from {left: 24px;}
to   {left: 30px;}
}

@keyframes bounce_right{
from {left: 35px;}
to   {left: 29px;}
}


.main{
position: relative;
z-index: 2;
width: 100%;
height: 100%;

perspective: 1320px;
}

.overlay{
position: relative;
z-index: 10;
pointer-events: none;
width: 100%;
height: 100%;
margin: 0 auto;

-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.logo{
position: absolute;
top: 30px;
left: 30px;
}

.bloc_speed{
position: absolute;
bottom: 30px;
right: 30px;
}

.speed .number{
display: inline-block;
vertical-align: middle;
width: 44px;
height: 58px;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}

.speed .fst{
background-image: url('../img/number/0.png');
}

.speed .snd{
margin-left: -15px;
background-image: url('../img/number/0.png');
}

.speed .thd{
margin-left: -15px;
background-image: url('../img/number/0.png');
}

.speed .km{
display: inline-block;
vertical-align: bottom;
}

.line_speed{
width: 100%;
height: 8px;
border-radius: 20px;
margin-top: 20px;
background-color: #09d0fa;
/* overflow: hidden; */
}

.jauge_speed{
display: block;
width: 50%;
height: 100%;
background-color: #ff0065;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 0 0 30px 10px rgba(255,0,101,0.5);
}

.bloc_score{
position: absolute;
top: 30px;
right: 30px;
}

.score .number{
display: inline-block;
vertical-align: middle;
width: 44px;
height: 58px;
margin-left: -15px;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
color: white;
font-size: 42px;
text-align: right;
font-family: helvetica,arial;
}

.score .zer{
background-image: url('../img/number/0.png');  
}

.score .fst{
background-image: url('../img/number/0.png');  
}

.score .snd{
background-image: url('../img/number/0.png');
}

.score .thd{
background-image: url('../img/number/0.png');
}

.score .for{
background-image: url('../img/number/0.png');
}

.score .five{
background-image: url('../img/number/0.png');
}

.score .pts{
display: inline-block;
vertical-align: bottom;
}

.gradient{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: -moz-linear-gradient(left, rgba(54,69,86,1) 0%, rgba(0,0,0,0) 50%, rgba(69,63,74,1) 100%);
background: -webkit-linear-gradient(left, rgba(54,69,86,1) 0%,rgba(0,0,0,0) 50%,rgba(69,63,74,1) 100%);
background: linear-gradient(to right, rgba(54,69,86,1) 0%,rgba(0,0,0,0) 50%,rgba(69,63,74,1) 100%);
}

.movie_back,canvas{
width: auto;
height: 100%;
position: absolute;
top: 0;
left: 50%;
z-index: 0;

transform: translateX(-50%);
}

.content_infos{
display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
width: 65%;
height: 60%;
background: rgba(44,50,56,0.98);
box-shadow: -20px 20px 60px 0 rgba(0,0,0,0.4);
border-radius: 10px;
text-align: center;

transform: translate(-50%, -50%);
}

.content_infos{
display: block;
width: auto;
min-width: 40%;
height: auto;
padding: 60px 30px;
display: none;
}

.content_infos .bloc_txt{
width: 60%;
margin: 0 auto;
line-height: 14px;
}

.content_infos .bloc_form{
width: 80%;
margin: 60px auto 0 auto;
}

.content_infos strong{
font-size: 22px;
color: #fff;
font-weight: bold;
line-height: initial;
display: block;
margin: 0 auto;
}

.content_infos span{
display: block;
margin-top: 10px;
font-size: 12px;
color: #fff;
}

.btn_launch{
position: absolute;
top: 50%;
left: 50%;
z-index: 1000;
padding: 30px 60px;
border-radius: 100px;
border: none;
outline: none;
color: #fff;
box-shadow: 0px 10px 30px 0 rgba(0,0,0,0.3);
background-color: #5fc4fc;
cursor: pointer;
text-align: center;

transform: scale(0.8) translate(-60%, -60%);
transform-origin: 50% 50%;
transition: transform 300ms ease;
}

.btn_launch:hover,
.btn_launch.size{
	transition: transform 300ms ease;
	transform: scale(1) translate(-50%, -50%);
}

.btn_launch.shadow{
	-webkit-box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
-moz-box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
box-shadow: 0px 0px 45px 5px rgba(255,0,101,1);
}

.txt_launch{
	display: none;
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
}

.content_infos .bloc_cta{
margin-top: 60px;
}

.content_infos .cta{
	position: relative;
    top: 0;
	margin: 0 10px;
	padding: 15px 20px;
	border-radius: 50px;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	border: none;
	outline: none;
	color: #fff;
	box-shadow: 0px 10px 30px 0 rgba(0,0,0,0.3);

	transition: all 300ms ease;
}

.content_infos .cta_bleu{
	background-color: #5fc4fc;
}

.content_infos .cta_bleu:hover{
	position: relative;
    top: -5px;
	background-color: #4085aa;
}

.content_infos .cta_rouge{
	background-color: #ff0066;
}

.content_infos .cta_rouge:hover{
	position: relative;
    top: -5px;
	background-color: #ad0042;
}


.title_score{
display: block;
margin: 0 auto -20px auto;
}

.txt_score{
width: 80%;
margin: 10px auto 0 auto;
color: #fff;
font-size: 12px;
letter-spacing: -0.25px;
line-height: 20px;
text-transform: uppercase;
}

.before_gif{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

.gif_back{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}


@media screen and (max-width: 1024px){

	.content_logo{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(54,69,86,1) 0%, rgba(54,69,86,1) 50%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top, rgba(54,69,86,1) 0%,rgba(54,69,86,1) 50%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(54,69,86,1) 0%,rgba(54,69,86,1) 50%,rgba(0,0,0,0) 100%);
	}

	.logo{
	display: block;
	position: initial;
	top: initial;
	left: initial;
	margin: 20px auto;
	transform: scale(0.8);
	}

	.content_infos_bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,0.4);
	text-align: center;
	}

	.bloc_score,
	.bloc_speed{
	display: inline-block;
	vertical-align: middle;
	position: initial;
	top: initial;
	right: initial;
	left: initial;
	bottom: initial;
	width: 40%;
	margin: 20px;
	transform: scale(0.6);
	}

	.speed .snd,
	.speed .thd{
	margin-left: -5px;
	}

	.gradient{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(top, rgba(54,69,86,1) 0%, rgba(0,0,0,0) 50%, rgba(69,63,74,1) 100%);
	background: -webkit-linear-gradient(top, rgba(54,69,86,1) 0%,rgba(0,0,0,0) 50%,rgba(69,63,74,1) 100%);
	background: linear-gradient(to bottom, rgba(54,69,86,1) 0%,rgba(0,0,0,0) 50%,rgba(69,63,74,1) 100%);
	}


	.content_infos{
	display: none;
	width: 85%;
	height: auto;
	padding: 40px 20px;
	}

	.content_infos .bloc_txt{
	width: 80%;
	margin: 0 auto;
	line-height: 14px;
	}

	.content_infos .bloc_cta{
	margin-top: 30px;
	}


	.btn_launch{
		width: 60%;
		padding: 20px 30px;

		transform: scale(1) translate(-50%, -50%);
	}

	.btn_launch img{
		width: 80%;
	}

	.txt_launch{
		font-size: 20px;
	}

}


@media screen and (max-width: 640px){

	.game{
	top: 60%;
	transform: rotateX(60deg) translate(-50%, -50%) scale(0.7);
	}

	.overlay{
	pointer-events: none;
	z-index: 10;
	}

	.content_logo{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(54,69,86,1) 0%, rgba(54,69,86,1) 50%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top, rgba(54,69,86,1) 0%,rgba(54,69,86,1) 50%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(54,69,86,1) 0%,rgba(54,69,86,1) 50%,rgba(0,0,0,0) 100%);
	}

	.logo{
	display: block;
	position: initial;
	top: initial;
	left: initial;
	margin: 20px auto;
	transform: scale(0.8);
	}

	.content_infos_bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,0.4);
	}

	.bloc_score,
	.bloc_speed{
	text-align: center;
	float: none;
	clear: both;
	display: inline-block;
	width: 48%;
	margin: 20px auto;
	position: initial;
	top: initial;
	right: initial;
	left: initial;
	bottom: initial;

	transform: scale(0.85);
	}

	.score .number{
	width: 23px;
	height: 37px;
	margin-left: -10px;
	}


	.speed .number{
	width: 24px;
	height: 38px;
	}

	.line_speed{
	margin-top: 10px;
	}

	.gradient{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(top, rgba(54,69,86,1) 0%, rgba(0,0,0,0) 50%, rgba(69,63,74,1) 100%);
	background: -webkit-linear-gradient(top, rgba(54,69,86,1) 0%,rgba(0,0,0,0) 50%,rgba(69,63,74,1) 100%);
	background: linear-gradient(to bottom, rgba(54,69,86,1) 0%,rgba(0,0,0,0) 50%,rgba(69,63,74,1) 100%);
	}

	.rond{
	transform: scale(1);
	}

	.content_infos{
	display: none;
	width: 90%;
	padding: 30px 15px;
	overflow: auto;
	}

	.content_infos .bloc_txt{
	width: 90%;
	margin: 0 auto 20px auto;
	line-height: 14px;
	}

	.content_infos span{
	display: block;
	width: 80%;
	margin: 10px auto 0 auto;
	font-size: 12px;
	color: #fff;
	}

	.content_infos .bloc_cta{
	margin-top: 40px;
	}

	.content_infos .cta{
	width: 90%;
	display: block;
	margin: 20px auto;
	}

	.btn_launch{
		width: 80%;
	}

}

	canvas{
	width:100% !important;
	height:100% !important;
	position: absolute;
	}