@import url(https://fonts.googleapis.com/css?family=Roboto);

@font-face {
	font-family: 'Bauhaus-Light';
	src: url('fonts/Bauhaus-Light.eot');
	src: local('☺'), url('../mmd/fonts/Bauhaus-Light.woff') format('woff'), url('../mmd/fonts/Bauhaus-Light.ttf') format('truetype'), url('../mmd/fonts/Bauhaus-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	position: absolute;
	text-align: center;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: "Roboto";
}

#content {
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: stretch;
	-moz-align-items: stretch;
	-ms-align-items: stretch;
	-o-align-items: stretch;
	align-items: stretch;
	margin: auto;
	background-color: #444444;
}

#header, #footer {
	background: #333333;
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	-o-flex: 1;
	flex: 1;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	z-index: 500;
}

#header {
	box-shadow: 0 20px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

#footer {
	box-shadow: 0 -20px 38px rgba(0,0,0,0.30), 0 -15px 12px rgba(0,0,0,0.22);
}

#Smart_Pass {
	display: inline;
	padding-left: 2.5%;
	width: 70%;
}

#options, #informations {
	display: inline;
	margin-left: 10%;
	width: 8%;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-ms-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

	#options, #informations {
		height: 100%;
	}

}

.activated {
	-webkit-transform: rotate(22.5deg);
	-moz-transform: rotate(22.5deg);
	-ms-transform: rotate(22.5deg);
	-o-transform: rotate(22.5deg);
	transform: rotate(22.5deg);
}

#menu_option, #menu_POI {
	display: none;
	position: fixed;
	z-index:50;
	width: 100%;
	height: 100%;
	padding-bottom: 10%;
	background-color: #444444;
	box-shadow: 0 20px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

#my_photos_box {
	margin-bottom: 40%;
}

#corps {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-webkit-flex: 10;
	-moz-flex: 10;
	-ms-flex: 10;
	-o-flex: 10;
	flex: 10;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
	z-index: 100;
}

#corps_scroll {
	-webkit-flex: 10;
	-moz-flex: 10;
	-ms-flex: 10;
	-o-flex: 10;
	flex: 10;
	z-index: 100;
}

#corps img, #corps p {
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-self: center;
}

.main, .button, #map {
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	-o-flex: 1;
	flex: 1;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
}

.button {
	background: #444444;
	box-shadow: 0 10px 18px rgba(0,0,0,0.30), 0 8px 6px rgba(0,0,0,0.22);
}

/* ---- Accueil ---- */

#parcours_box {
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-self: center;
	width: 80%;
	border-radius: 2px;
	background-color: #444444;
	box-shadow: 0 20px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

#logo_main {
	width: 50%;
	height: 50%;
}

@-moz-document url-prefix()
{
	#logo_main  {
	width: 65%;
	height: 65%;
	}
}

.box_img {
	width: 28%;
	float: left;
	margin-left: 10%;
	margin-top: 4em;
	margin-bottom: 4em;
}

.box_text {
	margin-right: 10%;
	font-size: 4.5em;
	color: white;
	float: right;
	text-shadow: 0 10px 18px rgba(0,0,0,0.30), 0 8px 6px rgba(0,0,0,0.22);
}

@-moz-document url-prefix()
{
	.box_text {
		font-size: 4em;
		margin-top: 1.25em;
	}
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
	@media {

		#logo_main {
			width : 40%;
			height: auto;
		}
		#parcours_box {
			height: 25%;
		}
	}
}

.box_text #span_1 {
	color: #b11111;
	font-weight: bold;
	font-size: 1.2em;
}

.box_text #span_2 {
	font-size: 1.18em;
}

.options {
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	-o-flex: 1;
	flex: 1;
}

.options_img {
	height: 80%;
	width: 20%;
}

/* ---- Thèmes ---- */

.theme_box {
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-self: center;
	height: 100%;
	width: 100%;
	font-size: 0.8em;
}

.theme_box img {width: 20%;}

.theme_box p {width: 50%; margin-top: 12%;}

/* ---- Parcours ---- */

.corps_scroll {
	overflow: auto;
	overflow-x:hidden;
	font-size: 0.8em;
}

.button_scroll p {
	border-bottom: 1px solid black;
}

/* ---- Mentions ---- */

#mentions {
	color: white;
	font-size: 2.5em;
	overflow: auto;
	overflow-x:hidden;
	max-height: 95%;
	padding: 5%;
	text-align: justify;
}

.level_1 {text-decoration: underline;}

.level_2 {display:inline-block; text-indent: 15px;}

/* ---- Description Parcours ---- */


#description {
	color: white;
	font-size: 2.5em;
	overflow: auto;
	overflow-x:hidden;
	max-height: 95%;
	padding: 5%;
	text-align: justify;
}

/* ---- Description POI ---- */

h2 {
	font-size: 3em;
}

h3 {
	font-size: 32px;
	font-weight: normal;
}
