/* NEW */ 
	body{
		background: #525659;
		overflow-x: hidden;
	}

	.content{
		box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2);
	}

	#picture{
		width: 100%;
		height: 185px;
		/*background: red;*/
		margin-top: 15px;
		border-bottom: 1px solid white;
	}

	#border_picture{
    background: white;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    width: 125px;
    height: 125px;
    margin: auto;
    display: flex;
}


#video{
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    margin: auto;
}

#border_picture:hover {
    transition: 1s;
    background-size: 60%;
    box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.25);
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    transform: translateZ(1000px);
}


	#photo{
	background-image: url("http://lucasarts.fr/CV/HTML/me.jpg");
    width: 120px;
    height: 120px;
    margin: auto;
    background-position: center;
    background-size: cover;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

div#title_placement {
    margin: 15px;
}

	#informations{
		width: 100%;
		height: 240px;
		/*background: blue;*/
		text-align: center;
	}

	.listing{
    width: 125px;
   margin: 18px auto;
   line-height: 13px;
}

.image_inc {
    width: 20px;
    height: 20px;
    margin: 5px auto;
    display: flex;
    transform: rotate(45deg);
    border: 1px solid white;
    background: linear-gradient(to right, rgba(15, 20, 21, 0) 50%, white 50%);
	background-size: 200% 100%;
	text-transform: uppercase;
	background-position: left bottom;
	transition: all 0.8s cubic-bezier(0.68, -0.55, 0.33, 0.99);
}

.image_inc:hover {
		background-position: right bottom;
		color: black;
		transform: rotate(-90deg);
	}

.image_inc:hover img {
    transform: rotate(90deg);
   	filter: invert(100%);
}

.image_inc img {
    width: 12px;
    margin: auto;
    transform: rotate(-45deg);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.33, 0.99);
}

img.img_lang {
    width: 60%;
    margin: auto;
}

img.img_hobbies {
    width: 30px;
    margin: auto;
    transition: .4s;
}

img.img_hobbies:hover {
	width: 50px;
}

label {
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    height: 0px;
}


#adress_pic{
  margin: auto;
    background: url(assets/Images/icones/location-pin.png);
    background-position: center;
    background-size: cover;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

	#content_soft{
		width: 100%;
		height: 340px;
		/*background: green;*/
	}
	
	.button_title {
    margin: 10px auto;
    display: table;
    padding: 5px;
    border: 1px solid white;
   	font-family: 'Lato', sans-serif;
    font-size: x-small;
	background: linear-gradient(to right, rgba(15, 20, 21, 0) 50%, white 50%);
	background-size: 200% 100%;
	text-transform: uppercase;
	background-position: left bottom;
	transition: all 0.8s cubic-bezier(0.68, -0.55, 0.33, 0.99);
				
}

.lang_center {
    margin: auto;
    text-align: center;
}


	.button_title:hover {
		background-position: right bottom;
		color: black;
	}

	#main{
		height: 877px;
		width: 620px;
		background: #E3E2E2;
		margin: auto;
	}

	#header_bar{
		background: #191e1f;
		width: 175px;
		height: 877px;
		margin: 0;
		padding: 0;
		position: absolute;
	}

	#timeline {
    width: 412px;
    height: 548px;
    background: #FFFFFF;
    margin-left: 193px;
    margin-top: 13px;
    padding: 0;
    position: absolute;
  	/* opacity: 0.7;*/
}


	#skill {
    width: 412px;
    height: 188px;
    background: #FFFFFF;
    margin-left: 193px;
    margin-top: 575px;
    padding: 0;
    position: absolute;
}

#langue {
    width: 192px;
    height: 87px;
    background: #FFFFFF;
    margin-left: 193px;
    margin-top: 778px;
    padding: 0;
    position: absolute;
}

#hobbies {
    width: 192px;
    height: 87px;
    background: #FFFFFF;
    margin-left: 413px;
    margin-top: 778px;
    padding: 0;
    position: absolute;
}

#skill_value:hover #header_bar{
	opacity: 0;
}


div#comp_value {
    height: 150px;
    margin-top: 40px;
}

div#langue_value{
    height: 70px;
    display: flex;
    margin-top: 22px;
}

div#hobbies_value {
    height: 70px;
    display: flex;
    margin-top: 17px;
}

	#exp{
		width: 350px;
		height: 122px;
		background: #FFFFFF;
		margin-left: 237.5px;
		margin-top: 310px;
		padding: 0;
		position: absolute;

	}

	#formation{
		width: 350px;
		height: 290px;
		background: #FFFFFF;
		margin-left: 237.5px;
		margin-top: 442px;
		padding: 0;
		position: absolute;

	}

	
	p.obj{
		font-family: 'Roboto', sans-serif;
		color: black;
		font-weight: 400;
		padding-left: 90px;
		font-size: 7pt;
		margin: 2px 0;
	}

	date{
		font-family: 'Roboto', sans-serif;
		color: #67BAED;
		font-weight: 400;
		padding-left: 90px;
		font-size: 7pt;
		margin: 0;
	}

	info{
		font-family: 'Roboto', sans-serif;
		color: #67BAED;
		font-weight: 400;
		font-size: 7pt;
		margin: 0;
	}

	lieu{
		font-family: 'Roboto', sans-serif;
		color: #E57B72;
		font-weight: 400;
		font-size: 7pt;
		margin: 3px 0;
	}

	h1{
		font-family: 'Lato', sans-serif;
		color: white;
		font-size: 19pt;
		text-align: center;
		 margin: -5px;
	}

	h2 {
    font-family: 'Lato', sans-serif;
    font-size: 7pt;
    color: white;
    margin: 6px;
    text-align: center;
}

	h3{
		font-family: 'Roboto Condensed', sans-serif;
		font-weight: 700;
		color: #6C6F73;
		margin: 0;
		line-height: 21px;
		    margin-left: 5px;
	}

	h4{
		font-family: 'Roboto', sans-serif;
		color: #7C6F73;
		font-weight: 400;
		font-size: 10pt;
		margin: 0;
		padding-left: 65px;
	}

	h5{
		font-family: 'Roboto', sans-serif;
		font-weight: 100;
		font-size: 9pt;
		color: white;
		margin: 0;
		margin-bottom: -8px;
	}

	h6{
		color: #7B7F80;
		font-family: 'Roboto Condensed', sans-serif;
		margin: 0;

	}

	div#bar-left {
    width: 18px;
    height: 1px;
    position: absolute;
    background: white;
    top: 180px;
    left: 13px;
    z-index: 9999;
}

div#bar-right {
    width: 20px;
    height: 1px;
    background: white;
    position: absolute;
    left: 143px;
    top: 180px;
}

	.mail{
		font-size: 9pt;
	}

	#title_id{
		text-align: center;
		height: 150px;
	}

	#title_id:hover	{
		transition: 1s;
		background: #000000;
	}

	#title_id:hover h1{
		transition: 1s;
		opacity: 0;
		visibility: hidden;
		display: none;
	}

	#title_id:hover b:after	{
		transition: 1s;
		color: white;
		content: "PHOTO ICI";
		padding: 20px;
		font-size: 20pt;
   		font-family: 'Roboto';
	}

	#info_logo{
		background: #B0293E;
		width: 35px;
		height: 24px;
		text-align: center;
	}

	#info_soft{
		background: #64B2E0;
		width: 35px;
		height: 24px;
		text-align: center;
	}

	#info_lang{
		background: #D0E066;
		width: 35px;
		height: 24px;
		text-align: center;
	}

	.title_header{
		display: inline-flex;
		margin-top: 10px;
	}

	.logo{
		width: 70%;
	}

	.content_logo{
		width: 25px;
	}
	
	.content_pos{
		display: inline-flex;
		margin: 14px;
		max-width: 178px;
	}

	.content_div_logo{
		padding-right: 20px;
	}

	.put_line{
		    margin-bottom: -5px;
	}

	.soft_value_range{
		    margin-left: 35px;
	}

	.content_div_logo_soft {
    height: 0;
}

	hr{
		width: 150px;
		margin-left: 55px;
		background: white;
		height: 1px;
		border: 0;
		margin-top: 0;
		margin-bottom: 0;

	}

	a{
		text-decoration: none;
		color: white;
	}

	#adress{
	font-size: 9pt;
    font-family: 'Lato', sans-serif;
	}

	#phone{
	font-size: 9pt;
    font-family: 'Lato', sans-serif;
	}

	#email{
	font-size: 8pt;
    font-family: 'Lato', sans-serif;
	}

	#site{
	font-size: 9pt;
    font-family: 'Lato', sans-serif;
	}


	input[type=range] {
		-webkit-appearance: none;
		width: 100%;
		margin: 7.3px 0;
	}
	input[type=range]:focus {
		outline: none;
	}
	input[type=range]::-webkit-slider-runnable-track {
		width: 100%;
		height: 2px;
		cursor: pointer;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.02), 0px 0px 1px rgba(13, 13, 13, 0.02);
		background: #ffffff;
		border-radius: 0px;
		border: 0px solid rgba(1, 1, 1, 0);
	}
	input[type=range]::-webkit-slider-thumb {
		border: 0px solid rgba(0, 0, 0, 0);
		height: 10px;
		width: 10px;
		border-radius: 50px;
		background: #ffffff;
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: -3px;
	}
	input[type=range]:focus::-webkit-slider-runnable-track {
		background: #ffffff;
	}
	input[type=range]::-moz-range-track {
		width: 100%;
		height: 2px;
		cursor: pointer;
		background: #ffffff;
		border-radius: 0px;
	}
	input[type=range]::-moz-range-thumb {
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
		border: 0px solid rgba(0, 0, 0, 0);
		height: 10px;
		width: 10px;
		border-radius: 50px;
		background: #ffffff;
		cursor: pointer;
	}

	#content_lang {
		display: inline-flex;
		text-align: center;
		width: 100%;
	}

	.speak_lang {
		width: 40px;
		margin: auto;
		margin-top: 12px;
	}

	img.flags {
		width: 100%;
		cursor: pointer;
	}

	.logo_content_div {
    width: 20px;
    /* height: 20px; */
    /* text-align: center; */
    /* padding-right: 10px; */
    margin: auto;
}

	.logo_content{
		width: 100%;
	}

	.title_content_block{
		display: inline-flex;
		margin: 5px 15px;
		margin-bottom: 0px;
		position: absolute;
	}

	.under_title{
		    margin: 20px 0;
		    margin-right: 10px;
	}

	#skill_value{
       height: 548px;
   	overflow-y: hidden;
    overflow-x: hidden;
    /*padding-right: 10px;*/
	}

	#exp_value{
	transition: 1s;
   	height: 72px;
    overflow-y: hidden;
    overflow-x: hidden;
	}

	#skill_value:hover, #exp_value:hover, #formation_value:hover{
	transition: 1s;
    overflow-y: scroll;
    overflow-x: hidden;
}

#separate{
	width: 290px;
    background: #D5D2D4;
    height: 1px;
    margin-left: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
}


#center_hobbies {
    text-align: center;
    width: 100%;
    margin-top: 10px;
}


/* BAR SCROLL */

::-webkit-scrollbar {
    width: 0px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background: rgba(250, 250, 250, 0.5);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

/* INFO BULLE */


							
	.picto-item {
  position: relative;  /*les .picto-item deviennent référents*/
  cursor: help;
  border-radius: 50%;
}

/* on génère un élément :after lors du survol et du focus :*/

.picto-item:hover:after,
.picto-item:focus:after {
	content: attr(aria-label);  /* on affiche aria-label */
	position: absolute;
	top: -2.4em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
	z-index: 99999; /* pour s'afficher au dessus des éléments en position relative */
	white-space: nowrap;  /* on interdit le retour à la ligne*/
	padding: 5px 14px;
	background: #E3E2E2;
	color: #252525;
	border-radius: 4px;
	font-size: 1.2rem;
}

/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before,
[aria-label]:focus:before {
	content: "▼";
	position: absolute;
	top: -1em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
 	font-size: 20px;
  	color: #E3E2E2;
}

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}





/* POUR LA TIMELINE */

* {
   box-sizing: border-box!important;
}

.timeline-wrap{
   background: none!important;
}

.img--right {
    width: 15px!important;
    position: absolute!important;
    margin-left: -25px!important;
     margin-top: 4px!important;
}

.img--left {
    width: 15px!important;
    position: absolute!important;
    margin-left: 5px!important;
    margin-top: 4px!important;
}

.triangle--right{    
   position: absolute!important;
    margin-left: -8px!important;
    margin-top: 10px!important;
    border-top: 15px solid transparent!important;
    border-bottom: 15px solid transparent!important;
    border-right: 15px solid #ededed!important;
}

.triangle--left {
    position: absolute!important;
    margin-left: 162px!important;
    margin-top: 13px!important;
    border-top: 15px solid transparent!important;
    border-bottom: 15px solid transparent!important;
    border-left: 15px solid #ededed!important;
}


.date--right {
    width: 200px!important;
    text-align: right!important;
    position: absolute!important;
    margin-left: -240px!important;
    margin-top: 23px!important;
    color: darkgrey!important;
    font-family: "Raleway", Helvetica, sans-serif!important;
    font-size: 10px;
}

.date--left {
    width: 200px!important;
    text-align: left!important;
    position: absolute!important;
    margin-left: 40px!important;
    margin-top: 23px!important;
    color: darkgrey!important;
    font-size: 10px;
    font-family: "Raleway", Helvetica, sans-serif!important;
}



.timeline {
   position: relative!important;
   max-width: 800px!important;
   margin: 0 auto!important;
  /* padding-top: 5px!important;*/
   background-color: inherit!important;
}

.timeline:after {
   content: ''!important;
   position: absolute!important;
   width: 5px!important;
   background-color: #a9a9a9!important;
   left: 50%!important;
   top: 0!important;
   bottom: 0!important;
   margin-left: -2px!important;
}


.last .timeline:after {
   content: ''!important;
   position: absolute!important;
   width: 5px!important;
   background-color: #a9a9a9!important;
   left: 50%!important;
   top: 0!important;
   bottom: 0!important;
   margin-left: -2px!important;
   height: 135px!important;
}

.timeline--first:after {
    top: 0px!important;
}

.era {
   text-align: center;
   position: relative!important;
   z-index: 1!important;
}

.era__title {
    background-color: #a9a9a9!important;
    color: #EEEEEE!important;
    display: inline-block!important;
    padding: 5px 10px!important;
    border-radius: 4px!important;
    cursor: default!important;
}

.entry {
    /*padding: 3px 38px 20px 18px!important;*/
   padding: 0px 40px 0px 20px!important;
    width: 55%!important;
    position: relative!important;
    background-color: inherit!important;
}


.entry--right {
   margin-left: 50%!important;
}

.entry--left {
  text-align: right!important;
}

.entry__content {
    /*padding: 13px 10px 13px 30px!important;*/
    padding: 3px 5px 5px 30px!important;
    background-color: #EEEEEE!important;
    position: relative!important;
    border-radius: 4px!important;
    cursor: default!important;
    transition: all 0.3s ease 0s!important;
}

.entry__content__left {
     /*   padding: 13px 30px 13px 10px!important;*/
     padding: 3px 30px 5px 5px!important;
    background-color: #EEEEEE!important;
    position: relative!important;
    border-radius: 4px!important;
    cursor: default!important;
    transition: all 0.3s ease 0s!important;
}

.entry__content:hover, .entry__content__left:hover {
   /*background-color: #FFFFFF!important;*/
}

.entry:before {
   content: " "!important;
   height: 0!important;
   position: absolute!important;
   top: 20px!important;
   width: 0!important;
   z-index: 1!important;
}

.entry:after {
    content: ''!important;
    position: absolute!important;
    width: 12px!important;
    height: 12px!important;
    right: 12px!important;
    background-color: #a9a9a9!important;
    border: 2px solid #ffffff!important;
    top: 20px!important;
    border-radius: 50%!important;
    z-index: 1!important;
}

.entry--right:after {
    /* right: auto!important; */
    left: -8px!important;
}

.timeline--h2 {
    color: #525252;
    margin-bottom: 0.5em!important;
    font-family: "Raleway", Helvetica, sans-serif!important;
    font-weight: 800!important;
    margin: 5px 0px!important;
    font-size: 12px!important;
    text-align: left;
}


.timeline--h2--left {
    color: #525252!important;
    margin-bottom: 0.5em!important;
    font-family: "Raleway", Helvetica, sans-serif!important;
    font-size: 12px!important;
    font-weight: 800!important;
    margin: 5px 0px!important;
    text-align: right!important;
}

.p--timeline {
   color: #686868!important;
   font-family: "Raleway", Helvetica, sans-serif!important;
      font-size: .6em!important;
   line-height: 1.4!important;
}

@media all and (max-width: 500px) {
   .timeline:after {
      left: 33.75px!important;
   }
   .era {
      text-align: left;
      padding-left: 31.875px!important;
   }
   .entry {
      width: 100%!important;
      margin-left: 0!important;
      padding-left: 64px!important;
      padding-right: 20px!important;
   }
   .entry:before {
      right: auto!important;
      left: 56px!important;
      margin-left: 0!important;
   }
   .entry:after {
      left: 15px!important;
   }
}