@import url('https://fonts.googleapis.com/css?family=Marcellus+SC');
@import url('https://fonts.googleapis.com/css?family=Cinzel');

@media all and (min-width:801px) {
	
	body {
		background-color:#000;
		padding:0px;
		margin:0px;
	}
	#fond {
		width:100%;
		height:100%;
		display:none;
	}
	#conteneur {
		padding:40px;
		padding-top:20px;
	}
	#entete {
		display:block;
	}
	#corps {
		display:block;
		float:left;
		width:60%;
		margin-top:6vh;
		margin-bottom:10px;
	}
	#details {
		display:block;
		float:right;
		width:20%;
		text-align:center;
	}
	#pied {
		display:block;
		position:fixed;
		bottom:0px;
		width:100%;
		height:70px;
		background-color:rgba(10,10,10,0.8);
		border-top:1px solid #222;
	}
	#piedgauche {
		width:50%;
		float:left;
	}
	#pieddroit {
		text-align:right;
	}
	#separebas {
		height:100px;
	}
	#corps p {
		margin-left:60px;
		margin-right:40px;
		font-family:Cinzel;
		text-align:left;
		color:#FFFFFF;
	}
	#menuliste {
		display:block;
		float:left;
		width:20%;
	}
	#menuliste ul {
		font-family:"Marcellus SC";
		text-align:left;
		list-style:none;
		margin:0;
		padding:0;
		border:0px;
	}
	#menuliste li {
		border-bottom:1px solid #222;
		line-height:35px;
		margin:0;
	}
	#menuliste li a {
		display:block;
		padding:10px;
		border-left:10px solid #444;
		text-decoration:none;
		width:auto;
	}
	#menuliste li a:hover {
		background-color:rgba(255,255,255,0.5);
		color:#fff;
	}
	#menunormal {
		background-color:rgba(20,20,20,0.8);
		text-shadow: 1px 1px 8px #aaa;
		color:#ccc;
	}
	#menuchoisi {
		background-color:rgba(230,200,100,0.5);
		text-shadow: 2px 1px 8px #fff;
		color:#fff;
	}
	#menuselect {
		display:none;
	}
	#textetitre {
		font-family:Cinzel;
		font-size:40px;
		color:#fff;
		text-shadow: 5px 5px 10px #000;
		display:none;
	}
	#textecorps {
		font-family:Cinzel;
		font-size:12px;
		padding:20px;
		color:#fff;
		text-shadow: 0px 0px 2px #000;
	}
	#textedetails {
		background-color:rgba(50,0,50,0.6);
		font-family:Cinzel;
		font-weight:normal;
		font-size:12px;
		padding:30px;
		color:#fff;
		text-shadow: 0px 0px 15px #000;
		border-bottom:1px solid #304;
		border-right:1px solid #304;
		border-radius:10px;
		display:none;
	}
	#textepied {
		font-family:Cinzel;
		font-size:12px;
		padding:20px;
		padding-bottom:0px;
		color:#fff;
	}
	#photo {
		display:block;
		float:left;
		width:17vw;
		height:17vw;
		margin-left:7vw;
		margin-bottom:7vw;
		border: 1px solid #867;
		-moz-box-shadow: 8px 8px 12px #000;
		-webkit-box-shadow: 8px 8px 12px #000;
		box-shadow: 8px 8px 12px #000;
		filter:progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=12);
		zoom:1;
	}
	#formulaire {
		font-family:Cinzel;
		font-size:14px;
		color:#fff;
		width:90%;
		margin-left:5%;
		text-align:left;
	}
	#submit {
		font-family:Cinzel;
		font-size:16px;
		padding:5px;
	}
	form input,textarea {
		font-size:14px;
		line-height:20px;
		color:#fff;
		background:rgba(20,20,20,0.8);
		width:100%;
		border:1px solid #666;
		border-radius:0;
		-webkit-appearance:none;
		margin-bottom:10px;
	}
	#diaporama {
		display:block;
		float:left;
		width:35vw;
		height:35vw;
		margin-left:10vw;
		margin-bottom:80px;
		border: 1px solid #867;
		-moz-box-shadow: 8px 8px 12px #000;
		-webkit-box-shadow: 8px 8px 12px #000;
		box-shadow: 8px 8px 12px #000;
		filter:progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=12);
		position:relative;
		zoom:1;
	}
	#diaporama img {
		left:0;
		top:0;
		width:100%;
		height:100%;
		position:absolute;
	}
	#planacces {
		width:95%;
		height:40vw;
		border:1px solid #505;
	}
	#streetview {
		width:95%;
		height:40vw;
		border:1px solid #505;
		margin-bottom:100px;
	}
	.lettrine{
		font-size:60px;
		font-weight:bold;
	}
	.important {
		color:#f05;
	}
	.imgdetails {
		width:90%;
		margin:10px;
	}
	a:link, a:visited {
		color:#E6C864;
		text-decoration:none;
	}
	a:hover {
		color:#fff;
		text-decoration:none;
	}
}

@media all and (max-width:800px) and (min-width:601px) {
	
	body {
		background-color:#000;
		padding:0px;
		margin:0px;
	}
	#fond {
		width:100%;
		height:100%;
		display:none;
	}
	#conteneur {
		text-align:center;
	}
	#entete {
		padding-top:20px;
		display:block;
	}
	#corps {
		display:block;
		float:left;
		width:70%;
		padding-top:5vh;
		padding-bottom:5vh;
	}
	#details {
		display:block;
		float:left;
		width:88vw;
		padding-bottom:100px;
		padding-left:5vw;
		text-align:center;
	}
	#pied {
		display:block;
		position:fixed;
		bottom:0px;
		width:100%;
		height:70px;
		background-color:rgba(10,10,10,0.9);
		border-top:1px solid #222;
	}
	#piedgauche {
		width:50%;
		float:left;
	}
	#pieddroit {
		text-align:right;
	}
	#corps p {
		margin:20px;
		font-family:Cinzel;
		text-align:left;
		color:#FFFFFF;
	}
	#details p {
		margin:0px;
		margin-bottom:20px;
	}
	#menuliste {
		display:block;
		float:left;
		width:30%;
	}
	#menuliste ul {
		font-family:"Marcellus SC";
		text-align:left;
		list-style:none;
		margin:0;
		padding:0;
		border:0px;
	}
	#menuliste li {
		border-bottom:1px solid #222;
		line-height:40px;
		margin:0;
	}
	#menuliste li a {
		display:block;
		padding:10px;
		border-left:10px solid #444;
		text-decoration:none;
		width:auto;
	}
	#menuliste li a:hover {
		background-color:rgba(255,255,255,0.5);
		color:#fff;
	}
	#menunormal {
		background-color:rgba(20,20,20,0.8);
		text-shadow: 1px 1px 8px #aaa;
		color:#ccc;
	}
	#menuchoisi {
		background-color:rgba(230,200,100,0.5);
		text-shadow: 2px 1px 8px #fff;
		color:#fff;
	}
	#menuselect {
		display:none;
	}
	#textetitre {
		font-family:Cinzel;
		font-size:40px;
		color:#fff;
		text-shadow: 5px 5px 10px #000;
		display:none;
	}
	#textecorps {
		font-family:Cinzel;
		font-size:16px;
		padding:20px;
		color:#fff;
	}
	#textedetails {
		background-color:rgba(50,0,50,0.6);
		font-family:Cinzel;
		font-weight:normal;
		font-size:12px;
		padding:20px;
		color:#fff;
		text-shadow: 0px 0px 15px #000;
		border-bottom:1px solid #304;
		border-right:1px solid #304;
		border-radius:10px;
	}
	#textepied {
		font-family:Cinzel;
		font-size:12px;
		padding:20px;
		padding-bottom:0px;
		color:#fff;
	}
	#photo {
		display:inline-block;
		float:left;
		width:25vw;
		height:25vw;
		margin-left:6vw;
		margin-bottom:6vw;
		border: 1px solid #867;
		-moz-box-shadow: 8px 8px 12px #000;
		-webkit-box-shadow: 8px 8px 12px #000;
		box-shadow: 8px 8px 12px #000;
		filter:progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=12);
		zoom:1;
	}
	#diaporama {
		display:block;
		float:left;
		width:50vw;
		height:50vw;
		margin-left:10vw;
		margin-bottom:6vw;
		border: 1px solid #867;
		-moz-box-shadow: 8px 8px 12px #000;
		-webkit-box-shadow: 8px 8px 12px #000;
		box-shadow: 8px 8px 12px #000;
		filter:progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=12);
		position:relative;
		zoom:1;
	}
	#diaporama img {
		left:0;
		top:0;
		width:100%;
		height:100%;
		position:absolute;
	}
	#formulaire {
		font-family: Cinzel;
		font-size: 14px;
		color: #fff;
		width: 90%;
		margin-left: 5%;
		text-align: left;
	}
	form input,textarea {
		font-size:14px;
		line-height:20px;
		color:#fff;
		background:rgba(20,20,20,0.8);
		width:100%;
		border:1px solid #666;
		border-radius:0;
		-webkit-appearance:none;
		margin-bottom:10px;
	}
	
	#planacces {
		width:100%;
		height:60vw;
		border:1px solid #505;
	}
	#streetview {
		width:100%;
		height:60vw;
		border:1px solid #505;
	}
	.lettrine{
		font-size:60px;
		font-weight:bold;
	}
	.important {
		color:#f05;
	}
	.imgdetails {
		width:20%;
		margin:10px;
	}
	a:link, a:visited {
		color:#E6C864;
		text-decoration:none;
	}
	a:hover {
		color:#fff;
		text-decoration:none;
	}
}

@media all and (max-width:600px) {
	
	body {
		background-color:#000;
		padding:0px;
		margin:0px;
	}
	#fond {
		width:100%;
		height:100%;
		display:none;
	}
	#conteneur {
		text-align:center;
	}
	#entete {
		display:block;
		padding-top:20px;
	}
	#corps {
		display:block;
		width:100%;
		padding-top:15px;
	}
	#details {
		display:block;
		float:left;
		padding-top:12vw;
		padding-bottom:100px;
		padding-left:5vw;
		width:88vw;
		text-align:center;
	}
	#pied {
		display:block;
		position:fixed;
		bottom:0px;
		width:100%;
		height:70px;
		background-color:rgba(10,10,10,0.9);
		border-top:1px solid #222;
	}
	#piedgauche {
		width:50%;
		float:left;
	}
	#pieddroit {
		text-align:right;
	}
	#corps p {
		margin:20px;
		margin-top:40px;
		font-family:Cinzel;
		text-align:left;
		color:#FFFFFF;
	}
	#details p {
		margin:0px;
		margin-bottom:20px;
	}
	#menuliste {
		display:none;
	}
	#menuselect select {
		display:block;
		padding:5px;
		margin-left:10%;
		font-family:Cinzel;
		font-size:20px;
		color:#fff;
		background:rgba(20,20,20,0.8);
		width:80%;
		border:1px solid #666;
		border-radius:0;
		-webkit-appearance:none;
	}
	#textetitre {
		font-family:Cinzel;
		font-size:40px;
		color:#fff;
		text-shadow: 5px 5px 10px #000;
		display:none;
	}
	#textecorps {
		font-family:Cinzel;
		font-size:16px;
		padding:20px;
		color:#fff;
	}
	#textedetails {
		background-color:rgba(50,0,50,0.6);
		font-family:Cinzel;
		font-weight:normal;
		font-size:12px;
		padding:20px;
		color:#fff;
		text-shadow: 0px 0px 15px #000;
		border-bottom:1px solid #304;
		border-right:1px solid #304;
		border-radius:10px;
	}
	#textepied {
		font-family:Cinzel;
		font-size:12px;
		padding:20px;
		padding-bottom:0px;
		color:#fff;
	}
	#photo {
		display:inline-block;
		width:70vw;
		height:70vw;
		margin-top:12vw;
		border: 1px solid #867;
		-moz-box-shadow: 8px 8px 12px #000;
		-webkit-box-shadow: 8px 8px 12px #000;
		box-shadow: 8px 8px 12px #000;
		filter:progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=12);
		zoom:1;
	}
	#diaporama {
		display:inline-block;
		width:70vw;
		height:70vw;
		margin-top:12vw;
		border: 1px solid #867;
		-moz-box-shadow: 8px 8px 12px #000;
		-webkit-box-shadow: 8px 8px 12px #000;
		box-shadow: 8px 8px 12px #000;
		filter:progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=12);
		position:relative;
		zoom:1;
	}
	#diaporama img {
		left:0;
		top:0;
		width:100%;
		height:100%;
		position:absolute;
	}
	#formulaire {
		font-family: Cinzel;
		font-size: 14px;
		color: #fff;
		width: 90%;
		margin-left: 5%;
		text-align: left;
	}
	form input,textarea {
		font-size:14px;
		line-height:20px;
		color:#fff;
		background:rgba(20,20,20,0.8);
		width:100%;
		border:1px solid #666;
		border-radius:0;
		-webkit-appearance:none;
		margin-bottom:10px;
	}
	#planacces {
		width:100%;
		height:80vw;
		border:1px solid #505;
	}
	#streetview {
		width:100%;
		height:80vw;
		border:1px solid #505;
	}
	.lettrine{
		font-size:60px;
		font-weight:bold;
	}
	.important {
		color:#f05;
	}
	.imgdetails {
		width:40%;
		margin:10px;
	}
	a:link, a:visited {
		color:#E6C864;
		text-decoration:none;
	}
	a:hover {
		color:#fff;
		text-decoration:none;
	}
}