:root {
	--color: white;
	--bg_color_base: #626A7D;
	--ponct_color: #00D646;
	--conteneur: #333B50;
	--light_color: #BEC7D5;

	--body_width: 70vw;
	--height-container: 50vh;

	--transition: 0.3s;
}
* {
	scroll-behavior: smooth;
	scroll-padding-top: 60px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* border: 1px solid black; */
}
*::selection {
    background-color: var(--bg_color_base);
}

@font-face {
    font-family: 'lulo-bold';
    src: url('/assets/fonts/lulo-clean-one-bold.ttf');
}
@font-face {
    font-family: 'avenir-light';
    src: url('/assets/fonts/avenir-light.ttf');
}
@font-face {
    font-family: 'avenir';
    src: url('/assets/fonts/avenir.otf');
}

c {
	color: var(--ponct_color);
}

span.underline {
	text-decoration: underline;
}

#number {
	color: var(--light_color);
}

div.spacer#container {
	height: calc(calc(var(--height-container) / 2) + 10vw);
	/* border: 1px solid black; */
}
div.spacer#no_container {
	height: 20vh;
	/* border: 1px solid black; */
}

a#active {
	color: var(--ponct_color) !important;
}
a#active:hover {
	transition: var(--transition);
	color: white !important;
}
a:active, a#active:active {
	color: var(--light_color) !important;
}

a#link {
	transition: var(--transition);
	text-decoration: none;
	color: var(--light_color);
}
a.arrow:after {
	content: '>';
	position: relative;
	font-family: 'avenir';
	margin-left: 0px;
	opacity: 0;
	transition: var(--transition);
}
a.arrow:hover:after {
	transition: var(--transition);
	margin-left: 15px;
	margin-right: -15px;
	opacity: 1;
}

body {
	color: var(--color);
	--w_body = width;
	--h_body = height;
	/* border: 1px solid black; */
}
div#header {
	/* position: relative; */
	background: linear-gradient(rgba(51, 59, 80, 0.65), rgba(51, 59, 80, 0.7)), url("/images/presentation.png");
	background-position: 85% 100%;
	background-attachment: fixed !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
	-webkit-background-position: top right;
	-webkit-background-size: cover !important;
	background-repeat: no-repeat;
	/* z-index: 1; */
	/* height: 120vh !important; */
	min-height: 120vh;
	background-repeat: no-repeat;
	border: 1px solid #5A6275;
	cursor: default !important;
	/* border: 2px solid black; */
}





/* NAVIGATION */

div.nav_bar {
	position: absolute;
	top: 0;
	left: 0;
	/* display: block; */
	/* margin-left: calc(calc(60vw - 100vw) / 2); */
	width: 100%;
	height: auto;
	background-color: var(--bg_color_base);
	/* border: 1px solid black; */
	z-index: 98 !important;
}
div.nav_bar.shadow {
	box-shadow: 0 12px 15px #5A6275;
}
div.bar_centered {
	/* overflow: hidden; */
	margin-left: 50%;
	transform: translateX(-50%);
	width: var(--body_width);
	height: calc(50px + 2 * 10px);
	padding: 10px 5%;
	/* border: 1px solid blue; */
}
div.logo a img {
	width: 35px;
	height: width;
	margin-top: calc(calc(50px - 35px) / 2);
	margin-right: 5%;
	display: block;
	float: left;
	stroke: var(--ponct_color);
	/* border: 1px solid green; */
}
div.navigation {
	float: left;
	/* border: 1px solid pink; */
}
.navigation li {
	float: left;
	list-style-type: none;
	padding-right: 0;
	/* border: 1px solid red; */
}
.navigation li a {
	transition: var(--transition);
	display: block;
	float: left;
	width: auto;
	margin-right: 15px;
	margin-left: 15px;
	color: var(--light_color);
	font-size: 12px;
	font-family: 'avenir-light';
	letter-spacing: 0.2em;
	font-weight: lighter;
	line-height: 50px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	/* border: 1px solid black; */
}
.navigation li a:hover {
	color: white;
	transition: var(--transition);
}
.checkbtn {
	float: right;
	/* margin-top: -20px; */
	height: calc(20px + 2 * 10px);
	padding: 10px;
	margin: 13px 15px 0 0;
	transform: translate(50%, -20%);
	cursor: pointer;
	display: none;
	z-index: 98 !important;
	/* border: 1px solid black; */
}
.menu {
	width: 20px;
	height: 20px;
}
.close {
	transform: translate(2px, -98px);
}
#check{
	display: none;
}






/* HEADER & PRESENTATION */
div.presentation {
	position: relative;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-top: 23vh;
	width: 30vw;
	min-width: 400px;
	padding: 0;
	height: auto;
	z-index: 1;
	/* border: 1px solid black; */
}

div.name {
	margin-bottom: 10%;
}
div.name h1 {
	font-size: 65px;
	font-weight: bold;
	font-family: 'lulo-bold';
	text-transform: uppercase;
	letter-spacing: -0.05em;
}

div.occupation h2 {
	font-size: 24px;
	font-weight: lighter;
	text-transform: uppercase;
    line-height: 1.8em;
	font-family: 'avenir-light';
	letter-spacing: 0.18em;
}






/* CONTAINER */
div.container {
	position: absolute;
	margin-left: 50%;
	transform: translate(-50%, -50%);
	/* margin-top: calc(calc(var(--height-container) / -2)); */
	width: 55vw;
	height: auto;
	background-color: var(--conteneur);
	border-radius: 2px;
	z-index: 2;
	padding: 3.5vw;
	text-align: center;
	/* overflow: hidden; */
	/* border: 1px solid black; */
}
div.logo_cont img {
	height: 4vw;
	width: auto;
	/* border: 1px solid black; */
}
div.resume {
	/* margin-left: calc(calc(100% - var(--height-container) - 20%) / 2);
	width: calc(var(--height-container) + 20%); */
	/* border: 1px solid black; */
}
div.resume p {
	font-size: 2.4vh;
	font-family: 'avenir-light';
	font-weight: lighter;
	letter-spacing: 0;
	line-height: 1.4em;
	/* text-transform: uppercase; */
	/* font-variant: small-caps; */
	margin: 5% 0 5% 0;
}
.get_resume {
	transition: var(--transition);
	width: 240px;
	height: 48px;
	background-color: transparent;
	border: 1px solid var(--ponct_color);
	display: inline-block;
	cursor: pointer;
	color: white;
	font-family: "avenir-light";
	font-size: 14px;
	padding: 14px 17px;
	text-decoration: none;
	text-align: center;
	margin: 0 5px 5px 5px;
}
.get_resume:hover {
	transition: var(--transition);
	background-color: var(--ponct_color);
}
.get_resume:visited {
	transition: var(--transition);
	background-color: transparent;
}
.review {
	width: 260px !important;
}






/* PROFESSIONAL */

div.professional {
	position: relative;
	padding-bottom: 150px;
	background: linear-gradient(rgba(51, 59, 80, 0.85), rgba(51, 59, 80, 0.85)), url("/images/professional.jpg");
	background-position: center center !important;
	background-size: initial 100vh !important;
	-webkit-background-position: right center;
	-webkit-background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* height: 1200px !important; */
	z-index: 1;
	overflow: hidden;
	/* border: 1px solid black; */
}
div.title {
	margin-left: 50%;
	transform: translateX(-50%);
	width: var(--body_width);
	/* border: 1px solid black; */
}
div.title h2 {
	font-family: 'lulo-bold';
	text-align: center;
	text-transform: uppercase;
	font-size: 42px;
	font-weight: bolder;
	color: white;
	letter-spacing: 0em;
	line-height: 1.3em;
	/* border: 1px solid black; */
}
div.title h3 {
	margin-top: 20px;
	font-family: 'avenir-light';
	text-align: center;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: lighter;
	color: white;
	letter-spacing: 0.18em;
	line-height: 1.8em;
	/* border: 1px solid black; */
}
div.skills {
	/* display: none; */
	margin-left: 50%;
	margin-top: 100px;
	transform: translateX(-50%);
	width: var(--body_width);
	/* border: 1px solid black; */
}



/* PORTFOLIO */

div.experience {
	position: relative;
	background: linear-gradient(rgba(0, 16, 60, 0.63), rgba(0, 16, 60, 0.63)), url("/images/experience.jpg");
	background-position: top center;
	background-size: initial 100vh;
	background-repeat: no-repeat;
	min-height: 1500px;
	z-index: 1;
	/* border: 1px solid black; */
}
div.gallery {
	margin-left: 50%;
	margin-top: 8vh;
	width: var(--body_width);
	transform: translateX(-50%);
	/* border: 1px solid black; */
}
div.gallery table {
	border-spacing: 0;
}
div.gallery a table tr {
	width: 100%;
	/* border: 1px solid black; */
}
td#gallery {
	width: calc(var(--body_width) / 3);
	height: calc(1 * calc(var(--body_width) / 3));
	/* border: 1px solid black; */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover !important;
	cursor: pointer;
}
.gallery a table tr td {
	transition: var(--transition);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.gallery a table tr td.project1 {
	transition: var(--transition);
	background-image: url('/images/portfolio/a320.png');
}
.gallery a table tr td.project2 {
	transition: var(--transition);
	background-image: url('/images/portfolio/incidencemetre.png');
}
.gallery a table tr td.project3 {
	transition: var(--transition);
	background-image: url('/images/portfolio/diffuseur.png');
}
.gallery a table tr td.project1:hover {
	transition: var(--transition);
	background: linear-gradient(rgba(0, 16, 60, 0.2), rgba(0, 16, 60, 0.2)), url("/images/portfolio/a320.png");
}
.gallery a table tr td.project2:hover {
	transition: var(--transition);
	background: linear-gradient(rgba(0, 16, 60, 0.2), rgba(0, 16, 60, 0.2)), url("/images/portfolio/incidencemetre.png");
}
.gallery a table tr td.project3:hover {
	transition: var(--transition);
	background: linear-gradient(rgba(0, 16, 60, 0.2), rgba(0, 16, 60, 0.2)), url("/images/portfolio/diffuseur.png");
}


/* EXPERIENCE */

div.green_point {
	z-index: 5;
	position: absolute;
	margin-left: 50%;
	margin-top: -25px;
	transform: translateX(-50%);
	width: 13px;
	height: 13px;
	/* border: 1px solid var(--ponct_color); */
	background-color: var(--ponct_color);
	border-radius: 10px;
}

div.green_line {
	z-index: 4;
	float: none;
	position: relative;
	/* top: 10px; */
	left: 50%;
	transform: translateX(-50%);
	/* margin-top: 10px; */
	width: 1px;
	/* height: 700px; */
	border: 1px solid var(--ponct_color);
	background-color: var(--ponct_color);
	border-radius: 10px;
}




div.exp_body {
	display: flow list-item block;
	margin-left: 50%;
	margin-top: 130px;
	padding-bottom: 350px;
	width: var(--body_width);
	transform: translateX(-50%);
	list-style: none;
	/* border: 1px solid black; */
}
div.exp_space {
	width: var(--body_width);
	padding-top: 30px;
	transform: translateX(-50%);
	/* border: 1px solid red; */
}

div.exp_activity_right {
	width: 50%;
	padding-left: 95px;
	margin-top: -30px;
	transform: translateX(100%);
	text-align: left;
	/* border: 1px solid blue; */
}
div.exp_activity_right div.activity_date {
	margin-bottom: 10px;
	/* border: 1px solid green; */
}
div.exp_activity_right div.activity_date h4 {
	letter-spacing: 0.05em;
	color: var(--ponct_color);
	/* text-transform: uppercase; */
	font-family: 'avenir';
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5em;
}

span.special {
	color: rgb(255, 50, 50);
	font-weight: lighter;
	font-style: italic;
}

div.exp_activity_right div.activity_title {
	margin-bottom: 30px;
	/* border: 1px solid blue; */
}
div.exp_activity_right div.activity_title h4 {
	letter-spacing: 0em;
	color: white;
	text-transform: uppercase;
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 21px;
}

div.exp_activity_right div.activity_company {
	/* margin-bottom: 30px; */
	/* border: 1px solid white; */
}
div.exp_activity_right div.activity_company p {
	letter-spacing: 0.07em;
	color: white;
	/* text-transform: uppercase; */
	font-family: 'avenir-light';
	font-weight: bold;
	font-size: 15px;
}

div.exp_activity_right div.activity_description {
	/* margin-bottom: 30px; */
	/* border: 1px solid white; */
}
div.exp_activity_right div.activity_description p {
	letter-spacing: 0.05em;
	line-height: 1.9em;
	color: var(--light_color);
	/* text-transform: uppercase; */
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 15px;
}




div.exp_activity_left {
	width: 50%;
	padding-right: 95px;
	margin-top: -30px;
	transform: translateX(0%);
	text-align: right;
	/* border: 1px solid blue; */
}
div.exp_activity_left div.activity_date {
	margin-bottom: 10px;
	/* border: 1px solid green; */
}
div.exp_activity_left div.activity_date h4 {
	letter-spacing: 0.05em;
	color: var(--ponct_color);
	/* text-transform: uppercase; */
	font-family: 'avenir';
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5em;
}

div.exp_activity_left div.activity_title {
	margin-bottom: 30px;
	/* border: 1px solid white; */
}
div.exp_activity_left div.activity_title h4 {
	letter-spacing: 0em;
	color: white;
	text-transform: uppercase;
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 21px;
}

div.exp_activity_left div.activity_company {
	/* margin-bottom: 30px; */
	/* border: 1px solid white; */
}
div.exp_activity_left div.activity_company p {
	letter-spacing: 0.07em;
	color: white;
	/* text-transform: uppercase; */
	font-family: 'avenir-light';
	font-weight: bold;
	font-size: 15px;
}

div.exp_activity_left div.activity_description {
	/* margin-bottom: 30px; */
	/* border: 1px solid white; */
}
div.exp_activity_left div.activity_description p {
	letter-spacing: 0.05em;
	line-height: 1.9em;
	color: var(--light_color);
	/* text-transform: uppercase; */
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 15px;
}

img.logo_activity {
	display: inline;
	vertical-align: middle;
	align-items: center;
	max-width: 65px;
	max-height: 55px;
	margin-left: 10px;
	margin-right: 10px;
}





/* CONTACT */

div.container.contact {
	position: absolute;
	width: 45vw;
	height: auto;
	margin-left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--conteneur);
	border-radius: 2px;
	z-index: 2;
	padding: 5vw;
	text-align: left;
	/* border: 1px solid black; */
}

div.head_contact h4 {
	/* margin-top: -3vw; */
	font-family: 'avenir-light';
	font-size: 24px;
	font-weight: lighter;
	color: white;
	text-transform: uppercase;
}
div.information_contact h5 {
	margin-left: 50px;
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 19px;
	line-height: 1.9em;
	letter-spacing: 0.05em;
	color: white;
}
div.information_contact p {
	margin-left: 50px;
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 15px;
	line-height: 1.9em;
	letter-spacing: 0.05em;
	color: var(--light_color);
}
a.get_resume.contact {
	margin-left: 50%;
	transform: translateX(-50%);
	margin-top: 2vw;
}



/* FOOTER */
div.footer {
	position: relative;
	/* margin-top: -50%; */
	background: linear-gradient(rgba(51, 59, 80, 0.85), rgba(51, 59, 80, 0.85)), url("/images/footer.jpg");
	background-position: bottom right;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 20vh;
	max-height: 200px;
	z-index: 1;
	/* border: 1px solid black; */
}
div.footer.index {
	height: 50vh;
	max-height: 500px;
}

div.footer_bar {
	position: absolute;
	bottom: 0;
	left: 0;
	/* display: block; */
	/* margin-left: calc(calc(60vw - 100vw) / 2); */
	width: 100%;
	height: auto;
	background-color: #3F445E;
	box-shadow: 0 -12px 15px #3A3E57;
	/* border: 1px solid black; */
}
div.bar_centered_footer {
	margin-left: 50%;
	transform: translateX(-50%);
	width: var(--body_width);
	height: calc(50px + 2 * 10px);
	padding: 10px 5%;
	/* border: 1px solid blue; */
}
div.bar_centered_footer .signature {
	width: calc(100% - 2 * 38px);
	/* border: 1px solid blue; */
}
div.bar_centered_footer .signature p {
	color: var(--light_color);
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 14px;
	text-align: center;
	line-height: calc(50px - 5px);
}
div.go_top {
	position: fixed;
	z-index: 99 !important;
	bottom: 5vh;
	right: 5vh;
	width: 40px;
	height: 40px;
	background-color: var(--conteneur);
	border-radius: 50px;
	animation: fadein 0.85s;
    -moz-animation: fadein 0.85s; /* Firefox */
    -webkit-animation: fadein 0.85s; /* Safari et Chrome */
    -o-animation: fadein 0.85s; /* Opera */
	/* border: 1px solid black; */
}
div.go_top a img {
	width: 60%;
	margin-top: 50%;
	margin-left: 50%;
	transform: translate(-50%, -60%);
}
.disable {
	animation: fadein 0.85s;
    -moz-animation: fadein 0.85s; /* Firefox */
    -webkit-animation: fadein 0.85s; /* Safari et Chrome */
    -o-animation: fadein 0.85s; /* Opera */
	display: none;
}









/* PORTFOLIO */
:root {
	--a: calc(100vw / 6);
}

.portfolio {
	position: relative;
  	z-index: 1;
	overflow: hidden !important;
	margin-top: 70px;
	height: calc(3 * var(--a));
	background-color: #3F445E;
}
div.portfolio div {
	position: absolute;
	/* border: 1px solid black; */
}

div#n0 {
	top: 0;
	left: 0;
	background: url("/images/portfolio/diffuseur.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n1 {
	top: 0;
	left: calc(2 * var(--a));
	background: url("/images/portfolio/PEMFC2.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n2 {
	top: 0;
	left: calc(3 * var(--a));
	background: url("/images/portfolio/incidencemetre.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n3 {
	top: calc(2 * var(--a));
	left: 0;
	background: url("/images/portfolio/FEM.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
div#n4 {
	top: calc(2 * var(--a));
	left: calc(1 * var(--a));
	background: url("/images/portfolio/a320.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}




.x_a {
	width: var(--a);
}
.x_2a {
	width: calc(2 * var(--a));
}
.x_3a {
	width: calc(3 * var(--a));
}

.y_a, .y_a ~ a {
	height: var(--a);
	line-height: var(--a);
}
.y_2a, .y_2a ~ a {
	height: calc(2 * var(--a));
	line-height: calc(2 * var(--a));
}
.y_3a, .y_3a ~ a {
	height: calc(3 * var(--a));
	line-height: calc(3 * var(--a));
}
div.portfolio div a {
	display: block;
	width: 100%;
	cursor: pointer;
	text-align: center;
	color: transparent;
	text-decoration: none;
	font-family: 'avenir-light';
	text-transform: uppercase;
	transition: 0.2s;
	/* border: 1px solid blue; */
}
div.portfolio div a:hover, div.portfolio div a:active {
	color: var(--light_color);
	background-color: rgba(0, 0, 0, 0.6);
	transition: 0.2s;
}









/* POPUP - PROJECT INFORMATION */
.hide {
	display: none;
}
.popup_container {
	position: fixed;
	z-index: 98;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.5);
	animation: fadein 0.5s forwards;
    -moz-animation: fadein 0.5s forwards; /* Firefox */
    -webkit-animation: fadein 0.5s forwards; /* Safari et Chrome */
    -o-animation: fadein 0.5s forwards; /* Opera */
}
.popup {
	position: fixed;
	z-index: 99;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	/* height: 50%; */
	max-height: 90%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 25px;
	padding-bottom: 40px;
	border-radius: 2px;
	background: var(--bg_color_base);
	box-shadow: 0px 0px 50px black;
	animation: translate 0.5s forwards;
    -moz-animation: translate 0.5s forwards; /* Firefox */
    -webkit-animation: translate 0.5s forwards; /* Safari et Chrome */
    -o-animation: translate 0.5s forwards; /* Opera */
}
.popup h3 {
	letter-spacing: 0em;
	color: white;
	text-transform: uppercase;
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 21px;
}
.popup h4 {
	letter-spacing: 0.05em;
	color: var(--ponct_color);
	/* text-transform: uppercase; */
	font-family: 'avenir';
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5em;
	/* margin-left: 50px; */
	margin-top: 25px;
}
.popup p.project_company {
	letter-spacing: 0.07em;
	color: white;
	/* text-transform: uppercase; */
	font-family: 'avenir-light';
	font-weight: bold;
	font-size: 15px;
	margin-top: -4px;
}
.popup p {
	letter-spacing: 0.05em;
	line-height: 1.9em;
	color: var(--light_color);
	/* text-transform: uppercase; */
	font-family: 'avenir-light';
	font-weight: lighter;
	font-size: 15px;
	margin-top: 15px;
	overflow: hidden;
	/* text-align: justify; */
}
.project_image {
	width: 60%;
	height: auto;
	margin-left: 50%;
	transform: translateX(-50%);
	padding-top: 20px;
}
.popup legend {
	width: 70%;
	margin-left: 50%;
	margin-top: 0px !important;
	transform: translateX(-50%);
	text-align: center;
	font-style: italic !important;
	font-size: 0.85em !important;
	font-weight: lighter !important;
	color: var(--light_color) !important;
	font-family: 'avenir-light';
	/* border: 1px solid red; */
}
.CloseIcon {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 22px;
	height: 22px;
	margin-left: calc(100% - 25px);
	background-color: var(--bg_color_base);
	box-shadow: 0 0 10px 10px var(--bg_color_base);
	transform: translate(-50% -50%);
	cursor: pointer;
	text-align: center;
	color: var(--ponct_color);
}

.outsideIcon {
	background: none;
	box-shadow: none;
	top: -12px;
	right: -32px;
	transform: translate(-50%, -50%);
}

.popup::-webkit-scrollbar {
    width: 8px;
}
.popup::-webkit-scrollbar-track {
    background-color: transparent;
}
.popup::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--light_color);
}


#lang_selector {
	position: absolute;
	float: left;
	width: calc(2 * 245px + 2 * 15px + 5px);
	max-width: calc(100vw - 2 * 32px);
	/* height: 120px; */
	left: 50%;
	transform: translateX(-50%);
	/* overflow-y: auto;
	overflow-x: hidden; */
	margin-top: 13px;
	padding: 15px 5px 10px 5px;
	border-radius: 2px;
	background: var(--bg_color_base);
	box-shadow: 0px 0px 50px black;
	z-index: 98;
	border: 1px solid var(--bg_color_base);
}

#lang_selector::before {
	position: absolute;
	content: " ";
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--bg_color_base);
	border: 1px solid transparent;
	width: 20px;
	height: 12px;
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
	box-shadow: 0px 0px 50px black;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes translate {
    from {
		transform: translate(-50%, 50%);
    }
    to {
		transform: translate(-50%, -50%);
    }
}
@-moz-keyframes translate { /* sur Firefox */
    from {
		transform: translate(-50%, 50%);
    }
    to {
		transform: translate(-50%, -50%);
    }
}
@-webkit-keyframes translate { /* sur Safari et Chrome */
    from {
		transform: translate(-50%, 50%);
    }
    to {
		transform: translate(-50%, -50%);
    }
}
@-o-keyframes translate { /* sur Opera */
    from {
		transform: translate(-50%, 50%);
    }
    to {
		transform: translate(-50%, -50%);
    }
}



@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-moz-keyframes fadeout { /* sur Firefox */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeout { /* sur Safari et Chrome */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-o-keyframes fadeout { /* sur Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}