body {
	font-family: 'Open Sans', sans-serif;
	}

body.nav-on {
	height:     100vh;
	overflow-y: hidden;
	}


#wrapper {
	padding: 0 10vw;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#wrapper {
		width: 100vw;
		/*padding: 0 4vw;*/
		
		}
	
	body, html {
		max-width: 100vw;
		width: 100vw;
		overflow-x: hidden;
		margin: 0;
		padding: 0;

		}
	}

/* EN-TETE
***************************************************************************************************************/
#header {
	display:         flex;
	justify-content: space-between;
	padding:         3em 0 4em;
	}

#header > div {
	align-content: center;
	}

#logo {
	font-weight:     900;
	text-transform:  uppercase;
	font-size:       2vw;
	color:           #9a5016;
	text-decoration: none;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#header {
		/*width: 90vw;*/
		padding: 1em 0 3em;
		}
	
	#logo {
		font-size: 20px;
		}
	
	body.nav-on #logo {
		color:   white;
		z-index: 1000000;
		}
	}

/* NAVIGATION
***************************************************************************************************************/

#nav {
	
	}

#nav a {
	font-size:       1.4vw;
	display:         inline-block;
	color:           black;
	text-decoration: none;
	font-weight:     100;
	padding:         .2em 0 0 0em;
	margin-left: 2em;
	}

#nav a.selected {
	color:       #9a5016;
	font-weight: 700;
	border-bottom: 4px solid #9a5016
	}


@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	.btn-mobile-menu {
		display:  block;
		position: absolute;
		right:    0px;
		top:      10px;
		width:    40px;
		height:   40px;
		}
	
	.btn-mobile-menu.open:before {
		font:         normal normal normal 14px/1 FontAwesome;
		content:      '\f0c9';
		margin-right: .5em;
		width:        1em;
		font-size:    30px;
		display:      inline-block;
		color:        #9a5016;;
		}
	
	.btn-mobile-menu.close {
		z-index: 20000;
		}
	
	.btn-mobile-menu.close:before {
		font:         normal normal normal 14px/1 FontAwesome;
		content:      '\f00d';
		margin-right: .5em;
		width:        1em;
		font-size:    30px;
		display:      inline-block;
		color:        white;
		
		}
	
	#nav-wrapper {
		position:   fixed;
		top:        0;
		left:       0;
		width:      100vw;
		height:     100vh;
		visibility: hidden;
		}
	
	#nav {
		position:                absolute;
		top:                     0;
		left:                    0;
		width:                   100vw;
		height:                  100vh;
		background-color:        rgba(154, 80, 22, 0.75);;
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter:         blur(20px);
		display:                 flex;
		flex-direction:          column;
		justify-content:         center;
		align-content:           center;
		flex-wrap:               wrap;
		}
	
	#nav .gutter {
		display:         flex;
		flex-direction:  row;
		flex-wrap:       wrap;
		justify-content: center;
		width:           100vw;
		height:          100vh;
		}
	
	.nav-on #nav-wrapper {
		z-index:    10000;
		visibility: visible;
		}
	
	#nav a {
		color:      white;
		font-size:  6vw;
		display:    block;
		text-align: center;
		padding:    1em 0 0 0;
		margin: 0 0 1em 0;
		}
	
	#nav a.selected {
		color:       white;
		font-weight: 900;
		border-bottom: 0
		}
	
	#nav a.active {
		color: white
		}
		
		
	}

/* UI
*************************************************************/
.button {
	color:#9a5016;
	border-color: #9a5016;
	border-radius: 10px;
	border-width: 2px;
	padding: .5em 2em;
	margin: .5em 0;
	transition: .5s all ease;
	}

.button:hover {
	color: white;
	background-color: #9a5016;
	text-decoration: none;
	}

/* GALERIE
 */

.sl-overlay {
	background-color:        #56260b;
	opacity: .9;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter:         blur(20px);
	}

.sl-wrapper .sl-close {
	color:white
	}
/* PIED DE PAGE
***************************************************************************************************************/

#credits {
	opacity: .7;
	font-size: 12px;
	text-align: right;
	padding: 5em 0;

	font-weight: 100;
	color: #9a5016;
	}

#credits a {
	font-weight: 500;
	color: #9a5016;
	}

/* SOUTIENS
***************************************************************************************************************/

#soutiens.logos  img {
	width: 10vw;
	margin: 20px 20px 20px 0;
}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#soutiens.logos  img {
		width: 25vw;
	}
}