html {
	margin:0;
	padding:0;
	font-size:100%;
	}

* {
	font-weight:500;
	font-family: 'PT Sans', sans-serif;
	margin:0;
	padding:0;
	}

body { background-color:#FAFAFA; }

#up{background:#000;
	position:fixed; 
	z-index:999; 
	width:16px; padding:3px; 
	margin: 10px 0 0 10px; 
	border-radius:99px; 	
	
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s ;
	transition:all 0.3s; }
	
#up:hover{
	padding-top:16px; 
	margin-top:0px; 
	border-top-left-radius:0; 
	border-top-right-radius:0;
	
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s ;
	transition:all 0.3s;}
	
.up-1 {margin: 10px 0 0 42px; display:none;}
.up-2 {margin: 10px 0 0 74px; display:none;}

.espace {position:relative;height:.8vw;min-height:7px;}

.espace2 {height:1vw;min-height:9px;}

.title {
	width:50%;
	cursor:pointer;
	min-width:300px;
	}
	
.icon1 {
	
	height:1.9vw;
	min-height:20px;
	margin-right:2px;
	margin-bottom:-3px;
	margin-left:40%;
	
	-moz-transition:all 1s;
	-webkit-transition:all 1s;
	-o-transition:all 1s ;
	transition:all 1s;
	transition-delay: 0s;
	}

.icon2 {
	height:1.9vw;
	min-height:20px;
	margin-right:2px;
	margin-bottom:-3px;
	margin-left:45%;
	
	-moz-transition:all 1s;
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
	transition-delay: 0s;
	
	}
	
#pppc {
	
background-color:#FAFAFA;
	display:block;

	position:absolute;
	border-radius:700px;
	z-index:2000;
	height:140px;
	
 /*-ms-transform: rotate(250deg); /* IE 9 */
    /*-webkit-transform: rotate(250deg); /* Chrome, Safari, Opera */
    /*transform: rotate(250deg);*/
	
	margin-left:0px;
	margin-top:3.9vw;
	left:-185px;
	/*border : 1px solid #999;*/
	box-shadow: 0 7px 12px rgba(0,0,0,0.1);
	-moz-transition:all 1s;
	-webkit-transition:all 1s;
	-o-transition:all 1s;
	transition:all 1s;
	transition-delay: 0s;}


.imgcss {background-color:#FAFAFA;
	height:1.6vw;
	position:absolute;
	right:50%;
	left:auto;
    opacity:1; 
	z-index:5000000;
	min-height:
	
	-moz-transition:all .0s;
	-webkit-transition:all .0s;
	-o-transition:all 0s ;
	transition:all 0s;
	}
	
.imgcssback{
	height:1.6vw;
	position:absolute;
	right:50%;
	left:auto;
    opacity:1; 
	z-index:5;
	opacity:0;
	
	-moz-transition:all .4s;
	-webkit-transition:all .4s;
	-o-transition:all 4s ;
	transition:all 0.4s;}

.imgtypologie {display:none;
	height:1vw;
	min-height:18px;
	}

ul{display:block; margin:0;padding:0;}

li {display:block; margin:0;padding:0;
	width:100vw;
	height:auto;	
	overflow:visible;
	}
	
	
.picss {
	display:block;
	margin:0;padding:0;
	height:23vw;
	width:auto;
	background:#FAFAFA;
	
	border-radius:0px;
	-moz-transition:opacity  0.5s;
	-webkit-transition:opacity 0.5s;
	-o-transition:opacity 0.5s ;
	transition:opacity 0.5s; margin-top:15px;
	}

.d{ margin-left:50.1%;}

.g{
margin-left:auto;
margin-right:50.1%;
}

.picss2 {
	margin-right:50.1%;
	height:15vw;
	width:auto;
	
	-moz-transition:opacity  0.5s;
	-webkit-transition:opacity 0.5s;
	-o-transition:opacity 0.5s ;
	transition:opacity 0.5s;
	}

.frame {
	left:100px;
	text-decoration:none;
	margin-top:8px;
	width:38vw;
	overflow:hidden;
	text-align:right;
	
	}

#FRR {
	height:17px;
	
margin-right:2px;
	-moz-transition:opacity  0.2s;
	-webkit-transition:opacity 0.2s;
	-o-transition:opacity 0.2s ;
	transition:opacity 0.2s;
	
	}
#ENN {
	height:17px;
	margin-right:0px;
		-moz-transition:opacity  0.2s;
	-webkit-transition:opacity 0.2s;
	-o-transition:opacity 0.2s ;
	transition:opacity 0.2s;}

h1,h2,h3,h4,p {margin:0; padding:0;font-size:1em; color:#444;}
#CV2 > h4,#CV2 >h1,#CV2 >h2,#CV2 >h3 {margin:0; padding:0;font-size:0.94em; color:#222;}

a,a:link,a:focus,a:active,a:visited {color:#69F; text-decoration:underline;}

a:hover {color:#FAFAFA;}

#pierrecesarlight {
	position:absolute;
	margin-left:50%;
	padding-right:0;
	margin-top:3%;
	text-align:left;
	z-index:104;
	}

#pierrecesar {
	margin:0;
	position:absolute;
	margin-left:50%;
	padding-right:0;
	padding-top:3%;
	text-align:left;
	opacity:0;
	z-index:105;
	}
	


#quit {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	
	-moz-transition:z-index .001s;
	-webkit-transition:z-index .001s;
	-o-transition:z-index .001s;
	transition:z-index .001s;
	}

#CV {
	background-color:#FAFAFA;
	color:#FAFAFA;
	position:absolute;
	margin:0;
	padding:0;
	margin-left:50vw;
	padding-left:0vw;
	padding-right:7vw;
	padding-bottom:10%;
	margin-top:5.2vw;
	z-index:1000;
	text-align:left;
	opacity:0;
	
	-moz-transition:opacity 1s;
	-webkit-transition:opacity 1s;
	-o-transition:opacity 1s;
	transition:opacity 1s;
	}

#CV2 {
	position:relative;
	display:none;
	border-radius:0;
	z-index:103;
	margin:0;
	padding:0;
	}

#space0 {	position:relative; padding-top:3%; }
#space01 {	position:relative; height:2.25vw; min-height:27px; }
#space {
	position:relative;
	z-index:10;
	opacity:1;
	-moz-transition:opacity .618s;
	-webkit-transition:opacity .618s;
	-o-transition:opacity .618s;
	transition:opacity .618s;
	}

#accordion { position:relative;	}

#accordion > div {	background-color:#FAFAFA;

	position:absolute;
	overflow:hidden;
	width:100%;
	}

#accordion > div > div:first-child {
	position:relative;
	overflow:hidden;
	height:1.6vw;
	z-index:7000;
	margin:0;padding:0;
	padding-top:3px;
	margin-top:-3px;
	
	
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
	}

#accordion > div > div:last-child {
	position:absolute;
	width:100%;
	z-index:6;
	padding-bottom:14px;
	overflow:hidden;
	}

.banner {
	position:relative;
	z-index:102;
	opacity:1;
	}

.banner li {
	position:relative;
	list-style:none;
	height:21vw;
	text-align:right;
	}

.banner ul li { float:left; }

.typologie1 {
	display:none;
	position:absolute;
	text-align:left;
	margin-left:-200px;
	width:100%;
	opacity:0;
	-moz-transition:all .618s;
	-webkit-transition:all .618s;
	-o-transition:all .618s ;
	transition:all .618;	}

.typologie2 {	display:none;

	position:absolute;
	text-align:left;
	margin-left:-70px;
	width:100%;
	z-index:0;
	opacity:0;
	-moz-transition:all .618s;
	-webkit-transition:all .618s;
	-o-transition:all .618s ;
	transition:all .618;
	}

.typologie3 {	display:none;

	position:absolute;
	text-align:left;
	margin-left:-145px;
	width:100%;
	z-index:0;
	opacity:0;
	-moz-transition:all .618s;
	-webkit-transition:all .618s;
	-o-transition:all .618s ;
	transition:all .618;
	}
	
#space:hover .imgcss{opacity:1;}

#accordion > div:hover .imgcssback{opacity:1;}

#accordion > div  { background-color:#FAFAFA;} 
.helloworld{ background-color:#FAFAFA;} 
.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a8, .a9, .a10, .a11, .a12, .a13, .a14, .a15, .a16, .a17  { background-color:#FAFAFA;} 
#accordion > div:hover .imgcss { 



/*	-moz-transition:all 0.4s;
	-webkit-transition:all  0.4s;
	-o-transition:all 0.4s;
	transition:all 0.4s; */
	
	opacity:0.2;
	}
	

	/*
#accordion > div:hover #timely{ right:42.35%; } 
#accordion > div:hover #pyrex{ right:42.9%; } 
#accordion > div:hover #spraygun{ right:38.15%; } 
#accordion > div:hover #jeplieetnerompspas { right: 22.3%; } 
#accordion > div:hover #mystere { right:40%; } 
#accordion > div:hover #erosionnumerique { right: 26.2%; } 
#accordion > div:hover #tchanquees { right: 34.9%; } 
#accordion > div:hover #letempsduncigare { right: 24.8%; } 
#accordion > div:hover #badabodum { right: 35.5%; } 
#accordion > div:hover #unetemusical { right: 31.7%; } 
#accordion > div:hover #tivoli { right: 43%; } 
#accordion > div:hover #puppypee { right: 38.1%; } 
#accordion > div:hover #peinturemathematique { right: 21%; } 
#accordion > div:hover #haze { right: 44.2%; } 
#accordion > div:hover #loremipsum { right: 35%; }
#accordion > div:hover #oscar { right: 42.3%; }  
*/




#accordion > div:hover .typologie1{ 
	opacity:0.8; 
 	margin-left:3px; 
	-moz-transition:all .618s;
	-webkit-transition:all .618s;
	-o-transition:all .618s ;
	transition:all .618;
	}

#accordion > div:hover .typologie2{ 
	opacity:0.8; 
	margin-left:3px; 	
	-moz-transition:all .45s;
	-webkit-transition:all .45s;
	-o-transition:all .45s ;
	transition:all .45s;
	}
	
#accordion > div:hover .typologie3{ 
	opacity:0.8; 
	margin-left:3px; 	
	-moz-transition:all .618s;
	-webkit-transition:all .618s;
	-o-transition:all .618s ;
	transition:all .618;
	}

.table {display:table;width:100%;}

.conteneurimage {
	width:0%;
	display:table-cell;
	position:relative;
	}





.picbox {
	position:relative;
	display:block;
	margin:0; padding:0;
	 
	 width:50vw;
	text-align:right;
	height:21.36vw;
	
	
	margin-top:-7px;
	overflow: visible;
	}


	
.conteneurtexte {
	position:relative;
	display:block;
	padding:0;;
	width:40vw;
	
	margin-top:-21.46vw;
	margin-top:15px;
		
	}

.tg {
	
	margin-left:auto;
	margin-right:50vw;
	text-align:right;}
	
.td {
	
	margin-left:50vw;
	margin-right:auto;
	text-align:left;}

.textbox {	
	display:block;
	position:relative;
	
	padding:0px;
	margin:0px;
		
	margin-left:0vw;
	padding-right:0vw;
	margin-bottom:10px;
	margin-top:15px;
	padding-top:0px;
	

	direction:ltr;
	z-index:1000;

	-moz-transition:opacity  0.5s;
	-webkit-transition:opacity 0.5s;
	-o-transition:opacity 0.5s ;
	transition:opacity 0.5s;
	}
	


.drapeau {
	position:fixed;
	text-align:right;
	bottom:26px;
	right:13px;
	z-index:200;
	}

#bdp {
	position:fixed;
	text-align:right;
	bottom:8px;
	right:13px;
	z-index:200;
	opacity:1;
	}


.oiseau {
	margin-bottom:110px;
	text-align:left;
	margin-left:51%;
	margin-top:-60px;
	}



.imgcss2{
	height:1.6vw;
	min-height:18px;
	}
	

.rect0{
	opacity:0;
	
	height:0vw;
	width:0vw;
	/*top:110px;*/
	left:55vw;
	overflow:hidden;	
	-moz-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
	box-shadow: 0 7px 12px rgba(0,0,0,0.1);
	z-index:9999;
	border-radius:700px;
	border: 0px solid #FAFAFA;

	}
	
.rect{
	height:auto;
	width:20vw;
	-moz-transition:margin-top 0.5s;
	-webkit-transition:margin-top 0.5s;
	-o-transition:margin-top 0.5s;
	transition:margin-top 0.5s;
	z-index:2000;
	opacity:1;
	
	
	}
	
	
	
.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a8, .a9, .a11, .a12, .a13, .a14, .a15, .a16, .a17 .a18{

	}
	 
.cadre{ 
	position:absolute;
	z-index:101;
	width:100%;
	height:100%;
	text-align:center;
	top:0px;
		
	}

#contact, fieldset, .p{
	width:90%;
	border:none;
	text-decoration:none;
	}
	
fieldset > p {
	color:#F00;
	font-weight:100;
	font-size:12px;
	}
	
label{ display:none; }

#nom, #email, #message {
	display:inline;
	width:55%;
	text-decoration:none;
	border:none;
	}
#message{ width:90%; }

#submit {
	background-color:#f2f1f1;
	display:inline;
	width:auto;
	padding:3px 10px 3px 10px;
	margin-top:5px;
	text-decoration:none;
	border:none;
	}
	


#objet {display:none;}

input, textarea {
	/*background-color:#f0f0f0;*/
	background-color:#f2f1f1;
	opacity:1;
	margin:0; padding:0;
	padding-bottom:0px;
	margin-top:6.18px;
	margin-left:0px;
	
	color: #FAFAFA;
	font-size:12px;
	border-radius:7px
	}

	
input:focus, input:focus, textarea:focus{
	outline: none;
	/*background-color:#e9e9e9;*/
	background-color:#E4E4E4;
	}


	

 
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #999;
	font-weight:400;
	}
 
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999;
	font-weight:400;
	}
 
input.placeholder, textarea.placeholder {
    color: #999;
	font-weight:400;
	}

form{display:none;}
	
.imgcss {
	background-color:#FAFAFA;
	height:1.6vw;
	min-height:18px;
		}
		

#accordion > div > div:first-child {
	position:relative;
	overflow:hidden;
	min-height:18px;
	}
	
@media only screen and (min-device-width : 0px) and (max-device-width : 1024px)  { 

body{ /*background-color:#FAFAFA;*/ }

.imgcss {
right:3vw;	min-height:50px;  background-color:#FAFAFA;
		}
		
.imgcss0 {background-color:#FAFAFA;
	width:100vw;
	position:absolute;
	left:1vw;
	}		
		

#accordion > div > div:first-child {background-color:#FAFAFA;
	min-height:50px;
	
	margin:-1px;
	overflow:hidden;

	
	
	
	}
	
#pierrecesarlight {
	position:absolute;
	margin-left:0%;
	padding-right:0;
	margin-top:3%;
	text-align:left;
	z-index:104;
	}

#pierrecesar {
	margin:0;
	position:absolute;
	margin-left:0%;
	padding-right:0;
	padding-top:3%;
	text-align:left;
	opacity:0;
	z-index:105;
	}
	
	.title {
	width:100vw;
	cursor:pointer;
	min-width:auto;
	margin-left:1vw;
	}
	
#accordion > div {
	position:absolute;
	overflow:hidden;
	margin:-1px;
	width:100%;
	}
	
.conteneurtexte {
	width:95vw;	}

.tg {
	margin-left:2vw;
	margin-right:auto;
	text-align:left;}
	
.td {
	margin-left:2vw;
	margin-right:auto;
	text-align:left;}
	
#space0 { padding-top:0%; }

.picss {
	width:100vw;
	height:auto;	
	min-height:auto;
   margin-top:0px;
	}
	
.picss2 {
	margin-right:auto;
	left:0px;
	height:auto;
	min-height:auto;
	width:100vw;

	}

.d{ margin-left:0%;}

.g{ margin-right:auto;margin-left:0%;}

h1,h2,h3,h4,p {margin:0; padding:0;font-size:2.5em; color:#444;}

#CV2 > h4,#CV2 >h1,#CV2 >h2,#CV2 >h3 {margin:0; padding:0;font-size:2em; color:#222;}


#CV {
	margin-left:2vw;
	padding-left:0vw;
	padding-right:1vw;
	padding-bottom:4%;
	margin-top:65vw;

	}

#pppc {
	
	height:300px;
	margin-left:0px;
	margin-top:19vw;
	
	}

.icon1 {
	
	height:15vw;
	padding-left:32vw;
		margin-right:0px;
	}

.icon2 {
	height:15vw;
	margin-right:0px;
	
	}
	
	
.picbox {
	
	width:100vw;
	text-align:left;
	height:45vw;	
	margin-top:0px;
	}
	

.frame {
	display:none;
	left:0px;
	text-decoration:none;
	margin-top:8px;
	width:100vw;
	height:34vw;
	
		left:auto;

	margin-top:auto;
	text-align:auto;

	}
	
	#pppc2 {
	

	display:block;

	position:absolute;
	border-radius:700px;
	z-index:2000;
	height:40vw;
	margin-left:0px;
	margin-top:3.9vw;
	left:30vw;
	/*border : 1px solid #999;*/
	box-shadow: 0 7px 12px rgba(0,0,0,0.1);
}
	
}