/* CSS Document */
@font-face{ 
	font-family: 'archistico';
	src: url('fonts/archistico/archistico_bold-webfont.eot');
	src: url('fonts/archistico/archistico_bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/archistico/archistico_bold-webfont.woff') format('woff'),
	     url('fonts/archistico/archistico_bold-webfont.ttf') format('truetype'),
	     url('fonts/archistico/archistico_bold-webfont.svg#webfont') format('svg');
}

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url("webfonts/archistico/stylesheet.css");

article					{
	width: 400px;
	font-size: 18px;
	margin: auto;
	padding: 20px;
	background-color: rgba(255,255,255,0.47);
	text-align: justify;
						}

figcaption				{
	font-size: 18px;
	margin: auto;
	background-color: rgba(255,255,255,0.47);
	text-align: justify;
						}
						
img						{box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.5);}
img:hover				{cursor:zoom-in;}
iframe					{width:80px;
						height:80px;}
						
.anchor					{
	font-size: 16px;
	padding: 0;
	background-color:transparent;
	text-align: center;
}

body,html					{
	font-size: 100%;
	padding: 0;
	margin: 0;
	background: url(images/body2.jpg) no-repeat fixed;
	background-size:cover;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #000;
}

figure					{display:inline-block;
						vertical-align:top;
						padding-top:8px;
						}

#conteneur				{
	max-width: 60%;
	margin: auto;
}

.slide				{margin: auto;
					}



#identite				{
	text-align: center;
	width: 400px;
	margin-left: 80px;
	background-color: #303030;
	color: #D4B9AB;
	
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	}
#nom					{
	font-size: 48px;
}
#metier					{
	font-size: 24px;
	line-height: 14px;
	}

header					{
	text-align: center;
	height: 200px;
	width:auto;
	z-index:1;
	background-color:rgba(255,255,255,0.10);
	}

header ul						{
	position: relative;
	transition: all 0.3s linear;
	padding: 3px;
	margin: 0;
	text-align: right;
	z-index:1;
}
	
 header li				{
	display: inline-block;
	padding: 0;
	width: 150px;
	text-align: center;
	margin-top: 150px;
	color: #fff;
	list-style-type:none;
	background: rgba(255, 255, 255, 0.33);
}



header a:hover		{
	text-decoration: none;
	color: #fff;
}

a					{text-decoration: none;
					font-size: 20px;
					font-weight:bold;
					color:#303030;
					cursor:pointer;}
			
#bleu:hover		{background:#3b579d;
}

#vert:hover	{background:#009B0C;
}

#rouge:hover	{background:#ff5a00;
}

.a-btn-slide-text{
	position: absolute;
	width: 150px;
	height: 0px;
	background: #009b0c;
	font-size: 18px;
	font-style: italic;
	overflow: hidden;
	line-height: 32px;
	transition: all 0.3s linear;
	top: 185px;
	color: #fff;
	border: solid 1px #009b0c;
}

.a-btn:hover .a-btn-slide-text{
	height: 190px;
	top:190px;
	}

.a-btn2-slide-text{
	position: absolute;	
	width: 150px;
	height: 0px;
	top:185px;
	border:solid 1px #ff5a00;
	transition: all 0.3s linear;
}

.a-btn:hover .a-btn2-slide-text{
	top:190px;
	}

.a-btn3-slide-text{
	position: absolute;	
	width: 150px;
	height: 0px;
	top:185px;
	border:solid 1px #3b579d;
	transition: all 0.3s linear;
}

.a-btn:hover .a-btn3-slide-text{
	top:190px;
	}

h1						{
	margin: 0;
	color: lightgrey;
	font-size: 45px;
	font-family: archistico;
	font-weight: lighter;
}
						
h2						{
	margin: 0;
	color: #303030;
}

h4						{font-size:22px;
						float:right;
						margin:0;
						}

td						{padding:10px;
						background:rgba(255,255,255,0.66);
						width:33%;
						vertical-align:top;}
						
th						{background:rgba(255,255,255,0.66);}

p						{
	margin: 0;
	display: inline-block;
	color: #303030;
	font-size: 20px;
	font-weight:normal;
	}

.set {
	width: 420px;
	height: 120px;
	margin: 25px 25px 25px 80px;
	float: left;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	position: absolute;
	z-index:3;
}

.innerset	 {width:420px;height:120px;
			-webkit-transform-style:preserve-3d;
			-moz-transform-style:preserve-3d;
			transform-style:preserve-3d;
			-webkit-transform:translateZ(-215px)
			;-moz-transform:translateZ(-215px);
			transform:translateZ(-215px);
			-webkit-transition:-webkit-transform 350ms;
			-moz-transition:-moz-transform 350ms;
			transition:transform 350ms;}
.innerset:hover {-webkit-transform:rotateY(-78deg) translateZ(20px);
				-moz-transform:rotateY(-78deg) translateZ(20px);
				transform:rotateY(-78deg) translateZ(20px);}
.innerset .metier {
	width: 420px;
	height: 120px;
	position: absolute;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(210px);
	-moz-transform: translateZ(210px);
	transform: translateZ(210px);
	background-size: cover;
	background-repeat: no-repeat;
	font-style: normal;
	font-weight: 400;
}
.innerset .diplomes {
	background-image: url(frk.jpg);
	-webkit-transform: rotateY(90deg) translateZ(210px);
	-moz-transform: rotateY(90deg) translateZ(210px);
	transform: rotateY(90deg) translateZ(210px);
	width: 420px;
	height: 120px;
	background-repeat: no-repeat;
	background-size: auto 165px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	padding:12px;
	
}

.innerset .metier, .innerset .diplomes {-webkit-transition:box-shadow 350ms;-moz-transition:box-shadow 350ms;transition:box-shadow 350ms;}
.innerset:hover .metier {
	box-shadow: inset 300px 0px 40px rgba(127,127,127,1.00);
	-webkit-box-shadow: inset 300px 0px 40px rgba(127,127,127,1.00);
}
.innerset:hover .diplomes {box-shadow:inset 0px 0px 40px rgba(0,0,0,0);}
.diplomes {position:relative;}

footer					{text-align:center;}
.pdp					{
	background-color: #565656;
	width:auto;
	padding:50px;
	color: #fff;
	opacity: 0.7;
	transition: 0.3s;
	font-size: 22px;
}

#tel			{margin-top:40px;}

#mail			{margin:30px 0 50px 0;}

.pdp:hover				{background-color:#3b579d;
						opacity:1;}

#contact td				{width:auto;};

#follow		{
	position: fixed;
	left:10px;
	top:8px;
	height:120px;
	z-index:5;
}

#follow		{position:absolute;}

#fb						{
	position: absolute;
	top:0;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	filter: grayscale(100%);
	-webkit-filter:grayscale(100%);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(100%);
	-o-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	filter: gray;
	filter: url(desaturate.svg#greyscale);
	background-color:transparent;
	background-image:url(images/facebook.png);
	height:80px;
	width:80px;
	padding:0;
}

#fb:hover				{filter: grayscale(0%);
						-moz-filter: grayscale(0%);
						-webkit-filter:grayscale(0%);
						-webkit-filter: grayscale(0);
						-o-filter:grayscale(0%);
						-ms-filter:grayscale(0%);
						top:10px;
						}

#tw						{
						position:absolute;
						top:0;
						margin-left:80px;
						transition:all 0.2s;
						-webkit-transition: all 0.2s;
						-webkit-filter: grayscale(1);
						-moz-filter: grayscale(100%);
						-o-filter:grayscale(100%);
						-ms-filter:grayscale(100%);
						filter: gray;
						filter: url(desaturate.svg#greyscale);
						filter: grayscale(100%);
						-webkit-filter: grayscale(100%);
						background-color:transparent;
						background-image:url(images/twitter.png);
						height:80px;
						width:80px;
						padding:0;
						}

#tw:hover				{filter: grayscale(0%);
						-webkit-filter: grayscale(0%);
						top:10px;}
						
#tmblr					{position: absolute;
						top:0;
						margin-left:160px;
						transition: all 0.2s;
						-webkit-transition: all 0.2s;
						filter: grayscale(100%);
						-webkit-filter: grayscale(1);
						-moz-filter: grayscale(100%);
						-webkit-filter:grayscale(100%);
						-webkit-filter: grayscale(1);
						-o-filter:grayscale(100%);
						-ms-filter:grayscale(100%);
						filter: gray;
						filter: url(desaturate.svg#greyscale);
						background-color:transparent;
						background-image:url(images/tmbr.png);
						height:80px;
						width:80px;
						padding:0;	
}

#tmblr:hover			{filter: grayscale(0%);
						-moz-filter: grayscale(0%);
						-webkit-filter:grayscale(0%);
						-webkit-filter: grayscale(0);
						-o-filter:grayscale(0%);
						-ms-filter:grayscale(0%);
						top:10px;
						}
							
#be					{
						position: absolute;
						top:0;
						margin-left:240px;
						transition: all 0.2s;
						-webkit-transition: all 0.2s;
						filter: grayscale(100%);
						-webkit-filter: grayscale(1);
						-moz-filter: grayscale(100%);
						-webkit-filter:grayscale(100%);
						-webkit-filter: grayscale(1);
						-o-filter:grayscale(100%);
						-ms-filter:grayscale(100%);
						filter: gray;
						filter: url(desaturate.svg#greyscale);
						background-color:transparent;
						background-image:url(images/be.png);
						height:80px;
						width:80px;
						padding:0;	
						}

#be:hover				{filter: grayscale(0%);
						-moz-filter: grayscale(0%);
						-webkit-filter:grayscale(0%);
						-webkit-filter: grayscale(0);
						-o-filter:grayscale(0%);
						-ms-filter:grayscale(0%);
						top:10px;
						}
																	
#home					{position:absolute;
						top:0;
						margin-left:320px;
						transition:all 0.2s;
						-webkit-transition: all 0.2s;
						filter: grayscale(100%);
						-webkit-filter: grayscale(100%);
						filter: grayscale(100%);
						-webkit-filter: grayscale(1);
						-moz-filter: grayscale(100%);
						-o-filter:grayscale(100%);
						-ms-filter:grayscale(100%);
						filter: gray;
						filter: url(desaturate.svg#greyscale);
						background-color:transparent;
						background-image:url(images/home.png);
						height:80px;
						width:80px;
						padding:0;
						}	
						
#home:hover				{filter: grayscale(0%);
						-webkit-filter: grayscale(0%);
						-webkit-filter: grayscale(0);
						-o-filter:grayscale(0%);
						-ms-filter:grayscale(0%);
						top:10px;
						}				

#odet					{padding-top:200px;
						overflow:hidden;}
						
.under					{margin:auto;
						padding-top:25px;
						width:800px;
						clear:both;
						}

.right					{float:right;}
						
.left					{float:left;}
						
#prame					{height: 70px;}

#title-prame			{margin-top:114px;}

#logo-prame				{margin:auto;}

#prame2					{padding-top: 210px;}

#txt-bb-tchooc			{margin-top:30px;}

#bzh-tchooc				{margin:auto;
						padding-top:8px;
						clear:both;
						width:825px;}
#perso					{overflow:hidden;
						height:4310px;}				
#tchooc					{height:1150px;
						padding-top:114px;}
.nail					{padding:10px;
						height: 255px;
						/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000',GradientType=0 ); /* IE6-8 */
}

						
#halloween				{width:210px;}

#pillule				{width:420px;}

#heroic					{width:210px;}

#work					{margin: auto;
						width: 860px;}
						
#txt-gudule				{height:80px;}

.paper					{display: inline-block;
						width:285px;
						height: 200px;}
						
#txt-sketche			{height:60px;}

#bulles					{width:100%;
						height:118px;
						z-index:2;
						background-color:#505050;
						}
#gym					{padding-top:150px;}
			
#com					{background-image:url(images/oeil.png);
						height:80px;
						width:80px;
						border: solid 1px #404040;}
						
#logo					{background-image:url(images/logo.png);
						height:80px;
						width:80px;
						border: solid 1px #404040;}
#illu					{background-image:url(images/illu.png);
						height:80px;
						width:80px;
						border: solid 1px #404040;}
#crayon					{background-image:url(images/crayon.png);
						height:80px;
						width:80px;
						border: solid 1px #404040;}
.fb-like				{left:35%;}