body {margin: 0;
    overflow-x: hidden;
    background-color: #c5a330;
    background-image: url(img/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;}
h3 {color: white;
    font-family:"DK Black Bamboo", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 38px; 
	font-weight:200;}
/* =================================================================== M A P ===============================================================*/
#swiffycontainer {position: relative;
    top: 100px;
    width: 100%;
    height: 1380px;}

#parc {position: relative;
	background-image: url(img/parc.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 133vw;
	width: 90vw;
	margin: 0 auto;
	margin-top: 130px;
	display: none;
	background-position: top center;
	z-index: 0;}

#goprog {bottom: 10%; 
	position: absolute; 
	left: calc(50% - 95px);}
#goprog:hover {bottom: 9%;}

#gobillets {background-color: #341b1f;
	width: 100%;
	height: 160px;
	text-align: center;
	color: white;
	font-family:"DK Black Bamboo", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 2em;
	display: none;
	padding-top: 20px;
    margin-top: -3px;
	}

#goinfos {background-color: #341b1f;
	width: 100%;
	height: 160px;
	text-align: center;
	color: white;
	font-family:"DK Black Bamboo", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 2em;
	display: none;
	margin-top: 30px;
	padding-top: 20px;
	margin-bottom: 30px;
	}
/* =================================================================== / M A P =============================================================*/

/* ================================================================= I L O T S =============================================================*/
.ilot {position: absolute;
    background-size: contain;
    background-repeat: no-repeat;}
#ile1 {top: 880px;
    right: 17%;
    width: 22%;
    height: 250px;
    background-image: url(img/ile_brianjonestownmassacre.png);}
#ile2 {top: 1180px;
    right: 19%;
    width: 15%;
    height: 200px;
    background-image: url(img/ile_blackangels.png);}
#ile3 { top: 1080px;
    left: 15%;
    width: 25%;
    height: 350px;
    background-image: url(img/ile_tameimpala.png);}
.ilot:hover {transform: scale(1.1);}
/* ================================================================= / I L O T S ===========================================================*/




/* =================================================================== R E S P O N S I V E =================================================*/
@media only screen and (max-width: 1280px) {
	#swiffycontainer {height: 115vw; top: 80px;}
	#ile1 {top: 850px; width: 35%; right: 10%;}
	#ile2 {top: 1100px; width: 20%; right: 38%;}
	#ile3 {top: 900px; width: 30%; left: 10%;}
}

@media only screen and (max-width: 1140px) {
	#swiffycontainer {height: 115vw; top: 80px;}
    #ile1 {top: 70vw; width: 35%; right: 10%;}
	#ile2 {top: 92vw; width: 20%; right: 38%;}
	#ile3 {top: 80vw; width: 30%; left: 10%;}
}
	
@media only screen and (max-width: 764px) {
	#swiffycontainer {height: ;}
}

@media only screen and (max-width: 550px) {
    #logo {width: 70vw;
    	height: 70vw;
		max-height:250px;
		margin: 0 auto;
		left: 0px;
		margin-bottom: 20px;
    	top: 130px;
    	position: relative;}
    #swiffycontainer, .ilot {display: none;}
	#parc, #gobillets, #goinfos {display: block;}
}

@media only screen and (max-width: 550px) {
	footer ul {padding: 10px 0px 10px 0px;}
	footer {background-color: #2d9479;}
    footer ul li a:hover {color: #341b1f;}
}