/*@FONTFACE*/
@font-face {
    font-family: 'canterbold';
    src: url('font/canter_bold-webfont.eot');
    src: url('font/canter_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/canter_bold-webfont.woff') format('woff'),
         url('font/canter_bold-webfont.ttf') format('truetype'),
         url('font/canter_bold-webfont.svg#canterbold') format('svg');
    font-weight: normal;
    font-style: normal;}

/***********************************************************************************GENERAL*/
body {
	background:url(images/fond.png);
	font-family:amethysta, Georgia, "Times New Roman", Times, serif;
	color:#212829;
	font-size:12pt;
	line-height:1.3em;}
	
strong {font-weight:bold;}

em {font-style:italic;}

a {color:#444e4f;}

a:hover {
	text-decoration:none;
	}
	
#wrap li {margin:14px 0 14px 40px;text-indent:-14px;}

#wrap li:before {
	content:"> ";
	font-weight:bold;}
	
/*HEADER ET TITRES H*/
header {
	background:#212829;
	color:#f7f6f6;}
	
footer {
	display:block;
	clear:both;
	padding:60px 0 50px 0;
	line-height:3em;
	text-align:center;
	background:#212829;
	color:#f7f6f6;}
	
footer a {color:#fff;}	

h1 {font-family: 'canterbold', "Palatino Linotype", "Book Antiqua", Palatino, sans-serif;
	line-height:0.8em;}	

h2,h3,h4 {
	font-family: 'canterbold', Geneva , arial, sans-serif;
	line-height:0.8em;
	}


h1{
	font-size:90pt;
	border-bottom:solid 1px #f7f6f6;
	width:700px;
	margin:auto;
	padding:20px 0;
	text-align:center;
	}

h2{margin:auto;font-size:40pt;text-align:center;padding:15px 10px 70px 10px;width:800px;
	}
h3{font-size:50pt;}

h4{font-size:40pt;margin-top:60px;margin-bottom:20px;}

section#wrap h3{border-bottom:solid 3px #212829;margin:20px 0;}

h3.mentions {margin-top:60px;}
h4.mentions {margin-top:30px;}

/*LIENS HOME*/
header ul {text-align:center;}
header ul li {display:inline;}

header li a {
	display:inline-block;
	margin:0px 10px 25px 10px;
	width:100px;
	height:100px;
	text-indent:-9999px;
	
	transition:all 0.2s ease-in;
		-moz-transition:all 0.2s ease-in;
		-ms-transition:all 0.2s ease-in;
		-o-transition:all 0.2s ease-in;
		-webkit-transition:all 0.2s ease-in;}
		
	
a#linkedin {background:url(images/social/linkedin.png) no-repeat center ;}
a#mail {background:url(images/social/mail.png) no-repeat center;}
a#twitter {background:url(images/social/twitter.png) center;}
a#pinterest {background:url(images/social/pinterest.png) center;}
a#netvibes {background:url(images/social/netvibes.png) center;}
a#cv {background:url(images/social/cv.png) no-repeat center;}

header ul li a:hover {
	box-shadow: 5px 5px 0px #f7f6f6;
		-webkit-box-shadow:5px 5px 0px #f7f6f6;
		-moz-box-shadow:5px 5px 0px #f7f6f6;}

/*RETOUR A LA HOME*/
#projet > header a {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100px/*170px*/;
	height:70px/*100px*/;
	padding:25px 0 0 70px;
	
	background:#444e4f url(images/backhome.png) no-repeat 15px center;
	color:#f7f6f6;
	font-family:'canterbold', Geneva , arial, sans-serif;
	font-size:24px;
	text-decoration:none;
	
	transition:all 0.3s ease-in;
		-moz-transition:all 0.3s ease-in;
		-ms-transition:all 0.3s ease-in;
		-o-transition:all 0.3s ease-in;
		-webkit-transition:all 0.3s ease-in;}

#projet > header a:hover {
font-size:26px;
vertical-align:middle;
background:#f7f6f6 url(images/backhome.png) no-repeat -15px center;
color:#212829;
}


/*DATE*/
header time {
	display:block;
	text-align:right;
	padding:15px;}


/***********************************************************************************WRAP*/
#wrap {
	position:relative;
	margin:auto;
	margin-bottom:70px;
}

section#wrap {width:960px;}
article#wrap {width:800px/*640px*/;}


/***********************************************************************************LISTE DES PROJETS HOME*/

#home article {
	position:relative;
	float:left;
	width:300px;
	height:300px;
	margin:10px;
	
	border-bottom:3px solid #212829;
	color:#f7f6f6}

#home article a {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(33,44,41,0.3);

transition:all 0.2s ease-in;
		-moz-transition:all 0.2s ease-in;
		-ms-transition:all 0.2s ease-in;
		-o-transition:all 0.2s ease-in;
		-webkit-transition:all 0.2s ease-in;
}

#home article a:hover {background-color:rgba(33,44,41,0);}

#home article span {display:block;position:absolute;background:#212829;}

#home span.code_projet {
	right:5px;
	top:5px;
	padding:8px 3px;
	font-size:12px;}
	
#home span.titre_projet {
	left:5px;
	bottom:10px;
	padding:10px 10px;}

/***********************************************************************************PAGE PROJET*/


/*TEXTES INTRO*/
.resume {
	position:relative;
	height:300px;
	margin:35px 0px;
	line-height:300px;
	background:#f7f6f6;}

.resume h3{
	width:200px;
	height:200px;
	float:left;
	text-align:center;
	vertical-align:middle;
	line-height:0.8em;
	}

.resume:first-child h3{padding-top:110px;}
.resume:nth-child(2) h3{padding-top:95px;}

.resume:before{
	content:"";
	display:block;
	position:absolute;
	width:2px;
	height:260px;
	top:20px;
	left:190px;
	background:#212829; }

.resume div {
	display:inline-block;
	vertical-align:middle;
	line-height:normal;}
	
.resume p , .resume ul {
	margin:10px;
	width:575px;}	
	
.resume ul li{margin-left:20px !important;}
	
/*LIENS DU PROJET*/

article#wrap > p {
	text-align:center;}
	
article#wrap > p a {
	margin:0 10px;
	padding:10px 10px 10px 50px;
	color:#f7f6f6;
	text-decoration:none;
	line-height:50px;
	white-space: nowrap;
	
	transition:all 0.2s ease-in;
		-moz-transition:all 0.2s ease-in;
		-ms-transition:all 0.2s ease-in;
		-o-transition:all 0.2s ease-in;
		-webkit-transition:all 0.2s ease-in;}

.compresse {background:#444e4f no-repeat 5px center url(images/liens/compresse.png);}
.doc {background:#444e4f no-repeat 5px center url(images/liens/doc.png);}
.hyperlien {background:#444e4f no-repeat 5px center url(images/liens/hyperlien.png);}
.image {background:#444e4f no-repeat 5px center url(images/liens/image.png);}
.pj {background:#444e4f no-repeat 5px center url(images/liens/pj.png);}
.son {background:#444e4f no-repeat 5px center url(images/liens/son.png);}
.video {background:#444e4f no-repeat 5px center url(images/liens/video.png);}
.fb {background:#444e4f no-repeat 5px center url(images/liens/fb.png);}
.twitter {background:#444e4f no-repeat 5px center url(images/liens/twitter.png);}

article#wrap > p a:hover {background-color:#212829;padding:15px 15px 15px 55px;margin:0 5px;	}	


/*BLOC DE TEXTE*/
#contenu {
	box-sizing:border-box;
	margin-top:35px;
	padding:45px 205px 100px 110px;
	background-color:#f7f6f6;	
}

#contenu p { margin:10px 0;line-height:20px;}

/*************************************************SLIDER*/

/*CONTENEURS*/
#slider {
	position:relative;
	box-sizing:border-box;
	width:800px;
	height:630px;
	margin-top:20px;
	line-height:590px;
	text-align:center;
	
	border:solid 20px #212829;
	background:#212829;
}


#hidden {
	overflow:hidden;
	position:relative;
	height:630px;}

#slider_contenu {
	position:absolute;
	width:9120px;
	height:590px/*630px*/;
	overflow:visible;
	
	transition:all 0.3s ease-in;
		-moz-transition:all 0.3s ease-in;
		-ms-transition:all 0.3s ease-in;
		-o-transition:all 0.3s ease-in;
		-webkit-transition:all 0.3s ease-in;
}
	
.slide {
	position:relative;
	float:left;
	width:760px;
	height:590px/*630px*/;}

#slider img {
	vertical-align:middle;
	max-width:760px;
	max-height:590px;}
	
.slide p {
	position:absolute;
	box-sizing:border-box;
	height:120px;
	width:100%;
	bottom:0;
	left:0;
	padding:20px;
	text-align:left;
	line-height:normal;
	
	background:rgba(247,246,246,0.9);
	opacity:0;
	
	transition:opacity 0.3s ease-in;
		-moz-transition:opacity 0.3s ease-in;
		-ms-transition:opacity 0.3s ease-in;
		-o-transition:opacity 0.3s ease-in;
		-webkit-transition:opacity 0.3s ease-in;}	
	
.slide:hover p {opacity:1;}


/*FLECHES*/

input[type=radio] {display:none;}

label.fleche {	
    display:none;
    position:absolute;
	width:38px;
	height:68px;
    top:261px;
	z-index:10;
	
	cursor: pointer;
	background:url(images/fleche.png) no-repeat center #f7f6f6;
	
	box-shadow: 2px 2px 2px #212829;
		-webkit-box-shadow: 2px 2px 2px #212829;
		-moz-box-shadow: 2px 2px 2px #212829;

	transition:all linear 0.1s;
		-webkit-transition:all ease-in 0.1s;
		-moz-transition:all ease-in 0.1s;
		-ms-transition:all ease-in 0.1s;
		-o-transition:all ease-in 0.1s;
}

label.fleche:hover {width:60px;}

input[type=radio]#button-1:checked~.fleche#fleche-2, input[type=radio]#button-2:checked~.fleche#fleche-3, input[type=radio]#button-3:checked~.fleche#fleche-4, input[type=radio]#button-4:checked~.fleche#fleche-5,
input[type=radio]#button-5:checked~.fleche#fleche-6, input[type=radio]#button-6:checked~.fleche#fleche-7, input[type=radio]#button-7:checked~.fleche#fleche-8, input[type=radio]#button-8:checked~.fleche#fleche-9,
input[type=radio]#button-9:checked~.fleche#fleche-10, input[type=radio]#button-10:checked~.fleche#fleche-11, input[type=radio]#button-12:checked~.fleche#fleche-13
 {	display: block;
 	right:-46px;  
    margin:0;
	padding:0;
	transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		-moz-transform: scaleX(-1);
		-ms-transform: scaleX(-1);
		-o-transform: scaleX(-1);
}

input[type=radio]#button-2:checked~.fleche#fleche-1, input[type=radio]#button-3:checked~.fleche#fleche-2, input[type=radio]#button-4:checked~.fleche#fleche-3, input[type=radio]#button-5:checked~.fleche#fleche-4,
input[type=radio]#button-6:checked~.fleche#fleche-5, input[type=radio]#button-7:checked~.fleche#fleche-6, input[type=radio]#button-8:checked~.fleche#fleche-7, input[type=radio]#button-9:checked~.fleche#fleche-8, input[type=radio]#button-10:checked~.fleche#fleche-9,input[type=radio]#button-11:checked~.fleche#fleche-10, input[type=radio]#button-12:checked~.fleche#fleche-11, input[type=radio]#button-13:checked~.fleche#fleche-12, input[type=radio]#button-14:checked~.fleche#fleche-13
{   display: block;
	left:-46px;
	margin:0;
	padding:0;
}		

/*ANIMATION*/
input[type=radio]#button-1:checked~#hidden #slider_contenu { left: 0 ;}
input[type=radio]#button-2:checked~#hidden #slider_contenu { left: -760px ;}
input[type=radio]#button-3:checked~#hidden #slider_contenu { left: -1520px ;}
input[type=radio]#button-4:checked~#hidden #slider_contenu { left: -2280px ;}
input[type=radio]#button-5:checked~#hidden #slider_contenu { left: -3040px ;}
input[type=radio]#button-6:checked~#hidden #slider_contenu { left: -3800px ;}
input[type=radio]#button-7:checked~#hidden #slider_contenu { left: -4560px ;}
input[type=radio]#button-8:checked~#hidden #slider_contenu { left: -5320px ;}
input[type=radio]#button-9:checked~#hidden #slider_contenu { left: -6080px ;}
input[type=radio]#button-10:checked~#hidden #slider_contenu { left: -6840px ;}
input[type=radio]#button-11:checked~#hidden #slider_contenu { left: -7600px ;}
input[type=radio]#button-12:checked~#hidden #slider_contenu { left: -8360px ;}
input[type=radio]#button-13:checked~#hidden #slider_contenu { left: -9120px ;}