/* GENERAL */

@font-face {
	font-family: "BertholdAkzidenzGroteskBECondensed";
	src: url("fonts/BertholdAkzidenzGroteskBECondensed.eot");
	src: url("fonts/BertholdAkzidenzGroteskBECondensed.eot") format("embedded-opentype"), url("fonts/BertholdAkzidenzGroteskBECondensed.woff2") format("woff2"),
		url("fonts/BertholdAkzidenzGroteskBECondensed.woff") format("woff"), url("fonts/BertholdAkzidenzGroteskBECondensed.ttf") format("truetype"),
		url("fonts/BertholdAkzidenzGroteskBECondensed.svg#BertholdAkzidenzGroteskBECondensed") format("svg");
}

@font-face {
	font-family: "BertholdAkzidenzGroteskMediumCondensed";
	src: url("fonts/BertholdAkzidenzGroteskMediumCondensed.eot");
	src: url("fonts/BertholdAkzidenzGroteskMediumCondensed.eot") format("embedded-opentype"), url("fonts/BertholdAkzidenzGroteskMediumCondensed.woff2") format("woff2"),
		url("fonts/BertholdAkzidenzGroteskMediumCondensed.woff") format("woff"), url("fonts/BertholdAkzidenzGroteskMediumCondensed.ttf") format("truetype"),
		url("fonts/BertholdAkzidenzGroteskMediumCondensed.svg#BertholdAkzidenzGroteskMediumCondensed") format("svg");
}

@font-face {
	font-family: "AkzidenzGroteskBERegular";
	src: url("fonts/AkzidenzGroteskBERegular.eot");
	src: url("fonts/AkzidenzGroteskBERegular.eot") format("embedded-opentype"), url("fonts/AkzidenzGroteskBERegular.woff2") format("woff2"), url("fonts/AkzidenzGroteskBERegular.woff") format("woff"),
		url("fonts/AkzidenzGroteskBERegular.ttf") format("truetype"), url("fonts/AkzidenzGroteskBERegular.svg#AkzidenzGroteskBERegular") format("svg");
}

@font-face {
	font-family: "BertholdAkzidenzGroteskBELightCondensed";
	src: url("fonts/BertholdAkzidenzGroteskBELightCondensed.eot");
	src: url("fonts/BertholdAkzidenzGroteskBELightCondensed.eot") format("embedded-opentype"), url("fonts/BertholdAkzidenzGroteskBELightCondensed.woff2") format("woff2"),
		url("fonts/BertholdAkzidenzGroteskBELightCondensed.woff") format("woff"), url("fonts/BertholdAkzidenzGroteskBELightCondensed.ttf") format("truetype"),
		url("fonts/BertholdAkzidenzGroteskBELightCondensed.svg#BertholdAkzidenzGroteskBELightCondensed") format("svg");
}

html {
	font-family: "AkzidenzGroteskBERegular", sans-serif;
	scroll-behavior: smooth;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

h2,
nav li {
	font-family: "BertholdAkzidenzGroteskMediumCondensed", sans-serif;
	text-align: center;
}

h2 {
	color: rgb(234, 91, 12);
}

h1 {
	color: #00a9ba;
	font-family: "BertholdAkzidenzGroteskBECondensed", sans-serif;
}

h3 {
	font-family: "BertholdAkzidenzGroteskBECondensed", sans-serif;
	color: rgb(100, 100, 100);
}

p {
	line-height: 140%;
}

nav li {
	color: rgb(100, 100, 100);
}

.underline {
	text-decoration: underline;
}

.main_content_flexrow a {
	font-family: "BertholdAkzidenzGroteskBECondensed", sans-serif;
	text-transform: uppercase;
	color: rgb(100, 100, 100);
	font-size: 14pt;
}

nav a:not(.active_page):hover {
	color: rgb(234, 91, 12);
}

.color_orange {
	color: rgb(234, 91, 12);
}

.text_underline {
	text-decoration: underline;
}

#expert1,
#expert2,
#expert3 {
	display: flex;
	flex-direction: column;
}

#expert1 ul,
#expert2 ul,
#expert3 ul {
	list-style-type: disc;
	text-align: left;
	line-height: 140%;
	width: 75%;
}

#expert1 li,
#expert2 li,
#expert3 li {
	margin: 10px 0;
}

#expert1 li::marker,
#expert2 li::marker,
#expert3 li::marker {
	color: rgb(234, 91, 12);
}

address {
	line-height: 140%;
	margin: 15px 0;
	color: rgb(234, 91, 12);
	font-family: "BertholdAkzidenzGroteskMediumCondensed", sans-serif;
	font-size: 18pt;
}

.email {
	font-size: 48px;
}

.address_name {
	font-size: 36px;
}

.mentions_legales a {
	text-decoration: underline;
}

.logo_mentions_legales {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.logo_mentions_legales img {
	height: 80px;
}

.logo_mentions_legales p {
	min-width: 220px;
	max-width: 220px;
	text-align: center !important;
	margin-top: 15px;
	color: #00a9ba;
	font-family: "BertholdAkzidenzGroteskBECondensed", sans-serif;
	font-size: 18px;
}

/* Anim SDGS */

.sdgs_container {
	height: 450px;
	max-height: 450px;
	min-height: 450px;
	width: 450px;
	max-width: 450px;
	min-width: 450px;
	position: relative;
	overflow: hidden;
}

@media screen and (min-width: 971px) {
	.flexrow_50 div,
	.flexrow_50 div a:not(.sdgs_item_text a) {
		margin-left: 20px;
		margin-right: -35px;
	}
}

@media screen and (max-width: 450px) {
	.sdgs_container {
		height: 90vw;
		max-height: 90vw;
		min-height: 90vw;
		width: 90vw;
		max-width: 90vw;
		min-width: 90vw;
		position: relative;
		overflow: hidden;
		margin: 0 20px;
	}
}

.flexrow_50 div {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sdgs_container_legend {
	display: flex;
	margin-top: 15px;
	justify-content: center;
	font-family: "BertholdAkzidenzGroteskBECondensed", sans-serif;
	font-weight: 700;
	color: #00a9ba;
}

.sdgs_roue {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.sdgs_roue2 {
	height: 31.4%;
	position: absolute;
	right: 17.4%;
	top: 4.3%;
	cursor: pointer;
}

.sdgs_roue6 {
	height: 23.7%;
	position: absolute;
	right: 2.6%;
	top: 55.6%;
	cursor: pointer;
}

.sdgs_roue8 {
	height: 32%;
	position: absolute;
	right: 23.5%;
	top: 66.9%;
	cursor: pointer;
}

.sdgs_roue9 {
	height: 30.2%;
	position: absolute;
	right: 41.7%;
	bottom: 0;
	cursor: pointer;
}

.sdgs_roue11 {
	height: 30%;
	position: absolute;
	left: 10.8%;
	bottom: 7.7%;
	cursor: pointer;
}

.sdgs_roue13 {
	height: 16.8%;
	position: absolute;
	left: 0.5%;
	bottom: 37.1%;
	cursor: pointer;
}

.sdgs_roue15 {
	height: 27.4%;
	position: absolute;
	left: 5.7%;
	top: 13.7%;
	cursor: pointer;
}

.sdgs_item_text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	overflow: hidden;
	color: white;
	padding: 20px;
}

.sdgs_item_text :first-child {
	text-transform: uppercase;
	text-align: center;
	font-size: 17px;
	font-family: "BertholdAkzidenzGroteskMediumCondensed", sans-serif;
	margin: 0 !important;
}

.sdgs_item_text :nth-child(2) {
	text-transform: uppercase;
	text-align: center;
	font-size: 14px;
	font-family: "BertholdAkzidenzGroteskBELightCondensed", sans-serif;
	margin: 5px 0 !important;
}

.sdgs_item_text a {
	text-align: center;
	font-size: 14px;
	text-decoration: underline;
}

@media screen and (max-width: 450px) {
	.sdgs_item_text :first-child {
		font-size: 3.5vmin;
	}

	.sdgs_item_text :nth-child(2) {
		font-size: 2.5vmin;
	}

	.sdgs_item_text a {
		font-size: 2vmin;
	}
}

.water_container {
	height: 37.1%;
	width: 37.1%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 31.4%;
	left: 0;
	right: 0.5%;
	margin: auto;
	border-radius: 50%;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	overflow: hidden;
}

.sdgs_goutte {
	height: 46.1%;
	position: absolute;
	top: 1.5%;
	left: 0;
	right: 0;
	margin: auto;
}

.sdgs_goutte_anim {
	animation: sdgs_goutte 0.75s forwards;
}

@keyframes sdgs_goutte {
	from {
		top: 1.5%;
	}
	to {
		top: 154%;
	}
}

.sdgs_eau {
	height: 53.8%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	fill: rgb(0, 167, 215);
}

.sdgs_eau_anim {
	animation: sdgs_eau 1.5s forwards;
}

@keyframes sdgs_eau {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(8);
	}
}

/* DESKTOP */

@media screen and (min-width: 971px) {
	html {
		max-width: 100vw;
		overflow-x: hidden;
	}

	header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin: 15px 30px;
		height: 80px;
	}

	.logo_wrapper {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		width: 20%;
	}

	.logo_wrapper p {
		min-width: 220px;
		max-width: 220px;
		text-align: justify;
		margin: 0 15px;
		color: #00a9ba;
		font-family: "BertholdAkzidenzGroteskBECondensed", sans-serif;
		font-size: 18px;
		margin-bottom: -7px;
	}

	.logo_wrapper img,
	.logo_wrapper a {
		height: 80px;
	}

	.mobile_open_widget {
		display: none;
	}
	.mobile_close_widget {
		display: none;
	}

	nav {
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	nav ul {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		text-transform: uppercase;
	}

	nav li {
		margin: 0 10px;
		font-size: 24px;
	}

	.active_page {
		color: #00a9ba;
	}

	.active_langue {
		color: #00a9ba;
		cursor: default;
	}

	h1 {
		font-size: 24pt;
		display: flex;
		justify-content: center;
		margin: 30px 0;
	}

	h2 {
		font-size: 18pt;
		display: flex;
		justify-content: center;
		margin: 15px 0;
		text-transform: uppercase;
	}

	h3 {
		font-size: 14pt;
		display: flex;
		justify-content: center;
		margin: 15px 0;
	}

	p:not(.sdgs_text p):not(.no_margin):not(.logo_wrapper p) {
		margin: 15px 0;
	}

	.main_content_flexrow {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		align-items: flex-start;
		text-align: center;
		margin: 7.5px 30px;
	}

	.main_content_flexrow div {
		width: 30%;
		display: flex;
		flex-direction: column;
	}

	.main_content_flexrow div a {
		display: flex;
		flex-direction: column;
	}

	.main_content_flexcol {
		display: flex;
		flex-flow: column wrap;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin: 30px;
		max-width: 1920px;
	}

	.main_content_flexcol p {
		text-align: justify;
	}

	.main_content_flexcol div:not(.no_margin):not(.sdgs_text):not(.sdgs_container):not(.flexrow_50 div) {
		width: 66%;
		justify-content: center;
		align-items: center;
		margin: 7.5px 30px;
	}

	.no_margin {
		margin-top: 0;
		margin-bottom: 0;
	}

	.expertise_first_p {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 66%;
		text-align: justify;
		margin: 0;
	}

	.icon {
		height: 50px;
		margin-bottom: 15px;
	}

	footer {
		height: 50px;
		background-color: #00a9ba;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		font-size: 12px;
		color: white;
	}

	.flexrow_50 {
		display: flex;
		justify-content: space-between;
	}

	/* cinématique */

	.cinematique_wrapper {
		height: 100vh;
		width: 100vw;
		background-color: white;
		position: absolute;
		z-index: 2;
		animation: cinematique 2.4s forwards;
	}

	@keyframes cinematique {
		0% {
			transform: scale(1);
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		80% {
			transform: scale(1);
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			opacity: 1;
			background-color: white;
		}
		95% {
			opacity: 0;
			background-color: transparent;
		}
		100% {
			transform: scale(0);
			left: -50vw;
			top: -50vh;
			opacity: 0;
			background-color: transparent;
		}
	}

	#pointeur {
		width: 40px;
		position: absolute;
		margin: auto;
		animation: pointeur 0.6s forwards linear;
		z-index: 1;
	}

	@keyframes pointeur {
		0% {
			opacity: 0;
		}
		49% {
			opacity: 0;
		}
		50% {
			left: 0;
			right: 0;
			top: -500px;
			bottom: 0;
			transform: scale(2);
			opacity: 0.5;
		}
		80% {
			rotate: 0deg;
			left: 0;
			right: 0;
			top: -90px;
			bottom: 0;
			transform: scale(1);
			opacity: 1;
		}
		88% {
			left: 0;
			right: 0;
			top: -120px;
			bottom: 0;
			transform: scale(1.1);
		}
		94% {
			left: 0;
			right: 0;
			top: -110px;
			bottom: 0;
			transform: scale(1.1);
		}

		100% {
			rotate: 0deg;
			left: 0;
			right: 0;
			top: -90px;
			bottom: 0;
			transform: scale(1);
		}
	}

	#soleil {
		width: 190px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: -125px;
		bottom: 0;
		animation: soleil 1.4s forwards;
	}

	@keyframes soleil {
		0% {
			-webkit-transform: scale(0);
		}
		50% {
			-webkit-transform: scale(0);
			left: 0;
			right: 0;
			top: -20px;
			bottom: 0;
		}
		100% {
			-webkit-transform: scale(1);
		}
	}

	#horizon {
		width: 320px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		animation: horizon 0.1s forwards ease-out;
		z-index: 2;
	}

	@keyframes horizon {
		from {
			transform: rotate(-45deg);
			left: -360px;
			right: 0;
			top: 90px;
			bottom: 0;
		}
		to {
			transform: rotate(0deg);
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}

	#goutte {
		width: 40px;
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		bottom: 0;
		margin: auto;
		z-index: 0;
	}

	#goutte_cache {
		width: 40px;
		height: 50px;
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		bottom: 0;
		margin: auto;
		z-index: 1;
		content: "";
		background-color: white;
		animation: goutte_cache 0.7s forwards;
	}

	@keyframes goutte_cache {
		0% {
			top: 40px;
		}
		82% {
			top: 40px;
		}
		100% {
			top: 150px;
		}
	}

	#nom {
		width: 310px;
		position: absolute;
		left: 0;
		right: 0;
		top: 180px;
		bottom: 0;
		margin: auto;
		z-index: 1;
		animation: nom 1.5s forwards;
	}

	@keyframes nom {
		0% {
			opacity: 0;
		}
		78% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
}

/* MOBILE PORTRAIT */

@media screen and (max-width: 970px) {
	html {
		max-width: 100vw;
		overflow-x: hidden;
	}

	header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 15px 30px;
	}

	.logo_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.logo_wrapper p {
		min-width: 220px;
		max-width: 220px;
		text-align: center;
		margin-top: 15px;
		color: #00a9ba;
		font-family: "BertholdAkzidenzGroteskBECondensed", sans-serif;
		font-size: 18px;
	}

	.logo_wrapper img,
	.logo_wrapper a {
		height: 80px;
	}

	nav {
		width: 100vw;
		max-height: 100vh;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		display: none;
		background-color: white;
		font-size: 24px;
	}

	.nav_open {
		display: flex;
		animation: openmenu 0.5s forwards;
		width: 100vw;
		height: 100vh;
		max-height: 100vh;
		background-image: url("images/logo.png");
		background-repeat: no-repeat;
		background-size: 100px;
		background-position: top 30px center;
		position: fixed;
		top: 0;
		z-index: 2;
	}

	@keyframes openmenu {
		from {
			right: -100vw;
		}
		to {
			right: 0;
		}
	}

	@keyframes closemenu {
		from {
			right: 0;
		}
		to {
			right: -100vw;
		}
	}

	nav ul {
		margin-top: 30px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		text-transform: uppercase;
		height: 50%;
	}

	@media screen and (max-height: 500px) and (orientation: landscape) {
		nav ul {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;
			align-items: center;
			text-transform: uppercase;
			width: 80%;
		}
	}

	.mobile_open_widget {
		width: 30px;
		display: flex;
		position: fixed;
		top: 10px;
		right: 10px;
		height: 40px;
		cursor: pointer;
		z-index: 2;
	}
	.mobile_close_widget {
		display: none;
		width: 30px;
		display: flex;
		position: fixed;
		top: 10px;
		right: 10px;
		height: 40px;
		cursor: pointer;
	}

	.active_page {
		color: #00a9ba;
	}

	.active_langue {
		color: #00a9ba;
		cursor: default;
	}

	.langues {
		margin: 0 15px;
		display: flex;
		flex-direction: row;
	}

	.langues li {
		margin: 0 15px;
	}

	h1 {
		font-size: 24pt;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 30px 15px;
	}

	h2 {
		font-size: 18pt;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 15px;
		text-transform: uppercase;
	}

	h3 {
		font-size: 18pt;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15px;
		text-transform: uppercase;
	}

	p:not(.sdgs_text p) {
		margin: 15px 0;
	}

	.main_content_flexrow {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		align-items: flex-start;
		text-align: center;
	}

	.main_content_flexrow div {
		width: 35%;
		margin: 7.5px 30px;
	}

	.main_content_flexrow div a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.main_content_flexcol {
		display: flex;
		flex-flow: column;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin: 30px;
	}

	.main_content_flexcol p {
		text-align: justify;
	}

	.main_content_flexcol div {
		justify-content: center;
		align-items: center;
		width: 90%;
		margin-top: 7.5px;
		margin-bottom: 7.5px;
	}

	.expertise_first_p {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		text-align: justify;
		margin: 0 30px;
	}

	.no_margin {
		margin-top: 0;
		margin-bottom: 0;
	}

	.icon {
		margin-bottom: 15px;
		height: 50px;
	}

	figcaption {
		margin-top: 15px;
	}

	.flexrow_50 {
		display: flex;
		flex-direction: column;
	}

	footer {
		background-color: #00a9ba;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-size: 12px;
		color: white;
		padding: 15px 0;
	}

	/* cinématique */

	.cinematique_wrapper {
		height: 100vh;
		width: 100vw;
		background-color: white;
		position: absolute;
		z-index: 2;
		animation: cinematique 2.4s forwards;
	}

	@keyframes cinematique {
		0% {
			transform: scale(1);
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		80% {
			transform: scale(1);
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			opacity: 1;
			background-color: white;
		}
		95% {
			opacity: 0;
			background-color: transparent;
		}
		100% {
			transform: scale(0);
			left: -50vw;
			top: -50vh;
			opacity: 0;
			background-color: transparent;
		}
	}

	#pointeur {
		width: 40px;
		position: absolute;
		margin: auto;
		animation: pointeur 0.6s forwards linear;
		z-index: 1;
	}

	@keyframes pointeur {
		0% {
			opacity: 0;
		}
		49% {
			opacity: 0;
		}
		50% {
			left: 0;
			right: 0;
			top: -500px;
			bottom: 0;
			transform: scale(2);
			opacity: 0.5;
		}
		80% {
			rotate: 0deg;
			left: 0;
			right: 0;
			top: -90px;
			bottom: 0;
			transform: scale(1);
			opacity: 1;
		}
		88% {
			left: 0;
			right: 0;
			top: -120px;
			bottom: 0;
			transform: scale(1.1);
		}
		94% {
			left: 0;
			right: 0;
			top: -110px;
			bottom: 0;
			transform: scale(1.1);
		}

		100% {
			rotate: 0deg;
			left: 0;
			right: 0;
			top: -90px;
			bottom: 0;
			transform: scale(1);
		}
	}

	#soleil {
		width: 190px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: -125px;
		bottom: 0;
		animation: soleil 1.4s forwards;
	}

	@keyframes soleil {
		0% {
			-webkit-transform: scale(0);
		}
		50% {
			-webkit-transform: scale(0);
			left: 0;
			right: 0;
			top: -20px;
			bottom: 0;
		}
		100% {
			-webkit-transform: scale(1);
		}
	}

	#horizon {
		width: 320px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		animation: horizon 0.1s forwards ease-out;
		z-index: 2;
	}

	@keyframes horizon {
		from {
			transform: rotate(-45deg);
			left: -360px;
			right: 0;
			top: 90px;
			bottom: 0;
		}
		to {
			transform: rotate(0deg);
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}

	#goutte {
		width: 40px;
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		bottom: 0;
		margin: auto;
		z-index: 0;
	}

	#goutte_cache {
		width: 40px;
		height: 50px;
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		bottom: 0;
		margin: auto;
		z-index: 1;
		content: "";
		background-color: white;
		animation: goutte_cache 0.7s forwards;
	}

	@keyframes goutte_cache {
		0% {
			top: 40px;
		}
		82% {
			top: 40px;
		}
		100% {
			top: 150px;
		}
	}

	#nom {
		width: 310px;
		position: absolute;
		left: 0;
		right: 0;
		top: 180px;
		bottom: 0;
		margin: auto;
		z-index: 1;
		animation: nom 1.5s forwards;
	}

	@keyframes nom {
		0% {
			opacity: 0;
		}
		78% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
}

/* Animation bandeau */

.bandeau_images {
	min-height: 26vw;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.bandeau_invisible {
	display: none;
}

#bandeau1,
#bandeau2 {
	width: 100%;
	position: absolute;
}

.bandeau_animation1 {
	display: flex;
	animation: anim1 20s linear infinite;
}

@keyframes anim1 {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

.bandeau_animation2 {
	display: flex;
	animation: anim2 20s linear infinite;
}

@keyframes anim2 {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* Blog */

#blog_iframe {
	width: 100%;
	height: 800px;
}