/* html{ */
	/* height: 50vh; */
/* } */
body{
	border: 1px solid orange;
	background-color: rgb(0, 1, 53);
	color: lightgrey;
	text-align: center;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	}

.back_top{
	position: absolute;
	left: 0;
	/* bottom: 0; */
}

/* ugly  */
.back_bottom{
	position: absolute;
	left: 0;
	bottom: 0;
}

:root {
	--title_font_size: 1.5vw;
	--subtitle_font_size: 1vw;
}
section{
	margin-left: auto;
	margin-right: auto;
		width: 80vw;
}

.h1_in_section{
	font-size: 2vw;
	/* margin-bottom: -3vw; */
	/* border: 1px solid black; */
}
.h2_in_section{
	border: 1px solid white;
	font-weight: bold;					
	text-transform: uppercase;
}
.section_interne_XP{
	/*margin-top: -5vw;*/
	margin-bottom: 1.0vw;
	display: table;
	table-layout: fixed;
	/* width: 50vw; */
}
.local_side_section{
	width: 20vw;
	display : table-cell;
}
.local_side_section_invisible{
	width: 20vw;
	color: rgb(0, 0, 0);
	display : table-cell;
}

.siiXP_in{
	/* border: 1px solid white; */
	display : table-cell;
	text-align: start;
	width: 50vw;
}

a, a:visited{
  color: lightgrey;
  /* text-decoration: none; */
}
	
/* This changes what the background of your site looks like */
#bg {
	-moz-transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-ms-transform: scale(1.0);
	transform: scale(1.0);
	-webkit-backface-visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
}

	#bg:before, #bg:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* This sets the image the overlay on the background */
	#bg:before {
		-moz-transition: background-color 2.5s ease-in-out;
		-webkit-transition: background-color 2.5s ease-in-out;
		-ms-transition: background-color 2.5s ease-in-out;
		transition: background-color 2.5s ease-in-out;
		-moz-transition-delay: 0.75s;
		-webkit-transition-delay: 0.75s;
		-ms-transition-delay: 0.75s;
		transition-delay: 0.75s;
		background-image: linear-gradient(to top, rgba(19, 21, 25, 0.8), rgba(19, 21, 25, 0.8)), url("../images/overlay.png");
		background-size: auto, 256px 256px;
		background-position: center, center;
		background-repeat: no-repeat, repeat;
		/* This sets the order of rendering. This will sit on top of all elements with z-index < 2 */
		z-index: 2;
	}

	/* This sets the content of the actual background */
	#bg:after {
		-moz-transform: scale(1.125);
		-webkit-transform: scale(1.125);
		-ms-transform: scale(1.125);
		transform: scale(1.125);
		-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
		-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
		-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
		/* We can change the background image here. */
		background-image: url("../images/negative_drawing_large.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		/* This sets the order of rendering. This will sit behind all elements with z-index > 1 */
		z-index: 1;
	}

	body.is-article-visible #bg:after {
		-moz-transform: scale(1.0825);
		-webkit-transform: scale(1.0825);
		-ms-transform: scale(1.0825);
		transform: scale(1.0825);
		-moz-filter: blur(0.2rem);
		-webkit-filter: blur(0.2rem);
		-ms-filter: blur(0.2rem);
		filter: blur(0.2rem);
	}

	body.is-preload #bg:before {
		background-color: #000000;
	}

#wrapper {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	position: relative;
	min-height: 100vh;
	width: 100%;
	padding: 4rem 2rem;
	z-index: 3;
}

	#wrapper:before {
		content: '';
		display: block;
	}

	@media screen and (max-width: 1680px) {

		#wrapper {
			padding: 3rem 2rem;
		}

	}

	@media screen and (max-width: 736px) {

		#wrapper {
			padding: 2rem 1rem;
		}

	}

	@media screen and (max-width: 480px) {

		#wrapper {
			padding: 1rem;
		}

	}

footer {
	/* margin-top : 10vh; */
    /* display: flex; */
    justify-content: center;
    padding: 0px;
    background-color: #45a1ff;
    color: #fff;
	margin-top: auto; 
}