html {
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
	overflow-x: hidden;
	overflow-y: hidden;
}
@font-face {
	font-family: "ppetrial";
	src: url('font/PPETRIAL.ttf');
}
body{
	margin: 0%;
	overflow-x: hidden;
	overflow-y: hidden;
}
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#8cccd9; /* change if the mask should be a color other than white */
	z-index:99; /* makes sure it stays on top */
}

#status {
	height:100%;
	width: 100%;
}
#loading {
	-webkit-animation: rotation 10s infinite linear;
	animation: rotation 10s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}
@keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}
#textAlert{
	line-height: 1.8em; 
	padding: 20px; 
	background-image:url('img/tableau.png');
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size: cover;
	font-family: ppetrial;
	color: white;
	text-align:center;
	width: 60%;
	margin-left: 20%;
}
#flecheAlert{
	position: absolute;
	-webkit-animation-name: flecheAlertAnim; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
    animation-name: flecheAlertAnim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@-webkit-keyframes flecheAlertAnim {
    0%   {width: 100px; height: 100px;}
    50%  {width: 150px; height: 150px;}
    100% {width: 100px; height: 100px;}
}

/* Standard syntax */
@keyframes flecheAlertAnim {
    0%   {width: 100px; height: 100px;}
    50%  {width: 150px; height: 150px;}
    100% {width: 100px; height: 100px;}
}
#flecheDroiteMOBILE {
	display: none;
	background-image: url( 'img/touchR.png' );
    background-size: 100% 100%;
	position: fixed; 
	z-index: 5; 
	margin-top: 1%;
	margin-left: 35%;
	height: 50px;
	width: 50px;
}
#flecheGaucheMOBILE {
	display: none;
	background-image: url( 'img/touchL.png' );
    background-size: 100% 100%;
	position: fixed; 
	z-index: 5; 
	margin-top: 1%;
	margin-left: 10%;
	height: 50px;
	width: 50px;
}
#flecheDroite:active {
  background-color: #000000;
}
#flecheGauche:active {
  background-color: #000000;
}
.fd1{
	position: absolute;
	z-index: 1;
	width: 3500px;
	height: 100%;
}
.fd2{
	position: absolute;
	z-index: 1;
	margin-left: 3500px;
	width: 3500px;
	height: 100%;
}
.fd2b{
	position: absolute;
	z-index: 4;
	margin-left: 6500px;
	width: 1000px;
	height: 1000px;
}
.fd3{
	position: absolute;
	z-index: 1;
	margin-left: 7000px;
	width: 3500px;
	height: 100%;
}
.fd3b{
	position: absolute;
	z-index: 3;
	margin-left: 7000px;
	width: 3400px;
	height: 13%;
}
.fd4{
	position: absolute;
	z-index: 1;
	margin-left: 10500px;
	width: 3500px;
	height: 100%;
}
.fd5{
	position: absolute;
	z-index: 1;
	margin-left: 14000px;
	width: 3500px;
	height: 100%;
}
.fd5b{
	position: absolute;
	z-index: 4;
	margin-left: 17050px;
	width: 1000px;
	height: 1000px;
}
.fd6{
	position: absolute;
	z-index: 1;
	margin-left: 17500px;
	width: 3500px;
	height: 100%;
}
.logo{
	position: absolute;
	z-index: 2; 
	margin-top: 5%;
	height: 50%;
}
.logo2{
	position: absolute;
	z-index: 2;
	margin-left: 17820px;
	margin-top: 5%;
	height: 50%;
}
#btn_logo2{
	display: none;
}
.twitter{
	position: absolute;
	z-index: 3;
	margin-left: 18090px;
	width: 60px;
	height: 60px;
}
#btn_twitter{
	display: none;
}
.linkedin{
	position: absolute;
	z-index: 3;
	margin-left: 18190px;
	width: 60px;
	height: 60px;
}
#btn_linkedin{
	display: none;
}
.google{
	position: absolute;
	z-index: 3;
	margin-left: 18290px;
	width: 60px;
	height: 60px;
}
#btn_google{
	display: none;
}
.check1{
	position: absolute;
	z-index: 3;
	margin-left: 1850px;
	height: 20%;
}
.check2{
	position: absolute;
	z-index: 3;
	margin-left: 3360px;
	height: 20%;
}
.check3{
	position: absolute;
	z-index: 3;
	margin-left: 5040px;
	height: 20%;
}
.check4{
	position: absolute;
	z-index: 3;
	margin-left: 7730px;
	height: 20%;
}
.check5{
	position: absolute;
	z-index: 3;
	margin-left: 9830px;
	height: 20%;
}
.check6{
	position: absolute;
	z-index: 3;
	margin-left: 16895px;
	height: 20%;
}
.note1{
	position: absolute;
	z-index: 2;
	margin-left: 2150px;
	margin-top: 5%;
	height: 30%;
}
.note2{
	position: absolute;
	z-index: 2;
	margin-left: 2250px;
	height: 30%;
}
.note3{
	position: absolute;
	z-index: 2;
	margin-left: 3700px;
	margin-top: 3%;
	height: 60%;
}
.maison1{
	position: absolute;
	z-index: 2;
	margin-left: 5500px;
	margin-top: 1%;
	width: 50%;
	height: 72%;
}
#btn_maison1{
	display: none;
}
.maison2{
	position: absolute;
	z-index: 2;
	margin-left: 5430px;
	margin-top: 1%;
	width: 50%;
	height: 72%;
}
#btn_maison2{
	display: none;
}
.maison3{
	position: absolute;
	z-index: 2;
	margin-left: 5430px;
	margin-top: 5%;
	width: 90%;
	height: 90%;
}
#btn_maison3{
	display: none;
}
.note5{
	position: absolute;
	z-index: 2;
	margin-left: 8700px;
	margin-top: 5%;
	height: 55%;
}
.note6{
	position: absolute;
	z-index: 2;
	margin-left: 15400px;
	margin-top: 5%;
	height: 50%;
}
.pause{
	position: fixed;
	z-index: 6;
	margin-left: 1%;
	margin-top: 1%;
	height: 10%;
}
#keys{
	position: absolute;
	z-index: 3;
	height: 25%;
}

.perso{
	position: absolute;
	z-index: 2;
	height: 32.6%;
}
.perso2{
	position: absolute;
	z-index: 4;
	margin-top: -150px;
	width: 480px;
	height: 480px;
}
.bateau1{
	display: block;
	position: absolute;
	z-index: 5;
	margin-left: 10300px;
	width: 480px;
	height: 480px;
}
.bateau2{
	display: block;
	position: absolute;
	z-index: 5;
	margin-left: 16300px;
	width: 480px;
	height: 480px;
}
#cadre{
    position:absolute;
    width: 20px;
    height: 20px;
    background: red;
	z-index: 3;
}
#myBtn:hover,
#myBtn:focus {
    cursor: pointer;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 6; /* Sit on top */
    padding-top: 0; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
#fd_modal{
	position: absolute;
	left: 28%;
	width: 43%;
	height: 95%
}
/* Modal Content */
#modal-button {
	position: absolute;
	margin-left: 28.5%;
    padding: 0px;
    width: 43%;
	height: 95%
}
#modal-button-h1
{
	color: white;
	margin-top: 9%;
	font-size: 5em;
}
#btn_pause{
	margin-bottom: 5px;
	width: 250px;
	height: 90px;
}
#btn_pause:hover,
#btn_pause:focus {
    cursor: pointer;
}
.close{
	margin-top: 5%;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}
#modal-checkpoint {
	display: none;
	position: absolute;
	margin-left: 28.5%;
    padding: 0px;
    width: 43%;
	height: 95%
}
#modal-checkpoint-h1
{
	color: white;
	margin-top: 9%;
	font-size: 4.5em;
}
#btn_checkpoint{
	margin-bottom: 5px;
	height: 100px; 
	width: 100px;
}
#btn_checkpoint:hover,
#btn_checkpoint:focus {
    cursor: pointer;
}
#modal-checkpoint-table{
	border-collapse: separate;
	border-spacing: 60px 10px;
	color: white;
	font-size: 2em;
	text-align:center;
}
.retour-checkpoint{
	width: 250px;
	height: 90px;
}
.retour-checkpoint:hover,
.retour-checkpoint:focus {
    cursor: pointer;
}

#modal-parametre {
	display: none;
	position: absolute;
	margin-left: 28.5%;
    padding: 0px;
    width: 43%;
	height: 95%
}
#modal-parametre-h1
{
	color: white;
	margin-top: 9%;
	font-size: 4.5em;
}
#btn_ckeckpoint{
	margin-bottom: 5px;
	width: 250px;
	height: 90px;
}
#modal-parametre-table{
	width : 70%;
	border-collapse: separate;
	border-spacing: 10px 5px;
	color: white;
	font-size: 2em;
	text-align:center;
}
.retour-parametre{
	width: 250px;
	height: 90px;
}
.retour-parametre:hover,
.retour-parametre:focus {
    cursor: pointer;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dc6465;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #65dc64;
}
input:focus + .slider {
  box-shadow: 0 0 1px #65dc64;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

.slidecontainer {
    width: 100%;
}
.slider-long {
    -webkit-appearance: none;
    width: 100%;
    height: 35px;
    background: #dc6465;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider-long:hover {
    opacity: 1;
}
.slider-long::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 35px;
    background: #65dc64;
    cursor: pointer;
}
.slider-long::-moz-range-thumb {
    width: 25px;
    height: 35px;
    background: #65dc64;
}
/*animations*/

/******************
* Bounce in right *
*******************/


.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

.bounceInUp{
    opacity:0;
    -webkit-transform: translateX(400px); 
    transform: translateX(400px); 
}
.fadeInUp{
    opacity:0;
    -webkit-transform: translateX(400px); 
    transform: translateX(400px); 
}
/******************
* Bounce in up *
*******************/

@-webkit-keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateY(400px); 
    } 
    60% { 
       
        -webkit-transform: translateY(-30px); 
    } 
    80% { 
        -webkit-transform: translateY(10px); 
    } 
    100% {
        opacity: 1;
         
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        
        transform: translateY(400px); 
    } 
    60% { 
       
        transform: translateY(-30px); 
    } 
    80% { 
        transform: translateY(10px); 
    } 
    100% {
        opacity: 1;
         
        transform: translateY(0); 
    } 
} 

.bounceInUp.go { 
    -webkit-animation-name: bounceInUp; 
    animation-name: bounceInUp; 
}

/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(-2000px); 
    } 
} 
@keyframes fadeOutUp { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(-2000px); 
    } 
} 
.fadeOutUp.goAway { 
    -webkit-animation-name: fadeOutUp; 
    animation-name: fadeOutUp; 
}

/********SVG1******/

#svgAttributes{
	position: absolute;
	display: none;
	margin-left: 5430px;
	z-index: 2;
	width: 42%;
}
#svgAttributes2{
	position: absolute;
	display: none;
	margin-left: 5630px;
	z-index: 2;
	width: 42%;
}
#svgAttributes3{
	position: absolute;
	display: none;
	margin-left: 5830px;
	z-index: 2;
	width: 42%;
}


@keyframes pulseSvgClose {
	0% {
		display: block;
	}
	100% {
		display: none;
	}
}
#titre{
	opacity: 0;
}
#titreOpen{
	animation: pulseTitreOpen 3s 1;
}
@keyframes pulseTitreOpen {
	0% {
		letter-spacing: -4;
		opacity: 0;
	}
	45% {
		letter-spacing: -4;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#titreClose{
	animation: pulseTitreClose 3s 1;
	opacity: 0;
}
@keyframes pulseTitreClose {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -4;
		opacity: 0;
	}
	100% {
		letter-spacing: -4;
		opacity: 0;
	}
}

#text{
	opacity: 0;
}
#textOpen{
	animation: pulseTextOpen 3s 1;
}
@keyframes pulseTextOpen {
	0% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	45% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#textClose{
	animation: pulseTextClose 4s 1;
	opacity: 0;
}
@keyframes pulseTextClose {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -1;
		opacity: 0.5;
	}
	20% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	100% {
		letter-spacing: -1.5;
		opacity: 0;
	}
}

#lien{
	opacity: 0;
}
#lienOpen{
	animation: pulseLienOpen 3s 1;
}
#lienOpen:hover{
	fill: blue;
	cursor: pointer;
}
@keyframes pulseLienOpen {
	0% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	45% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#lienClose{
	animation: pulseLienClose 3s 1;
	opacity: 0;
}
@keyframes pulseLienClose {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	100% {
		letter-spacing: -1.2;
		opacity: 0;
	}
}
#IMG{
	opacity: 0;
}
#OpenIMG{
	animation: pulseImgOpen 3s 1;
}
@keyframes pulseImgOpen {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#CloseIMG{
	animation: pulseImgClose 3s 1;
	opacity: 0;
}
@keyframes pulseImgClose {
	0% {
		opacity: 1;
	}
	35% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/********SVG2******/

#svgAttributes2{
	position: absolute;
	display: none;
	margin-left: 5630px;
	z-index: 2;
	width: 42%;
}

@keyframes pulseSvgClose2 {
	0% {
		display: block;
	}
	100% {
		display: none;
	}
}
#titre2{
	opacity: 0;
}
#titreOpen2{
	animation: pulseTitreOpen2 3s 1;
}
@keyframes pulseTitreOpen2 {
	0% {
		letter-spacing: -4;
		opacity: 0;
	}
	45% {
		letter-spacing: -4;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#titreClose2{
	animation: pulseTitreClose2 3s 1;
	opacity: 0;
}
@keyframes pulseTitreClose2 {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -4;
		opacity: 0;
	}
	100% {
		letter-spacing: -4;
		opacity: 0;
	}
}

#text2{
	opacity: 0;
}
#textOpen2{
	animation: pulseTextOpen2 3s 1;
}
@keyframes pulseTextOpen2 {
	0% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	45% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#textClose2{
	animation: pulseTextClose2 4s 1;
	opacity: 0;
}
@keyframes pulseTextClose2 {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -1;
		opacity: 0.5;
	}
	20% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	100% {
		letter-spacing: -1.5;
		opacity: 0;
	}
}

#lien2{
	opacity: 0;
}
#lienOpen2{
	animation: pulseLienOpen2 3s 1;
}
#lienOpen2:hover{
	fill: blue;
	cursor: pointer;
}
@keyframes pulseLienOpen2 {
	0% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	45% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#lienClose2{
	animation: pulseLienClose2 3s 1;
	opacity: 0;
}
@keyframes pulseLienClose2 {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	100% {
		letter-spacing: -1.2;
		opacity: 0;
	}
}
#IMG2{
	opacity: 0;
}
#OpenIMG2{
	animation: pulseImgOpen2 3s 1;
}
@keyframes pulseImgOpen2 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#CloseIMG2{
	animation: pulseImgClose2 3s 1;
	opacity: 0;
}
@keyframes pulseImgClose2 {
	0% {
		opacity: 1;
	}
	35% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/********SVG3******/

#svgAttributes3{
	position: absolute;
	display: none;
	margin-left: 5830px;
	z-index: 2;
	width: 42%;
}


@keyframes pulseSvgClose3 {
	0% {
		display: block;
	}
	100% {
		display: none;
	}
}
#titre3{
	opacity: 0;
}
#titreOpen3{
	animation: pulseTitreOpen3 3s 1;
}
@keyframes pulseTitreOpen3 {
	0% {
		letter-spacing: -4;
		opacity: 0;
	}
	45% {
		letter-spacing: -4;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#titreClose3{
	animation: pulseTitreClose3 3s 1;
	opacity: 0;
}
@keyframes pulseTitreClose3 {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -4;
		opacity: 0;
	}
	100% {
		letter-spacing: -4;
		opacity: 0;
	}
}

#text3{
	opacity: 0;
}
#textOpen3{
	animation: pulseTextOpen3 3s 1;
}
@keyframes pulseTextOpen3 {
	0% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	45% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#textClose3{
	animation: pulseTextClose3 4s 1;
	opacity: 0;
}
@keyframes pulseTextClose3 {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -1;
		opacity: 0.5;
	}
	20% {
		letter-spacing: -1.5;
		opacity: 0;
	}
	100% {
		letter-spacing: -1.5;
		opacity: 0;
	}
}

#lien3{
	opacity: 0;
}
#lienOpen3{
	animation: pulseLienOpen3 3s 1;
}
#lienOpen3:hover{
	fill: blue;
	cursor: pointer;
}
@keyframes pulseLienOpen3 {
	0% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	45% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	100% {
		letter-spacing:0;
		opacity: 1;
	}
}
#lienClose3{
	animation: pulseLienClose3 3s 1;
	opacity: 0;
}
@keyframes pulseLienClose3 {
	0% {
		letter-spacing: 0;
		opacity: 1;
	}
	20% {
		letter-spacing: -1.2;
		opacity: 0;
	}
	100% {
		letter-spacing: -1.2;
		opacity: 0;
	}
}
#IMG3{
	opacity: 0;
}
#OpenIMG3{
	animation: pulseImgOpen3 3s 1;
}
@keyframes pulseImgOpen3 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
#CloseIMG3{
	animation: pulseImgClose3 3s 1;
	opacity: 0;
}
@keyframes pulseImgClose3 {
	0% {
		opacity: 1;
	}
	35% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}