/* TELECHARGEMENT DES FONTS */
@font-face {
	font-family: "Font_titres";
	src: url('FONT/SecondChances.ttf');
}


/* TOUT LE SITE */
h1 {
	font-family: 'Font_titres';
	color: #10375c;
}

h2 {
	font-family: 'Font_titres';
	color: #F4F6FF;
	padding-top: 2rem;
}

body {
	padding-bottom: 3rem;
}

/* Menu de navigation */
.text-navigation {
    font-size: 1.2em;
}


/* BOUTON DE RETOUR POUR TOUTES LES PAGES A+2 */

#bouton_back {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* IMAGE DU LOADER */

.loader{
	background: url('IMAGES/accueil/loader.gif') 50% 50% no-repeat rgba(255, 255, 255, 0.8);
	cursor: wait;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}


/* PAGE : CHOIX DE LA LANGUE */
#langue-full {
	background-color: #10375c;
}

#container-accueil {
	margin-top: 1rem;
	font-family: 'Barlow', sans-serif;
}

#h1-langue, #text-accueil {
	color : #F4F6FF ;
}

#h1-langue {
	font-size: 24pt;
}

#text-accueil {
	text-align: center;
}

#row-question, #row-langues {
	margin-top: 3rem;
}


/* PAGE D'ACCUEIL */
#entete-accueil {
	background-color: #F4F6FF;
	padding: 1rem;
}

#img-fond-index {
	position: fixed;
	left: 50%;
	margin-left: -125px;
	top: 50%;
	margin-top: -100px;
}

#img-elephant {
	min-width: 100%;
	min-height: 100%;
}


#element-menu {
	text-align: center;
	font-size: 2em;
	min-height: 40vh;
}

#text-menu {
	padding-top: 20%;
}

#lien-contact {
	color: #10375c;
	text-decoration: none;
}

#lien-accueil {
	color: #F4F6FF;
	font-family: 'Font_titres';
}

#lien-accueil, #lien-contact {
	text-decoration: none;
    display:inline-block;
	backface-visibility: hidden;
	vertical-align: middle;
	position:relative;
	box-shadow: 0 0 1px rgba(0,0,0,0);
    tranform: translateZ(0);
    transition-duration: .3s;
	transition-property:transform;
}

#lien-accueil:hover, #lien-contact:hover {
  	transform: translateY(-5px);
	text-decoration: none;
}

#lien-accueil:hover {
	color: #f3c623;
}

#lien-accueil:hover:before, #lien-accueil:active:before, #lien-accueil:focus:before, #lien-contact:hover:before, #lien-contact:active:before, #lien-contact:focus:before {
	transform: translateY(-5px);
}




/* PAGE EXPERIENCES PROFESSIONNELLES */

/* TIMELINE */

		.timeline {
				overflow-y: scroll;
				overflow-x: hidden;
				height: 75vh;
				top: calc(100%/*-600px*/);
				position: relative;
				scroll-behavior:  smooth ;			 
			}
		.timeline   *, .timeline   *::before, .timeline   *::after { 
				font: normal 16px/1.5 "Font1";
				color: #10375c;
				margin: 0;
				padding: 0;
				box-sizing: content-box;
				font-family: 'Barlow';	
			}

		.time {
				color: #F3C623;
				font-size: 20pt;
				font-family: 'Font_titres';
			}

		.timeline::-webkit-scrollbar {
				width: 12px;
				background-color: #10375c;
			}
			 
			.timeline::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
				border-radius: 10px;
				background-color: #F4F6FF;
			}
			 
			.timeline::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
				background-color: #F4F6FF;
			}
			 
			.timeline ul {
			  background: #10375c;
			  /* padding: 50px 0; */
			}

			.timeline ul li {
			  list-style-type: none;
			  position: relative;
			      width: 2px;/* width: 6px; */
			  margin: 0 auto;
				padding-top: 10px;/* 50px; */
				padding-bottom: 10px;/* padding-bottom: 20px; = center padding-bottom: 10px; = center */
			 background: #F3C623;
			  
				border-left: 3px double #F3C623;
				
			}

			 
			.timeline ul li::after {
			  content: '';
			  position: absolute;
			  left: 50%;
			  top: 30px; /* bottom: 0;  bottom: 50%;=center top: 30px;=top  */ 
			  transform: translateX(-55%);/* transform: translateX(-50%); */
			  -webkit-transform: translateX(-55%);
			  width: 30px;
			  height: 30px;
			  border-radius: 50%;
			  background: inherit;
			  border: 2px solid #40040A;
			}

			.timeline ul li div {
			  position: relative;
			  bottom: 0;
			  width: 400px;
			  padding: 15px;
			  background: #F4F6FF;
			  
			}

			.timeline ul li div::before {
			  content: '';
			  position: absolute;
			  top: 20px; /* bottom: 7px; bottom: 50%;=center top: 20px;=top */
			  
			  width: 0;
			  height: 0;
			  border-style: solid;
			}

			.timeline ul li:nth-child(odd) div {
			  left: 45px;
			}

			.timeline ul li:nth-child(odd) div::before {
			  left: -15px;
				border-width: 16px 16px 16px 0;/* border-width: 8px 16px 8px 0; */
			  border-color: transparent #F4F6FF transparent transparent;
			}

			.timeline ul li:nth-child(even) div {
			  left: -439px;
			}

			.timeline ul li:nth-child(even) div::before {
			  right: -15px;
			  	border-width: 16px 0 16px 16px; /* border-width: 8px 0 8px 16px; */
			  border-color: transparent transparent transparent #F4F6FF;
			}
			
			
			.timeline ul li:nth-child(odd) .time {
				position: absolute;
				top: 20px;
				left: -100px;
				width: 90px;
			}
			.timeline ul li:nth-child(even) .time {
				position: absolute;
				top: 20px;
				right: -120px;
				width: 90px;
			}
			
			
			.timeline time {
			  display: block;
			  font-size: 1.2rem;
			  font-weight: bold;
			  margin-bottom: 8px;
			}


			/* EFFETS */

			.timeline ul li::after {
				transition: background .5s ease-in-out;
				-webkit-transition: background .5s ease-in-out;
			}

			.timeline ul li.in-view::after {
			  background: #F3C623;
			  border: 2px solid #F4F6FF;
			}

			.timeline ul li div {
			  visibility: hidden;
			  opacity: 0;
				transition: all .5s ease-in-out;
				-webkit-transition: all .5s ease-in-out;
			}

			.timeline ul li:nth-child(odd) div {
				transform: translate3d(200px, 0, 0);
				-webkit-transform: translate(200px, 0, 0);
			}

			.timeline ul li:nth-child(even) div {
				transform: translate3d(-200px, 0, 0);
				-webkit-transform: translate(-200px, 0, 0);
			}

			.timeline ul li.in-view div {
				transform: none;
				-webkit-transform: none;
			  visibility: visible;
			  opacity: 1;
			  /* disabled when arrow is on top position
			  border-radius: 10px;
			  */
			}
			
			.timeline ul li  .time {
				transition: all .5s ease-in-out;
				-webkit-transition: all .5s ease-in-out;
				transform: rotate(-90deg);
				-webkit-transform:rotate(270deg);
			}
			.timeline ul li.in-view  .time {
				transform: rotate(0deg);
				-webkit-transform:rotate(0deg);
			}

			/* GENERAL MEDIA QUERIES */

			@media screen and (max-width: 900px) {
			  .timeline ul li div {
				width: 250px;
			  }
			  .timeline ul li:nth-child(even) div {
				left: -289px;
				/*250+45-6*/
			  }
			}

			@media screen and (max-width: 600px) {
			  .timeline ul li {
				margin-left: 20px;
			  }
			  .timeline ul li div {
				width: calc(100vw - 120px);
			  }
			  .timeline ul li:nth-child(even) div {
				left: 45px;
			  }
			  .timeline ul li:nth-child(even) div::before {
				left: -15px;
				border-width: 16px 16px 16px 0; /* border-width: 8px 16px 8px 0;  */
				border-color: transparent #F3C623 transparent transparent;
			  }
			  
				
				.timeline ul li:nth-child(odd) .time {
					position: absolute;
					top: 60px;
					left: -23px;
					width: 90px;
					/*
					transform: rotate(-90deg);
					-webkit-transform:rotate(270deg);
					*/
					transform: rotate(0deg);
					-webkit-transform:rotate(0deg);
				}
				.timeline ul li:nth-child(even) .time {
					position: absolute;
					top: 60px;
					right: -67px;
					width: 90px;
					/*
					transform: rotate(-90deg);
					-webkit-transform:rotate(270deg);
					*/
					transform: rotate(0deg);
					-webkit-transform:rotate(0deg);
				}
				.timeline ul li.in-view:nth-child(odd) .time {
					transform: rotate(-90deg);
					-webkit-transform:rotate(270deg);					 
				}
				.timeline ul li.in-view:nth-child(even) .time {
					transform: rotate(-90deg);
					-webkit-transform:rotate(270deg);
				}
			  
			}

	/* MENU PRINCIPAL DES PAGES */
		.hoverable{
		  display:inline-block;
		  backface-visibility: hidden;
		  vertical-align: middle;
		  position:relative;
		  box-shadow: 0 0 1px rgba(0,0,0,0);
		  tranform: translateZ(0);
		  transition-duration: .3s;
		  transition-property:transform;
		  opacity: 0.60;
		}

		.hoverable:hover, .hoverable:active, .hoverable:focus{
		  transform: translateY(-5px);
		  opacity: 1;
		  color: #10375c !important;
		  text-decoration: none;
		}

		.hoverable:hover:before, .hoverable:active:before, .hoverable:focus:before{
		  transform: translateY(-5px);
		}

		.bounce {
		  animation-name: bounce-animation;
		  animation-duration: 2s;
		}



		/* set up de la page */

		body a {
			color: #10375c;
		}

		html, body {
			padding:0;
		  	margin:0;
		  	height:100%
		}

		nav {
		  opacity: 70%;
		  background: none !important;
		  text-align:center !important;
		  li {
		    margin-left: 3em;
		    margin-right: 3em;
		    a{
		      transition: .5s color ease-in-out;
		    }
		  }
		}



/* PAGE DES DETAILS DE L'EXPERIENCE PRO */

/* LES CARTES DES MISSIONS */

.carte-mission-1, ::after, ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
	width: 100%;
	height: 18rem;
	margin: 0;
	margin-top: 1rem;
	padding: 20px;
	text-align: center;
	position: relative;
	background-color: #F4F6FF;
	border-radius: 5px;
}

.carte-mission-1 li {
	list-style: url('IMAGES/exp_pro/check_logo.png');
	text-align: left;
}

#titre_mission {
	text-align: center;
	font-size: 16pt;
}

.carte-mission-details-1 {
	height: 100%;
	width: 100%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: #f3c623;
	color: #10375c;
	text-align: center;
	border-radius: 5px;
}

.carte-mission-details-1, ::after, ::before {
	box-sizing: border-box;
}

.carte-mission-details-1 span::before {
	display: block;
}

figure:hover figcaption {
	opacity: 1;
	-webkit-transform: translate(15px, 15px);
	-moz-transform: translate(15px, 15px);
	-ms-transform: translate(15px, 15px);
	transform: translate(15px, 15px);
}





/* PAGE DES HOBBIES */

/* Pour fixer l'entête de la page */

#entete-hobbies {
	position:fixed;
   	height:18vh;
   	top:0;
   	left:0;
   	right:0;
   	z-index: 4;
}


/* Ligne des cartes hobbie */
.ligne-hobbie {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 75vh;
	top: calc(5%/*-600px*/);
	position: relative;
	width: 90vw;
	margin-right: auto;
	margin-left: auto;
	align-content: center;
	align-items: center;
}

/* Pour les cartes de chaque hobbie */

#hobbie-card {
	width: 20vw;
	height: 50vh;
	text-align: center;
	list-style: none;
	padding: 3vh;
	margin: 2vh;
	background-color: #F4F6FF;
	border-radius: 30% 10% / 20% 40%;
	display: inline-block;
	align-content: center;
	align-items: center;
	overflow: scroll;
}


/* Pour les boutons de détails */

.btn-details-hobbies {
	line-height: 5vh;
	margin: 8px;
	padding: 0 15px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	background-color: transparent;
	border: 1px solid #10375C;
	color: #10375C;
}


.btn-details-hobbies:hover {
	color: #f3c623;
	font-weight: bold;
	border-color: #f3c623;
}


/* Pour le texte en dessous de chaque titre de hobbie */

.baseline-hobbie {
	color: #10375C;
	font-style: 'Barlow', sans-serif;
	text-align: center;
}


/* Pour les titres de chaque hobbie */

.titre-hobbies {
	text-align: center;
	color: #10375C;
}




/* PAGE DES CONTACTS */

.jumbotron {
	width: 100vh;
	height: 65vh;
	margin: auto;
	margin-top: 8vh;
}

#titre_contact {
	text-align: center;
	color: #10375c;
}

#ligne_contact {
	margin-top: 5%;
}

#img-contact {
	height: 30%;
}

#colonne_contact {
	text-align: center;
}

#lien_contact {
  text-decoration: none;
  background: linear-gradient(to top, #f3c623 0%, #f3c623 10%, transparent 10.01%) no-repeat left bottom / 0 100%;
  transition: background-size .5s;
}

#lien_contact:hover {
  background-size: 100% 100%;
}



/* PAGE HOBBIES - MUSIQUE */

#carte-musique {
	text-align: center;
	width: 25%;
	height: 70%;
	padding-top: 3%;
	padding-bottom: 10%;
	color: #F4F6FF;
	font-family: 'Font_titres';
	text-decoration: none;
}

#carte-musique:hover {
	background-color: #f3c623;
	color: #10375c;
}

#text_musique {
	margin-top: 15%;
	transform: translateY(-50%);
}




/*PAGE HOBBIES - LES DETAILS */

#first_line {
	margin-top: 18vh;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

#titre_hobbies_details {
	text-align: center;
}

.media {
	color: #F4F6FF;
}

#texte_details_hobbies {
	padding-left: 1rem;
}



/* PAGE HOBBIES - PHOTOS */

/* La galerie de photos */

#portfolio {
	margin-top: 18vh;
}

.full-screen-portfolio .container-fluid,
.full-screen-portfolio .col-md-4, .col-md-8 {
  padding-left: 0px;
  padding-right: 0px;
}


.portfolio-item img {
  width: 100%;
  overflow: hidden;
}

.portfolio-item .thumb {
  position: relative;
}


.portfolio-item .hover-effect .hover-content {
    position: absolute;
    text-align: left;
    width: 100%;
    bottom: 0;
    left: 0;
}


.full-screen-portfolio .portfolio-item h1 {
  position: relative;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  padding-left: 20px;
  line-height: 15px;
  transform: translateY(25px);
  transition: .5s ease-in-out;
  letter-spacing: 0.5px;
 }

 .full-screen-portfolio .portfolio-item em {
  font-style: normal;
  font-weight: 200;
 }

.full-screen-portfolio .portfolio-item:hover h1 {
  transform: translateY(0);
 }

.full-screen-portfolio .portfolio-item p {
  padding-left: 20px;
  font-weight: 300!important;
  letter-spacing: 0.5px;
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: .5s ease-in-out;
  text-transform: uppercase;
 }

 .full-screen-portfolio .portfolio-item {
 text-align: center;
 line-height: 100%;
 text-transform: lowercase;
 cursor: pointer;
}

.full-screen-portfolio .portfolio-item:hover p {
  opacity: 1;
  transform: translateY(0);
 }


.popup-icon {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 300;
  display: inline-block;
  width: 60px;
  height: 60px;
}

.popup-icon button {
  background-color: transparent;
  outline: none;
  border: none;
}


.portfolio-item .hover-effect .hover-content {
    position: absolute;
    text-align: left;
    width: 100%;
    bottom: 5px;
    left: 0;
}

/* PAGE DES DETAILS DES FORMATION */

#liste-mission-formation {
	font-size: 0.8rem;
}