body {font-family: "Lato", sans-serif}
footer a {text-decoration: none;}

.main-content { 
	/*define a max for responsiveness*/
	max-width:2000px;
	margin-top:46px
}

.slideShows {
	display: none
}

.slideShows>img{
	height:50vh;
	width:100%;
	object-fit: cover;
}

.pic-profile {
	background-size: cover;
    border-radius: 50%;
}

.dark-shadow{
	width: 100%;
	background: linear-gradient(to bottom, transparent 0%, black 100%);
}

.cert-size-fixed{
	height: 150px;
	width: 100px;
}
.cert-btn {
	border-radius: 50px;
    width: 80%;
    height: 80%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #f1f1f1;
    border: 1px solid #fff;
}


/**
	-----------------------------------------------
	Progress bar skills
	-----------------------------------------------
**/

  @keyframes load{
	from {
	  width: 0%
	}
  }
  @-webkit-keyframes load{
	from {
	  width: 0%
	}
  }
  @-moz-keyframes load{
	from {
	  width: 0%
	}
  }
  @-o-keyframes load{
	from {
	  width: 0%
	}
  }
  
  .bar{
	background-color: #EEE;
	padding: 2px;
	border-radius: 15px;
	margin-bottom: 5px;
	font-size: 14px;
	color: #FFF;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  }
  .bar::before{
	content:  attr(data-text);
	background-color: #265f7c;
	display: inline-block;
	padding: 5px 0 5px 10px;
	border-radius: inherit;
	animation: load 2s 0s;
	-webkit-animation: load 2s 0s;
	-moz-animation: load 2s 0s;
	-o-animation: load 2s 0s;

  }
  
.bar.percent-10::before{  width: calc(10% - 10px);  }
.bar.percent-20::before{  width: calc(20% - 10px);  }
.bar.percent-30::before{  width: calc(30% - 10px);  }
.bar.percent-40::before{  width: calc(40% - 10px);  }
.bar.percent-50::before{  width: calc(50% - 10px);  }
.bar.percent-60::before{  width: calc(60% - 10px);  }
.bar.percent-70::before{  width: calc(70% - 10px);  }
.bar.percent-80::before{  width: calc(80% - 10px);  }
.bar.percent-90::before{  width: calc(90% - 10px);  }
.bar.percent-100::before{  width: calc(100% - 10px);  }

.bar:hover::before{
	background-color: #534379 ;
}
  

/**
	-----------------------------------------------
	Parcours Timeline
	-----------------------------------------------
**/

@media (max-width:800px){
	#timeline {	display: block;	}
	.tl-item{width: 80%; margin: auto;}
}

@media (min-width:800px){
	#timeline {	display: flex;	}
	.tl-item{width: 25%;}
	#timeline:hover .tl-item {
		width: 23.3333%;
	}
	.tl-item:hover {
		width: 30% !important;
	}
}


.tl-item {
	transform: translate3d(0, 0, 0);
	position: relative;
	height: 65vh;
	min-height: 300px;
	color: #fff;
	overflow: hidden;
	transition: width 0.5s ease;
	background-repeat: no-repeat;
}

.tl-item:before {
	transform: translate3d(0, 0, 0);
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.tl-item:after {
	background: transparentize(#202e38, 0.15);
	opacity: 1;
	transition: opacity 0.5s ease;
}

.tl-item:before {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 75%);
	z-index: 1;
	opacity: 0;
	transform: translate3d(0, 0, 0) translateY(50%);
	transition: opacity 0.5s ease, transform 0.5s ease;
}


.tl-item:hover:after {
	opacity: 0;
}

.tl-item:hover:before {
	opacity: 1;
	transform: translate3d(0, 0, 0) translateY(0);
	transition: opacity 1s ease, transform 1s ease 0.25s;
}


.tl-item:hover .tl-content {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.75s ease 0.5s;
}

.tl-item:hover .tl-bg {
	filter: grayscale(0);
}

.tl-content {
	transform: translate3d(0, 0, 0) translateY(25px);
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0 1.618em;
	top: 55%;
	opacity: 0;
}

.tl-content h1 {
	text-transform: uppercase;
	color: #1779cf;
	font-size: 1.44rem;
	font-weight: bold;
}

.tl-year {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background-color: #31313146;
	width: 80%;
	text-align: center;
}