/************** DEBUT CSS ENTETE *****************/
		h1{
			color: #487eb0;
			text-align: center;
			font-family: 'Notable', sans-serif;
		}
		h2{
			font-family: 'Notable, sans-serif';
			text-align: center;
			padding-bottom: 20px;
		}
		h3{
			font-family: 'Notable, sans-serif';
			text-align: center;
			padding-bottom: 30px;
			padding-top: 20px;
			font-variant: small-caps;
			font-size: 30px;
		}
		h4{
			margin-left: 150px; 
			font-family: 'Notable, sans-serif';
		}
		#mon_image{
			width: 200px; 
			display: block; 
			margin: 0 auto;
			border-radius: 1000px;
		}
		#entete{
			text-align: center;
			background-color: #95B3BF;
			color: white;
			display: center;
			padding: 20px;
			height: 60vh;
		}
/************** FIN CSS ENTETE *****************/		

/************** DEBUT CSS BODY *****************/
		body{
			background-color: #D3DDE8;}
		
		#corps p{
			color: #51666B;
			text-align: justify;
		} 
	/****ul{
	  		color: #58B19F}*****/
	  	#objectif{margin: 0px 50px 20px 50px }		
		#lien_univ{
			color: #51666B; 
			text-decoration: underline;
		}
		#lien_univ:hover{
			background-color: #487eb0;
			text-decoration: none; 
			color: white;
			padding:0px;
		}
		#mon_profil{
			display:flex;
			justify-content: space-between;
		}

	/************** PAGE FORMATIONS **************/
		
		/* TIMELINE
		–––––––––––––––––––––––––––––––––––––––––––––––––– */
			.timeline ul li {
 				list-style-type: none;
  				position: relative;
  				width: 6px;
  				margin: 0 auto;
  				padding-top: 50px;
  				background: #fff;
  				color: #51666B;
  			}

			.timeline ul li::after {
  				content: '';
  				position: absolute;
 				left: 50%;
 				bottom: 0;
  				transform: translateX(-50%);
  				width: 30px;
 		 		height: 30px;
  				border-radius: 50%;
 				background: inherit;
			}

			.timeline ul li div {
 		 		position: relative;
 		 		bottom: 0;
  				width: 400px;
 		 		padding: 15px;
  				background: rgba(242,242,242,0.5);
			}

			.timeline ul li div::before {
 		 		content: '';
 		 		position: absolute;
  				bottom: 7px;
  				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: 8px 16px 8px 0;
 		 		border-color: transparent #276573 transparent transparent;
			}

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

			.timeline ul li:nth-child(even) div::before {
  				right: -15px;
  				border-width: 8px 0 8px 16px;
  				border-color: transparent transparent transparent #276573;
			}

			time {
  				display: block;
  				font-size: 1.7rem;
  				font-weight: bold;
  				margin-bottom: 8px;
  				color: #5198B5;
			}

		/* EFFECTS
		–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

			.timeline ul li.in-view::after {
 				background: #276573;
			}

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

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

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

			.timeline ul li.in-view div {
  				transform: none;
  				visibility: visible;
  				opacity: 1;
			}


		/* 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 - 91px);
  				}
  				.timeline ul li:nth-child(even) div {
    				left: 45px;
  				}
  				.timeline ul li:nth-child(even) div::before {
    				left: -15px;
    				border-width: 8px 16px 8px 0;
    				border-color: transparent #487eb0 transparent transparent;
  				}
			} 
	/*************** FIN PAGE FORMATIONS **************/
	

	/***************** PAGE STAGES *******************/

		#logomemo{width: 231px;
			padding: 20px;
			display: block;
			margin-left: auto;
			margin-right: auto;
		}

		#logogs{width: 220px;
			padding: 20px;
			display: block;
			margin-left: auto;
			margin-right: auto;
		}

		h6{
			text-align: center;
		  	padding-top: 10px;
		  	padding-bottom: 0px;
		  	color: #5198B5;
		  	font-family: 'Merriweather', sherif;
		  	font-variant: small-caps;
		  	font-size: 25px;
		}

		p{text-align: center;
		  	padding-top: 0px;
		  	padding-bottom: 5px;
		  	color: #51666B;
		  	font-family: 'Merriweather', sherif;
		  	font-size: 15px;
		  	font-weight: bold;
		 }

		#list{text-align: left;
			margin-left: 50px;
			color: #51666B;
		}
	/************** FIN PAGE STAGES *****************/

	/**************PAGE PORTFOLIO****************/
		.media-object{
			width: 350px; 
			padding: 20px;
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-top: 25px;
		}

		.media-object2{
			width: 250px; 
			padding: 20px;
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-top: 40px; 
		}
		

	/**************FIN PAGE PORTFOLIO****************/

	/**************PAGE COMPETENCES****************/

		h5{
			text-align: center;
		  	padding-top: 30px;
		  	padding-bottom: 5px;
		  	color: #51666B;
		  	font-family: 'Merriweather', sherif;
		  	font-variant: small-caps;
		  	font-size: 20px;
		}

		.progress{
    	  	width: 150px;
         	height: 150px;
    		line-height: 150px;
   		 	background: none;
    		margin: 0 auto;
    		box-shadow: none;
    		position: relative;
		}

		.progress:after{
    		content: "";
    		width: 100%;
    		height: 100%;
    		border-radius: 50%;
    		border: 12px solid #fff;
    		position: absolute;
    		top: 0;
    		left: 0;
		}

		.progress > span{
   	 		width: 50%;
    		height: 100%;
    		overflow: hidden;
    		position: absolute;
    		top: 0;
    		z-index: 1;
		}

		.progress .progress-left{
    		left: 0;
		}

		.progress .progress-bar{
    		width: 100%;
    		height: 100%;
    		background: none;
    		border-width: 12px;
    		border-style: solid;
    		position: absolute;
    		top: 0;
		}

		.progress .progress-left .progress-bar{
    		left: 100%;
    		border-top-right-radius: 80px;
    		border-bottom-right-radius: 80px;
    		border-left: 0;
    		-webkit-transform-origin: center left;
    		transform-origin: center left;
		}

		.progress .progress-right{
    		right: 0;
		}

		.progress .progress-right .progress-bar{
    		left: -100%;
    		border-top-left-radius: 80px;
    		border-bottom-left-radius: 80px;
    		border-right: 0;
    		-webkit-transform-origin: center right;
    		transform-origin: center right;
    		animation: loading-1 1.8s linear forwards;
		}

		.progress .progress-value{
    		width: 90%;
    		height: 90%;
    		border-radius: 50%;
    		background: #5198B5;
    		font-size: 24px;
    		color: #fff;
    		line-height: 135px;
    		text-align: center;
    		position: absolute;
    		top: 5%;
    		left: 5%;
		}

		.progress.one .progress-bar{
    		border-color: #276573;
		}
		.progress.one .progress-left .progress-bar{
    		animation: loading-2 1s linear forwards 1.8s;
		}
		.progress.two .progress-bar{
    		border-color: #276573;
		}
		.progress.two .progress-left .progress-bar{
    		animation: loading-3 1s linear forwards 1.8s;
		}
		.progress.three .progress-bar{
    		border-color: #276573;
		}
		.progress.three .progress-left .progress-bar{
    		animation: loading-4 1s linear forwards 1.8s;
		}
		.progress.four .progress-bar{
    		border-color: #276573;
		}
		.progress.four .progress-left .progress-bar{
    		animation: loading-5 1s linear forwards 1.8s;
		}
		.progress.five .progress-bar{
    		border-color: #276573;
		}
		.progress.five .progress-left .progress-bar{
    		animation: loading-6 1s linear forwards 1.8s;
		}
		.progress.six .progress-bar{
    		border-color: #276573;
		}
		.progress.six .progress-left .progress-bar{
    		animation: loading-7 1s linear forwards 1.8s;
		}
		@keyframes loading-1{
    		0%{
        		-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
    		}
    		100%{
       		 	-webkit-transform: rotate(180deg);
        		transform: rotate(180deg);
    		}
		}
		@keyframes loading-2{
    		0%{
        		-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
    		}
    		100%{
        		-webkit-transform: rotate(144deg);
        		transform: rotate(144deg);
    		}
		}
		@keyframes loading-3{
    		0%{
       	 		-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
    		}
    		100%{
        		-webkit-transform: rotate(90deg);
        		transform: rotate(90deg);
    		}
		}
		@keyframes loading-4{
    		0%{
        		-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
    		}
    		100%{
        		-webkit-transform: rotate(112deg);
        		transform: rotate(112deg);
    		}
		}
		@keyframes loading-5{
    		0%{
        		-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
    		}
    		100%{
        		-webkit-transform: rotate(126deg);
        		transform: rotate(126deg);
    		}
		}
		@keyframes loading-6{
    		0%{
        		-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
    		}
    		100%{
        		-webkit-transform: rotate(160deg);
        		transform: rotate(160deg);
    		}
		}
		@keyframes loading-7{
    		0%{
        		-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
    		}
    		100%{
        		-webkit-transform: rotate(0deg);
        		transform: rotate(0deg);
    		}
		}
		@media only screen and (max-width: 990px){
    		.progress{ 
    			margin-bottom: 20px; 
    		}
		}
	/**************FIN PAGE COMPETENCES*****************/
/************ FIN CSS BODY *********************/

/************ PIED DE PAGE *********************/
		.row{justify-content: center;}

		#pied_page p{
			font-size: 15px;
			font-family: 'Notable, sans-serif';
			text-align: center;
			background-color: #95B3BF;
			color: white;
			display: center;
			padding: 5px;
			height: 5vh;
			margin-top: 50px;
		}
/************ FIN PIED DE PAGE *********************/