html{
	overflow-x: hidden;
}
.logo{
	z-index: 2;
	position: relative;
	width: 50%;
	margin-left: 25%;
	margin-top: 2%;
}
.pause{
	position: fixed;
	z-index: 6;
	margin-left: 1%;
	margin-top: 1%;
	height: 10%;
}
.phare{
	z-index: 3;
	position: absolute;
	width: 80%;
	margin-left: -40%;
	margin-top: 150%;
}
.port{
	z-index: 1;
	position: absolute;
	width: 99%;
	margin-left: 2%;
	margin-top: 172.4%;
}
.twitter{
	z-index: 1;
	position: absolute;
	margin-left: 38%;
	margin-top: 29%;
	width: 4%;
}
.linkedin{
	z-index: 1;
	position: absolute;
	margin-left: 47.5%;
	margin-top: 29%;
	width: 4%;
}
.google{
	z-index: 1;
	position: absolute;
	margin-left: 57%;
	margin-top: 29%;
	width: 4%;
}
#myBtn:hover,
#myBtn:focus {
    cursor: pointer;
}
.nuage{
	z-index: 1;
	position: absolute;
}
#nuageG1{
	margin-left: 5%;
	margin-top: 5%;
	width: 12%;
	height: 19%;
}
#nuageG2{
	margin-left: 20%;
	margin-top: 20%;
	width: 10%;
	height: 13%;
}
#nuageG3{
	margin-left: 10%;
	margin-top: 50%;
	width: 12%;
	height: 15%;
}
#nuageG4{
	margin-left: 5%;
	margin-top: 95%;
	width: 12%;
	height: 15%;
}
#nuageD1{
	margin-left: 5%;
	margin-top: 12%;
	width: 12%;
	height: 15%;
}
#nuageD2{
	margin-left: 2%;
	margin-top: 33%;
	width: 12%;
	height: 15%;
}
#nuageD3{
	margin-left: -8%;
	margin-top: 63%;
	width: 10%;
	height: 15%;
}
#nuageD4{
	margin-left: -8%;
	margin-top: 63%;
	width: 10%;
	height: 15%;
}
#nuageD5{
	margin-left: 10%;
	margin-top: 85%;
	width: 10%;
	height: 15%;
}
.ptero{
	z-index: 1;
	position: absolute;
}
#pteroG1{
	margin-left: 5%;
	margin-top: 30%;
	width: 7%;
	height: 9%;
}
#pteroG2{
	margin-left: 15%;
	margin-top: 80%;
	width: 7%;
	height: 9%;
}
#pteroD1{
	margin-left: 5%;
	margin-top: 60%;
	width: 8%;
	height: 10%;
}
.mouette{
	z-index: 1;
	position: absolute;
}
#mouetteG1{
	margin-left: 20%;
	margin-top: 110%;
	width: 7%;
	height: 9%;
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
#mouetteD1{
	margin-left: 0%;
	margin-top: 120%;
	width: 8%;
	height: 10%;
}
.note1{
	z-index: 2;
	position: relative;
	margin-left: 20%;
	margin-top: 5%;
	width: 50%;
}
.note2{
	z-index: 2;
	position: relative;
	margin-left: 30%;
	width: 50%;
}
.note3{
	z-index: 2;
	position: relative;
	margin-left: 27.5%;
	margin-top: 5%;
	width: 45%;
}
.note4{
	z-index: 2;
	position: relative;
	margin-left: 27.5%;
	margin-top: 5%;
	width: 45%;
}
.note5{
	z-index: 2;
	position: relative;
	margin-left: 32.5%;
	margin-top: 5%;
	width: 35%;
}
.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: 5%;
	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;
}