/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*fin de la feuille de Meyer*/


@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700');
 
body{
    font-family: 'Lato', sans-serif;    
    font-size: 1.1em;   /*1.4 rem vaut 14px */
    font-weight: 400;
    background: #e1e1e1;
    }
#container{
    margin: 60px auto;
	width:860px ;
}
.clear{
	clear:both;
}

header{
	padding:10px;
 	height:50px;	
}
#identite{
	float: left;
	display:inline-block;
	padding-bottom: 12px;
}
#identite h2{
	font-size: 1.8rem;
	color: #686868;
	display: block;
	/* padding: 6px 0; */
}
#identite h4{
	font-size: 1.2rem;
	color: #686868;
	padding-top:8px;
}

#socials{
	float:right;
	padding-right: 6px;
		
}
#socials ul li  {
	list-style: none;
	display: inline-block;
	padding-left: 2px;*/
	background: red;
	color:red;
}
#socials ul li a {
	/* background: red; */
}
#content{
    color:#6E5866FF;
	background: #fcdb8d	;
	padding: 45px;		
}
#home{
	
	display: flex;
	flex-direction: row;
	align-items: center;


}
.about{
	display:flex;
	flex-direction: row;
	width: 65%;
	border-right: 1px solid red;
	margin-right:18px;
	box-sizing: border-box;
}

.photo img{
	margin: 16px	 16px 0 0;
	box-shadow: 10px 10px 5px #aaaaaa;
	display: inline-block;
	width: 150px;
	float: left;
}
.identiteok{
	padding:16px;
}
.identiteok h1{
	font-size: 2em;
	color: red;
	display: block;
	padding: 4px 0;
}
.identiteok h3{
	font-size: 1.2em;
	font-weight: 300;	
	color: red;
	padding: 0 0 6px 0;
}
.identiteok p{
	line-height: 155%;
	text-align: left;
	font-size: 0.9em;
	padding-right: 16px;
}
.personalinfo {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: top;
	flex-grow: 0.9;
	float: right;  
}
.fort{
	font-weight: 600;
}
.capital{
			
}

.label, .data{
	display: flex;
	flex-direction: column;
	justify-content: space-around;	
	
	

}
.label, .data ul li{
	line-height: 175%;
	font-size: 0.9em;
	

}
.label{
	font-weight: 600;
}


 nav {
	width: 100%;
	padding: 30px 25px 5px 25px;
	background:#EFEEE0;
	box-sizing: border-box;
		
	
}  
nav ul{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-self: center;
	flex-grow: 1.6;
	position:relative;
	
}
nav ul li{

	display: inline-block;	
	font-size: 1rem;
	line-height: 1.5rem;
	text-align: center;
	vertical-align: center;	
	list-style:none;
	position:relative;
  /*   width:30px;
  overflow:hidden;
  transition:width 1s ease 0.15s; */
}

nav ul li :hover {
	/* height:360px; */
	/*display: inline-block;	
	font-size: 1rem;
	line-height: 1.5rem;
	text-align: center;
	vertical-align: center;	
	list-style:none;
	 padding-bottom: 6px; */
	
}
nav ul li a{
	text-decoration:none;
	color:red;
	/* transform:rotate(-90deg) */
}	


nav ul li a.active{
	text-decoration:none;
	color:#A5A5A5; 
		
}
/*Timeline*/
.timeline{
	position:relative;
	width:820px;
	margin: auto 0;
	/* min-height:811px; */
	/* border:2px solid red; */
	overflow-y: hidden;
}
.timeline-item:before{
	content:"";
	position: absolute;
	width: 3px;
	height: 100%;
	left: 163px;
	background: red;
}
.timeline-item{
	margin: 0 33px 0 23px;
	/* border: 2px solid blue; */

}
.timeline-item-details{
	margin-bottom: 64px;
	display: inline-block;
	/* border: 2px solid yellow; */
}
.timeline-item:first-child .timeline-item-details{
	margin-top:24px;
}
.timeline-item-details-date{
	color:red;
	font-size: 1em;
}
.timeline-item-details-date, .timeline-item-details-marker, .timeline-item-details-description{
	float:left;
} 
.timeline-item-details-marker{
	position:relative;
	z-index: 10;
	border-radius: 50%;
	background-color: red;
	width: 32px;
	height:32px;
	/* border: 2px solid green; */
	margin-left:85px;
	transition: transform .3s background-color:.3s;
}
.timeline-item-details:hover .timeline-item-marker{
	transform: scale(1.4);
	background-color: #e1e1e1;
}
.timeline-item-details-description{
	padding:16px ;
	color:#333;
	background-color:#fcdb8d;
	width:475px;
	border-radius:4px;
	margin-left:74px;
	margin-top: -20px;
	word-wrap: break-word;
	opacity:0.9;
	transition: opacity .3s;

}
.timeline-item-details-description:before{
	content:"";
	position: absolute;
	background-color:red;
	width:75px;
	height:3px;
	margin-left:-90px;
	margin-top:18px;
	

}
.timeline-item-details:hover .timeline-item-details-description{
	opacity:1;
}

.timeline-item-details-description h2{
	font-size: 0.9em;
	margin-bottom:10px;

}
.timeline-item-details-description p{
	font-size: 0.7em;
	line-height: 16px;

}
/*Fin de Timeline*/

/*jobs - Accordeon Bootstrap*/
body {
  color: #6a6c6f;
  background-color: #f1f3f6;
  margin-top: 30px;
}

.container {
  max-width: 860px;
}

.panel-default>.panel-heading {
  color: #333;
  background-color: #fcdb8d;
  border-color: #e4e5e7; 
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
  display: block;
  padding: 10px 15px;
  text-decoration:none;
}

.panel-default>.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  color: red;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
  /* background-color: #eee; */ background-color: #EFEEE0;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.accordion-option {
  width: 100%;
  float: left;
  clear: both;
  margin: 15px 0;
}

.accordion-option .title {
  font-size: 20px;
  font-weight: bold;
  float: left;
  padding: 0;
  margin: 0;
}

.accordion-option .toggle-accordion {
  float: right;
  font-size: 16px;	
  color: #6a6c6f;
}

.accordion-option .toggle-accordion:before {
  content: "Ouvrir tout";
}

.accordion-option .toggle-accordion.active:before {
  content: "Fermer tout";
}
.panel-body ul li{
	font-size: 16px;
	line-height: 24px	;
}
/* Fin accordion */
/*ProgresBar*/


#competences article{
	margin-bottom: 50px;	
}

#competences article #autres{
	margin-bottom: 10px;	
}

article h2{
	font-size: 1.4rem;
	font-weight: 500;	
	padding-bottom:16px;
	
}
.container0{
/* 	display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;*/
width: 100%; 
float:left;
padding: 10px;
box-sizing: border-box;
}


.container0 h3{
	font-size: 1.1rem;
	font-weight: 300;
	/* padding: 6	  	px; */
}

.container-label{
	float:left;
	width:50%;
	padding: 10px 20px 10px 10px;
	box-sizing: border-box;
}
.container-label25{
	float:left;
	width:25%;
	padding: 10px 20px 10px 10px;
	box-sizing: border-box;
}	
#container9 {
	float:left;
  margin: 10px;
  width: 99px;	
  height: 99px;
  position: relative;
}
#container10 {
float:left;
  margin: 10px;
  width: 99px;	
  height: 99px;
  position: relative;
}
#container11 {
   float:left;
   margin: 10px;
  width: 99px;	
  height: 99px;
  position: relative;
}
#container12 {
  float:left;
  margin: 10px;;
  width: 99px;	
  height: 99px;
  position: relative;
} 
/* Fin Compétences */
/* Contact */
#contact{
	
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 16px;
}
.coord{
	width: 40%;
	/* border-left: 1px solid red; */
	margin-right:28px;
	box-sizing: border-box;
}
.coord h3{
	color: red;
	font-weight: 400;
	font-size: 1.4rem;
	padding-bottom : 10px;
}
.coord p{
	line-height: 125%;
	/* font-size: 1.6rem; */
}
/* .coord:before{
	content:"";
	position: relative;
	width: 1px;
	height: 20%;
	left: 12px;
	background: red;
} */
.form{
	width: 60%;
	margin: 25px auto;
    background: #fcdb8d;
    border-color: #e4e5e7;
    padding: 25px;
    color: #595959;
    border-radius: 5px;
   font-size: 0.8rem; 

 }
 .fa-picture-o{
 	float: right; 
 	color: red;
 	

 }
	
textarea{
resize:none;
float: left;
display: block;
margin-top: 12px;
border-radius: 5px;
}
input[type="submit"]{
display: inline-block;
float: right;
margin-top: 65px;
border-radius: 5px;
}