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

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

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

img {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

body {
	background-image: url("images/fond.svg");
	background-attachment: fixed;
	background-size: cover;
}

/* Signature cinematique */

.signature_cinematique {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: signature_cinematique 6s forwards linear;
}

@keyframes signature_cinematique {
	0% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.signature_container {
	position: relative;
	animation: signature_position 6s forwards linear;
}

@keyframes signature_position {
	0% {
		transform: translate(0);
	}
	89% {
		transform: translate(0);
	}
	90% {
		transform: translate(0) scale(1);
	}
	100% {
		transform: translate(0, 20vh) scale(0.3);
	}
}

.signature_mask {
	width: 30vw;
	height: auto;
	stroke: rgb(255, 208, 0);
	stroke-dashoffset: 1000;
	stroke-dasharray: 1000;
}

#t {
	animation: t_mask 0.5s forwards linear;
}

@keyframes t_mask {
	0% {
		stroke-dashoffset: 1000;
	}
	100% {
		stroke-dashoffset: 865;
	}
}

#v {
	animation: v_mask 1s forwards linear;
}

@keyframes v_mask {
	0% {
		stroke-dashoffset: 1000;
	}
	50% {
		stroke-dashoffset: 1000;
	}

	100% {
		stroke-dashoffset: 865;
	}
}

#d {
	animation: d_mask 1.5s forwards linear;
}

@keyframes d_mask {
	0% {
		stroke-dashoffset: 1000;
	}
	66% {
		stroke-dashoffset: 1000;
	}
	100% {
		stroke-dashoffset: 690;
	}
}

#esi {
	animation: esi_mask 4s forwards linear;
}

@keyframes esi_mask {
	0% {
		stroke-dashoffset: 1000;
	}
	37.5% {
		stroke-dashoffset: 1000;
	}
	50% {
		stroke-dashoffset: 50;
		opacity: 1;
	}
	75% {
		stroke-dashoffset: 50;
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 50;
		opacity: 0;
	}
}

#gn {
	animation: gn_mask 5s forwards linear;
}

@keyframes gn_mask {
	0% {
		stroke-dashoffset: 1000;
	}
	40% {
		stroke-dashoffset: 1000;
	}
	60% {
		stroke-dashoffset: 50;
		opacity: 1;
	}
	80% {
		stroke-dashoffset: 50;
		opacity: 0;
	}
	100% {
		stroke-dashoffset: 50;
		opacity: 0;
	}
}

#point_i {
	animation: point_i_mask 5s forwards linear;
}

@keyframes point_i_mask {
	0% {
		stroke-dashoffset: 1000;
	}
	59% {
		stroke-dashoffset: 1000;
	}
	60% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	80% {
		stroke-dashoffset: 0;
		opacity: 0;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

.esign_transform {
	width: 5.25vw;
	position: absolute;
	bottom: 2.5%;
	left: 76%;
	animation: esign_transform 5s forwards ease-in;
}

@keyframes esign_transform {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	70% {
		opacity: 1;
		transform: rotate(0) translate(0) scale(1);
	}
	100% {
		opacity: 1;
		transform: rotate(90deg) translate(-300%, 140%) scale(7);
	}
}

/* DESKTOP */

@media screen and (min-width: 1024px) {
	#no_content {
		display: none;
	}

	#content {
		display: none;
		animation: content 1s forwards;
	}

	@keyframes content {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.mobile_open_widget {
		display: none;
	}

	.mobile_close_widget {
		display: none;
	}

	#scroll {
		overflow-y: scroll;
		scroll-behavior: smooth;
		scroll-padding-top: 100px;
		overflow-x: hidden;
		scroll-snap-type: y mandatory;
	}

	body {
		font-family: "OffsideRegular";
		background-color: #121212;
	}

	header {
		display: none;
		align-items: center;
		color: rgb(255, 208, 0);
		height: 100px;
		width: 100vw;
		font-family: "BebasNeueRegular";
		overflow: hidden;
		background-color: rgb(255, 208, 0);
		border-top: thin solid rgb(255, 208, 0);
		border-bottom: thin solid rgb(255, 208, 0);
		box-shadow: 0 2px #121212;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: 5;
	}

	.header_show {
		display: flex;
		animation: header_show 0.5s forwards;
	}

	@keyframes header_show {
		from {
			height: 0;
		}
		to {
			height: 100px;
		}
	}

	.header_active {
		background-color: #121212;
		animation: header_active 0.5s forwards;
	}

	.header_active a {
		color: #121212;
	}

	@keyframes header_active {
		0% {
			background: #121212;
		}

		100% {
			background: rgb(255, 208, 0);
		}
	}

	nav span:hover:not(.header_active) {
		animation: header_hover 0.5s;
	}

	@keyframes header_hover {
		0% {
			width: 0;
		}

		100% {
			width: 100%;
		}
	}

	nav,
	nav ul {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
		font-size: min(36px, 3.5vw);
	}

	nav li {
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	nav span {
		display: flex;
		background-color: #121212;
		width: 100%;
		height: 100%;
		transform: skew(-45deg);
		align-items: center;
		justify-content: center;
		z-index: 2;
		border-right: thin solid rgb(255, 208, 0);
	}

	nav span a {
		display: flex;
		transform: skew(45deg);
		align-items: center;
		justify-content: center;
		color: rgb(255, 208, 0);
		cursor: pointer;
		white-space: nowrap;
	}

	.nav_first_li_before:before {
		content: "";
		position: absolute;
		top: -40px;
		left: -50px;
		width: 80px;
		height: 80px;
		transform: skew(-45deg, 45deg);
		z-index: 1;
		background-color: #121212;
		transition: 0.8s;
	}

	.header_name {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 34%;
		transform: skew(-45deg);
		color: #121212;
		background-color: rgb(255, 208, 0);
		height: 100%;
		padding-left: 1vw;
		padding-right: 1vw;
	}

	.header_name div {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		transform: skew(45deg);
		cursor: pointer;
		font-size: min(36px, 3.5vw);
	}

	.header_name_job {
		font-family: "OffsideRegular";
		font-size: min(18px, 1.75vw);
	}

	/* Home DESKTOP */

	#home {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.home_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 20vh;
	}

	.h1_wrapper {
		width: 66vw;
		min-width: min-content;
		background-color: rgb(255, 208, 0);
		height: 100%;
		display: flex;
		align-items: center;
	}

	h1 {
		width: max-content;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		margin-left: 70px;
		margin-right: 70px;
	}

	.name {
		font-family: "BebasNeueRegular";
		font-size: 72px;
		margin-bottom: 10px;
	}

	.name span {
		font-family: "TVDesign";
		font-size: 96px;
	}

	.job {
		font-size: 36px;
	}

	.about {
		margin-left: 70px;
		margin-right: 70px;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.about * {
		color: rgb(255, 208, 0);
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.home_middle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 35vh;
		color: rgb(255, 208, 0);
		line-height: 120%;
	}

	.home_middle .slogan {
		font-family: "BebasNeueRegular", sans-serif;
		font-size: 48px;
		text-align: center;
	}

	.home_middle div {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.home_middle p {
		font-size: 18px;
		color: rgb(255, 208, 0);
		width: 75%;
		text-align: center;
		line-height: 160%;
	}

	.home_bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 35vh;
	}

	.home_bottom span {
		display: flex;
		align-items: center;
	}

	.home_left span {
		justify-content: flex-end;
	}

	.home_bottom a {
		color: rgb(255, 208, 0);
		margin: 0 10px;
		font-family: "BebasNeueRegular", sans-serif;
		font-size: 24px;
	}

	.landing_line_anim {
		animation: line forwards 6s;
	}

	@keyframes line {
		0% {
			width: 0;
		}
		70% {
			width: 0%;
		}
		100% {
			width: 40%;
		}
	}

	#line1 {
		white-space: nowrap;
	}

	#line1,
	#line2,
	#line3,
	#line4 {
		animation: line_label 6s forwards;
	}

	@keyframes line_label {
		0% {
			visibility: hidden;
		}
		70% {
			visibility: hidden;
		}
		71% {
			visibility: visible;
		}
		100% {
			visibility: visible;
		}
	}

	.line1 {
		width: 40%;
	}

	.line2 {
		transform: scaleY(-1);
		width: 40%;
	}
	.line3 {
		transform: scaleX(-1);
		width: 40%;
	}
	.line4 {
		transform: scale(-1, -1);
		width: 40%;
	}

	.line_hover {
		animation: line_hover 0.4s infinite alternate;
	}

	@keyframes line_hover {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.home_left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		height: 32vh;
	}

	.home_right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		height: 32vh;
	}

	.profil_img {
		height: 32vh;
		width: 32vh;
		position: relative;
	}

	.profil_jaune {
		height: 13vh;
		position: absolute;
		bottom: 1.2vh;
		left: 2vh;
		transform: rotate(-25deg);
		margin: auto;
		z-index: 1;
		animation: profil_jaune 6s forwards;
	}

	@keyframes profil_jaune {
		0% {
			transform: rotate(-25deg);
			height: 13vh;
			bottom: 1.2vh;
			left: 2vh;
		}
		50% {
			transform: rotate(-25deg);
			height: 13vh;
			bottom: 1.2vh;
			left: 2vh;
		}
		55% {
			transform: rotate(0deg);
			bottom: 3vh;
			left: 4vh;
		}
		57% {
			height: 23vh;
			bottom: 3vh;
			left: 4vh;
		}
		60% {
			height: 23vh;
			transform: rotate(20deg);
			bottom: 3vh;
			left: 4vh;
		}
		62% {
			height: 23vh;
			transform: rotate(-30deg);
			bottom: 3vh;
			left: 4vh;
		}
		70% {
			height: 23vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 4vh;
		}

		99% {
			height: 23vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 4vh;
			opacity: 1;
		}
		100% {
			height: 23vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 4vh;
			opacity: 0;
		}
	}

	.profil_noir {
		height: 23vh;
		position: absolute;
		bottom: 3vh;
		left: 4vh;
		opacity: 0;
		animation: profil_noir 6s forwards;
		z-index: 2;
	}

	@keyframes profil_noir {
		0% {
			opacity: 0;
		}
		70% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_engrenage {
		height: 32vh;
		position: absolute;
		animation: profil_engrenage 7s forwards;
	}

	@keyframes profil_engrenage {
		0% {
			transform: rotate(0deg);
		}
		55.6% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(10000deg);
		}
	}

	.profil_macaron {
		height: 32vh;
		position: absolute;
		animation: profil_macaron 7s forwards;
	}

	@keyframes profil_macaron {
		0% {
			opacity: 0;
		}
		65% {
			opacity: 0;
		}
		70% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_contour_macaron {
		height: 32vh;
		position: absolute;
		animation: profil_contour_macaron 7s forwards;
	}

	@keyframes profil_contour_macaron {
		0% {
			opacity: 0;
		}
		57% {
			opacity: 0;
		}
		65% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_z1 {
		height: 3vh;
		position: absolute;
		bottom: 14vh;
		left: 11vh;
		z-index: 1;
		opacity: 0.9;
		animation: profil_z1 1.2s 2 forwards linear;
	}

	.profil_z2 {
		height: 2vh;
		position: absolute;
		bottom: 17vh;
		left: 14vh;
		z-index: 1;
		opacity: 0.6;
		animation: profil_z2 1.4s 2 forwards linear;
	}

	.profil_z3 {
		height: 1vh;
		bottom: 22vh;
		left: 12vh;
		position: absolute;
		z-index: 1;
		opacity: 0.3;
		animation: profil_z3 1.5s 2 forwards linear;
	}

	@keyframes profil_z1 {
		0% {
			height: 3vh;
		}
		100% {
			height: 2vh;
			bottom: 17vh;
			left: 14vh;
			opacity: 0;
		}
	}

	@keyframes profil_z2 {
		0% {
			height: 2vh;
		}

		100% {
			height: 1vh;
			bottom: 22vh;
			left: 12vh;
			opacity: 0;
		}
	}

	@keyframes profil_z3 {
		0% {
			height: 1vh;
		}
		100% {
			height: 0vh;
			bottom: 26vh;
			left: 14vh;
			opacity: 0;
		}
	}

	/* Skills DESKTOP */

	#skills {
		height: calc(100vh - 100px);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		position: relative;
		overflow: hidden;
	}

	.skills_logo_jaune {
		width: 60px;
		position: absolute;
		bottom: 0;
		left: 16vw;
		z-index: 1;
		cursor: pointer;
	}

	.skills_logo_jaune_entree {
		animation: skills_logo_jaune_entree 1s forwards ease-out;
	}

	@keyframes skills_logo_jaune_entree {
		0% {
			left: -60px;
		}
		100% {
			left: 16vw;
		}
	}

	.skills_logo_jaune_action {
		animation: skills_logo_jaune_action 0.5s forwards linear;
	}

	@keyframes skills_logo_jaune_action {
		0% {
			left: 16vw;
			bottom: 0;
			transform: scaleX(1);
		}
		50% {
			left: 21.5vw;
			bottom: 50px;
		}
		99% {
			transform: scaleX(1);
		}
		100% {
			left: 27.5vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_logo_jaune_action_reverse {
		animation: skills_logo_jaune_action_reverse 0.5s forwards linear;
	}

	@keyframes skills_logo_jaune_action_reverse {
		0% {
			left: 27.5vw;
			bottom: 0;
			transform: scaleX(-1);
		}
		50% {
			left: 21.5vw;
			bottom: 50px;
		}
		99% {
			transform: scaleX(-1);
		}
		100% {
			left: 16vw;
			bottom: 0;
			transform: scaleX(1);
		}
	}

	.skills_levier_wrapper {
		width: 80px;
		height: 60px;
		position: absolute;
		bottom: 0;
		left: 20.9vw;
		cursor: pointer;
	}

	.skills_levier {
		width: 60px;
		position: absolute;
		bottom: -30px;
		left: 0;
		right: 0;
		margin: auto;
	}

	.skills_levier_right_first {
		animation: skills_levier_right_first 0.5s forwards;
	}

	@keyframes skills_levier_right_first {
		0% {
			transform: rotate(0);
			left: 0;
			right: 0;
			margin: auto;
			bottom: -30px;
		}
		50% {
			transform: rotate(0);
			left: 0;
			right: 0;
			margin: auto;
			bottom: -30px;
		}

		100% {
			transform: rotate(75deg);
			left: 1.7vw;
			margin: auto;
			bottom: -39px;
		}
	}

	.skills_levier_right {
		animation: skills_levier_right 0.5s forwards;
	}

	@keyframes skills_levier_right {
		0% {
			transform: rotate(-75deg);
			right: 1.7vw;
			bottom: -39px;
		}
		50% {
			bottom: -30px;
		}
		100% {
			transform: rotate(75deg);
			left: 1.7vw;
			bottom: -39px;
		}
	}

	.skills_levier_left {
		animation: skills_levier_left 0.5s forwards;
	}

	@keyframes skills_levier_left {
		0% {
			transform: rotate(75deg);
			left: 1.7vw;
			bottom: -39px;
		}
		50% {
			bottom: -30px;
		}
		100% {
			transform: rotate(-75deg);
			right: 1.7vw;
			bottom: -39px;
		}
	}

	.skills_base_levier {
		width: 80px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.skills_wheel {
		height: 80%;
		position: absolute;
		left: -40vh;
		z-index: 1;
		cursor: pointer;
		transition: 0.5s;
	}

	.skills_wheel:hover {
		transform: rotate(10deg);
	}

	.skills_wheel_anim {
		animation: wheel_squeeze 1s;
	}

	@keyframes wheel_squeeze {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.skills_text_display_none {
		display: none;
	}

	.skills_wrapper {
		display: none;
		width: 100%;
		min-height: 50%;
		align-items: center;
		justify-content: flex-end;
		background-image: url("images/skills_fond_desktop.svg");
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: left;
		animation: skills_text_show 1s;
	}

	.skills_text {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 70%;
		animation: skills_text_show 1s;
	}

	@media screen and (orientation: portrait) {
		.skills_text {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 50%;
			animation: skills_text_show 1s;
		}
	}

	@keyframes skills_text_show {
		from {
			transform: translate(100%);
		}
		to {
			transform: translate(0);
		}
	}

	.skills_text h2 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		margin-bottom: 30px;
	}

	.skills_text li {
		margin: 5px 0;
		list-style-type: disc;
	}

	.skills_text div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		min-height: 200px;
	}

	/* Experience DESKTOP */

	#experience {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: calc(100vh - 100px);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		visibility: hidden;
		overflow: hidden;
	}

	.experience_anim {
		animation: experience_anim 1.5s;
	}

	@keyframes experience_anim {
		from {
			transform: translateX(-180vw);
		}
		to {
			transform: translateX(0);
		}
	}

	.exp {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: calc((100vh - 100px) / 3);
		width: 100vw;
		color: rgb(255, 208, 0);
		height: 23vh;
		margin: 1vh 0;
	}

	.exp_circle_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.exp_h2_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 15vw;
		border: none;
		margin: 0 2vw;
	}

	#experience h2 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		text-align: center;
	}

	.exp_circle_wrapper div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 150px;
		width: 150px;
		border-radius: 50%;
		border: 2px solid rgb(255, 208, 0);
		margin: 0 1vw;
		padding: 5px;
		cursor: pointer;
	}

	.exp_circle_wrapper div:hover {
		background-color: #121212;
		color: rgb(255, 208, 0);
	}

	.exp_circle_wrapper div * {
		pointer-events: none;
	}

	.exp_zoom_wrapper {
		position: absolute;
		top: calc(300vh - 200px);
		height: calc(100vh - 100px);
		width: 100vw;
		background: linear-gradient(#ffffff00 33%, rgb(255, 208, 0) 33%, rgb(255, 208, 0) 66%, #ffffff00 66%), url("images/fond.svg"), #121212;
		z-index: 2;
		align-items: center;
		justify-content: flex-end;
		display: none;
		animation: exp_zoom_wrapper_anim 0.5s;
	}

	@keyframes exp_zoom_wrapper_anim {
		from {
			width: 0;
		}
		to {
			width: 100%;
		}
	}

	.exp_zoom {
		height: 580px;
		width: 580px;
		border-radius: 50%;
		background-color: rgb(255, 208, 0);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		z-index: 3;
	}

	.exp_zoom_border {
		height: 640px;
		width: 640px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 5vw;
		background-color: #121212;
		animation: exp_zoom_anim 2s;
	}

	@keyframes exp_zoom_anim {
		0% {
			transform: translateX(-150%) rotate(0deg);
			opacity: 0;
		}
		50% {
			transform: translateX(-150%) rotate(0deg);
			opacity: 0;
		}
		51% {
			transform: translateX(-150%) rotate(0deg);
			opacity: 1;
		}
		100% {
			transform: translateX(0) rotate(720deg);
		}
	}

	.exp_zoom_logo {
		width: 60px;
		position: absolute;
		left: 10vw;
		bottom: 67%;
	}

	.exp_zoom_logo_anim {
		animation: exp_zoom_logo 12s forwards;
	}

	@keyframes exp_zoom_logo {
		0% {
			left: -60px;
		}
		5% {
			left: 40vw;
			transform: scaleX(1);
		}
		5.25% {
			left: 40vw;
			transform: scaleX(-1);
		}
		7.5% {
			left: 40vw;
			transform: scaleX(-1);
		}
		8.25% {
			left: 40vw;
			transform: scaleX(1);
		}

		17.5% {
			left: 100vw;
			transform: scaleX(1);
			opacity: 1;
		}
		17.75% {
			left: 100vw;
			opacity: 0;
		}
		18% {
			left: -120px;
			opacity: 0;
		}
		18.25% {
			opacity: 1;
		}
		25% {
			left: 10vw;
		}
		25.1% {
			left: 10vw;
			bottom: 67%;
		}
		40% {
			left: 30vw;
			transform: scaleX(1);
		}
		41% {
			left: 30vw;
			transform: scaleX(1);
		}
		41.1% {
			left: 30vw;
			transform: scaleX(-1);
		}
		51% {
			left: 5vw;
			transform: scaleX(-1);
		}
		53.5% {
			left: 5vw;
			transform: scaleX(-1);
		}
		53.6% {
			left: 5vw;
			transform: scaleX(1);
		}

		61% {
			left: 40vw;
			transform: scaleX(1);
		}

		76% {
			left: 10vw;
			bottom: 67%;
		}
		76.75% {
			left: 10vw;
			bottom: 70%;
		}
		77.5% {
			left: 10vw;
			bottom: 67%;
		}
		78.25% {
			left: 10vw;
			bottom: 70%;
		}
		79% {
			left: 10vw;
			bottom: 67%;
		}
		80.5% {
			left: 10vw;
			bottom: 67%;
		}
		85% {
			left: 40vw;
			bottom: 90%;
			transform: rotate(45deg);
		}
		92.5% {
			bottom: 50%;
			left: 50vw;
			transform: rotate(160deg);
		}
		100% {
			bottom: -50%;
			left: 60vw;
			transform: rotate(180deg);
		}
	}

	.exp_zoom_element1 {
		font-size: 20px;
		max-width: 400px;
		margin-bottom: 20px;
		text-decoration: underline;
	}

	.exp_zoom_element3 {
		font-size: 20px;
		max-width: 400px;
		margin: 20px 0 10px 0;
	}

	.exp_zoom_element2 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		font-weight: bold;
		max-width: 400px;
	}

	.exp_zoom_element5,
	.exp_zoom_element4 {
		font-size: 16px;
		max-width: 400px;
		margin: 5px 0;
	}

	.exp_zoom_element6 {
		font-size: 14px;
		max-width: 400px;
		margin: 20px 0;
		text-align: center;
	}

	.exp_zoom_close {
		align-self: flex-start;
		position: absolute;
		height: 40px;
		top: 80px;
		right: 60px;
		cursor: pointer;
		transition: 1s;
		overflow: hidden;
		user-select: none;
		z-index: 4;
	}

	.exp_zoom_close:hover {
		transform: rotate(360deg);
	}

	#experience h3 {
		font-size: 18px;
	}

	#experience p {
		font-size: 12px;
		margin: 10px 0;
	}

	#experience time {
		font-size: 12px;
	}

	.exp_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 100px);
	}

	.exp_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		position: relative;
		top: 0;
		right: 30vw;
		transition: 0.8s;
	}

	@keyframes exp_right {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.exp_right_anim {
		animation: exp_right 1.5s;
	}

	.exp_right img {
		position: relative;
		top: 0;
		height: 40vh;
		margin: 50px;
		z-index: 1;
	}

	.wheel_active {
		background-color: rgb(255, 208, 0);
		color: #121212;
	}

	.wheel_active .exp_circle_wrapper div {
		border: 2px solid #121212;
	}

	/* Achievements DESKTOP */

	.ach_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		height: calc(100vh - 100px);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		max-height: calc(100vh - 100px);
		overflow: hidden;
	}

	.ach_fleche_gauche {
		height: 30px;
		position: absolute;
		left: 30px;
		transform: rotate(180deg);
		transition: 0.5s;
		cursor: pointer;
		animation: ach_fleche 2s alternate-reverse infinite;
		z-index: 2;
	}

	.ach_fleche_droite {
		height: 30px;
		position: absolute;
		right: 30px;
		transition: 0.5s;
		cursor: pointer;
		animation: ach_fleche 2s alternate-reverse infinite;
		z-index: 2;
	}

	@keyframes ach_fleche {
		0% {
			opacity: 0.5;
		}
		100% {
			opacity: 1;
		}
	}

	.ach_fleche_gauche:hover {
		transform: scale(2) rotate(180deg);
	}

	.ach_fleche_droite:hover {
		transform: scale(2);
	}

	.ach1,
	.ach2,
	.ach3,
	.ach4,
	.ach5 {
		height: 100%;
		width: 100vw;
	}

	.ach_invisible {
		display: none;
	}

	.ach_change {
		animation: ach_change 2s forwards;
	}

	@keyframes ach_change {
		0% {
			transform: translate(100%);
		}
		100% {
			transform: translate(0);
		}
	}

	.ach_top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 40%;
		width: 100%;
	}
	.ach_bottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 40%;
		width: 100%;
	}

	.ach_pickup_wrapper {
		display: none;
		position: relative;
		bottom: 0;
		top: 0;
		margin: auto;
		width: 100vw;
		height: 20%;
	}

	.ach_pickup_anim {
		display: flex;
		animation: pick_up 8s linear forwards;
	}

	@keyframes pick_up {
		0% {
			transform: translateX(-20vw);
		}
		12.5% {
			transform: translateX(10%);
		}
		25% {
			transform: translateX(10%);
		}
		50% {
			transform: translateX(120vw) scaleX(1);
		}
		51% {
			transform: translateX(120vw) translateY(-8vw) rotate(10deg) scaleX(-1);
		}
		100% {
			transform: translateX(-120vw) translateY(-8vw) rotate(10deg) scaleX(-1);
		}
	}

	.ach_logo {
		position: absolute;
		bottom: 5vw;
		width: 4%;
		left: 3%;
	}

	.ach_carosserie {
		position: absolute;
		bottom: 1.5vw;
		width: 20%;
	}

	.ach_roue_droite {
		position: absolute;
		left: 15.8%;
		bottom: 0;
		width: 3%;
		animation: pickup_wheels 8s linear forwards;
	}

	.ach_roue_gauche {
		position: absolute;
		left: 1.8%;
		bottom: 0;
		width: 3%;
		animation: pickup_wheels 8s linear forwards;
	}

	@keyframes pickup_wheels {
		0% {
			transform: rotate(0);
		}
		12.5% {
			transform: rotate(360deg);
		}
		22% {
			transform: rotate(360deg);
		}
		25% {
			transform: rotate(720deg);
		}

		50% {
			transform: rotate(1440deg);
		}
		100% {
			transform: rotate(2440deg);
		}
	}

	.ach_chaine {
		position: absolute;
	}

	.ach_smoke1 {
		position: absolute;
		height: 15%;
		left: -3vw;
		bottom: 2vw;
		animation: ach_smoke 0.9s alternate-reverse infinite;
	}

	.ach_smoke2 {
		position: absolute;
		height: 8%;
		left: -4vw;
		bottom: 3vw;
		animation: ach_smoke 0.6s alternate-reverse infinite;
	}

	@keyframes ach_smoke {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	.ach_video {
		height: 16.87vw;
	}

	.ach_video video,
	.ach_video img {
		width: 30vw;
		border: thin solid rgb(255, 208, 0);
		box-sizing: border-box;
		height: 100%;
	}

	.ach_video1 video {
		max-width: 30vw;
	}

	.ach_video2 video {
		max-width: 30vw;
	}

	.ach_video3 video {
		max-width: 30vw;
	}

	.ach_description {
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: 100%;
		width: 30vw;
		background-color: rgb(255, 208, 0);
	}

	.ach_description h3 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		max-width: 75%;
		text-align: center;
		padding-top: 30px;
	}

	.ach_description p {
		font-size: 18px;
		max-width: 75%;
		text-align: center;
		margin: 15px 0;
	}

	.ach_description ul {
		list-style-type: disc;

		max-width: 75%;
	}

	.ach_description li {
		margin: 10px 0;
	}

	.ach_description1 {
		animation: video_anim 0.5s linear forwards;
	}
	.ach_description2 {
		animation: video_anim 1s linear forwards;
	}
	.ach_description3 {
		animation: video_anim 1.5s linear forwards;
	}
	@keyframes video_anim {
		0% {
			transform: translateY(100%);
		}

		100% {
			transform: translateY(0);
		}
	}

	/* Contact DESKTOP */

	#contact {
		height: calc(100vh - 100px);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		display: flex;
		position: relative;
		overflow-x: hidden;
	}

	.contact_logo {
		position: absolute;
		width: 60px;
		bottom: 0;
		left: 35vw;
		transform: scaleX(-1);
	}

	.contact_right_logo_anim {
		animation: contact_right_logo 9s forwards;
	}

	@keyframes contact_right_logo {
		0% {
			transform: translate(100vw) scaleX(-1);
		}
		33% {
			transform: translate(-20%) scaleX(-1);
		}
		66% {
			transform: translate(-20%) scaleX(-1);
		}
		67% {
			transform: translate(-20%) scaleX(1);
		}
		100% {
			transform: translate(100vw) scaleX(1);
		}
	}

	@keyframes contact_right_anim {
		0% {
			transform: translate(-100%);
		}
		50% {
			transform: translate(-100%);
		}
		75% {
			transform: translate(-40%);
		}
		80% {
			transform: translate(-43%);
		}
		100% {
			transform: translate(0);
		}
	}

	.contact_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 34vw;
		background-color: rgb(255, 208, 0);
		font-size: 20px;
		visibility: hidden;
	}

	.contact_right h2 {
		margin-top: 5vh;
		font-family: "BebasNeueRegular";
		font-size: 36px;
	}

	.contact_right_anim {
		animation: contact_right_anim 6s forwards;
		visibility: visible;
	}

	.contact_right_top,
	.contact_right_bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 50%;
	}

	.dial_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.dial_wrapper img {
		transition: 0.5s;
	}

	.dial_anim {
		animation: dial_anim 6s;
	}

	@keyframes dial_anim {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(0deg);
		}
		75% {
			transform: rotate(180deg);
		}
		80% {
			transform: rotate(190deg);
		}
		100% {
			transform: rotate(360deg);
			visibility: visible;
		}
	}

	.dial_wrapper span {
		position: absolute;
		pointer-events: none;
		font-size: 30px;
	}

	.dial_wrapper img:hover {
		transform: rotate(30deg);
	}

	.mail_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.mail_wrapper img {
		transition: 0.5s;
		border-radius: 50%;
	}

	.mail_wrapper span {
		position: absolute;
		pointer-events: none;
		font-size: 30px;
	}

	.mail_wrapper img:hover {
		transform: rotate(-30deg);
	}

	.mail_anim {
		animation: mail_anim 6s;
	}

	@keyframes mail_anim {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(0deg);
		}
		75% {
			transform: rotate(180deg);
		}
		80% {
			transform: rotate(190deg);
		}
		100% {
			transform: rotate(360deg);
			visibility: visible;
		}
	}

	.mail_click_anim_img {
		animation: mail_click_anim_img 2s;
	}

	@keyframes mail_click_anim_img {
		from {
			transform: rotate(0deg);
		}
		40% {
			background: radial-gradient(#121212 30%, rgb(255, 208, 0) 30%);
		}
		to {
			transform: rotate(720deg);
			background: radial-gradient(#121212 30%, rgb(255, 208, 0) 30%);
		}
	}

	.mail_click_anim_wrapper {
		animation: mail_click_anim_wrapper 2s;
	}

	@keyframes mail_click_anim_wrapper {
		from {
			transform: translate(0);
		}
		50% {
			transform: translate(0);
			color: rgb(255, 208, 0);
		}
		to {
			transform: translate(100vw);
			color: rgb(255, 208, 0);
		}
	}

	.contact_left {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 66vw;
		height: 100%;
	}

	.contact_left form {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 100%;
	}

	.contact_left input {
		width: 100%;
		height: 30px;
		margin-bottom: 5vh;
	}

	.contact_left textarea {
		width: 100%;
		height: 200px;
	}
	.contact_left label {
		color: rgb(255, 208, 0);
		font-family: "BebasNeueRegular";
		font-size: 30px;
		align-self: flex-start;
		margin-bottom: 2vh;
	}

	.contact_left button {
		transition: 0.5s;
		font-size: 30px;
		color: rgb(255, 208, 0);
		background-color: transparent;
		border: none;
		height: 147px;
		width: 147px;
		z-index: 2;
		transition: 0.5s;
		cursor: pointer;
	}

	.submit_button {
		height: 147px;
		width: 147px;
		background: none;
		border: none;
		background-image: url("images/send.svg");
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.5s;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.submit_button:hover {
		transform: rotate(45deg);
	}

	.contact_left button:hover {
		transform: rotate(-45deg);
	}

	.contact_left_button_anim {
		animation: contact_left_button_anim 2s;
	}

	.contact_left_button_anim_symbol {
		animation: contact_left_button_anim_symbol 2s;
	}

	@keyframes contact_left_button_anim {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes contact_left_button_anim_symbol {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-360deg);
		}
	}

	/* Footer DESKTOP */
	footer {
		scroll-snap-align: end;
		scroll-snap-stop: always;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		height: 200px;
		background-color: #181818;
		position: relative;
	}

	footer * {
		color: rgb(255, 208, 0);
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------- */

/* TAB */

@media screen and (min-width: 801px) and (max-width: 1023px) and (min-height: 600px) and (orientation: landscape), screen and (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
	#no_content {
		display: none;
	}

	#content {
		display: none;
		animation: content 1s forwards;
	}

	@keyframes content {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.mobile_open_widget {
		display: none;
	}

	.mobile_close_widget {
		display: none;
	}

	#scroll {
		scroll-snap-type: y mandatory;
		overflow-y: scroll;
		scroll-behavior: smooth;
		scroll-padding-top: 100px;
		overflow-x: hidden;
	}

	body {
		font-family: "OffsideRegular";
		background-color: #121212;
		position: relative;
		background-attachment: scroll;
		background-size: contain;
	}

	header {
		display: none;
		align-items: center;
		color: rgb(255, 208, 0);
		height: 100px;
		width: 100vw;
		font-family: "BebasNeueRegular";
		overflow: hidden;
		background-color: rgb(255, 208, 0);
		border-top: thin solid rgb(255, 208, 0);
		border-bottom: thin solid rgb(255, 208, 0);
		box-shadow: 0 2px #121212;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: 5;
	}

	.header_show {
		display: flex;
		animation: header_show 0.5s forwards;
	}

	@keyframes header_show {
		from {
			height: 0;
		}
		to {
			height: 100px;
		}
	}

	.header_active {
		background-color: #121212;
		animation: header_active 0.5s forwards;
	}

	.header_active a {
		color: #121212;
	}

	@keyframes header_active {
		0% {
			background: #121212;
		}

		100% {
			background: rgb(255, 208, 0);
		}
	}

	nav span:hover:not(.header_active) {
		animation: header_hover 0.5s;
	}

	@keyframes header_hover {
		0% {
			width: 0;
		}

		100% {
			width: 100%;
		}
	}

	nav,
	nav ul {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
		font-size: min(36px, 3.5vw);
	}

	nav li {
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	nav span {
		display: flex;
		background-color: #121212;
		width: 100%;
		height: 100%;
		transform: skew(-45deg);
		align-items: center;
		justify-content: center;
		z-index: 2;
		border-right: thin solid rgb(255, 208, 0);
	}

	nav span a {
		display: flex;
		transform: skew(45deg);
		align-items: center;
		justify-content: center;
		color: rgb(255, 208, 0);
		cursor: pointer;
		white-space: nowrap;
	}

	.nav_first_li_before:before {
		content: "";
		position: absolute;
		top: -40px;
		left: -50px;
		width: 80px;
		height: 80px;
		transform: skew(-45deg, 45deg);
		z-index: 1;
		background-color: #121212;
		transition: 0.8s;
	}

	.header_name {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 34%;
		transform: skew(-45deg);
		color: #121212;
		background-color: rgb(255, 208, 0);
		height: 100%;
		padding-left: 1vw;
		padding-right: 1vw;
	}

	.header_name div {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		transform: skew(45deg);
		cursor: pointer;
		font-size: min(36px, 3.5vw);
	}

	.header_name_job {
		font-family: "OffsideRegular";
		font-size: min(18px, 1.75vw);
	}

	/* Home TAB */

	#home {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.home_top {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		height: 20vh;
	}

	.h1_wrapper {
		display: flex;
		align-items: center;
		width: 100vw;
		min-height: 10vh;
		background-color: rgb(255, 208, 0);
	}

	h1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}

	.name {
		font-family: "BebasNeueRegular";
		font-size: min(72px, 6vh);
	}

	.name span {
		font-family: "TVDesign";
		font-size: min(72px, 6.5vh);
	}

	.job {
		font-size: min(36px, 3vh);
	}

	.about ul {
		height: 100%;
		width: 100vw;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.about * {
		color: rgb(255, 208, 0);
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.home_middle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 30vh;
		color: rgb(255, 208, 0);
		line-height: 120%;
	}

	.home_middle .slogan {
		font-family: "BebasNeueRegular", sans-serif;
		font-size: 48px;
		text-align: center;
	}

	.home_middle div {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.home_middle p {
		font-size: 18px;
		color: rgb(255, 208, 0);
		width: 75%;
		text-align: center;
		padding: 5px 0;
		line-height: 160%;
	}

	.home_bottom {
		display: flex;
		flex-direction: column;
		align-self: center;
		align-items: center;
		height: 40vh;
		width: 66%;
	}

	.home_bottom span {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 40%;
	}

	.home_left span {
		justify-content: flex-end;
	}

	.home_bottom a {
		color: rgb(255, 208, 0);
		margin: 0 10px;
		font-family: "BebasNeueRegular", sans-serif;
		font-size: 24px;
	}

	.landing_line_anim {
		animation: line 6s;
	}

	@keyframes line {
		0% {
			width: 0;
		}
		70% {
			width: 0%;
		}
		100% {
			width: 50%;
		}
	}

	.line1 {
		width: 50%;
	}

	.line2 {
		transform: scaleX(-1);
		width: 50%;
	}
	.line3 {
		transform: scaleY(-1);
		width: 50%;
	}
	.line4 {
		transform: scale(-1, -1);
		width: 50%;
	}

	.line_hover {
		animation: line_hover 0.4s infinite alternate;
	}

	@keyframes line_hover {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.home_left {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		width: 100%;
	}

	.profil_img {
		height: 20vh;
		width: 20vh;
		position: relative;
	}

	.home_right {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		width: 100%;
	}

	#line1,
	#line2,
	#line3,
	#line4 {
		animation: line_label 6s forwards;
	}

	@keyframes line_label {
		0% {
			visibility: hidden;
		}
		70% {
			visibility: hidden;
		}
		71% {
			visibility: visible;
		}
		100% {
			visibility: visible;
		}
	}

	.profil_jaune {
		height: 10vh;
		position: absolute;
		bottom: 1.2vh;
		left: 2vh;
		transform: rotate(-25deg);
		margin: auto;
		z-index: 1;
		animation: profil_jaune 6s forwards;
	}

	@keyframes profil_jaune {
		0% {
			transform: rotate(-25deg);
			height: 10vh;
			bottom: 1.2vh;
			left: 2vh;
		}
		50% {
			transform: rotate(-25deg);
			height: 10vh;
			bottom: 1.2vh;
			left: 2vh;
		}
		55% {
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
		}
		57% {
			height: 13vh;
			bottom: 3vh;
			left: 3vh;
		}
		60% {
			height: 13vh;
			transform: rotate(20deg);
			bottom: 3vh;
			left: 3vh;
		}
		62% {
			height: 13vh;
			transform: rotate(-30deg);
			bottom: 3vh;
			left: 3vh;
		}
		70% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
		}

		99% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
			opacity: 1;
		}
		100% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
			opacity: 0;
		}
	}

	.profil_noir {
		height: 13vh;
		position: absolute;
		bottom: 3vh;
		left: 3vh;
		opacity: 0;
		animation: profil_noir 6s forwards;
		z-index: 2;
	}

	@keyframes profil_noir {
		0% {
			opacity: 0;
		}
		70% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_engrenage {
		height: 20vh;
		position: absolute;
		animation: profil_engrenage 7s forwards;
	}

	@keyframes profil_engrenage {
		0% {
			transform: rotate(0deg);
		}
		55.6% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(10000deg);
		}
	}

	.profil_macaron {
		height: 20vh;
		position: absolute;
		animation: profil_macaron 7s forwards;
	}

	@keyframes profil_macaron {
		0% {
			opacity: 0;
		}
		65% {
			opacity: 0;
		}
		70% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_contour_macaron {
		height: 20vh;
		position: absolute;
		animation: profil_contour_macaron 7s forwards;
	}

	@keyframes profil_contour_macaron {
		0% {
			opacity: 0;
		}
		57% {
			opacity: 0;
		}
		65% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_z1 {
		height: 3vh;
		position: absolute;
		bottom: 11vh;
		left: 11vh;
		z-index: 1;
		opacity: 0.9;
		animation: profil_z1 1.2s 2 forwards linear;
	}

	.profil_z2 {
		height: 2vh;
		position: absolute;
		bottom: 14vh;
		left: 14vh;
		z-index: 1;
		opacity: 0.6;
		animation: profil_z2 1.4s 2 forwards linear;
	}

	.profil_z3 {
		height: 1vh;
		bottom: 19vh;
		left: 12vh;
		position: absolute;
		z-index: 1;
		opacity: 0.3;
		animation: profil_z3 1.5s 2 forwards linear;
	}

	@keyframes profil_z1 {
		0% {
			height: 3vh;
		}
		100% {
			height: 2vh;
			bottom: 13vh;
			left: 14vh;
			opacity: 0;
		}
	}

	@keyframes profil_z2 {
		0% {
			height: 2vh;
		}

		100% {
			height: 1vh;
			bottom: 19vh;
			left: 12vh;
			opacity: 0;
		}
	}

	@keyframes profil_z3 {
		0% {
			height: 1vh;
		}
		100% {
			height: 0vh;
			bottom: 26vh;
			left: 14vh;
			opacity: 0;
		}
	}

	/* Skills TAB */

	#skills {
		height: calc(100vh - 100px);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.skills_logo_jaune {
		width: 60px;
		position: absolute;
		bottom: 0;
		left: 6vw;
		z-index: 1;
		cursor: pointer;
	}

	.skills_logo_jaune_entree {
		animation: skills_logo_jaune_entree 1s forwards ease;
	}

	@keyframes skills_logo_jaune_entree {
		0% {
			left: 50vw;
			bottom: calc(100vh - 160px);
			transform: scaleX(-1);
		}
		90% {
			left: 50vw;
			bottom: 0;
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_logo_jaune_action {
		animation: skills_logo_jaune_action 0.5s forwards linear;
	}

	@keyframes skills_logo_jaune_action {
		0% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
		0% {
			left: 2vw;
			bottom: 0;
		}
		50% {
			left: 6vw;
			bottom: 45px;
		}
		99% {
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_logo_jaune_action_reverse {
		animation: skills_logo_jaune_action_reverse 0.5s forwards linear;
	}

	@keyframes skills_logo_jaune_action_reverse {
		0% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
		25% {
			left: 4vw;
			bottom: 145px;
		}
		50% {
			left: -1vw;
			bottom: 135px;
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_levier_wrapper {
		width: 80px;
		height: 60px;
		position: absolute;
		bottom: 60px;
		left: -15px;
		cursor: pointer;
		transform: rotate(90deg);
	}

	.skills_levier {
		width: 60px;
		position: absolute;
		bottom: -30px;
		left: 0;
		right: 0;
		margin: auto;
	}

	.skills_levier_right_first {
		animation: skills_levier_right_first 0.5s forwards;
	}

	@keyframes skills_levier_right_first {
		0% {
			transform: rotate(0);
			left: 0;
			right: 0;
			margin: auto;
			bottom: -30px;
		}
		50% {
			transform: rotate(0);
			left: 0;
			right: 0;
			margin: auto;
			bottom: -30px;
		}

		100% {
			transform: rotate(-75deg);
			left: -30px;
			margin: auto;
			bottom: -39px;
		}
	}

	.skills_levier_right {
		animation: skills_levier_right 0.5s forwards reverse;
	}

	@keyframes skills_levier_right {
		0% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}
		50% {
			bottom: -32px;
		}
		100% {
			transform: rotate(75deg);
			left: 30px;
			bottom: -39px;
		}
	}

	.skills_levier_left {
		animation: skills_levier_left 0.5s forwards reverse;
	}

	@keyframes skills_levier_left {
		0% {
			transform: rotate(75deg);
			left: 30px;
			bottom: -39px;
		}
		25% {
			bottom: -39px;
		}
		26% {
			bottom: -32px;
		}
		50% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}

		100% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}
	}

	.skills_base_levier {
		width: 80px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.skills_wheel {
		height: 66vw;
		position: absolute;
		left: -33vw;
		z-index: 1;
		cursor: pointer;
		transition: 0.5s;
	}

	.skills_wheel:hover {
		transform: rotate(10deg);
	}

	.skills_wheel_anim {
		animation: wheel_squeeze 1s;
	}

	@keyframes wheel_squeeze {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.skills_text_display_none {
		display: none;
	}

	.skills_wrapper {
		display: none;
		align-items: center;
		justify-content: center;
		width: 66vw;
		height: 100%;
		background-image: url("images/skills_fond_tab.svg");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
		animation: skills_text_show 1s;
	}

	.skills_text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 80%;
		width: 80%;
		animation: skills_text_show 1s;
	}

	.skills_text ul {
		list-style-type: disc;
	}

	@keyframes skills_text_show {
		from {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.skills_text h2 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		margin-bottom: 30px;
	}

	.skills_text li {
		margin: 5px 0;
	}

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

	/* Experience TAB */

	#experience {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: calc(100vh - 100px);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		visibility: hidden;
		width: 100vw;
		overflow: hidden;
		position: relative;
	}

	.experience_anim {
		animation: experience_anim 1.5s;
	}

	@keyframes experience_anim {
		from {
			transform: translateX(-100%);
		}
		to {
			transform: translateX(0);
		}
	}

	.exp {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		height: calc((100vh - 100px) / 3);
		width: 100vw;
		color: rgb(255, 208, 0);
		margin: 1vh 0;
	}

	.exp_circle_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 75vw;
	}

	.exp_h2_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		width: 75vw;
	}

	#experience h2 {
		font-family: "BebasNeueRegular";
		font-size: min(36px, 3vh);
		text-align: center;
	}

	.exp_circle_wrapper div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 20vw;
		max-height: 150px;
		width: 20vw;
		max-width: 150px;
		border-radius: 50%;
		border: 2px solid rgb(255, 208, 0);
		margin: 0 0.5vw;
		padding: 5px;
		cursor: pointer;
	}

	.exp_circle_wrapper div:hover {
		background-color: #121212;
		color: rgb(255, 208, 0);
	}

	.exp_circle_wrapper div * {
		pointer-events: none;
	}

	.exp_zoom_wrapper {
		position: absolute;
		top: calc(300vh - 200px);
		height: calc(100vh - 100px);
		width: 100vw;
		background: linear-gradient(to right, #ffffff00 33%, rgb(255, 208, 0) 33%, rgb(255, 208, 0) 66%, #ffffff00 66%), url("images/fond.svg"), #121212;
		z-index: 2;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		display: none;
		animation: exp_zoom_wrapper_anim 0.5s;
		overflow: hidden;
	}

	@keyframes exp_zoom_wrapper_anim {
		from {
			width: 0;
		}
		to {
			width: 100%;
		}
	}

	.exp_zoom {
		height: 580px;
		width: 580px;
		border-radius: 50%;
		background-color: rgb(255, 208, 0);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		z-index: 3;
	}

	.exp_zoom_border {
		min-height: 640px;
		min-width: 640px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 2vh;
		background-color: #121212;
		animation: exp_zoom_anim 2s;
	}

	@keyframes exp_zoom_anim {
		from {
			transform: translateY(150%) rotate(0deg);
		}
		to {
			transform: translateX(0) rotate(720deg);
		}
	}

	.exp_zoom_logo {
		width: 60px;
		position: absolute;
		left: 10vw;
		bottom: 67%;
	}

	.exp_zoom_logo_anim {
		animation: exp_zoom_logo 12s forwards linear;
	}

	@keyframes exp_zoom_logo {
		0% {
			bottom: -60px;
			left: 10vw;
		}

		10% {
			left: 0px;
			bottom: 75vh;
			transform: rotate(120deg);
		}
		22% {
			left: 92vw;
			bottom: 70vh;
			transform: rotate(270deg);
		}
		34% {
			left: 66vw;
			bottom: 65vh;
			transform: rotate(360deg);
		}
		52% {
			left: 110vw;
			bottom: 50vh;
			transform: rotate(540deg);
			border: none;
		}
		62% {
			left: 110vw;
			bottom: 40vh;
			transform: rotate(15deg) scaleX(-1);
			border-bottom: 5px dashed rgb(255, 208, 0);
			padding: 2px;
		}

		72% {
			left: -20vw;
			bottom: 75vh;
			transform: rotate(15deg) scaleX(-1);
		}

		78% {
			left: -20vw;
			bottom: 20vh;
			transform: rotate(-25deg) scaleX(1);
		}

		90% {
			left: 120vw;
			bottom: 50vh;
			transform: rotate(-25deg) scaleX(1);
		}

		100% {
			left: 120vw;
			bottom: 50vh;
			transform: rotate(-25deg) scaleX(1);
			border-bottom: 5px dashed rgb(255, 208, 0);
			padding: 2px;
		}
	}

	.exp_zoom_element1 {
		font-size: 20px;
		max-width: 400px;
		margin-bottom: 20px;
		text-decoration: underline;
	}

	.exp_zoom_element3 {
		font-size: 20px;
		max-width: 400px;
		margin: 20px 0 10px 0;
	}

	.exp_zoom_element2 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		font-weight: bold;
		max-width: 400px;
	}

	.exp_zoom_element5,
	.exp_zoom_element4 {
		font-size: 16px;
		max-width: 400px;
		margin: 5px 0;
	}

	.exp_zoom_element6 {
		font-size: 14px;
		max-width: 400px;
		margin: 20px 0;
		text-align: center;
	}

	.exp_zoom_close {
		align-self: flex-start;
		position: absolute;
		height: 40px;
		top: 80px;
		right: 60px;
		cursor: pointer;
		transition: 1s;
		overflow: hidden;
		user-select: none;
		z-index: 4;
	}

	.exp_zoom_item {
		position: absolute;
		top: calc(202vh - 82px);
		left: calc(48.5vw - 82px);
		z-index: 3;
		animation: exp_zoom_item 2s;
	}

	@keyframes exp_zoom_item {
		from {
			transform: translateY(-30vh) rotate(0deg);
		}

		to {
			transform: translateY(0) rotate(360deg);
		}
	}

	.exp_zoom_close:hover {
		transform: rotate(360deg);
	}

	#experience h3 {
		font-size: max(2.2vw, 12px);
		padding: 0 3px;
	}

	#experience p {
		font-size: 10px;
		margin: 10px 0;
	}

	#experience time {
		font-size: 10px;
	}

	.exp_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 100px);
	}

	.exp_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		position: relative;
		top: 0;
		right: 30vw;
		transition: 0.8s;
	}

	.exp_right_anim {
		animation: exp_right 1.5s;
	}

	@keyframes exp_right {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.exp_right img {
		position: relative;
		top: 0;
		height: 40vh;
		margin: 50px;
		z-index: 1;
	}

	.wheel_active {
		background-color: rgb(255, 208, 0);
		color: #121212;
	}

	.wheel_active .exp_circle_wrapper div {
		border: 2px solid #121212;
	}

	/* Achievements TAB */

	#achievements {
		display: flex;
		height: calc(100vh - 100px);
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.ach_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		height: calc(100vh - 100px);
		max-height: calc(100vh - 100px);
		overflow: hidden;
	}

	.ach_fleche_gauche {
		height: 30px;
		position: absolute;
		left: 30px;
		transform: rotate(180deg);
		transition: 0.5s;
		cursor: pointer;
		animation: ach_fleche 2s alternate-reverse infinite;
		z-index: 2;
	}

	.ach_fleche_droite {
		height: 30px;
		position: absolute;
		right: 30px;
		transition: 0.5s;
		cursor: pointer;
		animation: ach_fleche 2s alternate-reverse infinite;
		z-index: 2;
	}

	@keyframes ach_fleche {
		0% {
			opacity: 0.5;
		}
		100% {
			opacity: 1;
		}
	}

	.ach1,
	.ach2,
	.ach3,
	.ach4,
	.ach5 {
		height: 100%;
		width: 100vw;
	}

	.ach_invisible {
		display: none;
	}

	.ach_change {
		animation: ach_change 2s forwards;
	}

	@keyframes ach_change {
		0% {
			transform: translate(100%);
		}
		100% {
			transform: translate(0);
		}
	}

	.ach_top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 40%;
		width: 100%;
	}
	.ach_bottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 40%;
		width: 100%;
	}

	.ach_pickup_wrapper {
		display: none;
		position: relative;
		bottom: 0;
		top: 0;
		margin: auto;
		width: 100vw;
		height: 20%;
	}

	.ach_pickup_anim {
		display: flex;
		animation: pick_up 8s linear forwards;
	}

	@keyframes pick_up {
		0% {
			transform: translateX(-20vw);
		}
		12.5% {
			transform: translateX(10%);
		}
		25% {
			transform: translateX(10%);
		}
		50% {
			transform: translateX(120vw) scaleX(1);
		}
		51% {
			transform: translateX(120vw) translateY(-8vw) rotate(10deg) scaleX(-1);
		}
		100% {
			transform: translateX(-120vw) translateY(-8vw) rotate(10deg) scaleX(-1);
		}
	}

	.ach_logo {
		position: absolute;
		bottom: 5vw;
		width: 4%;
		left: 3%;
	}

	.ach_carosserie {
		position: absolute;
		bottom: 1.5vw;
		width: 20%;
	}

	.ach_roue_droite {
		position: absolute;
		left: 15.8%;
		bottom: 0;
		width: 3%;
		animation: pickup_wheels 8s linear forwards;
	}

	.ach_roue_gauche {
		position: absolute;
		left: 1.8%;
		bottom: 0;
		width: 3%;
		animation: pickup_wheels 8s linear forwards;
	}

	@keyframes pickup_wheels {
		0% {
			transform: rotate(0);
		}
		12.5% {
			transform: rotate(360deg);
		}
		22% {
			transform: rotate(360deg);
		}
		25% {
			transform: rotate(720deg);
		}

		50% {
			transform: rotate(1440deg);
		}
		100% {
			transform: rotate(2440deg);
		}
	}

	.ach_chaine {
		position: absolute;
	}

	.ach_smoke1 {
		position: absolute;
		height: 15%;
		left: -3vw;
		bottom: 2vw;
		animation: ach_smoke 0.9s alternate-reverse infinite;
	}

	.ach_smoke2 {
		position: absolute;
		height: 8%;
		left: -4vw;
		bottom: 3vw;
		animation: ach_smoke 0.6s alternate-reverse infinite;
	}

	@keyframes ach_smoke {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	.ach_video {
		height: 16.87vw;
	}

	.ach_video video,
	.ach_video img {
		width: 30vw;
		height: min-content;
		border: thin solid rgb(255, 208, 0);
		box-sizing: border-box;
		height: 100%;
	}

	.ach_video1 video {
		max-width: 30vw;
	}

	.ach_video2 video {
		max-width: 30vw;
	}

	.ach_video3 video {
		max-width: 30vw;
	}

	.ach_description {
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: 100%;
		width: 30vw;
		background-color: rgb(255, 208, 0);
	}

	.ach_description h3 {
		font-family: "BebasNeueRegular";
		font-size: min(36px, 5vw);
		max-width: 75%;
		padding-top: 30px;
		text-align: center;
	}

	.ach_description p {
		font-size: 18px;
		max-width: 75%;
		text-align: center;
		margin: 15px 0;
	}

	.ach_description ul {
		list-style-type: disc;
		max-width: 75%;
		text-align: center;
	}

	.ach_description li {
		margin: 10px 0;
	}

	.ach_description1 {
		animation: video_anim 0.5s linear forwards;
	}
	.ach_description2 {
		animation: video_anim 1s linear forwards;
	}
	.ach_description3 {
		animation: video_anim 1.5s linear forwards;
	}
	@keyframes video_anim {
		0% {
			transform: translateY(100%);
		}

		100% {
			transform: translateY(0);
		}
	}
	/* Contact TAB */

	#contact {
		height: calc(100vh - 100px);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		display: flex;
		overflow-x: hidden;
	}

	.contact_logo {
		position: absolute;
		width: 60px;
		bottom: 0;
		left: 50vw;
	}

	.contact_right_logo_anim {
		animation: contact_right_logo 9s forwards;
	}

	@keyframes contact_right_logo {
		0% {
			transform: translate(100vw) scaleX(-1);
			visibility: visible;
		}
		32% {
			transform: translate(0) scaleX(-1);
		}
		33% {
			transform: translate(0) scaleX(-1);
		}
		66% {
			transform: translate(0) scaleX(-1);
		}
		67% {
			transform: translate(0) scaleX(1);
		}
		100% {
			transform: translate(100vw) scaleX(1);
		}
	}

	@keyframes contact_right_anim {
		0% {
			transform: translate(-100%);
			visibility: visible;
		}
		50% {
			transform: translate(-100%);
		}
		75% {
			transform: translate(-40%);
		}
		80% {
			transform: translate(-43%);
		}
		100% {
			transform: translate(0);
			visibility: visible;
		}
	}

	.contact_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 50vw;
		background-color: rgb(255, 208, 0);
		font-size: 20px;
		visibility: hidden;
	}

	.contact_right h2 {
		margin-top: 5vh;
		font-family: "BebasNeueRegular";
		font-size: 36px;
	}

	.contact_right_anim {
		animation: contact_right_anim 6s forwards;
	}

	.contact_right_top,
	.contact_right_bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 50%;
	}

	.dial_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.dial_wrapper img {
		transition: 0.5s;
	}

	.dial_anim {
		animation: dial_anim 6s;
	}

	@keyframes dial_anim {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(0deg);
		}
		75% {
			transform: rotate(180deg);
		}
		80% {
			transform: rotate(190deg);
		}
		100% {
			transform: rotate(360deg);
			visibility: visible;
		}
	}

	.dial_wrapper span {
		position: absolute;
		pointer-events: none;
		font-size: 30px;
	}

	.dial_wrapper img:hover {
		transform: rotate(30deg);
	}

	.mail_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.mail_wrapper img {
		transition: 0.5s;
		border-radius: 50%;
	}

	.mail_wrapper span {
		position: absolute;
		pointer-events: none;
		font-size: 30px;
	}

	.mail_wrapper img:hover {
		transform: rotate(-30deg);
	}

	.mail_anim {
		animation: mail_anim 6s;
	}

	@keyframes mail_anim {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(0deg);
		}
		75% {
			transform: rotate(180deg);
		}
		80% {
			transform: rotate(190deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.mail_click_anim_img {
		animation: mail_click_anim_img 2s;
	}

	@keyframes mail_click_anim_img {
		from {
			transform: rotate(0deg);
		}
		40% {
			background: radial-gradient(#121212 30%, rgb(255, 208, 0) 30%);
		}
		to {
			transform: rotate(720deg);
			background: radial-gradient(#121212 30%, rgb(255, 208, 0) 30%);
		}
	}

	.mail_click_anim_wrapper {
		animation: mail_click_anim_wrapper 2s;
	}

	@keyframes mail_click_anim_wrapper {
		from {
			transform: translate(0);
		}
		50% {
			transform: translate(0);
			color: rgb(255, 208, 0);
		}
		to {
			transform: translate(100vw);
			color: rgb(255, 208, 0);
		}
	}

	.contact_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		width: 50vw;
		height: 100%;
	}

	.contact_left form {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 66%;
	}

	.contact_left input {
		width: 100%;
		height: 30px;
		margin-bottom: 5vh;
	}

	.contact_left textarea {
		width: 100%;
		height: 200px;
	}

	@media screen and (max-height: 760px) {
		.contact_left textarea {
			height: 120px;
		}
	}

	.contact_left label {
		color: rgb(255, 208, 0);
		font-family: "BebasNeueRegular";
		font-size: 30px;
		margin-bottom: 2vh;
	}

	.contact_left button {
		transition: 0.5s;
		font-size: 30px;
		color: rgb(255, 208, 0);
		background-color: transparent;
		border: none;
		height: 147px;
		width: 147px;
		z-index: 2;
		transition: 0.5s;
		cursor: pointer;
	}

	.submit_button {
		height: 147px;
		width: 147px;
		background: none;
		border: none;
		background-image: url("images/send.svg");
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.5s;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.submit_button:hover {
		transform: rotate(45deg);
	}

	.contact_left button:hover {
		transform: rotate(-45deg);
	}

	.contact_left_button_anim {
		animation: contact_left_button_anim 2s;
	}

	.contact_left_button_anim_symbol {
		animation: contact_left_button_anim_symbol 2s;
	}

	@keyframes contact_left_button_anim {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes contact_left_button_anim_symbol {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-360deg);
		}
	}

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

	/* Footer TAB */
	footer {
		scroll-snap-align: end;
		scroll-snap-stop: always;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		height: 200px;
		background-color: #181818;
		position: relative;
	}

	footer * {
		color: rgb(255, 208, 0);
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------- */

/* MOBILE PORTRAIT */

@media screen and (max-width: 599px) and (orientation: portrait) {
	#no_content {
		display: none;
	}

	#content {
		display: none;
		animation: content 1s forwards;
	}

	@keyframes content {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.mobile_open_widget {
		display: flex;
		position: fixed;
		top: 10px;
		right: 10px;
		height: 40px;
		width: 40px;
		z-index: 4;
		cursor: pointer;
		animation: open_wheel 1s;
	}

	@keyframes open_wheel {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(720deg);
		}
	}

	.mobile_close_widget {
		display: none;
		position: fixed;
		top: 10px;
		right: 10px;
		height: 50px;
		width: 50px;
		cursor: pointer;
		animation: close_wheel 1s;
	}

	@keyframes close_wheel {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-720deg);
		}
	}

	#scroll {
		scroll-behavior: smooth;
		scroll-snap-type: y mandatory;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	body {
		font-family: "OffsideRegular";
		background-color: #121212;
		position: relative;
	}

	header {
		display: none;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top: 0;
		justify-content: space-between;
		color: rgb(255, 208, 0);
		width: 100vw;
		height: 100vh;
		font-family: "BebasNeueRegular";
		background-color: rgb(255, 208, 0);
		z-index: 5;
	}

	.header_show {
		display: none;
	}

	@keyframes nav_open {
		from {
			transform: translate(100vw);
		}
		to {
			transform: translate(0vw);
		}
	}

	@keyframes nav_close {
		from {
			transform: translate(0);
		}
		to {
			transform: translate(100vw);
		}
	}

	.header_active {
		background-color: #121212;
		animation: header_active 0.5s forwards;
	}

	.header_active a {
		color: #121212;
	}

	@keyframes header_active {
		0% {
			background: #121212;
		}

		100% {
			background: rgb(255, 208, 0);
		}
	}

	nav span:hover:not(.header_active) {
		animation: header_hover 0.5s;
	}

	@keyframes header_hover {
		0% {
			width: 0;
		}

		100% {
			width: 100%;
		}
	}

	nav,
	nav ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 75vh;
		font-size: 36px;
		order: 2;
	}

	nav li {
		width: 100%;
		height: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	nav span {
		display: flex;
		background-color: #121212;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		z-index: 2;
		border-right: thin solid rgb(255, 208, 0);
	}

	nav span a {
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(255, 208, 0);
		cursor: pointer;
	}

	.nav_first_li_before:before {
		display: none;
	}

	.header_name {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		color: #121212;
		background-color: rgb(255, 208, 0);
		height: 25vh;
		order: 1;
	}

	.header_name div {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		font-size: 36px;
	}

	.header_name_job {
		font-family: "OffsideRegular";
		font-size: 18px;
	}

	/* Home MOBILE */

	#home {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

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

	.h1_wrapper {
		display: flex;
		align-items: center;
		width: 100vw;
		background-color: rgb(255, 208, 0);
		height: 20vh;
	}

	h1 {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.name {
		font-family: "BebasNeueRegular";
		font-size: 48px;
		margin-bottom: 10px;
	}

	.name span {
		font-family: "TVDesign";
		font-size: 64px;
	}

	.job {
		font-size: 24px;
	}

	.about ul {
		width: 100vw;
		height: 10vh;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		align-items: center;
		font-size: 10px;
	}

	.about * {
		color: rgb(255, 208, 0);
	}

	.home_middle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 40vh;
		color: rgb(255, 208, 0);
		line-height: 120%;
	}

	.home_middle .slogan {
		font-family: "BebasNeueRegular", sans-serif;
		font-size: 36px;
		text-align: center;
		width: 90%;
	}

	.home_middle div {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.home_middle p {
		font-size: 12px;
		color: rgb(255, 208, 0);
		width: 75%;
		text-align: center;
		padding: 5px 0;
		line-height: 160%;
	}

	.home_bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 20vh;
	}

	.home_bottom span {
		display: none;
	}

	.home_bottom a {
		color: rgb(255, 208, 0);
		margin: 0 10px;
		font-family: "BebasNeueRegular", sans-serif;
		font-size: 24px;
	}

	.home_left {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		width: 100%;
	}

	.home_right {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		width: 100%;
	}

	.profil_img {
		height: 20vh;
		width: 20vh;
		position: relative;
	}

	.profil_jaune {
		height: 10vh;
		position: absolute;
		bottom: 1.2vh;
		left: 2vh;
		transform: rotate(-25deg);
		margin: auto;
		z-index: 1;
		animation: profil_jaune 6s forwards;
	}

	@keyframes profil_jaune {
		0% {
			transform: rotate(-25deg);
			height: 10vh;
			bottom: 1.2vh;
			left: 2vh;
		}
		50% {
			transform: rotate(-25deg);
			height: 10vh;
			bottom: 1.2vh;
			left: 2vh;
		}
		55% {
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
		}
		57% {
			height: 13vh;
			bottom: 3vh;
			left: 3vh;
		}
		60% {
			height: 13vh;
			transform: rotate(20deg);
			bottom: 3vh;
			left: 3vh;
		}
		62% {
			height: 13vh;
			transform: rotate(-30deg);
			bottom: 3vh;
			left: 3vh;
		}
		70% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
		}

		99% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
			opacity: 1;
		}
		100% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
			opacity: 0;
		}
	}

	.profil_noir {
		height: 13vh;
		position: absolute;
		bottom: 3vh;
		left: 3vh;
		opacity: 0;
		animation: profil_noir 6s forwards;
		z-index: 2;
	}

	@keyframes profil_noir {
		0% {
			opacity: 0;
		}
		70% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_engrenage {
		height: 20vh;
		position: absolute;
		animation: profil_engrenage 7s forwards;
	}

	@keyframes profil_engrenage {
		0% {
			transform: rotate(0deg);
		}
		55.6% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(10000deg);
		}
	}

	.profil_macaron {
		height: 20vh;
		position: absolute;
		animation: profil_macaron 7s forwards;
	}

	@keyframes profil_macaron {
		0% {
			opacity: 0;
		}
		65% {
			opacity: 0;
		}
		70% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_contour_macaron {
		height: 20vh;
		position: absolute;
		animation: profil_contour_macaron 7s forwards;
	}

	@keyframes profil_contour_macaron {
		0% {
			opacity: 0;
		}
		57% {
			opacity: 0;
		}
		65% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_z1 {
		height: 3vh;
		position: absolute;
		bottom: 11vh;
		left: 11vh;
		z-index: 1;
		opacity: 0.9;
		animation: profil_z1 1.2s 2 forwards linear;
	}

	.profil_z2 {
		height: 2vh;
		position: absolute;
		bottom: 14vh;
		left: 14vh;
		z-index: 1;
		opacity: 0.6;
		animation: profil_z2 1.4s 2 forwards linear;
	}

	.profil_z3 {
		height: 1vh;
		bottom: 19vh;
		left: 12vh;
		position: absolute;
		z-index: 1;
		opacity: 0.3;
		animation: profil_z3 1.5s 2 forwards linear;
	}

	@keyframes profil_z1 {
		0% {
			height: 3vh;
		}
		100% {
			height: 2vh;
			bottom: 13vh;
			left: 14vh;
			opacity: 0;
		}
	}

	@keyframes profil_z2 {
		0% {
			height: 2vh;
		}

		100% {
			height: 1vh;
			bottom: 19vh;
			left: 12vh;
			opacity: 0;
		}
	}

	@keyframes profil_z3 {
		0% {
			height: 1vh;
		}
		100% {
			height: 0vh;
			bottom: 26vh;
			left: 14vh;
			opacity: 0;
		}
	}

	/* Skills MOBILE */

	#skills {
		height: 100vh;
		max-width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		overflow: hidden;
		position: relative;
	}

	.skills_logo_jaune {
		width: 60px;
		position: absolute;
		bottom: 0;
		left: 6vw;
		z-index: 1;
		cursor: pointer;
	}

	.skills_logo_jaune_entree {
		animation: skills_logo_jaune_entree 1s forwards ease;
	}

	@keyframes skills_logo_jaune_entree {
		0% {
			left: 50vw;
			bottom: calc(100vh - 160px);
			transform: scaleX(-1);
		}
		90% {
			left: 50vw;
			bottom: 0;
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_logo_jaune_action {
		animation: skills_logo_jaune_action 0.5s forwards linear;
	}

	@keyframes skills_logo_jaune_action {
		0% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
		0% {
			left: 2vw;
			bottom: 0;
		}
		50% {
			left: 6vw;
			bottom: 45px;
		}
		99% {
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_logo_jaune_action_reverse {
		animation: skills_logo_jaune_action_reverse 0.5s forwards linear;
	}

	@keyframes skills_logo_jaune_action_reverse {
		0% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
		25% {
			left: 4vw;
			bottom: 145px;
		}
		50% {
			left: -1vw;
			bottom: 135px;
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_levier_wrapper {
		width: 80px;
		height: 60px;
		position: absolute;
		bottom: 60px;
		left: -15px;
		cursor: pointer;
		transform: rotate(90deg);
	}

	.skills_levier {
		width: 60px;
		position: absolute;
		bottom: -30px;
		left: 0;
		right: 0;
		margin: auto;
	}

	.skills_levier_right_first {
		animation: skills_levier_right_first 0.5s forwards;
	}

	@keyframes skills_levier_right_first {
		0% {
			transform: rotate(0);
			left: 0;
			right: 0;
			margin: auto;
			bottom: -30px;
		}
		50% {
			transform: rotate(0);
			left: 0;
			right: 0;
			margin: auto;
			bottom: -30px;
		}

		100% {
			transform: rotate(-75deg);
			left: -30px;
			margin: auto;
			bottom: -39px;
		}
	}

	.skills_levier_right {
		animation: skills_levier_right 0.5s forwards reverse;
	}

	@keyframes skills_levier_right {
		0% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}
		50% {
			bottom: -32px;
		}
		100% {
			transform: rotate(75deg);
			left: 30px;
			bottom: -39px;
		}
	}

	.skills_levier_left {
		animation: skills_levier_left 0.5s forwards reverse;
	}

	@keyframes skills_levier_left {
		0% {
			transform: rotate(75deg);
			left: 30px;
			bottom: -39px;
		}
		25% {
			bottom: -39px;
		}
		26% {
			bottom: -32px;
		}
		50% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}

		100% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}
	}

	.skills_base_levier {
		width: 80px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.skills_wheel {
		height: 60vw;
		position: absolute;
		right: -30vw;
		transform: rotate(180deg);
		z-index: 1;
		cursor: pointer;
		transition: 0.5s;
	}

	.skills_wheel_anim {
		animation: wheel_squeeze 1s;
	}

	@keyframes wheel_squeeze {
		0% {
			transform: rotate(180deg);
		}
		100% {
			transform: rotate(540deg);
		}
	}

	.skills_text_display_none {
		display: none;
	}

	.skills_wrapper {
		display: none;
		align-items: center;
		justify-content: center;
		width: 66vw;
		height: 100%;
		background-image: url("images/skills_fond_mobile.svg");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
		animation: skills_text_show 1s;
	}

	.skills_text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 80%;
		width: 80%;
		animation: skills_text_show 1s;
	}

	.skills_text ul {
		list-style-type: disc;
	}

	@keyframes skills_text_show {
		from {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.skills_text h2 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		margin-bottom: 30px;
	}

	.skills_text li {
		margin: 5px 0;
	}

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

	/* Experience MOBILE */

	#experience {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		visibility: hidden;
		width: 100vw;
		height: 300vh;
		position: relative;
		scroll-snap-type: y mandatory;
	}

	.experience_anim {
		animation: experience_anim 1s forwards;
	}

	@keyframes experience_anim {
		from {
			transform: translateX(-100%);
		}
		to {
			transform: translateX(0);
		}
	}

	.exp {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		width: 100vw;
		height: 100vh;
		color: rgb(255, 208, 0);
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.exp_circle_wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		width: 50vw;
		height: min-content;
		margin: 0 0 0 20px;
	}

	.exp_h2_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		width: 100%;
		margin: 5vh 0 2.5vh 0;
	}

	#experience h2 {
		width: 75%;
		font-family: "BebasNeueRegular";
		font-size: 36px;
		text-align: center;
	}

	.exp_circle_wrapper div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 150px;
		width: 150px;
		border-radius: 50%;
		border: 2px solid rgb(255, 208, 0);
		margin: 1vh 0 1vh 0;
		padding: 5px;
		background-color: #121212;
		color: rgb(255, 208, 0);
		cursor: pointer;
	}

	@media screen and (max-height: 639px) and (min-height: 540px) {
		#experience h2 {
			font-size: 24px;
		}

		.exp_circle_wrapper div {
			margin: 0.5vh 0 0.5vh 0;
			padding: 0;
		}
	}

	@media screen and (max-height: 539px) {
		#experience h2 {
			font-size: 18px;
		}
		.exp_circle_wrapper div {
			margin: 0.5vh 0 0.5vh 0;
			padding: 0;
		}
	}

	.exp_circle_wrapper div * {
		pointer-events: none;
	}

	.exp_zoom_wrapper {
		position: absolute;
		height: 100vh;
		width: 100vw;
		background: linear-gradient(to right, #ffffff00 33%, rgb(255, 208, 0) 33%, rgb(255, 208, 0) 66%, #ffffff00 66%), url("images/fond.svg"), #121212;
		z-index: 2;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		display: none;
		animation: exp_zoom_wrapper_anim 0.5s;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	@keyframes exp_zoom_wrapper_anim {
		from {
			width: 0;
		}
		to {
			width: 100%;
		}
	}

	.exp_zoom {
		height: 500px;
		width: 100vw;
		background-color: rgb(255, 208, 0);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		z-index: 3;
		overflow-y: scroll;
	}

	.exp_zoom_border {
		height: min-content;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #121212;
		animation: exp_zoom_anim 2s;
	}

	@keyframes exp_zoom_anim {
		from {
			transform: translateY(150%);
		}
		to {
			transform: translateX(0);
		}
	}

	.exp_zoom_logo {
		width: 60px;
		position: absolute;
		left: 10vw;
		bottom: 67%;
	}

	.exp_zoom_logo_anim {
		animation: exp_zoom_logo 12s forwards linear;
	}

	@keyframes exp_zoom_logo {
		0% {
			bottom: -60px;
			left: 10vw;
		}

		10% {
			left: 0px;
			bottom: 75vh;
			transform: rotate(120deg);
		}
		22% {
			left: 92vw;
			bottom: 70vh;
			transform: rotate(270deg);
		}
		34% {
			left: 66vw;
			bottom: 65vh;
			transform: rotate(360deg);
		}
		52% {
			left: 110vw;
			bottom: 50vh;
			transform: rotate(540deg);
			border: none;
		}
		62% {
			left: 110vw;
			bottom: 40vh;
			transform: rotate(15deg) scaleX(-1);
			border-bottom: 5px dashed rgb(255, 208, 0);
			padding: 2px;
		}

		72% {
			left: -20vw;
			bottom: 75vh;
			transform: rotate(15deg) scaleX(-1);
		}

		78% {
			left: -20vw;
			bottom: 20vh;
			transform: rotate(-25deg) scaleX(1);
		}

		90% {
			left: 120vw;
			bottom: 50vh;
			transform: rotate(-25deg) scaleX(1);
		}

		100% {
			left: 120vw;
			bottom: 50vh;
			transform: rotate(-25deg) scaleX(1);
			border-bottom: 5px dashed rgb(255, 208, 0);
			padding: 2px;
		}
	}

	.exp_zoom_element1 {
		font-size: 16px;
		max-width: 75vw;
		margin-bottom: 20px;
		text-decoration: underline;
	}

	.exp_zoom_element3 {
		font-size: 16px;
		max-width: 75vw;
		margin: 20px 0 5px 0;
	}

	.exp_zoom_element2 {
		font-family: "BebasNeueRegular";
		font-size: 24px;
		font-weight: bold;
		max-width: 75vw;
	}

	.exp_zoom_element5,
	.exp_zoom_element4 {
		font-size: 16px;
		max-width: 75vw;
		margin: 5px 0;
	}

	.exp_zoom_element6 {
		font-size: 14px;
		max-width: 75vw;
		margin: 10px 0;
		text-align: center;
	}

	.exp_zoom_close {
		align-self: flex-start;
		width: 40px;
		position: absolute;
		top: 80px;
		right: 10px;
		cursor: pointer;
		transition: 1s;
		overflow: hidden;
		user-select: none;
		z-index: 4;
	}

	.exp_zoom_item {
		display: none;
	}

	@keyframes exp_zoom_item {
		from {
			transform: translateY(-30vh) rotate(0deg);
		}

		to {
			transform: translateY(0) rotate(360deg);
		}
	}

	.exp_zoom_close:hover {
		transform: rotate(360deg);
	}

	#experience h3 {
		font-size: 18px;
		padding: 0 3px;
	}

	#experience p {
		font-size: 12px;
		margin: 10px 0;
	}

	#experience time {
		font-size: 12px;
	}

	.exp_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.exp_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 100vh;
		right: 0;
		width: 40vw;
		height: 100vh;
		overflow-x: hidden;
		transition: 0.4s;
	}

	.exp_right img {
		position: relative;
		right: -50%;
		height: 80vw;
		z-index: 1;
		transition: 0.4s;
	}

	.wheel_active {
		background-color: rgb(255, 208, 0);
		color: #121212;
	}

	/* Achievements MOBILE */

	.ach_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 1500vh;
		scroll-snap-type: y mandatory;
	}

	.ach_fleche_gauche {
		display: none;
	}

	.ach_fleche_droite {
		display: none;
	}

	.ach_top {
		display: contents;
		align-items: center;
		justify-content: center;
	}
	.ach_bottom {
		display: contents;
	}

	.ach1,
	.ach2,
	.ach3,
	.ach4,
	.ach5 {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.ach1,
	.ach2,
	.ach3,
	.ach4,
	.ach5 {
		height: 300vh;
	}

	.ach_video {
		display: flex;
		min-height: 50vh;
		width: 100vw;
		align-items: flex-start;
		justify-content: center;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.ach_video a {
		width: 100%;
	}

	.ach_video video,
	.ach_video img {
		width: 100%;
	}

	.ach_video1 {
		order: 1;
	}

	.ach_video2 {
		order: 3;
	}

	.ach_video3 {
		order: 5;
	}

	.ach_description {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 50vh;
		background-color: rgb(255, 208, 0);
	}

	.ach_description h3 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		max-width: 75%;
		text-align: center;
	}

	.ach_description p {
		font-size: 18px;
		max-width: 75%;
		text-align: center;
		margin: 15px 0;
	}

	.ach_description ul {
		list-style-type: disc;
		max-width: 75%;
	}

	.ach_description li {
		margin: 10px 0;
	}

	.ach_description1 {
		order: 2;
		animation: video_anim 0.6s;
	}
	.ach_description2 {
		order: 4;
		animation: video_anim 1.2s;
	}
	.ach_description3 {
		order: 6;
		animation: video_anim 1.8s;
	}

	@keyframes video_anim {
		from {
			transform: translateX(-100%);
		}
		50% {
			transform: translateX(-100%);
		}
		to {
			transform: translateX(0);
		}
	}

	.ach_pickup_wrapper {
		visibility: hidden;
		position: relative;
		top: 50vh;
		width: 90vw;
		min-height: 10vh;
	}

	.ach_pickup_anim {
		visibility: visible;
		animation: pick_up 8s linear forwards;
	}

	@keyframes pick_up {
		0% {
			transform: translateX(-20vw);
		}
		12.5% {
			transform: translateX(10%);
		}
		25% {
			transform: translateX(10%);
		}
		50% {
			transform: translateX(120vw) scaleX(1);
		}
		51% {
			transform: translateX(120vw) translateY(-7.2vw) rotate(10deg) scaleX(-1);
		}
		100% {
			transform: translateX(-120vw) translateY(-7.2vw) rotate(10deg) scaleX(-1);
		}
	}

	.ach_logo {
		position: absolute;
		bottom: 8vw;
		width: 8%;
		left: 6%;
	}

	.ach_carosserie {
		position: absolute;
		bottom: 1.5vw;
		width: 40%;
	}

	.ach_roue_droite {
		position: absolute;
		left: 31.6%;
		bottom: 0;
		width: 6%;
		animation: pickup_wheels 8s linear forwards;
	}

	.ach_roue_gauche {
		position: absolute;
		left: 3.6%;
		bottom: 0;
		width: 6%;
		animation: pickup_wheels 8s linear forwards;
	}

	@keyframes pickup_wheels {
		0% {
			transform: rotate(0);
		}
		12.5% {
			transform: rotate(360deg);
		}
		22% {
			transform: rotate(360deg);
		}
		25% {
			transform: rotate(720deg);
		}
		50% {
			transform: rotate(1440deg);
		}
		100% {
			transform: rotate(2440deg);
		}
	}

	.ach_chaine {
		position: absolute;
	}

	.ach_smoke1 {
		position: absolute;
		width: 6%;
		left: -6vw;
		bottom: 2vw;
		animation: ach_smoke 0.9s alternate-reverse infinite;
	}

	.ach_smoke2 {
		position: absolute;
		width: 3%;
		left: -8vw;
		bottom: 3vw;
		animation: ach_smoke 0.6s alternate-reverse infinite;
	}

	@keyframes ach_smoke {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	/* Contact MOBILE */

	#contact {
		display: flex;
		flex-direction: column;
		width: 100vw;
		scroll-snap-type: y mandatory;
	}

	.contact_logo {
		display: none;
	}

	.contact_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100vw;
		height: 100vh;
		background-color: rgb(255, 208, 0);
		font-size: 20px;
		visibility: visible;
		position: relative;
		overflow-x: hidden;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.contact_right h2 {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		background-color: #121212;
		background-image: url("images/fond.svg");
		background-size: cover;
		color: rgb(255, 208, 0);
		width: 100%;
		height: 25vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contact_right_anim {
		animation: contact_right_anim 2.5s forwards;
	}

	.contact_right_top,
	.contact_right_bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 37.5vh;
	}

	.dial_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.dial_wrapper img {
		transition: 0.5s;
	}

	.dial_wrapper span {
		position: absolute;
		pointer-events: none;
		font-size: 30px;
	}

	.dial_wrapper img:hover {
		transform: rotate(30deg);
	}

	.mail_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.mail_wrapper img {
		transition: 0.5s;
		border-radius: 50%;
	}

	.mail_wrapper span {
		position: absolute;
		pointer-events: none;
		font-size: 30px;
	}

	.mail_click_anim_img {
		animation: mail_click_anim_img 2s;
	}

	@keyframes mail_click_anim_img {
		from {
			transform: rotate(0deg);
		}
		40% {
			background: radial-gradient(#121212 30%, rgb(255, 208, 0) 30%);
		}
		to {
			transform: rotate(720deg);
			background: radial-gradient(#121212 30%, rgb(255, 208, 0) 30%);
		}
	}

	.mail_click_anim_wrapper {
		animation: mail_click_anim_wrapper 2s;
	}

	@keyframes mail_click_anim_wrapper {
		from {
			transform: translate(0);
		}
		50% {
			transform: translate(0);
			color: rgb(255, 208, 0);
		}
		to {
			transform: translate(100vw);
			color: rgb(255, 208, 0);
		}
	}

	.contact_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		width: 100vw;
		height: 100vh;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.contact_left form {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80%;
	}

	.contact_left input {
		width: 100%;
		height: 30px;
		margin-bottom: 5vh;
	}

	.contact_left textarea {
		width: 100%;
		height: 150px;
	}
	.contact_left label {
		color: rgb(255, 208, 0);
		font-family: "BebasNeueRegular";
		font-size: 30px;
		margin-bottom: 2vh;
	}

	.contact_left button {
		transition: 0.5s;
		font-size: 30px;
		color: rgb(255, 208, 0);
		background-color: transparent;
		border: none;
		height: 147px;
		width: 147px;
		z-index: 2;
		transition: 0.5s;
		cursor: pointer;
	}

	.submit_button {
		height: 100%;
		width: 100%;
		background: none;
		border: none;
		background-image: url("images/send.svg");
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.5s;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.submit_button:hover {
		transform: rotate(45deg);
	}

	.contact_left button:hover {
		transform: rotate(-45deg);
	}

	.contact_left_button_anim {
		animation: contact_left_button_anim 2s;
	}

	.contact_left_button_anim_symbol {
		animation: contact_left_button_anim_symbol 2s;
	}

	@keyframes contact_left_button_anim {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes contact_left_button_anim_symbol {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-360deg);
		}
	}

	/* Footer MOBILE */
	footer {
		scroll-snap-align: end;
		scroll-snap-stop: always;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		background-color: #181818;
		position: relative;
	}

	footer * {
		color: rgb(255, 208, 0);
		font-size: 12px;
	}
}

/* MOBILE LANDSCAPE */

@media screen and (max-width: 800px) and (orientation: landscape), screen and (min-width: 801px) and (max-width: 1023px) and (max-height: 599px) and (orientation: landscape) {
	#no_content {
		display: none;
	}

	#content {
		display: none;
		animation: content 1s forwards;
	}

	@keyframes content {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.mobile_open_widget {
		display: flex;
		position: fixed;
		top: 10px;
		right: 10px;
		height: 40px;
		width: 40px;
		z-index: 4;
		cursor: pointer;
		animation: open_wheel 1s;
	}

	@keyframes open_wheel {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(720deg);
		}
	}

	.mobile_close_widget {
		display: none;
		position: fixed;
		top: 10px;
		right: 10px;
		height: 50px;
		width: 50px;
		cursor: pointer;
		animation: close_wheel 1s;
	}

	@keyframes close_wheel {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-720deg);
		}
	}

	#scroll {
		scroll-snap-type: y mandatory;
		overflow-y: scroll;
		scroll-behavior: smooth;
		overflow-x: hidden;
	}

	body {
		font-family: "OffsideRegular";
		background-color: #121212;
		position: relative;
		background-attachment: scroll;
		background-size: contain;
	}

	header {
		display: none;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top: 0;
		justify-content: space-between;
		color: rgb(255, 208, 0);
		width: 100vw;
		height: 100vh;
		font-family: "BebasNeueRegular";
		background-color: rgb(255, 208, 0);
		z-index: 5;
	}

	.header_show {
		display: none;
	}

	@keyframes nav_open {
		from {
			transform: translate(100vw);
		}
		to {
			transform: translate(0vw);
		}
	}

	@keyframes nav_close {
		from {
			transform: translate(0);
		}
		to {
			transform: translate(100vw);
		}
	}

	.header_active {
		background-color: #121212;
		animation: header_active 0.5s forwards;
	}

	.header_active a {
		color: #121212;
	}

	@keyframes header_active {
		0% {
			background: #121212;
		}

		100% {
			background: rgb(255, 208, 0);
		}
	}

	nav span:hover:not(.header_active) {
		animation: header_hover 0.5s;
	}

	@keyframes header_hover {
		0% {
			width: 0;
		}

		100% {
			width: 100%;
		}
	}

	nav,
	nav ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 75vh;
		font-size: 36px;
		order: 2;
	}

	nav li {
		width: 100%;
		height: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	nav span {
		display: flex;
		background-color: #121212;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		z-index: 2;
		border-right: thin solid rgb(255, 208, 0);
	}

	nav span a {
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(255, 208, 0);
		cursor: pointer;
	}

	.nav_first_li_before:before {
		display: none;
	}

	.header_name {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		color: #121212;
		background-color: rgb(255, 208, 0);
		height: 25vh;
		order: 1;
	}

	.header_name div {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		font-size: 36px;
	}

	.header_name_job {
		font-family: "OffsideRegular";
		font-size: 18px;
	}

	/* Home MOBILE LANDSCAPE  */

	#home {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.home_top {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		height: 30vh;
	}

	.h1_wrapper {
		display: flex;
		align-items: center;
		width: 100vw;
		min-height: 20vh;
		background-color: rgb(255, 208, 0);
	}

	h1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.name {
		font-family: "BebasNeueRegular";
		font-size: 36px;
		margin-right: 10vw;
	}

	.name span {
		font-family: "TVDesign";
		font-size: 36px;
	}

	.job {
		font-size: 18px;
	}

	.about ul {
		height: 5vh;
		width: 100vw;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 12px;
	}

	.about * {
		color: rgb(255, 208, 0);
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.home_middle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 40vh;
		color: rgb(255, 208, 0);
		line-height: 120%;
	}

	.home_middle .slogan {
		font-family: "BebasNeueRegular", sans-serif;
		font-size: 36px;
		text-align: center;
	}

	.home_middle div {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.home_middle p {
		font-size: 14px;
		color: rgb(255, 208, 0);
		width: 90%;
		text-align: center;
		line-height: 160%;
	}

	.home_bottom {
		display: flex;
		flex-direction: column;
		align-self: center;
		align-items: center;
		justify-content: center;
		height: 30vh;
		width: 66%;
	}

	.home_bottom span {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 40%;
	}

	.home_left span {
		justify-content: flex-end;
	}

	.home_bottom a {
		color: rgb(255, 208, 0);
		margin: 0 10px;
		font-family: "BebasNeueRegular", sans-serif;
		font-size: 18px;
	}

	.landing_line_anim {
		animation: line 6s;
	}

	@keyframes line {
		0% {
			width: 0;
		}
		70% {
			width: 0%;
		}
		100% {
			width: 50%;
		}
	}

	.line1 {
		width: 50%;
	}

	.line2 {
		transform: scaleX(-1);
		width: 50%;
	}
	.line3 {
		transform: scaleY(-1);
		width: 50%;
	}
	.line4 {
		transform: scale(-1, -1);
		width: 50%;
	}

	.line_hover {
		animation: line_hover 0.4s infinite alternate;
	}

	@keyframes line_hover {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.home_left {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		width: 100%;
		display: none;
	}

	.profil_img {
		height: 20vh;
		width: 20vh;
		position: relative;
	}

	.home_right {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		width: 100%;
		display: none;
	}

	#line1,
	#line2,
	#line3,
	#line4 {
		animation: line_label 6s forwards;
	}

	@keyframes line_label {
		0% {
			visibility: hidden;
		}
		70% {
			visibility: hidden;
		}
		71% {
			visibility: visible;
		}
		100% {
			visibility: visible;
		}
	}

	.profil_jaune {
		height: 10vh;
		position: absolute;
		bottom: 1.2vh;
		left: 2vh;
		transform: rotate(-25deg);
		margin: auto;
		z-index: 1;
		animation: profil_jaune 6s forwards;
	}

	@keyframes profil_jaune {
		0% {
			transform: rotate(-25deg);
			height: 10vh;
			bottom: 1.2vh;
			left: 2vh;
		}
		50% {
			transform: rotate(-25deg);
			height: 10vh;
			bottom: 1.2vh;
			left: 2vh;
		}
		55% {
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
		}
		57% {
			height: 13vh;
			bottom: 3vh;
			left: 3vh;
		}
		60% {
			height: 13vh;
			transform: rotate(20deg);
			bottom: 3vh;
			left: 3vh;
		}
		62% {
			height: 13vh;
			transform: rotate(-30deg);
			bottom: 3vh;
			left: 3vh;
		}
		70% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
		}

		99% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
			opacity: 1;
		}
		100% {
			height: 13vh;
			transform: rotate(0deg);
			bottom: 3vh;
			left: 3vh;
			opacity: 0;
		}
	}

	.profil_noir {
		height: 13vh;
		position: absolute;
		bottom: 3vh;
		left: 3vh;
		opacity: 0;
		animation: profil_noir 6s forwards;
		z-index: 2;
	}

	@keyframes profil_noir {
		0% {
			opacity: 0;
		}
		70% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_engrenage {
		height: 20vh;
		position: absolute;
		animation: profil_engrenage 7s forwards;
	}

	@keyframes profil_engrenage {
		0% {
			transform: rotate(0deg);
		}
		55.6% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(10000deg);
		}
	}

	.profil_macaron {
		height: 20vh;
		position: absolute;
		animation: profil_macaron 7s forwards;
	}

	@keyframes profil_macaron {
		0% {
			opacity: 0;
		}
		65% {
			opacity: 0;
		}
		70% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_contour_macaron {
		height: 20vh;
		position: absolute;
		animation: profil_contour_macaron 7s forwards;
	}

	@keyframes profil_contour_macaron {
		0% {
			opacity: 0;
		}
		57% {
			opacity: 0;
		}
		65% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	.profil_z1 {
		height: 3vh;
		position: absolute;
		bottom: 11vh;
		left: 11vh;
		z-index: 1;
		opacity: 0.9;
		animation: profil_z1 1.2s 2 forwards linear;
	}

	.profil_z2 {
		height: 2vh;
		position: absolute;
		bottom: 14vh;
		left: 14vh;
		z-index: 1;
		opacity: 0.6;
		animation: profil_z2 1.4s 2 forwards linear;
	}

	.profil_z3 {
		height: 1vh;
		bottom: 19vh;
		left: 12vh;
		position: absolute;
		z-index: 1;
		opacity: 0.3;
		animation: profil_z3 1.5s 2 forwards linear;
	}

	@keyframes profil_z1 {
		0% {
			height: 3vh;
		}
		100% {
			height: 2vh;
			bottom: 13vh;
			left: 14vh;
			opacity: 0;
		}
	}

	@keyframes profil_z2 {
		0% {
			height: 2vh;
		}

		100% {
			height: 1vh;
			bottom: 19vh;
			left: 12vh;
			opacity: 0;
		}
	}

	@keyframes profil_z3 {
		0% {
			height: 1vh;
		}
		100% {
			height: 0vh;
			bottom: 26vh;
			left: 14vh;
			opacity: 0;
		}
	}

	/* Skills MOBILE LANDSCAPE  */

	#skills {
		height: 100vh;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.skills_logo_jaune {
		width: 60px;
		position: absolute;
		bottom: 0;
		left: 6vw;
		z-index: 0;
		cursor: pointer;
	}

	.skills_logo_jaune_entree {
		animation: skills_logo_jaune_entree 1s forwards ease;
	}

	@keyframes skills_logo_jaune_entree {
		0% {
			left: 50vw;
			bottom: calc(100vh - 160px);
			transform: scaleX(-1);
		}
		90% {
			left: 50vw;
			bottom: 0;
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_logo_jaune_action {
		animation: skills_logo_jaune_action 0.5s forwards linear;
	}

	@keyframes skills_logo_jaune_action {
		0% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
		0% {
			left: 2vw;
			bottom: 0;
		}
		50% {
			left: 6vw;
			bottom: 45px;
		}
		99% {
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_logo_jaune_action_reverse {
		animation: skills_logo_jaune_action_reverse 0.5s forwards linear;
	}

	@keyframes skills_logo_jaune_action_reverse {
		0% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
		25% {
			left: 4vw;
			bottom: 145px;
		}
		50% {
			left: -1vw;
			bottom: 135px;
		}
		100% {
			left: 6vw;
			bottom: 0;
			transform: scaleX(-1);
		}
	}

	.skills_levier_wrapper {
		width: 80px;
		height: 60px;
		position: absolute;
		bottom: 60px;
		left: -15px;
		cursor: pointer;
		transform: rotate(90deg);
	}

	.skills_levier {
		width: 60px;
		position: absolute;
		bottom: -30px;
		left: 0;
		right: 0;
		margin: auto;
	}

	.skills_levier_right_first {
		animation: skills_levier_right_first 0.5s forwards;
	}

	@keyframes skills_levier_right_first {
		0% {
			transform: rotate(0);
			left: 0;
			right: 0;
			margin: auto;
			bottom: -30px;
		}
		50% {
			transform: rotate(0);
			left: 0;
			right: 0;
			margin: auto;
			bottom: -30px;
		}

		100% {
			transform: rotate(-75deg);
			left: -30px;
			margin: auto;
			bottom: -39px;
		}
	}

	.skills_levier_right {
		animation: skills_levier_right 0.5s forwards reverse;
	}

	@keyframes skills_levier_right {
		0% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}
		50% {
			bottom: -32px;
		}
		100% {
			transform: rotate(75deg);
			left: 30px;
			bottom: -39px;
		}
	}

	.skills_levier_left {
		animation: skills_levier_left 0.5s forwards reverse;
	}

	@keyframes skills_levier_left {
		0% {
			transform: rotate(75deg);
			left: 30px;
			bottom: -39px;
		}
		25% {
			bottom: -39px;
		}
		26% {
			bottom: -32px;
		}
		50% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}

		100% {
			transform: rotate(-75deg);
			right: 30px;
			bottom: -39px;
		}
	}

	.skills_base_levier {
		width: 80px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.skills_wheel {
		height: 66vw;
		position: absolute;
		left: -33vw;
		z-index: 1;
		cursor: pointer;
		transition: 0.5s;
	}

	.skills_wheel:hover {
		transform: rotate(10deg);
	}

	.skills_wheel_anim {
		animation: wheel_squeeze 1s;
	}

	@keyframes wheel_squeeze {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.skills_text_display_none {
		display: none;
	}

	.skills_wrapper {
		display: none;
		align-items: center;
		justify-content: center;
		width: 66vw;
		height: 100%;
		background-image: url("images/skills_fond_tab.svg");
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
		animation: skills_text_show 1s;
	}

	.skills_text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 90%;
		width: 80%;
		animation: skills_text_show 1s;
	}

	.skills_text ul {
		list-style-type: disc;
	}

	@keyframes skills_text_show {
		from {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.skills_text h2 {
		font-family: "BebasNeueRegular";
		font-size: 18px;
		margin-bottom: 18px;
	}

	.skills_text li {
		margin: 5px 0;
		font-size: 12px;
	}

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

	/* Experience MOBILE LANDSCAPE  */

	#experience {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 100vh;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		visibility: hidden;
		width: 100vw;
		overflow: hidden;
		position: relative;
	}

	.experience_anim {
		animation: experience_anim 1.5s;
	}

	@keyframes experience_anim {
		from {
			transform: translateX(-100%);
		}
		to {
			transform: translateX(0);
		}
	}

	.exp {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		min-height: 30vh;
		width: 100vw;
		color: rgb(255, 208, 0);
		margin: 1vh 0;
	}

	.exp_circle_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 75vw;
	}

	.exp_h2_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		width: 75vw;
	}

	#experience h2 {
		font-family: "BebasNeueRegular";
		font-size: 18px;
		text-align: center;
	}

	.exp_circle_wrapper div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 60px;
		width: 60px;
		border-radius: 50%;
		border: 2px solid rgb(255, 208, 0);
		margin: 0 0.5vw;
		padding: 5px;
		cursor: pointer;
	}

	.exp_circle_wrapper div:hover {
		background-color: #121212;
		color: rgb(255, 208, 0);
	}

	.exp_circle_wrapper div * {
		pointer-events: none;
	}

	.exp_zoom_wrapper {
		position: absolute;
		top: 300vh;
		height: 100vh;
		width: 100vw;
		background: linear-gradient(to right, #ffffff00 33%, rgb(255, 208, 0) 33%, rgb(255, 208, 0) 66%, #ffffff00 66%), url("images/fond.svg"), #121212;
		z-index: 2;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		display: none;
		animation: exp_zoom_wrapper_anim 0.5s;
		overflow: hidden;
	}

	@keyframes exp_zoom_wrapper_anim {
		from {
			width: 0;
		}
		to {
			width: 100%;
		}
	}

	.exp_zoom {
		height: 100vh;
		width: 100%;
		background-color: rgb(255, 208, 0);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		z-index: 3;
	}

	.exp_zoom_border {
		height: 100vh;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: exp_zoom_anim 2s;
	}

	@keyframes exp_zoom_anim {
		from {
			transform: translateY(150%);
		}
		to {
			transform: translateY(0);
		}
	}

	.exp_zoom_logo {
		width: 60px;
		position: absolute;
		left: 10vw;
		bottom: 67%;
	}

	.exp_zoom_logo_anim {
		animation: exp_zoom_logo 12s forwards linear;
	}

	@keyframes exp_zoom_logo {
		0% {
			bottom: -60px;
			left: 10vw;
		}

		10% {
			left: 0px;
			bottom: 75vh;
			transform: rotate(120deg);
		}
		22% {
			left: 92vw;
			bottom: 70vh;
			transform: rotate(270deg);
		}
		34% {
			left: 66vw;
			bottom: 65vh;
			transform: rotate(360deg);
		}
		52% {
			left: 110vw;
			bottom: 50vh;
			transform: rotate(540deg);
			border: none;
		}
		62% {
			left: 110vw;
			bottom: 40vh;
			transform: rotate(15deg) scaleX(-1);
			border-bottom: 5px dashed rgb(255, 208, 0);
			padding: 2px;
		}

		72% {
			left: -20vw;
			bottom: 75vh;
			transform: rotate(15deg) scaleX(-1);
		}

		78% {
			left: -20vw;
			bottom: 20vh;
			transform: rotate(-25deg) scaleX(1);
		}

		90% {
			left: 120vw;
			bottom: 50vh;
			transform: rotate(-25deg) scaleX(1);
		}

		100% {
			left: 120vw;
			bottom: 50vh;
			transform: rotate(-25deg) scaleX(1);
			border-bottom: 5px dashed rgb(255, 208, 0);
			padding: 2px;
		}
	}

	.exp_zoom_element1 {
		font-size: 14px;
		max-width: 80%;
		margin-bottom: 10px;
		text-decoration: underline;
	}

	.exp_zoom_element3 {
		font-size: 14px;
		max-width: 80%;
		margin: 10px 0 10px 0;
	}

	.exp_zoom_element2 {
		font-family: "BebasNeueRegular";
		font-size: 18px;
		font-weight: bold;
		max-width: 80%;
	}

	.exp_zoom_element5,
	.exp_zoom_element4 {
		font-size: 10px;
		max-width: 80%;
		margin: 5px 0;
	}

	.exp_zoom_element6 {
		font-size: 10px;
		max-width: 80%;
		margin: 10px 0;
		text-align: center;
	}

	.exp_zoom_close {
		align-self: flex-start;
		position: absolute;
		height: 40px;
		top: 80px;
		right: 10px;
		cursor: pointer;
		transition: 1s;
		overflow: hidden;
		user-select: none;
		z-index: 4;
	}

	.exp_zoom_item {
		position: absolute;
		top: calc(202vh - 82px);
		left: calc(48.5vw - 82px);
		z-index: 3;
		animation: exp_zoom_item 2s;
	}

	@keyframes exp_zoom_item {
		from {
			transform: translateY(-30vh) rotate(0deg);
		}

		to {
			transform: translateY(0) rotate(360deg);
		}
	}

	.exp_zoom_close:hover {
		transform: rotate(360deg);
	}

	#experience h3 {
		font-size: 9px;
		padding: 0 3px;
	}

	#experience p {
		display: none;
	}

	#experience time {
		display: none;
	}

	.exp_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 100px);
	}

	.exp_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		position: relative;
		top: 0;
		right: 30vw;
		transition: 0.8s;
	}

	.exp_right_anim {
		animation: exp_right 1.5s;
	}

	@keyframes exp_right {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.exp_right img {
		position: relative;
		top: 0;
		height: 40vh;
		margin: 50px;
		z-index: 1;
	}

	.wheel_active {
		background-color: rgb(255, 208, 0);
		color: #121212;
	}

	.wheel_active .exp_circle_wrapper div {
		border: 2px solid #121212;
	}

	/* Achievements MOBILE LANDSCAPE */

	#achievements {
		display: flex;
		height: 100vh;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.ach_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		height: 100%;
		overflow: hidden;
	}

	.ach_fleche_gauche {
		height: 30px;
		position: absolute;
		left: 30px;
		transform: rotate(180deg);
		transition: 0.5s;
		cursor: pointer;
		animation: ach_fleche 2s alternate-reverse infinite;
		z-index: 2;
	}

	.ach_fleche_droite {
		height: 30px;
		position: absolute;
		right: 30px;
		transition: 0.5s;
		cursor: pointer;
		animation: ach_fleche 2s alternate-reverse infinite;
		z-index: 2;
	}

	@keyframes ach_fleche {
		0% {
			opacity: 0.5;
		}
		100% {
			opacity: 1;
		}
	}

	.ach1,
	.ach2,
	.ach3,
	.ach4,
	.ach5 {
		height: 100%;
		width: 100vw;
	}

	.ach_invisible {
		display: none;
	}

	.ach_change {
		animation: ach_change 2s forwards;
	}

	@keyframes ach_change {
		0% {
			transform: translate(100%);
		}
		100% {
			transform: translate(0);
		}
	}

	.ach_top {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 40%;
		width: 100%;
	}
	.ach_bottom {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 40%;
		width: 100%;
	}

	.ach_pickup_wrapper {
		display: none;
		position: relative;
		bottom: 0;
		top: 0;
		margin: auto;
		width: 100vw;
		height: 20%;
	}

	.ach_pickup_anim {
		display: flex;
		animation: pick_up 8s linear forwards;
	}

	@keyframes pick_up {
		0% {
			transform: translateX(-20vw);
		}
		12.5% {
			transform: translateX(10%);
		}
		25% {
			transform: translateX(10%);
		}
		50% {
			transform: translateX(120vw) scaleX(1);
		}
		51% {
			transform: translateX(120vw) translateY(-8vw) rotate(10deg) scaleX(-1);
		}
		100% {
			transform: translateX(-120vw) translateY(-8vw) rotate(10deg) scaleX(-1);
		}
	}

	.ach_logo {
		position: absolute;
		bottom: 5vw;
		width: 4%;
		left: 3%;
	}

	.ach_carosserie {
		position: absolute;
		bottom: 1.5vw;
		width: 20%;
	}

	.ach_roue_droite {
		position: absolute;
		left: 15.8%;
		bottom: 0;
		width: 3%;
		animation: pickup_wheels 8s linear forwards;
	}

	.ach_roue_gauche {
		position: absolute;
		left: 1.8%;
		bottom: 0;
		width: 3%;
		animation: pickup_wheels 8s linear forwards;
	}

	@keyframes pickup_wheels {
		0% {
			transform: rotate(0);
		}
		12.5% {
			transform: rotate(360deg);
		}
		22% {
			transform: rotate(360deg);
		}
		25% {
			transform: rotate(720deg);
		}

		50% {
			transform: rotate(1440deg);
		}
		100% {
			transform: rotate(2440deg);
		}
	}

	.ach_chaine {
		position: absolute;
	}

	.ach_smoke1 {
		position: absolute;
		height: 15%;
		left: -3vw;
		bottom: 2vw;
		animation: ach_smoke 0.9s alternate-reverse infinite;
	}

	.ach_smoke2 {
		position: absolute;
		height: 8%;
		left: -4vw;
		bottom: 3vw;
		animation: ach_smoke 0.6s alternate-reverse infinite;
	}

	@keyframes ach_smoke {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	.ach_video {
		height: 16.87vw;
	}

	.ach_video video,
	.ach_video img {
		width: 30vw;
		height: min-content;
		border: thin solid rgb(255, 208, 0);
		box-sizing: border-box;
		height: 100%;
	}

	.ach_video1 video {
		max-width: 30vw;
	}

	.ach_video2 video {
		max-width: 30vw;
	}

	.ach_video3 video {
		max-width: 30vw;
	}

	.ach_description {
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: 100%;
		width: 30vw;
		background-color: rgb(255, 208, 0);
	}

	.ach_description h3 {
		font-family: "BebasNeueRegular";
		font-size: 18px;
		max-width: 75%;
		padding-top: 10px;
		text-align: center;
	}

	.ach_description p {
		font-size: 14px;
		max-width: 75%;
		text-align: center;
		margin: 2vh 0;
	}

	.ach_description ul {
		list-style-type: disc;
		max-width: 75%;
		text-align: center;
	}

	.ach_description li {
		margin: 1vh 0;
		font-size: 12px;
	}

	.ach_description1 {
		animation: video_anim 0.5s linear forwards;
	}
	.ach_description2 {
		animation: video_anim 1s linear forwards;
	}
	.ach_description3 {
		animation: video_anim 1.5s linear forwards;
	}
	@keyframes video_anim {
		0% {
			transform: translateY(100%);
		}

		100% {
			transform: translateY(0);
		}
	}
	/* Contact MOBILE LANDSCAPE  */

	#contact {
		height: 100vh;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		display: flex;
		overflow-x: hidden;
	}

	.contact_logo {
		position: absolute;
		width: 60px;
		bottom: 0;
		left: 50vw;
	}

	.contact_right_logo_anim {
		animation: contact_right_logo 9s forwards;
	}

	@keyframes contact_right_logo {
		0% {
			transform: translate(100vw) scaleX(-1);
			visibility: visible;
		}
		32% {
			transform: translate(0) scaleX(-1);
		}
		33% {
			transform: translate(0) scaleX(-1);
		}
		66% {
			transform: translate(0) scaleX(-1);
		}
		67% {
			transform: translate(0) scaleX(1);
		}
		100% {
			transform: translate(100vw) scaleX(1);
		}
	}

	@keyframes contact_right_anim {
		0% {
			transform: translate(-100%);
			visibility: visible;
		}
		50% {
			transform: translate(-100%);
		}
		75% {
			transform: translate(-40%);
		}
		80% {
			transform: translate(-43%);
		}
		100% {
			transform: translate(0);
			visibility: visible;
		}
	}

	.contact_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 50vw;
		background-color: rgb(255, 208, 0);
		font-size: 12px;
		visibility: hidden;
	}

	.contact_right h2 {
		margin-top: 5vh;
		font-family: "BebasNeueRegular";
		font-size: 18px;
	}

	.contact_right_anim {
		animation: contact_right_anim 6s forwards;
	}

	.contact_right_top,
	.contact_right_bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 50%;
	}

	.dial_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.dial_wrapper img {
		transition: 0.5s;
	}

	.dial_anim {
		animation: dial_anim 6s;
		width: 80px;
	}

	@keyframes dial_anim {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(0deg);
		}
		75% {
			transform: rotate(180deg);
		}
		80% {
			transform: rotate(190deg);
		}
		100% {
			transform: rotate(360deg);
			visibility: visible;
		}
	}

	.dial_wrapper span {
		position: absolute;
		pointer-events: none;
		font-size: 12px;
	}

	.dial_wrapper img:hover {
		transform: rotate(30deg);
	}

	.mail_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
	}

	.mail_wrapper img {
		transition: 0.5s;
		border-radius: 50%;
	}

	.mail_wrapper span {
		position: absolute;
		pointer-events: none;
		font-size: 12px;
	}

	.mail_wrapper img:hover {
		transform: rotate(-30deg);
	}

	.mail_anim {
		animation: mail_anim 6s;
		width: 80px;
	}

	@keyframes mail_anim {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(0deg);
		}
		75% {
			transform: rotate(180deg);
		}
		80% {
			transform: rotate(190deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.mail_click_anim_img {
		animation: mail_click_anim_img 2s;
	}

	@keyframes mail_click_anim_img {
		from {
			transform: rotate(0deg);
		}
		40% {
			background: radial-gradient(#121212 30%, rgb(255, 208, 0) 30%);
		}
		to {
			transform: rotate(720deg);
			background: radial-gradient(#121212 30%, rgb(255, 208, 0) 30%);
		}
	}

	.mail_click_anim_wrapper {
		animation: mail_click_anim_wrapper 2s;
	}

	@keyframes mail_click_anim_wrapper {
		from {
			transform: translate(0);
		}
		50% {
			transform: translate(0);
			color: rgb(255, 208, 0);
		}
		to {
			transform: translate(100vw);
			color: rgb(255, 208, 0);
		}
	}

	.contact_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		width: 50vw;
		height: 100%;
	}

	.contact_left form {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 66%;
	}

	.contact_left input {
		width: 100%;
		height: 20px;
		margin-bottom: 5vh;
	}

	.contact_left textarea {
		width: 100%;
		height: 50px;
	}

	.contact_left label {
		color: rgb(255, 208, 0);
		font-family: "BebasNeueRegular";
		font-size: 18px;
		margin-bottom: 2vh;
	}

	.contact_left button {
		transition: 0.5s;
		font-size: 12px;
		color: rgb(255, 208, 0);
		background-color: transparent;
		border: none;
		width: 80px;
		height: 80px;
		z-index: 2;
		transition: 0.5s;
		cursor: pointer;
	}

	.submit_button {
		width: 80px;
		height: 80px;
		background: none;
		border: none;
		background-image: url("images/send.svg");
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.5s;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.submit_button:hover {
		transform: rotate(45deg);
	}

	.contact_left button:hover {
		transform: rotate(-45deg);
	}

	.contact_left_button_anim {
		animation: contact_left_button_anim 2s;
	}

	.contact_left_button_anim_symbol {
		animation: contact_left_button_anim_symbol 2s;
	}

	@keyframes contact_left_button_anim {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes contact_left_button_anim_symbol {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(-360deg);
		}
	}

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

	/* Footer TAB */
	footer {
		scroll-snap-align: end;
		scroll-snap-stop: always;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		height: 200px;
		background-color: #181818;
		position: relative;
	}

	footer * {
		color: rgb(255, 208, 0);
		font-size: 12px;
	}
}

/* Mentions legales */

.mentions_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.mentions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	width: 75%;
	height: 50%;
	color: rgb(255, 208, 0);
	text-align: center;
}

.mentions img {
	width: 100px;
}