html, 
body {
    height: 100%;
    width: 100%;
    /*overflow: hidden; */
    margin:0;
}

@media (orientation: landscape) {
	.bg {
		background-image: url("bureau_guides_belleville-val_thorens-les_menuires-saint_martin-ete-hiver-paysage.jpg");
	}
	
	.bdg-ete,
	.bdg-hiver {
		position: fixed;
		height: 80%;
		width: 25%;
	}
	
	.bdg-ete {
		bottom: 10%;
		left:10%;
	}
	
	.bdg-hiver {
		top: 10%;
		right: 10%;
	}
	
	.bdg-choix-saison {
		top: 50%;
	}
	
	.bdg-logos {
		max-height: 70%;
	}

	@media (max-height: 699px) {
		.bdg-3stations {
			height: 8%;
		}
	}
	
	@media (min-height: 700px) {
		.bdg-3stations {
			height: 15%;
		}
	}	
	
}

@media (orientation: portrait) {
	.bg {
		background-image: url("bureau_guides_belleville-val_thorens-les_menuires-saint_martin-ete-hiver-portrait.jpg");
	}
	
	.bdg-ete,
	.bdg-hiver {
		position: fixed;
		height: 50%;
		width: 40%;
	}
	
	.bdg-ete {
		top: 5%;
		left:10%;
	}
	
	.bdg-hiver {
		bottom: 5%;
		right: 10%;
	}
	
	.bdg-choix-saison {
		top: 40%;
	}
	
	.bdg-logos {
		height: 50%;
	}

	.bdg-3stations IMG {
		max-width: 80%;
	}
	
}


body {	
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	text-align: center;
}


.bg {
	background-color: #ffffff;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: fixed;
	height: 100vh;
	width: 100vw;
}

H2 {
	font-size: 8vmin;
	margin: 0;
}

IMG {
	border: none;
	margin: 5px;
}

A, A:hover {
	text-decoration: underline dotted;
}

.bdg-ete,
.bdg-ete A,
.bdg-ete A:hover {
	color: white;
	text-shadow: -1px 0 rgb(59, 36, 22), 0 1px rgb(59, 36, 22), 1px 0 rgb(59, 36, 22), 0 -1px rgb(59, 36, 22);
}

.bdg-hiver,
.bdg-hiver A,
.bdg-hiver A:hover {
	color: rgb(20,20,20);
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.bdg-choix-saison,
.bdg-choix-saison P {
	position: fixed;
	width: 300px;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	color: white;
	text-shadow: -1px 0 rgb(59, 36, 22), 0 1px rgb(59, 36, 22), 1px 0 rgb(59, 36, 22), 0 -1px rgb(59, 36, 22);
	font-size: 3vmin;
	background: rgb(0,0,0,0.3);
	text-align: center;
}

.bdg-3stations {
	position: fixed;
	bottom: 0vw;
	background-color: rgba(240,240,240,0.7);
	width: 100vw;
	z-index: 15;
}

.bdg-3stations IMG {
	max-height: 100%;
}

.infos-container {
	position: absolute;
	width: 100%;
	top: 100vh;
	z-index: 10;
}

.infos {
	background-color: rgba(240,240,240,1);
	margin: 0 auto;
	text-align: left;
	color: rgb(59, 36, 22);
	font-size: 8mm;
	width: 600px ;
}

@media only screen and (max-width: 650px) {
	.infos {
		width: 90vw ;
	}
}

.infos H1,
.infos H2,
.infos H3,
P {
	margin: 5px;
}

.infos H1 {
	font-size: 100%;
	margin: 5px;
	text-align: center;
}

.infos H2,
.infos H2 A {
	text-align: center;
	font-size: 80%;
	margin:10px;
	border-top: solid 1px black;
	padding-top: 10px;
	clear: both;
	color: rgb(59, 36, 22);
}

H3,
H3 A {
	font-size: 60%;
	word-spacing: 400%;
	text-transform: uppercase;
	float: left;
	clear: both;
	margin: 0 10px;
	color: rgb(59, 36, 22);
}

H3 A:hover,
H2 A:hover {
	color: rgb(0, 112, 183);
}

P {
	font-size: 50%;
	font-weight: 400;
	text-align: justify;
	margin: 0 5px;
	min-height: 50px;
}