body {
	font-family: 'Roboto Slab', serif;
	background: url(../img/bg.jpg);
	line-height: 1.8em;
	}

h1, h2, h3, h4, h5, h6 {

	}

h3.titre {
	color:  #C14047;
	font-weight: 400;
	font-size: 200%;
	margin: 0 0 1em 0;
}

.info {
	color:     #BBBDC0;
}

.sticker {
	background:  #C14047;
	color:white;
	text-align: center;
	border-radius: 100%;
	position: absolute;
	right:5vw;
	margin-top: -5vh;
	flex: 0 0 100%;
	width: 15vw;
	height: 15vw;
	font-size: 2vw;
	padding:.5em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1em;
	font-weight: 900;
	transform: rotateZ(10deg);
	transition: .5s ease-in-out transform;
}

.sticker:hover {
	text-decoration: none;
	color:white;
	transform: scale(1.1);
}

/* EN TETE ET NAVIGATION
*****************************************************************************************/

#header {
	width:  60vw;
	margin: 2vh auto 0;
	}

#logo {
	width:             60vw;
	aspect-ratio:      12/3;
	display:           block;
	background:        url(../img/logo.svg);
	background-repeat: no-repeat;
	background-size:   contain;
	}

#nav {
	border-top:      1px solid #BBBDC0;
	border-bottom:   1px solid #BBBDC0;
	padding:         1em 0;
	font-family:     "Roboto Condensed";
	font-size:       1.4vw;

	}

#nav .gutter {
	display:         flex;
	justify-content: space-between;
	}

#nav a {
	color:            #BBBDC0;
	align-self:       center;
	transition:       .2s ease transform, 2s ease color;
	transform-origin: center center;
	}

#nav a.active {
	color:       #C14047;
	transform:   scale(1.3);
	font-weight: bold;
	}

#nav a:hover {
	transform:       scale(1.3);
	text-decoration: none;
	color:           #C14047;
	}


.btn-mobile-menu {
	display: none;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#header {
		width: 70vw;
		}
	
	#logo {
		width: 70vw;
		}
	
.btn-mobile-menu {
		display:  block;
		position: absolute;
		right:    10px;
		top:      30px;
		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:        #C14047;
		}
	.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 {
		perspective: 800px;
		position:    absolute;
		top:         0;
		left:       0;
		width:       100vw;
		height:      100vh;
		transform-origin:            left center;
		transform-style:             preserve-3d;
		transform:                   translateZ(-1px) rotateY(-90deg);
		transition:                  1s transform ease-in-out;
		}
	
	#nav {

		position:                    absolute;
		top:                         0;
		left:                        0;
		width:                       100vw;
		height:                      100vh;
		background-color:            #C14047;
		background: url(../img/bg-menu.jpg);
		transform-origin:            left center;
		transform-style:             preserve-3d;
		transform:                   translateZ(-1px) rotateY(-90deg);
		transition:                  1s transform ease-in-out;
		
		box-shadow:                  20px 0px 100px rgba(0,0,0,.7);
		-webkit-backface-visibility: hidden; /* Safari */
		backface-visibility:         hidden;
		}
	
	#nav .gutter {
		display:                     flex;
		flex-direction:              column;
		justify-content:             center;
		width:                       100vw;
		height:                      80vh;
		}
	
	.nav-on #nav-wrapper {
		z-index: 10000;
		transform: translateZ(0) rotateY(0deg);
		}
	
	.nav-on #nav {
		/*transform: rotateY(0deg);*/
		transform: translateZ(0) rotateY(0deg);
		}
	
	#nav a {
		color:     #BBBDC0;
		font-size: 5vw;
		margin:    1em 0;
		}
	
	#nav a.active {
		color: white
		}
	}

/* PAGE
*****************************************************************************************/
#page {
	width:      80vw;
	display: flex;
	justify-content: space-between;
	margin:     4vh auto 0;
	flex-wrap: wrap;
	}

.col {
	margin: 2em auto;
flex: 0 0 100%;
}

.col.small {
	flex: 0 0 32%
}

.col.big {
	flex: 0 0 66%;
}

.col {
	flex: 0 0 100%
}

#map {
	width: 100%;
	aspect-ratio: 1;
}

.sl-wrapper .sl-close {
	color:white
}

.item {
	width: 50vw;
	margin: 0 auto 4em;
	display: flex;
	justify-content: space-between;
	padding: 0 0 1em 0;
	background: #f9f9f9;
	padding: 1em;
	align-self: flex-start;
	border-radius: 8px;
}

.item:last-child {
	border-bottom: 0;
}

.item:hover {
	text-decoration: none;
}

.item .texte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex:0 0 70%
}

.item .visuel {

	flex:0 0 30%;
	margin: 0 30px;
}

.item .visuel img {
	width: 100%;
}

.detail .visuel, .item .visuel img {
	width: 100%;
	box-shadow: 0 10px 20px rgba(0,0,0,.5);
}


#accueil .visuel {
	width: 100%;
	border-radius: 10px;
}

#accueil .col h4 {
	font-family: "Roboto Condensed";
	font-size: 150%;
	color: #BBBDC0;
	text-align: center;
	}

#accueil .col.evenements a {
	display: block;
	text-align: center;
	margin: 2em 0 2em;
	}

#accueil .col.evenements a:hover {
	text-decoration: none;
	}
#accueil .col.evenements h5 {
 font-size:100%;
	color:		#BBBDC0;
	margin-bottom: .5em;
	}
#accueil .col.evenements h3 {
	font-size: 150%;
	color:  #C14047;
	}

.button {
	margin:2em 0;
	display:block;
	width: fit-content;
	color:white;
	background-color:  #C14047;
	padding: .2em 1em;
	text-align: center;
	font-weight: 900;
	font-family: "Roboto Condensed", sans;
	border-radius: 8px;
}

.button:hover {
	color:white;
	text-decoration: none;
}

#pagination {
	flex:0 0 100%;
	display: flex;
	justify-content: center;
}

#pagination li {
	margin: 0 .5em;
	font-family: "Roboto Condensed", sans;
}

#pagination a {
	display: inline-block;
	color:black;
	background-color: silver;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
}

#pagination span {
	display: inline-block;
	color:white;
	background-color:  #C14047;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
}


@media screen and (min-device-width: 320px) and (max-width: 768px) {

	#page {
		flex-wrap: wrap;
		width: 90vw;
	}

	.col.small, .col.big {
		flex: 0 0 100%;
		margin-bottom: 5vh;
	}

	.item {
		width: 100%;
	}

	#accueil .visuel {
		height: auto;
		align-self: flex-start;
	}

	.sticker {
		width: 20vw;
		height: 20vw;
		font-size: 3vw;
	}

	.thumb {
		flex: 0 0 45%
	}
	
	#accueil .col.evenements h5 {
		font-size: 80%;
		}
}

/* À PROPOS
*****************************************************************************************/
.galerie {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	}

.thumb {
	flex : 0 0 30%;
	display: inline-block;
	border-radius: 8px;
	}

.thumb img {
	width: 100%;
	}


/* COUPS DE COEUR
*****************************************************************************************/

#coups_de_coeur #page {
	justify-content: center;
	}

.coup_de_coeur.item {
	flex:0 0 20%;
	width: auto;
	margin: 1em;
	background-color: transparent;
	}

.coup_de_coeur.item .visuel {
	flex: 0 0 100%;
	display: flex;
	justify-content: center;
	}

.coup_de_coeur.item .visuel img {
	height: 20vh;
	width: auto;
	
	}

#filter {
	flex: 0 0 100%;
	font-family: "Roboto Condensed", sans;
	color:#333;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1em;
	}

#filter a {
	margin: 0 .5em;
	color:#BBBDC0;
	font-size:       1.4vw;
	}

#filter a.sel {
	color:#C14047;
	font-weight: bold;
	}


@media screen and (min-device-width: 320px) and (max-width: 768px) {
	  #filter {
		  flex-direction: column;
		  text-align: center;
		  }
	
	#filter a {
		font-size:    24px;
		margin-bottom: .5em;
		}
	
	.coup_de_coeur.item {
		  flex:0 0 100%;
		}
	
	.coup_de_coeur.item .visuel {
		margin: 0;
		}
	
	.coup_de_coeur.item .visuel img {
		width: 50vw;
		height: auto;
		margin: 0;
		}
	}

/* EVENEMENTS
*****************************************************************************************/
.no-results {
	padding: 10vh;
	font-family: "Roboto Condensed", sans;
	color:silver;
	text-align:center;
	flex:0 0 100%
	}

/* PIED DE PAGE
*****************************************************************************************/
#footer {
	width:           50vw;
	margin:          2vh auto 0;
	border-top:      1px solid #BBBDC0;
	border-bottom:   1px solid #BBBDC0;
	display:         flex;
	justify-content: space-between;
	padding:         1em 0 0;
	flex-wrap:       wrap;
	}

#footer h4 {
	font-family: "Roboto Condensed";
	font-size:   150%;
	color:       #BBBDC0;
	}

#footer a {
	color:      black;
}

#footer > div {
	flex:       0 0 30%;
	font-size:  80%;
	text-align: center;
	}

#credits {
	width:       100vw;
	margin:      2vh auto 0;
	color:       silver;
	font-family: "Roboto Condensed", sans;
	font-size:   12px;
	padding:     0 2em;
	text-align:  right;
	}


#credits a {
	color: silver;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#footer {
		width: 70vw;
		}
	
	#footer > div {
		flex:   0 0 100%;
		margin: 1vh 0;
		}
	
	#credits {
		margin:     5vh 0;
		text-align: center;
		}
		
	}