/*VARIABLE-CSS*/
:root{
	--posleft:0%;
	--widthbar:0px;
}

/*______________________CSS-GENRAUX__________________*/
*{
	padding: 0;
	margin: 0;
	height: 100%;
}

html {
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	/* overflow-x: hidden; */
}

body {
	font-family: "bebas",  sans-serif;
	color: white;
}

body > .sectionevent {
	overflow-x: hidden;
	display: block !important;
}

textarea {
	resize: none;
}

.display_none {
	display: none;
}


/*__________________CREATION-FONT-FACE_____________________*/
@font-face {
    font-family: "polya";
    src: url("../font/Ailerons-Typeface.otf");
}

@font-face {
    font-family: "bebas";
    src: url("../font/BebasNeue/BebasNeue-Book.otf") format("truetype");
}

.purple {
	background-color: #1b1f40;
}


.darkpurple {
	background-color: #11142b;
}

.tab {
	margin-left: 30px;
	margin-top: 0px !important;
}

a , .fas , .fab, .fa {
	color: #be7636;
}

h1,h2,h3{
	font-weight: normal;
	height: auto;
}

.left {
	position: absolute;
}

.left {
	-webkit-animation: transleft 1.8s;
	animation: transleft 1.8s;
}

/*__________________________DEBUT-CSS-NAVBAR____________________________*/
#burger {
		display: none;
		z-index: 100;
		position: fixed;
		top: 50px;
		left: 50px;
    transition: all 500ms ease-in-out;
}

#stroke1, #stroke2, #stroke3 {
    cursor: pointer;
    border-top: 3px solid #fff;
    width: 50px;
    height: 10px;
    transition: all 500ms ease-in-out;
}

#tap-circle {
    border: 1px solid #fff;
    border-radius: 1000px;
    width: 70px;
    height: 70px;
		opacity: 0;
    margin: -60px -10px;
    transition: all 500ms ease-in-out;
}

.rotate1 {
    transform: rotate(45deg) translateY(12px) translateX(5px);
}

.opacity {
    opacity: 0;
}

.rotate2 {
    transform: rotate(-45deg) translateY(-10px) translateX(10px);
}

.click-animation {
    animation: animation 0.3s forwards ease-in-out;
}

.navbar{
	z-index: 99;
	height: 50px;
	background: #2A343D;
	width: 100%;
	position: fixed;
}

.navbar > ul {
	text-decoration: none;
	list-style-type: none;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-flex;
	display: flex;
}

.navbar > ul > li {
	width: 100%;
}

.up-page {
	-webkit-flex-direction:column;
	flex-direction: column;
	text-decoration: none;
	color: white;
	text-align: center;
	width: 100%;
	height: 100%;
	margin:auto;
	-webkit-transition: ease 0.3s all;
	transition: ease 0.3s all;
	font-size: 2em;
	line-height: 50px;
}

.navbar-underline-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.navbar-underline-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: white;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.navbar-underline-center:hover:before, .navbar-underline-center:focus:before, .navbar-underline-center:active:before {
  left: 0;
  right: 0;
}

.active {
	background-color:#be7636;
}
/*__________________________FIN-CSS-NAVBAR____________________________*/


/*__________________________DEBUT-CSS-HOME____________________________*/

.divmaintitle > .animehome {
	position: absolute;
	z-index: 1;
	top: 0;
	left: -50px;
	width: 50px;
	height: 0%;
	border-top: solid 50px #be7636;
}

.main_anim {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.anim , .background_anim{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
}

.square_left, .square_right, .bg_square_left, .bg_square_right {
	width: 100%;
	height: 100%;
}

.square_left, .square_right {
	background-color: #11142b;
}

.bg_square_left, .bg_square_right {
	background-color: #be7636;
}


.square_left {
	animation-duration: 2s;
	animation-name: anim_door_left;
}

.square_right {
	animation-duration: 2s;
	animation-name: anim_door_right;
}

.bg_square_right{
	animation-duration: 1s;
	animation-delay: 1s;
	animation-name: bg_anim_door_right;
}

.bg_square_left{
	animation-duration: 1s;
	animation-delay: 1s;
	animation-name: bg_anim_door_left;
}

.divsvg {
  position: relative;
  top: 50%;
  height: 11em;
	-webkit-transform: translateY(-50%);
  transform: translateY(-50%);
	margin: 0 auto;
  width: 80%;
  text-align: center;
}

.shape {
  stroke-dasharray: 0 580;
  stroke-dashoffset: 580;
  stroke-width: 4px;
  stroke: #be7636;
	-webkit-transition: stroke-width 2.7s, stroke-dashoffset 2.7s, stroke-dasharray 1.3s;
  transition: stroke-width 2.7s, stroke-dashoffset 2.7s, stroke-dasharray 1.3s;
	-webkit-transition-delay:0s;
  transition-delay: 0s;
  fill: #1b1f40;
}

.maintitle {
  font-family: 'polya';
  font-size: 8em;
  letter-spacing: 8px;
  color: #be7636;
  top: 0px;
  position: absolute;
	width: 100%;
  text-align: center;
  left: 50%;
	-webkit-transform:translateX(-50%);
  transform: translateX(-50%);
  font-variant: small-caps;
}

.shape-border {
  stroke-width: 4px;
  stroke-dashoffset: 0;
  stroke-dasharray: 700 0;
}

/*__________________________FIN-CSS-NAVBAR____________________________*/


#firstsection , #secondsection , #thirdsection , #fourthsection , #fifthsection , #contactme {
	position: relative;
	min-height: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
}

#firstsection {
	z-index: 2;
}

/*_______________________DEBUT-CSS-TITRE-SECTION________________________*/
.title {
	--posleft:50%;
	position: relative;
	left: 50%;
	-webkit-transform:translateX(-50%);
	transform: translateX(-50%);
	-webkit-animation: transleft 1.8s;
	animation: transleft 1.8s;
	width: 500px;
	padding: 0px 50px 0px 50px;
	text-align: center;
	font-size: 4em;
	height: auto;
	margin-top: 70px;
}

.title > .underline {
	height: 2px;
	width: 100%;
	background-color: #be7636;
	-webkit-animation: titleunderline 2.1s;
	animation: titleunderline 2.1s;
}

.title > p {
	padding:0px 10px 30px 10px;
}

.title > * {
	height: auto;
}
/*_______________________FINS-CSS-TITRE-SECTION________________________*/

/*_______________________DEBUT-CSS-FIRST-SECTION________________________*/

.bio, .personnalproject{
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 80%;
	height: auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 50px;
	margin-bottom: 50px;
}

.bio > .text , .personnalproject > .text{
	width: 60%;
	margin-left: 10px;
}

.bio > .text > h1, .personnalproject > .text > h1{
	color: #be7636;
}

.text > p {
	margin-top: 1em;
	height: auto;
	font-size: 2em;
}

/*ANIMATION-BOUTON-DOWNLOAD*/
.dl {
	margin-top: 20px;
	border: solid 2px #be7636;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	overflow: hidden;
	width: 150px;
	height: 48px;
	display: -webkit-flex;
	display: flex;
}

.dl::before,.dl::after {
	z-index: -1;
	content: '';
	position: absolute;
	background: #be7636;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	-webkit-transform: scale(1,1);
	transform: scale(1,1);
	-webkit-transition-property: transform,top;
	transition-property: transform,top;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}

.dl::before {
	left: -40px;
	top: 96px;
}

.dl::after {
	left: 190px;
	top: -48px;
}

.dl:hover::before, .dl:focus::before ,.dl:hover::after, .dl:focus::after {
	-webkit-transform: scale(15,15);
	transform: scale(15,15);
}


.dl > a {
	width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  line-height: 52px;
  text-align: center;
  font-size: 1.5em;
}
/*FIN-ANIMATION-BOUTTON-DOWNLOAD*/

.imgvanhouta {
	width: 420px;
	height: 420px;
}

/*_______________________FIN-CSS-FIRST-SECTION________________________*/


/*_______________________DEBUT-CSS-SECOND-SECTION________________________*/

.skills {
	position: relative;
	height: auto;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	left: 50%;
	width: 80%;
	margin-top: 50px;
	margin-bottom: 50px;
	display: flex;
	flex-direction: column;
}

.skills >.row {
	height:auto;
	display: flex;
	justify-content: space-around;
	margin-bottom: 40px;
}

.bar{
	width: 500px;
	height: 50px;
	border: solid 1px #be7636;
	background-color: #11142b;
}

.progress{
	font-size: 2em;
	line-height: 50px;
	color: #11142b;
	text-align: center;
	background-color: #be7636;
	-webkit-animation-name: level;
	animation-name: level;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
}

.progress1{
	--widthbar:95%;
	/* width: var(--widthbar) !important; */
	width: 95%;/*POUR SAFARI*/
}

.progress2{
	--widthbar:95%;
	/* width: var(--widthbar) !important; */
	width: 95%;/*POUR SAFARI*/
}

.progress3 {
	--widthbar:85%;
	/* width: var(--widthbar) !important; */
	width: 85%;/*POUR SAFARI*/
}

.progress4 {
	--widthbar:88%;
	/* width: var(--widthbar) !important; */
	width: 88%;/*POUR SAFARI*/
}

.progress5 {
	--widthbar:80%;
	/* width: var(--widthbar) !important; */
	width: 80%;/*POUR SAFARI*/
}

.progress6 {
	--widthbar:73%;
	/* width: var(--widthbar) !important; */
	width:73%;/*POUR SAFARI*/
}

.progress7 {
	--widthbar:75%;
	/* width: var(--widthbar) !important; */
	width: 75%;/*POUR SAFARI*/
}

.progress8 {
	--widthbar:67%;
	/* width: var(--widthbar) !important; */
	width: 67%;/*POUR SAFARI*/
}

.progress9 {
	--widthbar:97%;
	/* width: var(--widthbar) !important; */
	width: 97%;/*POUR SAFARI*/
}

.progress10 {
	--widthbar:77%;
	/* width: var(--widthbar) !important; */
	width: 77%;/*POUR SAFARI*/
}
/*_______________________FIN-CSS-SECOND-SECTION________________________*/


/*_______________________DEBUT-CSS-THIRD/FOURTH-SECTION________________________*/

.workexperience, .education {
	--posleft:50%;
	position: relative;
	height: auto;
	left: 50%;
	width: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.workexperience, .education {
	height: auto;
	margin-top: 25px;
	margin-bottom: 25px;
}

.workexperience > h1, .education > h1 {
	font-size: 3em;
}

.workexperience > p , .education > p {
	margin-left: 50px;
	font-size: 2em;
	height: auto;
}

.education > div > .placepartschool {
	margin-left: 100px;
}

/*_______________________FIN-CSS-THIRD/FOURTH-SECTION________________________*/

/*_______________________DEBUT-CSS-FIFTH-SECTION________________________*/

.personnalproject {
	height: auto;
}

.personnalproject > .video {
	height: auto;
	display: flex;
	flex-direction: column;
	width: 560px;
}
/*une partie du css de la 5eme section a été réuni avec le css de la 1ere section
/*_______________________FIN-CSS-FIFTH-SECTION________________________*/

/*_______________________DEBUT-CSS-CONTACT-SECTION________________________*/

.contactcontent {
	position: relative;
	display: flex;
	justify-content: center;
	--posleft: 50%;
  width: 60%;
  height: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.reference {
	margin-top: 30px;
	font-size: 2em;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: column;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	height: auto;
}

.reference > div{
	margin: 10px;
	display: flex;
	height: auto;
}

.reference > div > i::before {
	width: 50px;
  display: flex;
  justify-content: center
}
/*_______________________FIN-CSS-CONTACT-SECTION________________________*/

/*_______________________DEBUT-RESPONSIVE________________________*/
@media screen and (max-width:1820px) {
	.divsvg {
		height: 20em;
	}
}


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

	.divsvg {
		height: 19em;
	}


	.bar {
		width: 400px;
	}

	.personnalproject > .video {
		width: 500px;
	}

	.personnalproject > .text {
		font-size: 0.8em;
		width: 50%;
	}

	.reference {
		font-size: 1.5em;
	}
}

@media screen and (max-width:1024px) {
	.maintitle {
		font-size: 7em;
	}

	.title > p {
    margin: 0px 10px 0px 10px;
    font-size: 0.8em;
	}

	.divsvg {
		height: 18em;
	}

	.text {
		font-size: 0.8em;
	}

	.navbar > ul {
		width: 80%;
	}

	.imgvanhouta {
		width: 300px;
		height: 300px;
	}

	.bar {
		width: 340px;
	}

	.workexperience, .education {
		font-size: 0.8em;
	}

	.personnalproject > .text {
    width: 60%;
	}

	.personnalproject > .video {
    width: 300px;
	}

	.reference {
    font-size: 1.3em;
	}
}

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

	.maintitle {
		font-size: 5em;
	}

	.divsvg {
		height: 13em;
	}

	.bio {
		flex-direction: column;
	}

	.bio , .personnalproject{
		--posleft:50%;
	}

	.personnalproject {
		flex-direction: column-reverse;
	}

	.bio > .text , .personnalproject > .text  {
		width: 100%;
		margin: 10px 0px 10px 0px;
	}


	.imgvanhouta {
		width: 380px;
		height: 380px;
	}

	.picture {
		/*position: absolute;
    top: 0px;*/
    /*left: 50%;*/
		/* -webkit-transform: translateX(-50%);
    transform: translateX(-50%); */
		display: flex;
		justify-content: center;
	}

	.workexperience, .education {
		width: 80%;
	}

	.reference {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	.personnalproject > .text  {
		width: 100%;
	}

	.video {
		display: -webkit-flex;
		display: flex;
	}

	.skills {
		font-size: 0.8em;
	}

	.skills >.row {
		flex-direction: column;
    margin-bottom: 0px;
	}

	.skills > .row > div {
		margin: 20px 0px 20px 0px;
	}

	.bar {
    width:500px;
		margin-left: auto;
		margin-right: auto;
	}

	.barleft > h1 , .barright > h1 {
		text-align: center;
	}

	#burger {
		height: 30px;
		display: block;
	}

	.navbardisplay {
		/* display: block !important;
		-webkit-animation: burger 1s;
		animation: burger 1s; */
		top: 0px !important;
	}

	.navbar {
		/*display: none;*/
		top: -700px;
		height: 700px;
		transition: all ease 1s;
	}

	.navbar > ul {
		width: 100%;
	}

	.navbar > ul > li {
		height: 100px;
	}

	#menu {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	.up-page {
		line-height: 100px;
    font-size: 4em;
	}

	.left, .title, .bio > div, .skills > .row, .personnalproject > div {
		-webkit-animation: transleftresponsive 1.8s;
		animation: transleftresponsive 1.8s;
	}

	.personnalproject > .video {
		flex-direction: row;
	}
}

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

	.maintitle {
		font-size: 2em;
	}

	.divsvg {
		height: 5em;
	}

	.title > p {
    margin: 0px 10px 0px 10px;
		padding-bottom: 10px;
    font-size: 0.5em;
    height: 1em;
	}

	.title {
		width: 250px;
		margin-top: 30px;
		-webkit-animation: transleftresponsive 1.8s;
    animation: transleftresponsive 1.8s;
	}

	.imgvanhouta {
    width: 180px;
    height: 180px;
	}

	.bio > .text {
    font-size: 0.6em;
	}

	.skills {
		margin-top: 25px;
		margin-bottom: 25px;
    font-size: 0.5em;
	}

	.progress {
		line-height: 20px
	}

	.bar {
    width: 200px;
    height: 20px;
	}

	.skills >.row {
	  height: auto;
    margin-bottom: 0px;
		flex-direction: column;
	}

	.skills > .row > div {
		margin:10px 0px 10px 0px;
	}

	.workexperience, .education {
    width: 80%;
    font-size: 0.6em;
	}

	.personnalproject, .bio {
		margin-top: 25px;
		margin-bottom: 25px;
	}

	.personnalproject > .video {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.personnalproject > .text {
    font-size: 0.5em;
	}

	.inputemail {
    top: 2em;
	}

	.inputbody {
    top: 4em;
	}

	.reference {
    height: 40px;
    width: 100%;
	}

	.reference > div {
		height: auto;
		display: flex;
	}
	.reference > div > i, .reference > div > a {
		height: auto;
	}

	#burger {
    top: 20px;
    left: 20px;
	}

	.dl {
    margin-top: 10px;
	}

	.dl > a {
		font-size: 2em;
	}

	.contactcontent {
		width: 80%;
	}


}

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


}

/*__________________________CSS-ANIMATION____________________________*/
@keyframes transleft {
	from {
		-webkit-transform: translateX(200%);
		transform: translateX(200%);
		left: -200%;}
	to {
		-webkit-transform: translateX(-var(--posleft));
		transform: translateX(-var(--posleft));
		left: var(--posleft);}
}

@keyframes transleftresponsive {
	from {
		-webkit-transform: translateX(-250%);
		transform: translateX(-250%);
	}
	to {
		-webkit-transform: translateX(-var(--posleft));
		transform: translateX(-var(--posleft));
		left: var(--posleft);}
}

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

@keyframes level{
	1% {width: var(--widthbar)}
	/*permet de récupérer la valeur width en js sinon width est a 0*/
	2% {width: var(--widthbar)}
	6% {width: 0px;}/*remet directement width a 0 après récupération de la valeur en js*/
	/*quand les animations transright ou transleft sont fini la barre commence à se remplir*/
  50% {width: 0px;$}
  100% {width: var(--widthbar);}
}

@keyframes animation {
    0% {opacity: 0; transform: scale(1);}
    80% {opacity: 1;}
    100% {opacity: 0; transform: scale(1.8);}
}

@keyframes burger {
	from {top:-700px}
	to {top:0px}
}

@keyframes anim_door_right {
	0% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}

	50% {
		clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
	}
	99% {

	}
	100% {
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);

	}
}

@keyframes anim_door_left {
	0% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}

	50% {
		clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
	}
	99% {

	}
	100% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	}
}

@keyframes bg_anim_door_right {
	0% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}

	100% {
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);

	}
}

@keyframes bg_anim_door_left {
	0% {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}

	100% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	}
}