body, html {
    overflow:hidden;
}
#jeu, .page-node-type-jeu .header, .poi, .poi a, .footer, #introduction, .panneau, .volet, #conclusion {
    position:absolute;
}
#jeu, .page-node-type-jeu .header, #introduction {
    top:0;
    left:0;
}
#conclusion {
    top:0;
    right:0;
}
#jeu {
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    background-image:url('../images/jpg/jeu_plage.jpg');
    width:100%;
    height:100%;
    overflow:hidden;
}
#jeu ul {
    list-style: none;
    padding:0;
}
.page-node-type-jeu .header {
    z-index:11;
    width:100%;
    height:40%;
    max-height:500px;
    padding-top:30px;
    background-image:linear-gradient(to bottom,  rgba(0,81,154,1) 0%, rgba(0,81,154,0) 100%);
    color:#fff;
    font-size:16px;
    text-shadow: 2px 2px 5px rgba(0,0,0,.5);
}
.page-node-type-jeu .header, .footer a, .panneau h2, .volet h2, .fermer, #conclusion {
    font-family: 'Oswald', sans-serif;
}
.page-node-type-jeu .header, .footer a, .fermer, #conclusion h2 {
    text-transform:uppercase;
}
h1 {
    margin-top:60px;
    font-size:48px;
}
h2 {
    line-height:1.3em;
    font-size:30px;
}
.poi {
    height:100%;
    width:100%;
    z-index:5;
}
.n1 {
    top:55%;
    left:7%;
}
.n2 {
    top:51%;
    left:54%;
}
.n3 {
    top:62%;
    left:31%;
}
.n4 {
    top:58%;
    left:85%;
}
.n5 {
    top:43%;
    left:30%;
}
.n6 {
    top:50%;
    left:40%;
}
.n7 {
    top:0;
    left:0;
}
.n8 {
    top:70%;
    left:70%;
}
.poi a {
    cursor:pointer;
}
.poi a:hover img {
    height:80px;
    width:80px;
    margin-left:-10px;
    margin-top:-10px;
    background-size:80px 80px;
    background-repeat:no-repeat;
    background-position:center;
    background-image:url('../images/svg/picto_polluant_on.svg');
}

.poi a.vu img {
    opacity:0;
}
.poi a.vu {
    height:100px;
    width:100px;
    margin-left:-10px;
    margin-top:-10px;
    display:block;
    background-size:100px 100px;
    background-image:url('../images/png/bouton_chien.png');
    background-repeat:no-repeat;
    background-position:center;
}
.poi a.vu:hover {
    height:110px;
    width:110px;
    background-size:110px 110px;
}
.poi a.n1.vu {
    background-image:url('../images/png/bouton_crastes.png');
}
.poi a.n2.vu {
    background-image:url('../images/png/bouton_maison.png');
}
.poi a.n3.vu {
    background-image:url('../images/png/bouton_bateau.png');
}
.poi a.n4.vu {
    background-image:url('../images/png/bouton_chien.png');
}
.poi a.n5.vu {
    background-image:url('../images/png/bouton_hap.png');
}
.poi a.n8.vu {
    background-image:url('../images/png/bouton_pesticides.png');
}


.path-node .footer:before {
    content:'';
    position:absolute;
    display:block;
    top:-20px;
    height:21px;
    width:100%;
    background-image:url('../images/svg/courbe_cyan.svg');
    background-repeat:no-repeat;
    background-color:transparent;
    background-size:100%;
    background-position:bottom;
}
.path-node .footer {
    background-color:#008bb0;
    width:100%;
    z-index:20;
    bottom:0;
    color:#fff;
    padding-bottom:7px;
    padding-top:0;
}
.footer ul {
    list-style: none;
}
.footer ul, .footer p {
    padding:0;
    margin:0;
}
.footer ul:first-child, .footer p {
    margin:9px 0;
}
.footer ul:first-child li:first-child {
    border-right:1px solid #fff;
    padding-right:10px;
    margin-right:7px;
}
.footer ul:nth-child(2) {
    margin-bottom:6px;
    margin-top:-2px;
}
.footer li {
    display:inline-block;
}
.footer a {
    text-decoration:none;
    color:#fff;
    white-space:nowrap;
}
#introduction, .introduction-cover  {
    height:100%;
    width:100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    background-image:url('../images/jpg/jeu_accueil.jpg');
    overflow: hidden;
}
#introduction  {
    z-index:10;
}
/*.introduction-cover  {
    z-index:11;
    position:absolute;
    -webkit-transition: -webkit-transform 12s 0.2s cubic-bezier(0.44, 0.185, 0.575, 0.86);
    transition: transform 12s 0.2s cubic-bezier(0.44, 0.185, 0.575, 0.86);
}
.introduction-cover:hover {
    -webkit-transform: scale(1.15) rotate(0.01deg);
    -ms-transform: scale(1.15) rotate(0.01deg);
    transform: scale(1.15) rotate(0.01deg);
}*/

.panneau {
    z-index:12;
    max-width:380px;
    padding:40px;
    background-color:rgba(255,255,255,.6);
    left:calc(50% - 190px);
    top:300px;
}
.panneau h2 {
   margin-top:0;
}
.panneau p {
   margin:15px 0 30px;
}
.volet, #conclusion {
    width:80%;
    max-width:900px;
    right:0;
    background-color: rgba(18,115,161,.95);
    height:100%;
    color:#fff;
    -webkit-box-shadow: 10px 10px 20px #000;
    -moz-box-shadow: 10px 10px 20px #000;
    box-shadow: 10px 10px 20px #000;
    padding:0 30px;
}
.volet {
    z-index:15;
}
#n4 .media_player img, #n3 .media_player img {
    width:100%;
}
#conclusion {
    z-index:16;
}
.engagement {
   	max-width:640px;
    margin:90px auto;
}
#conclusion .engagement {
    margin:0 auto;
    position:relative;
    top:30%;
}
.engagement .form-submit {
    display:block;
    max-width:160px;
    margin:30px auto;
    font-size:20px;
    padding:10px;
    height:auto;
}
.engagement h2 {
    font-weight:300;
    padding-right:80px;
    padding-left:80px;
}
/*#n1 {
    z-index:13;
}*/
.form-submit:hover {
    border:1px solid #00519A;
}
.media_player {
    padding:30px 0;
    text-align:center;
}
.fermer {
    font-size:20px;
    position: absolute;
    top:15px;
    right:15px;
    cursor:pointer;
}
.fermer span:first-child {
    font-size:14px;
    font-weight:300;
    display:block;
}
.volet, #conclusion {
    display:none; 
    overflow-y:scroll; 
}
.media_player img:hover, .volet p a:hover {
    opacity:1;
}
.media_player img {
    opacity:.6;
}
.volet p a, #conclusion p a {
    color:#fff;
    text-decoration:none;
    opacity:.7;
}
#conclusion p {
    font-size:24px;
    font-weight:300;
}
#n1_picto, #n2_picto, #n3_picto, #n4_picto, #n5_picto, #n8_picto {
	height:250px;
	width:250px;
	position:absolute;
    margin-top:50px;
    margin-left:-150px;
    z-index:30;
    display:none;
}
@media screen and (max-height:768px) {
	#introduction {
		overflow-y:scroll;
	}
	h1 {
		margin-top:30px;
	}
	.panneau {
		top:240px;
		width:50%;
		max-width:50%;
		margin:auto;
	}
}
@media screen and (max-height:600px) {
	h1 {
		font-size: 32px;
	}
	.panneau {
		top:230px;
		width:80%;
		max-width:80%;
	}
	.engagement h2 {
	    padding-right: 70px;
	    padding-left: 70px;
	    font-size: 24px;
	}
}
@media screen and (max-width:599px) {
	.footer {
		display:none;
	}
	.engagement h2 {
	    padding-right: 30px;
	    padding-left: 30px;
	    font-size: 18px;
	}
	.engagement .form-submit {
		display: block;
		max-width: 160px;
		margin: 30px auto;
		font-size: 16px;
		padding: 10px;
		height: auto;
	}
	#n1_picto, #n2_picto, #n3_picto, #n4_picto, #n8_picto {
	    height: 150px;
	    width: 150px;
	    position: absolute;
	    margin-top: 20px;
	    margin-left: -80px;
	    z-index: 30;
	    display: none;
	}
	#n1_picto img, #n2_picto img, #n3_picto img, #n4_picto img, #n8_picto img {
		width:100%;
		height:100%;
	}
	#conclusion p {
	    font-size: 16px;
	}
	#conclusion .engagement {
	    top: 100px;
	}
}
@media screen and (max-width:599px) and (orientation:portrait) {
	h1 {
		font-size: 32px;
		margin-top:30px;
	}
	.panneau {
		width: 90%;
		max-width:90%;
	}
}