html, body{
	margin: 0;
	font-family: 'Alegreya', serif;
}
h1, nav a, .sous-titre, aside.mobile li span.extended_parts, aside.mobile li span.return{
	font-family: 'Diplomata SC', serif;
	text-align: center;
	font-size: 16px;
	line-height: 40px;
}
h1{
	color: #66ccff;
	text-decoration: underline;
	overflow-wrap: break-word;
}
#login{
	text-align: center;
	margin-top: 10%;
}
nav li, li span.extended_parts{
	list-style-type: none;
	width: 100%;
	border-bottom: 2px solid #ffffff;
}
nav li:last-child, aside li:last-child span.extended_parts{
	border: none;
}
nav a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #ffffff;
	background-color: #66ccff;
}
section, .extended_content{
	padding: 10px 10px 0 10px;
}
section:last-child{
	padding-bottom: 10px;
}
#jour-j{
	text-align: center;
}
section img{
	width: 100%;
}
.sous-titre{
	display: block;
	color: #66cc66;
}
#trajet, #hebergement, #liste, #remerciements{
	text-align: center;
}
#trajet p, #trajet ul, #hebergement p, #liste p, #remerciements p{
	text-align: left;
}
#trajet ul li{
	margin-left: 10%;
}
#trajet a, #trajet a:focus, #trajet a:visited, #hebergement a, #hebergement a:focus, #hebergement a:visited, #liste a, #liste a:focus, #liste a:visited, #remerciements a, #remerciements a:focus, #remerciements a:visited{
	color: #66ccff;
}
aside.mobile{
	margin-top: 30px;
}
aside.mobile>ul>li{
	list-style-type: none;
	position: relative;
	overflow: hidden;
	height: 42px;
}
li span.extended_parts, li span.return{
	display: block;
	color: #ffffff;
	background-color: #66cc66;
	position: relative;
}
li span.return{
	margin-bottom: 4px;
}
li span.extended_parts{
	z-index: 2;
}
li span.extended_parts:after{
	content: "+";
	position: absolute;
	right: 0.4%;
}
li span.return:after{
	content: "-";
	position: absolute;
	right: 0.4%;
}
li span.extended_parts:hover, li span.return:hover{
	cursor: pointer;
}
li .extended_content{
	margin: 2px 0;
}
li .extended_content img{
	width: 100%;
}
li ul.extended_content li{
	margin-left: 8%;
}
#galerie{
	overflow: hidden;
}
#galerie ul{
	height: 100%;
	width: auto;
	white-space: nowrap;
	position: relative;
	left: 0;
}
#galerie li{
	display: inline-block;
	list-style-type: none;
	vertical-align:top;
}
#left, #right{
	position: absolute;
	top: 45%;
	width: 20px;
	cursor: pointer;
	z-index: 1;
}
#left{
	left: 15px;
	display : none ;
}
#right{
	right: 15px;
}
.contact{
	display: none;
}
@media screen and (min-width: 500px) and (max-width: 800px){
	nav{
		position: fixed;
		width: 250px;
		height: 100%;
		background-color: #66ccff;
	}
	nav li:last-child{
		border-bottom: 2px solid #ffffff;
	}
	section, aside{
		margin-left: 250px;
	}
	.contact{
		display: block;
		font-family: 'Alegreya', serif;
		color: #ffffff;
		text-indent: 5px;
		position: absolute;
		top: 85%;
		width: 100%;
	}
	.contact a{
		font-family: 'Alegreya', serif;
	}
}
@media screen and (min-width: 801px){
	nav{
		width: 100%;
		background-color: #66ccff;
		text-align: center;
		position: fixed;
		z-index: 3;
		border-bottom: 2px solid #ffffff;
		padding: 8px 0;
	}
	nav li{
		display: inline-block;
		border-bottom: none;
		margin-right: -3px;
		width: auto;
	}
	nav li:last-child{
		margin-right: 0;
	}
	nav a{
		width: auto;
		border-left: 2px solid #ffffff;
		padding: 0 9px;
		line-height: 16px;
	}
	nav li:last-child a{
		border-right: 2px solid #ffffff;
	}
	nav a.active, nav a:hover, nav a:focus{
		background-color: #ffffff;
		color: #66ccff;
	}
	section{
		width: 100%;
		padding: 0 !important;
		height: 750px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		text-align: center;
		overflow: hidden;
	}
	article, aside{
		height: 411px;
		width: 306px;
		padding: 25px 20px 10px 20px;
		margin: auto;
		background-color: #ffffff;
		display: inline-block;
		position: absolute;
		border-width: 2px;
		border-style: solid;
		overflow: hidden;
	}
	article{
		bottom: 50px;
		margin-left: -390px;
		border-color: #66ccff;
	}
	article p+p{
		text-align: justify;
		margin-top: 10px;
	}
	aside{
		top: 90px;
		margin-left: 40px;
		border-color: #66cc66;
	}
	#essentiel{
		background-image: url(../img/fond-essentiel.jpg);
		padding-top: 40px;
		background-position: 0 25px;
		background-attachment: fixed;
	}
	#essentiel article, #essentiel aside, #jourj article, #trajet article, #hebergement aside{
		padding-right: 0;
		width: 321px;
	}
	#essentiel img{
		width: 53%;
	}
	#jourj{
		background-image: url(../img/fond-jourj.jpg);
	}
	h1, .sous-titre{
		margin-bottom: 7px;
		line-height: 16px;
	}
	.sous-titre{
		margin: 5px 0;
	}
	#jourj aside{
		text-align: justify;
		padding-right: 0;
		width: 321px;
	}
	#jourj aside img{
		margin: 5px 0;
	}
	#trajet{
		background-image: url(../img/fond-trajet.jpg);
	}
	#trajet p, #trajet li{
		text-align: justify;
	}
	#trajet aside{
		height: auto;
		padding: 0;
		width: 346px;
	}
	#trajet ul li{
		margin-left: 8%;
	}
	#hebergement{
		background-image: url(../img/fond-hebergement.JPG);
	}
	#hebergement article{
		height: auto;
	}
	#hebergement article a+p{
		margin-top: 25px;
	}
	#hebergement aside{
		text-align: justify;
	}
	#hebergement ul li{
		margin-left: 8%;
	}
	#liste{
		background-image: url(../img/fond-liste.JPG);
	}
	#liste aside{
		height: auto;
		padding-bottom: 25px;
	}
	#photos{
		background-image: url(../img/fond-photos.JPG);
	}
	#photos article{
		width: 706px;
		margin-left: -380px;
		top: 110px;
		bottom: 110px;
		height: auto;
		padding: 25px;
	}
	#galerie{
		height: 480px;
	}
	#galerie img{
		max-width: 706px;
	}
	#left, #right{
		top: 215px;
		width: 50px;
	}
	#left{
		left: 30px;
	}
	#right{
		right: 30px;
	}
	#remerciements{
		background-image: url(../img/fond-remerciement.jpg);
	}
	#remerciements article{
		height: auto;
		padding: 25px;
	}
	#remerciements aside{
		padding: 25px;
	}
	#remerciements p{
		text-align: justify;
	}
	#remerciements img{
		height: 100%;
		width: auto;
	}
}