/*======Fonts========*/

@font-face {
	font-family: 'OpenSans Regular';
	src: url('../fonts/OpenSans_Regular/OpenSans-Regular-webfont.eot');
	src: url('../fonts/OpenSans_Regular/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/OpenSans_Regular/OpenSans-Regular-webfont.woff') format('woff'),
		url('../fonts/OpenSans_Regular/OpenSans-Regular-webfont.ttf') format('truetype'),
		url('../fonts/OpenSans_Regular/OpenSans-Regular-webfont.svg') format('svg');
}
@font-face {
	font-family: 'OpenSans Bold';
	src: url('../fonts/OpenSans_Bold/OpenSans-Bold-webfont.eot');
	src: url('../fonts/OpenSans_Bold/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/OpenSans_Bold/OpenSans-Bold-webfont.woff') format('woff'),
		url('../fonts/OpenSans_Bold/OpenSans-Bold-webfont.ttf') format('truetype'),
		url('../fonts/OpenSans_Bold/OpenSans-Bold-webfont.svg') format('svg');
}
@font-face {
	font-family: 'OpenSans Light';
	src: url('../fonts/OpenSans_Light/OpenSans-Light-webfont.eot');
	src: url('../fonts/OpenSans_Light/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/OpenSans_Light/OpenSans-Light-webfont.woff') format('woff'),
		url('../fonts/OpenSans_Light/OpenSans-Light-webfont.ttf') format('truetype'),
		url('../fonts/OpenSans_Light/OpenSans-Light-webfont.svg') format('svg');
}

/* Global reset*/

body, img, figure, ol, ul, a, h1, h2, h3, h4, h5{
font-family: 'open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
list-style: none;
text-decoration: none;
}

#wrapper{
	width: 100%;
	margin: auto;
	position: relative;
	background-color: #FFFFFF;
}

/* float and clear properties*/

#wrapper::after,footer::before{
	content: '';
	display: block;
	clear: both;	
}
	

/* Text */ 

p{
	font-size: .82rem;
	line-height: 1.3rem;
}
a{
	color:#000000;
}
span.italic{
	font-style: italic;
}

/*Text en biographie with li and ul*/
li{ 
	font-size: .82rem;
}
h1{
	font-family: 'OpenSans Bold';
	font-size: 1.1rem;
	margin-top: 15px;
	margin-bottom: 15px;
	font-weight: ;	
}
h3{
	font-size:.9rem; ;
}
h4{
	font-size:;
	
}
h5{
	font-size:;
}
.author{
			font-style: italic;
		}
/* Arab text */
article.ar p{
	
}

/* =========Header======= */

header{
	width: 100%;
	margin: auto;
}
header div.header-bar{
	height: 50px;
	position: relative;
	border-bottom: 1px solid #000000;
	background-color: #FFFFFF;
	z-index: 2;
}
	/* Navigation menu */
	header nav{
		background-color: #FFFFFF;
		position: relative;
		margin-top: -180px;
		/*margin-top: -195px; Add property for bar bav with Agenda*/
		padding: 10px 0px 10px 0px;
		z-index: 1;
	}

	nav ul li{
		margin: 8px 0px 8px 5%;
	}
	nav ul li a{
		color: #696969;
	}
	nav ul li a:hover{
		color: #000000;
		font-family: 'OpenSans Bold';
	}
	.selected a{
		font-family: 'OpenSans Bold';
		text-decoration: underline;
		color: #000000;
	}

	/* Button menu*/
	.btn-menu{
			background-image: url(../images/btn_menu.png);
			width: 28px;
			height: 22px;
			cursor: pointer;
			position: absolute;
			top: 14px;
			left: 3%;
		}
	.btn-out{
			background-image: url(../images/btn_out.png);
			width: 23px;
			height: 23px;
			cursor: pointer;
			position: absolute;
			top: 14px;
			left: 3%;
	}


	/*Logo format*/
	.logo span {
		font-family: 'OpenSans Bold'; 
	}
	.logo a{
		font-family: 'OpenSans Light';
		font-size: 120%;
	}
	.logo{
		text-align: center;
		position: relative;
		top: 10px;
	}
	
/* ===================Page d'accueil=================== */

#front{
	background: url(../images/background_mobile.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/*Logo format*/
	#front .logo a{
		color:#FFFFFF;
		font-size: 110%;
	}
	#front .logo{
		top: 20px;
	}

	#front nav{
		position: relative;
		width: 200px;
		top:150px;
		left: -7px;
		margin: auto;
		text-align: center;
	}
	#front nav ul li{
		margin-top: 10px;
	}
	#front nav ul li a{
		color: #FFFFFF;
		
		font-size: .9rem;
	}
	#front nav ul li a:hover{
		color: #FFFFFF;
		font-family: 'OpenSans Bold';
	}


/* ========Article - Biographie========= */
article{
	width: 90%;
	margin: auto;
	max-width: 600px;
}

.portrait{
	position: relative;
	margin-bottom: 20px;
}
.portrait img{
	width: 100%;
}

.bio ul{
	margin-top: 6px;
	
}
/*.portrait{
	position: absolute;
	left: 0;
}
.bio{
	margin-top: 25px;
	margin-left: 160px;
	min-height: 215px;
	max-width: 150px;
}*/

	/* Date and events of biographie */
	ul{
	margin-bottom: 3px;
	}
	ul li.event{
		margin-top:-1.4em;
		margin-left: 20%;
	}


/* ==============Gallery============== */
#galerie{
	width: 90%;
	margin: auto;
	max-width: 600px;
}
#galerie a{
		display: inline-block;
		position: relative;
		margin: 0px 20px 20px 0px;
		cursor: pointer;
	}
#galerie figure figcaption{
		position: absolute;
		top: 10px;
		left: 10px;
		height: 230px;
		width: 230px;
		background-color: rgba(255,255,255,.3);
	}

#galerie figure figcaption span.title{
		font-family: 'OpenSans Bold';
		font-size: 2rem;
		position: relative;
 	 	top: 50%;
  		transform: translateY(-50%);
  		display: block;
  		text-align: center;
  		color: #FFFFFF;
		text-shadow:
		   		-0.75px -0.75px 0 #000,  
		    	0.75px -0.75px 0 #000,
		    	-0.75px 0.75px 0 #000,
		     	0.75px 0.75px 0 #000;
}

		/* ====== Gallery Item ======  */
		#galerie-item{
			width: 85%;
			margin: auto;
			max-width: 600px;
		}

		#galerie-item img{
			width: 120px;
		}

		#galerie-item img:hover{
			opacity: .7;
		}



/* ========Articles-texts section======== */

		/* Main page of texts */
		
		#texts h1{
			margin-bottom: 30px;
		}
		#texts ul li.title{
			font-size: 1rem;
			margin-bottom: 5px;
		}
		#texts ul{
			margin: 0px 20px 20px 0px;
			border-left: 1px solid #808080;
			padding-left: 20px;
		}

		/* Text item page */
		#text-item h1{
			margin-top:30px;
		}
		#text-item article {
			max-width: 600px;
		}

		#text-item a.btn-back img {
			width: 45px;
			display: block;
			margin: 5%;
			margin-top: 20px;
		}

		/* Link to traduced version */
		#text-item .traduce a{
			background-color: #000000;
			color: #FFFFFF;
			padding: 0px 10px 0px 10px;
			font-size: .9rem;
			vertical-align: center;
		}
		#text-item .traduce a:hover{
			color:#eee;
		}
		#text-item .traduce{
			margin-top: 5px;
		}

		/* Style for PDF Link */
		.pdf
		{
		background-image: url(../images/pdf_icon.svg);
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 37px;
		padding-left: 50px;
		display: inline;
		}
		.info_pdf{
			margin-top: 5px;
		}

/* =================Contact================== */
#contact{
	width: 90%;
	margin: auto;
	max-width: 450px;
}
#contact input{
	display: block;
	margin: 10px 0px 10px 0px;
	width: 85%;
	height: 30px;
	max-width: 400px;
}
#contact input:focus{
	outline: .5px solid #32CD32;
}
#contact textarea{
	width: 85%;
	height: 150px;
	max-width: 400px;
}
#contact textarea:focus{
	outline: .5px solid #32CD32;
}
#contact textarea[placeholder], #contact input[placeholder]{
	padding-left: 10px;
	font-family: 'open Sans', sans-serif;
	font-size: .9em;
}
#contact input[value]{
	width: 100px;
}
#contact ul {
	margin-bottom: 15px;
}


/* =======================Agenda==================== */
#agenda article h1{
	margin-bottom: 35px;
}
#agenda ul{
	margin-bottom: 20px;
}
#agenda .ag_event{
	font-family: 'OpenSans Bold';
}

/* ========Footer======== */
footer{
	margin-top: 25px;
	border-top: 1px solid #000000;
	text-align: center;
}
footer span {
	font-family: 'OpenSans Light';
	font-size: .7rem;
	padding: 8px;
	display: block;
}











@media screen and (min-width: 481px){

/* ========Article - Biographie========= */

article{
	width: 90%;
	margin: auto;
}

.portrait{
	left: -14.5%;
}
.portrait img{
	width: 640px;
}
/*.portrait{
	position: relative;
	float: left;
}
.bio{
	margin-top: 40px;
	margin-left: 200px;
	max-width: 200px;
}*/

	/* Date and events of biographie */
	ul{
	margin-bottom: 3px;
	}
	ul li.event{
		margin-top:-1.4em;
		margin-left: 70px;
	}
/* =======Contact========== */
#contact textarea{
	height: 200px;
}

/* ===================Page d'accueil=================== */

#front{
	background: url(../images/background_tablet.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

	/*Logo format*/
		#front .logo a{
			font-size: 120%;
		}
		#front .logo{
			top: 50px;
		}

		#front nav{
			top:250px;	
		}
		
		#front nav ul li a{
			font-size: 1rem;
		}


	}










@media screen and (min-width: 641px){
	/* Global features */
	body{
		background-color: #eee;
		background: url(../images/background-default.jpg) no-repeat fixed center;
		background-size: cover;
	}
	#wrapper{
	width: 640px;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
	}
	
	main, #galerie, #galerie-item, #contact{
		width: 550px;
		margin: auto;
		margin-top: 100px;
		margin-bottom: 70px;
		}

	/* ========Gallery========== */

	/* Wobble Horizontal for main gallery */

		@-webkit-keyframes hvr-wobble-horizontal {
		  16.65% {
		    -webkit-transform: translateX(8px);
		    transform: translateX(8px);
		  }

		  33.3% {
		    -webkit-transform: translateX(-6px);
		    transform: translateX(-6px);
		  }

		  49.95% {
		    -webkit-transform: translateX(4px);
		    transform: translateX(4px);
		  }

		  66.6% {
		    -webkit-transform: translateX(-2px);
		    transform: translateX(-2px);
		  }

		  83.25% {
		    -webkit-transform: translateX(1px);
		    transform: translateX(1px);
		  }

		  100% {
		    -webkit-transform: translateX(0);
		    transform: translateX(0);
		  }
		}

		@keyframes hvr-wobble-horizontal {
		  16.65% {
		    -webkit-transform: translateX(8px);
		    transform: translateX(8px);
		  }

		  33.3% {
		    -webkit-transform: translateX(-6px);
		    transform: translateX(-6px);
		  }

		  49.95% {
		    -webkit-transform: translateX(4px);
		    transform: translateX(4px);
		  }

		  66.6% {
		    -webkit-transform: translateX(-2px);
		    transform: translateX(-2px);
		  }

		  83.25% {
		    -webkit-transform: translateX(1px);
		    transform: translateX(1px);
		  }

		  100% {
		    -webkit-transform: translateX(0);
		    transform: translateX(0);
		  }
		}

		.hvr-wobble-horizontal {
		  display: inline-block;
		  vertical-align: middle;
		  -webkit-transform: translateZ(0);
		  transform: translateZ(0);
		  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		  -webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
		  -moz-osx-font-smoothing: grayscale;
		}
		.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
		  -webkit-animation-name: hvr-wobble-horizontal;
		  animation-name: hvr-wobble-horizontal;
		  -webkit-animation-duration: 1s;
		  animation-duration: 1s;
		  -webkit-animation-timing-function: ease-in-out;
		  animation-timing-function: ease-in-out;
		  -webkit-animation-iteration-count: 1;
		  animation-iteration-count: 1;
		}

	/* Item gallery */
	#galerie-item{
			width: 80%;
		}

	/* Navigation menu*/
	nav{
		margin-left: 50px;
	} 

	/*Nav bar with Agenda 
	 nav{
		width: 600px;
		margin: auto;
		position: relative;
	}*/
	
	nav ul li{
		display: inline;
		margin: 8px 0px 8px 0px;
	}
	nav ul li a{
		color: #FFFFFF;
		background-color: #000000;
		padding: 3px 10px 3px 10px;
		text-decoration: none;
		font-family: 'OpenSans Regular';
	}
	/*nav ul li a:hover{
		color: #808080;
		font-family: 'OpenSans Regular';
		padding: 3px 10px 3px 10px;
	}*/
	.selected a{
		color: white;
		background-color: #000000;
		font-family: 'OpenSans Regular';
		text-decoration: none;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}

	/* Shutter Out Vertical for menu buttons */
	.hvr-shutter-out-vertical {
		margin-bottom: -5px;
	  display: inline-block;
	 
	  -webkit-transform: translateZ(0);
	  transform: translateZ(0);
	  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	  -moz-osx-font-smoothing: grayscale;
	  position: relative;
	  background: #C0C0C0;
	  -webkit-transition-property: color;
	  transition-property: color;
	  -webkit-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	}
	.hvr-shutter-out-vertical:before {
	  content: "";
	  position: absolute;
	  z-index: -1;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: #000000;
	  -webkit-transform: scaleY(0);
	  transform: scaleY(0);
	  -webkit-transform-origin: 50%;
	  transform-origin: 50%;
	  -webkit-transition-property: transform;
	  transition-property: transform;
	  -webkit-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	  -webkit-transition-timing-function: ease-out;
	  transition-timing-function: ease-out;
	  -webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	.hvr-shutter-out-vertical:hover, .hvr-shutter-out-vertical:focus, .hvr-shutter-out-vertical:active {
	  color: white;
	  font-family: 'OpenSans Regular';
	  -webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	.hvr-shutter-out-vertical:hover:before, .hvr-shutter-out-vertical:focus:before, .hvr-shutter-out-vertical:active:before {
	  -webkit-transform: scaleY(1);
	  transform: scaleY(1);
	}

		/* ===================Page d'accueil=================== */

	#front{
		background: url(../images/background_desk.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

	/*Logo format*/
		#front .logo a{
			color:#FFFFFF;
			font-size: 130%;
		}
		#front .logo{
			top: 50px;
		}

		#front nav{
			position: relative;
			width: 500px;
			top:250px;
			left: -7px;
			margin: auto;
			text-align: center;
		}
		#front nav ul li{
			margin-top: 15px;
			display: list-item;
		}
		#front nav ul li a{
			color: #FFFFFF;
			background-color: transparent;
			font-size: 1rem;
		}
		#front nav ul li a:hover{
			color: #FFFFFF;
			font-family: 'OpenSans Bold';
		}

	/* ================Main Texts Page=========== */
	#texts ul:hover{
			
			border-left: 5px solid #808080;
			margin-left: -4px;
			
		}


}








@media screen and (min-width: 1700px){
	/* ===================Page d'accueil=================== */

	#front .logo a{
		font-size: 155%;
	}
	#front .logo{
		top: 80px;
	}
	#front nav{
		top:320px;
	}
	#front nav ul li a{
		font-size: 1.2rem;
	}

}