* {margin: 0 auto;}

body {
    background: #c9b031;
    padding: 0;
    margin: 0;}

/* =================================================================== F O N T S ===========================================================*/
@font-face {font-family: 'DK Black Bamboo';
   src: url('../font_commun/DKBlackBamboo.eot') format('eot'),
        url('../font_commun/DKBlackBamboo.woff') format('woff'),
        url('../font_commun/DKBlackBamboo.otf') format('opentype'),
        url('../font_commun/DKBlackBamboo.ttf') format('truetype'),
        url('../font_commun/DKBlackBamboo.svg') format('svg');}



#infos {border-bottom: 2px solid yellow;}
#infos2 {border-bottom: 2px solid #2d9479;}







#btnback {width: 60px;
    display: none;
    height: 60px;
    background-image: url(img/backbtn.png);
    background-size: contain;
    position: fixed;
    left: 60px;
    top: -moz-calc(50vh - 30px);
	top: -webkit-calc(50vh - 30px);
	top: -o-calc(50vh - 30px);
	top: calc(50vh - 30px);
    z-index: 9999;}
#btnback:hover {background-image: url(img/backbtn-hover.png);}

/* =================================================================== L O G O - N A V - C O I N S =========================================*/
#logo {
    position: absolute;
    width: 20vw;
    height: 250px;
    top: 30px;
    margin-left: 50px;
    background-image: url(../img/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;}

.corner {
    background-repeat: no-repeat;
    background-size: contain;
    width: 250px;
    height: 250px;
    bottom: 0px;
    position: fixed;
    z-index: 1;}
#cornerright {
    background-image: url(../img/corner1.png);
    right: 0px;}
#cornerleft {
    background-image: url(../img/corner2.png);
    left: 0px;}

#navun {
    z-index: 900;
	position: absolute;
	color: white;
    margin: 0 auto;
    top: 47px;
    left: 25%;}

#navun nav ul {
	color: white;
	font-family:"DK Black Bamboo", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 38px; 
	font-weight:200;
	list-style-type: none;}

#navun nav ul li {
	display: inline;
	padding: 7px;
	font-family:"DK Black Bamboo", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	color: white;}

.rs {padding: 0px;}

a {text-decoration: none;color: white;}

.rs {padding: 0px;}
.rs:hover{opacity: 0.6;}
a {text-decoration: none; color: white;}
a:hover {color: #341b1f;}*/

#infos {border-bottom: 2px solid yellow;}

#burgermenu nav {top: 50px;}
/*==================================================================== L I E U X ============================================================*/
.lieu {
    width: 60vh;
    height: 30vh;
    position: absolute;
    bottom: 20vh;
    background-size: contain;
    background-repeat: no-repeat;}

#panneau {
    height: 66vh;
    width: 66vh;
    left: calc(50vw - 30vh);}

#spectacles{
    background-image: url(img/spectacles.png);
    left: 20%;}
#camping {
    background-image: url(img/camping.png);
    left: 30%;}
#cantine {
    background-image: url(img/cantine.png);
    left: 40%;}
#plage {
    background-image: url(img/plage.png);
    left: 50%;}
#market {
    background-image: url(img/market.png);
    left: 60%;}
#chill {
    background-image: url(img/chill.png);
    left: 70%;}
#forum {
    background-image: url(img/forum.png);
    left: 80%;}
#parking {
    background-image: url(img/parking.png);
    left: 90%;}

/*==================================================================== I N F O S ==========================================================*/
.infos {
    width: 60vh;
    height: auto;
    position: absolute;
    bottom: 55vh;
    color: #341b1f;
    z-index: 2;
    font-family: sans-serif;
    padding: 10px;
    text-align: center;}

#infspectacles{
    left: 20%;}
#infcamping {
    left: 30%;}
#infcantine {
    left: 40%;}
#infplage {
    left: 50%;}
#infmarket {
    left: 60%;}
#infchill {
    left: 70%;}
#infforum {
    left: 80%;}
#infparking {
    left: 90%;}

h2 {font-size: 2em;}

/*==================================================================== G O V A ===========================================================*/
.car {
    width: 40vh;
    height: 15vh;
    position: fixed;
    left: calc(50% - 20vh);
    bottom: 20vh;
    z-index: 900;
    background-image: url(img/combi.png);
    background-size: contain;
    background-repeat: no-repeat;}

/*=================================================================== H O R I Z O N T A L  S C R O L L ===================================*/
/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll {
  position: fixed;
  bottom: 0;
  left: 0;}
/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */
.horizon{
    background-image: url(img/fond.jpg);
    background-size: contain;
    background-repeat: repeat-x;
    z-index: 1;
    width: 15000px;
    height: 80vh;
    top: 0px;}
.middle{
    z-index: 500;
    width: 10000px;}
.front{
    z-index: 1000;
    width: 15000px;
    height: 20vh;}
#sol{
    width: 15000px;
    height: 20vh;
    background-image: url(img/sol.jpg);
    background-repeat: repeat-x;
    background-size: contain;}
#palmier {
    height: 60vh;
    width: 60vh;
    background-image: url(img/palmier.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: 12%;
    position: absolute;
    bottom: 20vh;
    z-index: 700;}

#scrollgif {background-image: url(img/scroll.png);
    width: 100px;
    height: 100px;
    
    /*top: calc(40vh - 50px);*/
    bottom: 10vh;
    left: calc(95vw - 100px);
    position: absolute;
    background-size: contain;}
/*#pratique {bottom: 1vh; z-index: 999;
    position: absolute;
    height: 18vh;
    width: 100vw;
    text-align: center;}
#ou {background-image: url(img/ou.png);
    width:200px;
    height: 18vh;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;}
#quand {background-image: url(img/quand.png);
    width:200px;
    height: 18vh;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;}*/
/*==================================================================== T E X T E ==========================================================*/
mark { background-color: white;}

h2 {color: #341b1f;
	font-family:"DK Black Bamboo", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 50px; 
	font-weight:200;}

.infos {background-color: rgba(255,255,0,0.7);
    color: #341b1f;
    border-radius: 20px;}


@media only screen and (max-width: 1200px) {
	body {background: #c9b031;
		padding: 0;
		margin: 0;}
}

area {outline-style: none;}

#ouquand {
    background-image: url(img/ouquand.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    width: 100px;
    height: 150px;
    position: fixed;
    left: 0px;
    top: 50vh;
}
#ouquand:hover {top: 51vh; cursor: pointer;}

#infosp {width: 80vw;
    padding-bottom: 20px;
    background-color: rgba(148, 44, 71, 0.9);
    position: fixed;
    color: white;
    text-align: center;
    vertical-align: middle;
    top: calc(50% - 210px);
    left: calc(50% - 40vw);
    font-family: sans-serif;
    z-index: 1000;
    display: none;
    }
#carte {width: 300px;
    max-width: 90%;
    height: 200px;
    background-image: url(img/carte.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: 20px;
}
.infospclose {background-image: url(../img/close-hover.png);
	width: 40px;
	height: 40px;
	position: relative;
	top: 05px;
    left: 0px;
    }
.infospclose:hover {cursor: pointer;
    background-image: url(../img/close.png);}

#infosp h3 {color: #2d9479;
    font-family:"DK Black Bamboo", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 40px; 
	font-weight:200;
    margin-top: 20px;}

#footoir {top: calc(80vh - 250px); position: relative;}


footer {
    z-index: 10;
    position: fixed;
    right: 0px;
    display: none;
    background-color: rgba(52, 27, 31, 0.8);}


footer {
    color: white;
    height: 100vh;
    width: 250px;
    text-align: center;
	font-family: sans-serif;
    font-size: 15px; }

footer ul li{
    font-family: sans-serif;
    font-size: 15px; 
    margin: 0px;
    line-height: 50px;}
footer ul li a:hover {color: rgba(45, 148, 121, 1);}
footer ul {margin: 0px; padding-left: 0px; bottom: 0;}
footer li {display: block;
		height: 20px;}
footer .rs {display: inline-block; margin-top: 20px;}

.foot {z-index: 800;}

#barre {}

#burger, #burgclose {
	top: 340px;
	right: 1%;}
#fleche {z-index: 999;}

@media only screen and (max-width: 550px) {
    #burgermenu {z-index: 999;}
    #flechemini {margin: 0px;}
    ol.sc-trackslist {margin-top: 0px;}
    .sc-player {top: 50px;}
    #barre {display: block;}
    #burgermenu nav {top: 10px;}
    #burger, #burgclose {
	top: 5px;
	right: 5px;}
    footer {display: none; opacity: 0;}
    .car {
    width: 30vh;
    height: 15vh;
    left: calc(50% - 15vh);
    background-position: bottom;}
    #scrollgif {display: none;}
}