html{
	overflow-x: hidden;
}
.logo{
	z-index: 2;
	position: relative;
	width: 91%;
	margin-left: 5%;
	margin-top: 20%;
}
.pause{
	position: fixed;
	z-index: 6;
	margin-left: 1%;
	margin-top: 1%;
	height: 8%;
}
.phare{
	z-index: 3;
	position: absolute;
	width: 100%;
	margin-left: -50%;
	margin-top: 358.5%;
}
.port{
	z-index: 1;
	position: absolute;
	width: 100%;
	margin-left: 4%;
	margin-top: 400%;
}
.twitter{
	z-index: 1;
	position: absolute;
	margin-left: 35%;
	margin-top: 68%;
	width: 6%;
}
.linkedin{
	z-index: 1;
	position: absolute;
	margin-left: 46.5%;
	margin-top: 68%;
	width: 6%;
}
.google{
	z-index: 1;
	position: absolute;
	margin-left: 58%;
	margin-top: 68%;
	width: 6%;
}
#myBtn:hover,
#myBtn:focus {
    cursor: pointer;
}
.nuage{
	z-index: 1;
	position: absolute;
}
#nuageG1{
	margin-left: 20%;
	margin-top: 1%;
	width: 19%;
	height: 17%;
}
#nuageG2{
	margin-left: 1%;
	margin-top: 68%;
	width: 15%;
	height: 13%;
}
#nuageG3{
	margin-left: 5%;
	margin-top: 100%;
	width: 15%;
	height: 15%;
}
#nuageG4{
	margin-left: 5%;
	margin-top: 150%;
	width: 19%;
	height: 15%;
}
#nuageD1{
	margin-left: -20%;
	margin-top: 7%;
	width: 19%;
	height: 15%;
}
#nuageD2{
	margin-left:-5%;
	margin-top: 63%;
	width: 19%;
	height: 15%;
}
#nuageD3{
	margin-left: -8%;
	margin-top: 123%;
	width: 19%;
	height: 15%;
}
#nuageD4{
	margin-left: -8%;
	margin-top: 175%;
	width: 19%;
	height: 15%;
}
#nuageD5{
	margin-left: -10%;
	margin-top: 280%;
	width: 19%;
	height: 15%;
}
.ptero{
	z-index: 1;
	position: absolute;
}
#pteroG1{
	margin-left: 5%;
	margin-top: 35%;
	width: 7%;
}
#pteroG2{
	display: none;
}
#pteroD1{
	margin-left: -5%;
	margin-top: 50%;
	width: 8%;
}
.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: 5%;
	margin-top: 8%;
	width: 75%;
}
.note2{
	z-index: 2;
	position: relative;
	margin-left: 25%;
	width: 75%;
}
.note3{
	z-index: 2;
	position: relative;
	margin-left: 5%;
	margin-top: 5%;
	width: 91%;
}
.note4{
	z-index: 2;
	position: relative;
	margin-left: 5%;
	margin-top: 5%;
	width: 91%;
}
.note5{
	z-index: 2;
	position: relative;
	margin-left: 5%;
	margin-top: 5%;
	width: 91%;
}

.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;
	margin-top: 10%;
	left: 7%;
	width: 85%;
	height: 80%;
	z-index: 7;
}
/* Modal Content */
#modal-button{
	position: absolute;
    padding: 0px;
    margin-top: 10%;
	left: 6%;
	width: 90%;
	height: 80%;
	z-index: 7;
}
#modal-button-h1{
	color: white;
	margin-top: 7%;
	font-size: 4em;
	z-index: 7;
}
#btn_pause{
	margin-bottom: 5px;
	width: 40%;
	z-index: 7;
}
#btn_pause:hover,
#btn_pause:focus {
    cursor: pointer;
}
.close{
	margin-top: 5%;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}