*{margin:0;padding:0;}
strong {font-weight:inherit}
html,body{height:100%; background:url(../images/bgwt.png) 0 0 repeat}
.clear {clear:both}
.display{display:none}
/* font face */

@font-face {
    font-family: 'Helvetica Neue LT Std'; /* titre */
    src: url('../font/HelveticaNeueLTStd-UltLt.woff2') format('woff2'),
        url('../font/HelveticaNeueLTStd-UltLt.woff') format('woff');
    font-weight: 200;
	font-style: normal;}
@font-face {
	font-family:"Archive"; /* Metier */
	src: url("../font/Archive.eot?") format("eot"),url("../font/Archive.woff") 	format("woff"),url("../font/Archive.ttf") 
	format("truetype"),url("../font/Archive.svg#Archive") 
	format("svg");
}
@font-face {
    font-family: 'Helvetica Neue LT Std2'; /* Sous menu */
    src: url('../font/HelveticaNeueLTStd-Roman.woff2') format('woff2'),
        url('../font/HelveticaNeueLTStd-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { /* MENU */
    font-family: 'Helvetica Neue LT Std3';
    src: url('../font/HelveticaNeueLTStd-ThEx.woff2') format('woff2'),
        url('../font/HelveticaNeueLTStd-ThEx.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}


/* Commence le menu social + dl du cv */
#sociallink {
	position:relative;
	background-color:white;
	border-bottom:#f0efef;	
	
}

#sociallink div ul li{
	z-index:5;
	float:left;
	list-style-type:none;
	position:relative;
}

#sociallink div ul li a{
	height:100%;width:100%;
	display:block;
	color:white;
	text-decoration: none;
	
}
#sociallink div ul li a {background-position:left top}	


#sociallink div ul li a:hover {background-position:left bottom}
#sociallink div ul li span {
	display:block;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.5s linear;
	position:absolute;
	top:30px;
	left:-75%;
	background-color:#191919;
	border-radius:5px;
	padding:0 10px;
	font-size:11px;
	height:16px;
	line-height:16px;
	color:#dcdad9;
}
#sociallink div ul li a:hover span {
	display:block;
	visibility: visible;
	opacity: 1;
}
#sociallink div ul li a:hover span+span{
	position:absolute;
	padding:0;margin:0;	
	top:24px;
	left:3px;
	border-radius:0;
	background-color:inherit;
	width: 0;
	height: 0;
	 border-style: solid;
	border-width: 0 6.5px 6px 6.5px;
	line-height:inherit;
	border-color: transparent transparent #191919  }

#sociallink div dt{
	-webkit-transform: skew(15deg);
	-moz-transform: skew(15deg);
	transform: skew(15deg);padding: 0 5px 0 0;
	padding:0 10px 0 35px;
	background: url(../images/dl-icon.gif) no-repeat 10px 8px;
}

#sociallink div dl dt,#sociallink div dl dd {
	float:left;
}

#sociallink div dl dd a{
	padding:0 5px;
	background-color:#181717;
	display:block;	
	color:white;
	text-decoration: none;
}

/* Commence a placer le nom du site */

#htitle {
	float:none;
	transform: rotate(-2deg);
}
#htitle #title {
	text-align:right;
	margin: 0 auto;
	transform: rotate(2deg);
	position:relative;
	margin-bottom:50px;
		
}
#htitle #title  h1{
	display:inline;
	border-bottom: 1px solid black;
	font-family: 'Helvetica Neue LT Std';
	font-weight: 200;
    font-style: normal;
	text-transform:uppercase;
	color:#27afd6;
}
#htitle h1 span {
	background-color:black;
	font-family: 'Helvetica Neue LT Std2';
	color:white;
	display:block;
	font-size:14px;
	position:absolute;
	transform: skew(-15deg);
	padding:0 5px;
	margin:0;
	text-transform:none;
	height:24px;
	line-height:24px;
}

#htitle h1 span span{
	transform: skew(15deg);
	position:static;
	}
#htitle hr {
	/*border-top:1px dashed #898787; Début animation dotte*/
	border:0;
	height:2px;
  background: linear-gradient(90deg, #9b9b9b, transparent 25%), 
    linear-gradient(90deg, #9b9b9b, transparent 50%), 
    linear-gradient(0deg, #9b9b9b, transparent 50%), 
    linear-gradient(0deg, #9b9b9b, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
  background-position: 0px 0px, 200px 100px, 0px 100px, 200px 0px;
  animation: border-dance 4s infinite linear;
}
@keyframes border-dance {
  0% {
    background-position: 0px 0px, 300px 116px, 0px 150px, 216px 0px;
  }
  100% {
    background-position: 300px 0px, 0px 116px, 0px 0px, 216px 150px;
  }
} /* Fin animation dotte*/
/* on prepare le titre 2 qui devrais changer grace a un scripte ainsi que les info rapide de contact */
#htitle h2 {
	font-size:98px;
	z-index:5;
	font-family:Archive;
	font-weight: normal;
    font-style: normal;
	text-transform:uppercase;
	color:#2e2b29;
	/*width:1280px;*/
	/*text-align:center;*/
	margin:0 auto;
	padding-bottom:3px;
}
.galeriehome ul#contentw li.titrepage {
	float:none;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	font-size:auto;
	display:block;
	border:0;
	background:none;	
}
.galeriehome ul#contentw li.titrepage:hover {background:none}
/* place a l'animation du titre metier*/
#htitle div#banim {
	overflow:hidden;
	position:relative;
}

.item-1, 
.item-2, 
.item-3 {
	position: absolute;
	text-align:center;
	display: block;
	top: 0;  
	margin:0 auto;
	animation-duration: 8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{animation-name: anim-1;}

.item-2{animation-name: anim-2;}

.item-3{animation-name: anim-3;}


/* fin animation */
#htitle ul {
	z-index:5;
	margin:0 auto;
	font-size:19px;
}

#htitle ul li {
	display:inline-block;
	color:#27afd6;
	line-height:21px;
}
#htitle ul li {background:url(../images/map-icon.png) no-repeat 35px top;}
#htitle ul li+li {background:url(../images/mail-icon.png) no-repeat 35px top;}
#htitle ul li+li+li  {background:url(../images/phone-icon.png) no-repeat 35px top;}
#htitle ul li:hover {background-position:35px bottom;}



#htitle ul li a {text-decoration:none;color:#27afd6;display:block;padding-left:70px;}
#htitle ul li a:hover {color:black;}

/* head  voir responsive ligne*/


/* slide css */
.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
.crossfade > figure:nth-child(1) { 
  background-image: url('../images/head-slide01.jpg'); }

.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('../images/head-slide02.jpg');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('../images/head-slide03.jpg');
}

.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('../images/head-slide04.jpg');
}

.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('../images/head-slide05.jpg');
}

@keyframes 
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}
/* Menu */

div#menu a#lkopen {display:none;}
div#menu ul{
	margin:0 auto;	
}
div#menu ul li {
	line-height:65px;
	font-family: 'Helvetica Neue LT Std3';
	font-weight:900;
}
div#menu ul li a {
	display:block;
	text-decoration:none;
	font-size:26px;
	transition: background-color 0.2s;
}
div#menu ul li a::before {content:"+";margin-right:10px; display: inline-block;transition: transform .3s ease-in-out;  }
div#menu ul li a:hover::before {transform:rotate(90deg);}
div#menu ul li a:hover {
	/* background-color:#f7f3f1; */
	color:#27afd6;}





/* On place photo avec info */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  /* hack css pour que ces interpretation soit prise uniquement par ie 10 et 11 */
   /* IE10+ specific styles go here */  
   div#pme {border-radius:50%;overflow:hidden}
	}

div#pme dl {
	display:block;
	height:100%;
	visibility:hidden;
	opacity:0;
	transition: all 0.4s ease;
	background-color: rgba(104, 116, 140, 0);
}
div#pme:hover dl {
	visibility:visible;
	opacity:1;
	background-color: rgba(104, 116, 140, 0.8);
	
}

div#pme dl dt {
	color:white;
	text-transform:uppercase;
	font-family: 'Helvetica Neue LT Std3';
	text-align:center;
	border-bottom:1px solid white;margin-bottom:25px;	
}

div#pme dl dd {
	text-align:center;
	color:white;
	font-family: 'Helvetica Neue LT Std3';
} 

div#pme dl dd a {
	background-color:#2f3644;
	text-decoration:none;
	text-transform:uppercase;
	color:white;
	border-radius:5px;
	padding:5px 15px;
	font-size:21px
}
div#pme dl dd a:hover {
	
	background-color:#27afd6;
}


/* A partir d'ici on fait le reste du site, le contenue */ 
 #content {
	 overflow:hidden;
	 width:100%;
 }

 
 /* GALERIE HOME */

.galeriehome ul#contentw {
	font-size:0;
	padding:100px 0;
	}

.galeriehome ul#contentw li {
	
	display:inline-block;
	border:0;padding:0;
	overflow:hidden;
	position:relative;
	transition: background-color 0.4s ease;
}
.galeriehome ul#contentw li:hover {
	background-color:white;}

.galeriehome ul#contentw li img {width:100%;height:100%;opacity:0.9;transition: all 0.2s ease-out;}
.galeriehome ul#contentw li img:hover,.galeriehome ul#contentw li:hover img {opacity:0.7;}


.galeriehome ul#contentw li div.hpvignette {
	position:absolute;
	background-color:white;
	left:0;top:100%;
	width:100%;height:50%;
	transition: all 0.2s ease-out;
}
.galeriehome ul#contentw li:hover div.hpvignette {
	position:absolute;
	left:0;top:50%;
	
	
}
.galeriehome ul#contentw li div.hpvignette h2 {
	color:#27afd6;
	border-bottom:solid 1px #27afd6;
	padding:0;
	text-align:left;
	text-transform:none;
	font-size:22px;
	position:relative
}
.galeriehome ul#contentw li div.hpvignette h2 img{position:absolute;top:0px;right:0;width:51px;height:15px;}
.galeriehome ul#contentw li div.hpvignette p {color:#7c7c7c;margin:0 20px}	

.galeriehome ul#contentw li div.hpvignette ul {position:absolute;width:100%;text-align:right}
.galeriehome ul#contentw li div.hpvignette ul li {
	width:inherit;height:inherit;border-radius:10px;padding:4px;font-size:12px;color:white;display:inline;text-align:right;margin:2px;
}
/* couleurs des tech utilisé*/
.techps {background-color:#037ffd}
.techil {background-color:#fdcb03}
.techfl {background-color:#db270f}
.techid {background-color:#95329b}
.techbs {background-color:#95329b}
.techhtml {background-color:#ff4800}
.techcss {background-color:#0f77cf}
.techjs {background-color:#fde303}
.techbs {background-color:#8A2BE2}

/* fancy custome */
.fancybox-caption dd {margin:6px 0}
.fancybox-caption dd > span {padding:5px;color:white;border-radius:5px}
.fancybox-caption__body {max-height:100vh!important}
button.fancybox-button--share{display: none;}
/* icon play */

.galeriehome ul#contentw li div.playme {
	position:absolute;
	left:0;top:-80px;margin:0;padding:0;
	background:url(../images/play-icon.png) no-repeat center 0px;
	width:100%;
	height:80px;
	transition: all 0.2s ease-out;
}
.galeriehome ul#contentw li:hover div.playme {
	left:0;top:40px;margin:0;padding:0;

}

/* Presentation */
.profil {
	transform: rotate(-2deg);
	padding-bottom:1%; 
	margin-top:-50px;
	padding-top:50px;
	z-index:10;
	
	
	}
#prof2 {transform: rotate(2deg)}
.content h2 {
	font-family: 'Helvetica Neue LT Std3';
	text-align:center;	
	text-transform:uppercase;	
}
.content h2#mescrea { margin-top:0}

.content h2 span {display:inline-block;width:13px;height:13px;background-color:#1e1d1d;margin:5px 40px;transform: rotate(45deg);}

.profilskills{
	border-left:solid 1px #d4d3d2;
	font-family: 'Helvetica Neue LT Std';
}
.profilskills h3 {
	color:#27afd6;
}
.profilskills h3 span {
	display:block;
	color:#384042;
	line-height:50px;
	
}

.profilskills dl dd span {
	z-index:10;
	position:absolute;
	display:block;visibility:hidden;
	top:40px;
	right:-100%;
	background-color:#27afd6;
	color:white;
	border-radius:5px;
	padding:3px 13px;
	} 

.profilskills dl dd:hover span {visibility:visible;}

.profilskills dl dt {
	font-weight:bold;
	color:#384042;
	margin-top:10px;
	font-size:18px;
	}
	
.profilskills dl dt:before,.profilskills dl dt:after {
	content:"-";
	margin:0 15px;
}

.profilskills dl dd {color:#606465;position:relative}


.profilskills dl dt+dd~dd { 
	display:inline-block;
	width:30px;height:30px;
	border-radius:50%;
	border:3px solid black;
	
	filter: grayscale(0.9); /* filtre css3 mettre en noir et blanc */
    -webkit-filter: grayscale(0.9);
    -moz-filter: grayscale(0.9);
    -o-filter: grayscale(0.9);
    -ms-filter: grayscale(0.9);
}
.profilskills dl dt.reseaux+dd {
	display:inline-block;
	width:30px;height:30px;
	border-radius:50%;
	margin:8px;border:3px solid black;
}
.profilskills dl dt+dd~dd:hover{
	filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);	
	
}
.profilskills dt.skills+dd~dd:hover:before { /* on ser le triangle de bulle */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 4px 6.9px 4px;
	border-color: transparent transparent #27b0d6 transparent;
	line-height: 0px;
	_border-color: #000000 #000000 #27b0d6 #000000;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
	position: absolute;
	content: "";
	top: 35px;
	left: 10px;
}
.profilskills dl dt.skills+dd+dd{
	background:url(../images/ps.gif) no-repeat;
	border-color:#91ccff;
}

.profilskills dl dt.skills+dd+dd+dd{
	background:url(../images/ai.gif) no-repeat;
	border-color:#f9c35e;
}
.profilskills dl dt.skills+dd+dd+dd+dd{
	background:url(../images/dw.gif) no-repeat;
	border-color:#90fa07;
}
.profilskills dl dt.skills+dd+dd+dd+dd+dd{
	background:url(../images/fl.gif) no-repeat;
	border-color:#d02620;
}
.profilskills dl dt.skills+dd+dd+dd+dd+dd+dd{
	background:url(../images/id.gif) no-repeat;
	border-color:#ec46a5;
}
.profilskills dl dt.skills+dd+dd+dd+dd+dd+dd+dd{
	background:url(../images/np.gif) no-repeat;
	border-color:#96ed78;
}
.profilskills dl dt.skills+dd+dd+dd+dd+dd+dd+dd+dd{
	background:url(../images/bs.gif) no-repeat;
	border-color:#48306b;
}
.profilskills dl dt.skills+dd+dd+dd+dd+dd+dd+dd+dd+dd{
	background:url(../images/pss.gif) no-repeat;
	border-color:#bde8f3;
}
.profilskills dl dt.skills+dd+dd+dd+dd+dd+dd+dd+dd+dd+dd{
	background:url(../images/jl.gif) no-repeat;
	border-color:#628196;
}
.profilskills dl dt.skills+dd+dd+dd+dd+dd+dd+dd+dd+dd+dd+dd{
	background:url(../images/wp.gif) no-repeat;
	border-color:#a5d3e8;
}

/* On place correctement les bulles */
.profilskills dl dt.skills+dd+dd+dd:hover span {right:-80%;}
.profilskills dl dt.skills+dd+dd+dd+dd:hover span {right:-120%;}
.profilskills dl dt.skills+dd+dd+dd+dd+dd:hover span {right:-50%;}
.profilskills dl dt.skills+dd+dd+dd+dd+dd+dd:hover span {right:-80%;}
.profilskills dl dt.skills+dd+dd+dd+dd+dd+dd+dd+dd+dd+dd:hover span {right:-70%;}

.profilskills dl dt.rx+dd+dd+dd:hover span {right:-80%;}
.profilskills dl dt.rx+dd+dd+dd+dd:hover span {right:-50%;}
.profilskills dl dt.rx+dd+dd+dd+dd+dd:hover span {right:-70%;}
.profilskills dl dt.rx+dd+dd+dd+dd+dd+dd:hover span {right:-80%;}

.profilskills dl dt.globe+dd:hover span {right:-70%;}
.profilskills dl dt.globe+dd+dd:hover span {right:-55%;}
.profilskills dl dt.globe+dd+dd+dd:hover span {right:-80%;}
.profilskills dl dt.globe+dd+dd+dd+dd:hover span {right:-50%;}
.profilskills dl dt.globe+dd+dd+dd+dd+dd:hover span {right:-45%;}
.profilskills dl dt.globe+dd+dd+dd+dd+dd+dd:hover span {right:-55%;}

.profilskills dl dt~dt {
	margin-top:20px;
	
}

.profilskills dl dt.rx~dd {
	border:1px solid white;
	background: black url(../images/social2_fb.png) no-repeat;	
	-webkit-filter: invert(1); /* on inverse les couleurs grace au css */
	filter: invert(1);
}

 
.profilskills dl dt.rx~dd:hover {
	background-color:#27afd6;
	-webkit-filter: invert(0);
   filter: invert(0);   
}
.profilskills dl a {display:block;height:100%;} 
/* .profilskills dl dd a {display:block;height:100%} */

.profilskills dl dt.rx~dd+dd {background: black url(../images/social2_insta.png) no-repeat;}
.profilskills dl dt.rx~dd+dd+dd {background: black url(../images/social2_in.png) no-repeat;}
.profilskills dl dt.rx~dd+dd+dd+dd  {background: black url(../images/social2_tw.png) no-repeat;}
.profilskills dl dt.rx~dd+dd+dd+dd+dd   {background: black url(../images/social2_viadeo.png) no-repeat;}
/* .profilskills dl dt.rx~dd+dd+dd +dd+dd+dd   {background: black url(../images/social2_gg.png) no-repeat;} */

.profilskills dl dt.globe~dd,
.profilskills dl dt.globe~dd:hover{
   filter: invert(0);
   background-color:inherit;
   border-color:#eee;
}

.profilskills dl dt.globe~dd {background:  url(../images/flag-fr.png) no-repeat;}
.profilskills dl dt.globe~dd+dd {background:  url(../images/flag-ma.png) no-repeat;}
.profilskills dl dt.globe~dd+dd+dd {background:  url(../images/flag-es.png) no-repeat;}
.profilskills dl dt.globe~dd+dd+dd+dd {background:  url(../images/flag-gr.png) no-repeat;}
.profilskills dl dt.globe~dd+dd+dd+dd+dd {background: url(../images/flag-it.png) no-repeat;}
.profilskills dl dt.globe~dd+dd+dd+dd+dd+dd {background: url(../images/flag-jp.png) no-repeat;}



/* CONTACT US */

.contact h2 span {background-color:white}
.contact {
	margin-top:-2%;
	background-color:#201f1f;color:white;
	padding-top:2%;
	}

form {
	
	border:0;	
}

fieldset {border:0;padding:0}

form input {height:50px;border:solid 1px white;border-radius:15px;color:#6d6d6d}

form textarea {/*padding:10px;margin:8px;*/border-radius:15px;min-height:300px;color:#6d6d6d;border:solid 1px white;}
form input:focus,form textarea:focus {color:#27afd6;border-color:#27afd6}
form #bouton {display:block;background:none;color:white;font-size:20px;width:200px;margin:40px auto;padding:0;cursor: pointer;border:1px solid #27afd6}
form #bouton:hover {background:#27afd6}

.contact p{ text-align:center;font-family:arial;line-height:20px}


.galeriehome {position:relative;overflow:hidden}
ul#contentw {z-index:2;position:relative;}
#particles-js{
	position:absolute;
	left:0;top:-100px;height:200%;
	width:100%;
	background:#faf8f7;
	background-size: cover;
	background-position: 50% 50%;	
	background-repeat: no-repeat;
	z-index:1;
	padding-bottom:20px;
	}




/* RESPONSIVE */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	
.crossfade > figure {animation: none}
#particles-js {display:none}
.galeriehome ul#contentw {padding-top:0}
.content h2 {padding-top: 100px;}
	
	.content h2 span {margin:5px 20px!important;}
	.fancybox-caption dd {
    margin: 6px 2px!important ;
    display: inline-block;}
	.fancybox-caption__body{background: rgba(0, 0, 0, 0.4)}
	#sociallink {
	height:60px;
	line-height:60px;
	background-color:white;
	z-index:3;
	}
	#sociallink div {
		padding:0;
		width:100%;
		z-index:10;
	}
	#sociallink div ul {
		background-color:white;
		
	}
	#sociallink div li{
		width:24px;
		height:24px;
		z-index:10;
		margin:20px 4px;
	}
	#sociallink div ul li a {
		width:100%;height:100%;
		background-size: 100% 200%;
	}
	#sociallink div dl dt {
		display:none;
	}
	#hpbc {
		z-index:0;
		background:url(../images/bg-top-mob.png) no-repeat bottom center;
		position:absolute;
		left:0;top:-77px;
		width:100%;height:294px;
	}

	div#pme {
	z-index:8;
	position:absolute;
	top:80px;
	left:22%;
	height:200px;
	width:200px;
	background:url(../images/me.jpg) no-repeat left top;
	background-size:100%;
	-webkit-clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	}
	div#pme dl {padding:45px 20px 0;}
	div#pme dl dt,div#pme dl dd {display:none}
	div#pme dl dd+dd+dd {display:block}
	div#pme dl dd+dd {margin-bottom:20px}
	div#pme dl dd {font-size:15px;}
	#htitle {margin-top:220px;}
	#htitle #title  {width: 344px;text-align:center;}
	#htitle #title  h1{font-size:41px;width:100%;}
	#htitle h1 span {bottom:-21px;right:0;}
	#htitle div#banim {height:55px;}
	#htitle h2 {font-size:44px;}
	
	@keyframes anim-1 {
		0%, 8.3% { left: -100%; opacity: 0; }
		8.3%,25% { left: 0px; opacity: 1; }
		33.33%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-2 {
		0%, 33.33% { left: -100%; opacity: 0; }
		41.63%, 58.29% { left: 0px; opacity: 1; }
		66.66%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-3 {
		0%, 66.66% { left: -100%; opacity: 0; }
		74.96%, 91.62% { left: 0px; opacity: 1; }
		100% { left: 110%; opacity: 0; }
	}
	.item-1,.item-2, .item-3 {width: 100%;}
	
	div#menu {
	z-index:9;
	position:absolute;
	right:12px;
	top:12px;
	width:40px;
	height:40px;
	background:black url(../images/menu.png) no-repeat center center;
	border-radius:4px
	}
	/* div#menu:hover {background-color:#27afd6} */
	div#menu ul{
		/*visibility:hidden;*/
		width:100%;
		transition: all 0.4s ease;
		z-index:10;
		position:absolute;
		/*right:-270px;top:-12px;*/
		right:-12px;top:-12px;
		background-color:#2e2b29;
		width:250px;
		height:100vh;
	}
	.oModal {
		opacity:0;
		pointer-events: none;
		}
	.oModal:target {
	opacity:1;
	pointer-events: auto;
	}
	div#menu a#lkopen {position:absolute;display:block;right: 0px;top: 0px;width: 40px;height: 40px;}
	div#menu a#lkopen span,div#menu ul li a#lkclose span {display:none;}
	div#menu ul li a#lkclose {
			z-index:15;
			position:absolute;
			display:block;right: 15px;top: 12px;
			width: 40px;height: 40px;
			padding:0;
			}
	div#menu ul li a#lkclose::before {content:"";margin-right:0px; display: inherit;;  }
	/* div#menu ul li a#lkclose:hover::before {transform:none;} */
	/* div#menu ul li a#lkclose:hover {background-color:#27afd6;color:#27afd6;} */
	/* div#menu:hover ul{display:block;width:100%;} */
	/* div#menu ul li.menubt{display:none;} */
	/* div#menu:hover ul li.menubt{display:block;} */
	div#menu ul li.menubt{
			display:block;color:#16afdf;
			background-color:#f3f3f3;
			width:200px;padding-right: 54px;
			text-transform: uppercase;
			position:relative;
			line-height:60px;
			font-size:26px
			}
	div#menu ul li.menubt::after {
		content:"";
		background:url(../images/menu2.png) no-repeat top right;
		backdrop-filter: invert(1);
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        -ms-filter: invert(1);
		width:21px;
		height:18px;
		position:absolute;
		right:25px;
		top:23px;
	}
	/* div#menu:hover ul{ */
		/* visibility:visible; */
		/* position:absolute; */
		/* right:-12px;top:-12px; */
		/* } */
	div#menu ul li a {padding:15px 10px;color:white}
	/* div#menu:hover ul li.menubt~li { */
		/* display:block; */
		/* width:100%;	 */
	/* } */
	
	
	#sociallink div ul li a {background:url(../images/social_fb2.gif)}
	#sociallink div ul li+li a {background:url(../images/social_tw2.gif)}
	#sociallink div ul li+li+li a {background:url(../images/social_gg2.gif)}
	#sociallink div ul li+li+li+li a {background:url(../images/social_in2.gif)}
	#sociallink div ul li+li+li+li+li a {background:url(../images/social_vd2.gif)}
	#sociallink div ul li+li+li+li+li+li a {background:url(../images/social_insta2.gif)}

	#sociallink div dl{
	float:left;	
	/* transformation du block 
	-webkit-transform: skew(-15deg);
	-moz-transform: skew(-15deg);
	transform: skew(-15deg);*/
	color:white;
	font-size:14px;
	}
	div#menu ul li {	line-height:40px;display:block}
	#sociallink div dl dd a span {visibility:hidden;font-size:1px}
	#sociallink div dl dd a{
		background:url(../images/cv-pdf.jpg) no-repeat center center;
		width:27px;
	}
	#sociallink div dl dd+dd a {background:url(../images/cv-word.jpg) no-repeat center center;}
	div#cm {display:none}
	#htitle ul {
	margin-top:10px;}
	#htitle ul li {	margin:0 0 10px 10px;}
	
	header {
	z-index:0;
	background-color:#e8e2df;overflow:hidden;
	min-height: 100vh; /* La hauteur de la div fait 80% de la hauteurs */
	position:relative;
	}
	header div#cm2 {
	position:absolute;
	bottom:-10px;left:-1%;height:20px;
	background:#faf8f7;
	z-index:10;
	width:102%;
	transform:rotate(-2deg);
	}
	
	.galeriehome ul#contentw li {
	width:92%;
	margin:4%; 
	height:200px;
	font-size:14px;}
	.galeriehome ul#contentw li:hover div.playme {left:0;top:10px;margin:0;padding:0;}
	.galeriehome ul#contentw li div.hpvignette h2 {margin:10px;}
	.galeriehome ul#contentw li div.hpvignette ul {bottom:5px;right:5px;}
	.profilphoto {text-align:center}
	.profilphoto img {width:50%;height:50%}
	.content h2 {
	font-size:24px;
	margin:30px 0 30px;}
	.profilskills{text-align:center;padding:25px 25px 0}
	.profilskills h3 {font-size:33px;}
	.profilskills h3 span {margin-bottom:20px}
	.profilskills dl dt+dd~dd {margin:8px 8px 19px;}
	.profil {
	margin:0 0 0 -6%; /*a cause de la transformation on vois l'angle bas gauche, on deplace alors le block vers la gauche */
	background-color:white;
	width:112%; /* on agrandi le block qui sera cacher par le content en overflow*/
	}
	form {padding:10px;}
	form input {margin:8px 0;width:98%;padding-left:10px}
	form textarea {width:96%;padding:10px;margin:8px 0;}
} /**/

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) and (max-width: 767px) {
		#sociallink {
	height:60px;
	line-height:60px;
	background-color:white;
	z-index:3;
	}
	#sociallink div {
		padding:0;
		width:100%;
		z-index:10;
	}
	#sociallink div ul {
		background-color:white;
		
	}
	#sociallink div li{
		width:24px;
		height:24px;
		z-index:10;
		margin:20px 4px;
	}
	#sociallink div ul li a {
		width:100%;height:100%;
		background-size: 100% 200%;
	}
	#sociallink div dl dt {
		display:none;
	}
	#hpbc {
		z-index:0;
		background:url(../images/bg-top-mob.png) no-repeat bottom center;
		position:absolute;
		left:0;top:-77px;
		width:100%;height:294px;
	}

	div#pme {
	z-index:8;
	position:absolute;
	top:80px;
	left:35%;
	height:200px;
	width:200px;
	background:url(../images/me.jpg) no-repeat left top;
	background-size:100%;
	-webkit-clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	}
	div#pme dl {padding:45px 20px 0;}
	div#pme dl dt,div#pme dl dd {display:none}
	div#pme dl dd+dd+dd {display:block}
	div#pme dl dd+dd {margin-bottom:20px}
	div#pme dl dd {font-size:15px;}
	#htitle {margin-top:220px;}
	#htitle #title  {width: 344px;text-align:center;}
	#htitle #title  h1{font-size:41px;width:100%;}
	#htitle h1 span {bottom:-21px;right:0;}
	#htitle div#banim {height:55px;}
	#htitle h2 {font-size:44px;}
	
	@keyframes anim-1 {
		0%, 8.3% { left: -100%; opacity: 0; }
		8.3%,25% { left: 0px; opacity: 1; }
		33.33%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-2 {
		0%, 33.33% { left: -100%; opacity: 0; }
		41.63%, 58.29% { left: 0px; opacity: 1; }
		66.66%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-3 {
		0%, 66.66% { left: -100%; opacity: 0; }
		74.96%, 91.62% { left: 0px; opacity: 1; }
		100% { left: 110%; opacity: 0; }
	}
	.item-1,.item-2, .item-3 {width: 100%;}
	
	div#menu {
	z-index:9;
	position:absolute;
	right:12px;
	top:12px;
	width:40px;
	height:40px;
	background:black url(../images/menu.png) no-repeat center center;
	border-radius:4px
	}
	/* div#menu:hover {background-color:#27afd6} */
	div#menu ul{
		/*visibility:hidden;*/
		width:100%;
		transition: all 0.4s ease;
		z-index:10;
		position:absolute;
		/*right:-270px;top:-12px;*/
		right:-12px;top:-12px;
		background-color:#2e2b29;
		width:250px;
		height:100vh;
	}
	.oModal {
		opacity:0;
		pointer-events: none;
		}
	.oModal:target {
	opacity:1;
	pointer-events: auto;
	}
	div#menu a#lkopen {position:absolute;display:block;right: 0px;top: 0px;width: 40px;height: 40px;}
	div#menu a#lkopen span,div#menu ul li a#lkclose span {display:none;}
	div#menu ul li a#lkclose {
			z-index:15;
			position:absolute;
			display:block;right: 15px;top: 12px;
			width: 40px;height: 40px;
			padding:0;
			}
	div#menu ul li a#lkclose::before {content:"";margin-right:0px; display: inherit;;  }
	/* div#menu:hover ul{display:block;width:100%;} */
	/* div#menu ul li.menubt{display:none;} */
	div#menu:hover ul li.menubt{display:block;}
	div#menu ul li.menubt{
			display:block;color:#16afdf;background-color:#f3f3f3;width:200px;padding-right: 54px;text-transform: uppercase;position:relative;line-height:60px;font-size:26px
			}
	div#menu ul li.menubt::after { 
		content:"";
		background:url(../images/menu2.png) no-repeat top right;
		backdrop-filter: invert(1);
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        -ms-filter: invert(1);
		width:21px;
		height:18px;
		position:absolute;
		right:25px;
		top:23px;
	}
	div#menu:hover ul{
		visibility:visible;
		position:absolute;
		right:-12px;top:-12px;
		}
	div#menu ul li a {padding:15px 10px;color:white}
	div#menu:hover ul li.menubt~li {
		display:block;
		width:100%;	
	}
	
	
	#sociallink div ul li a {background:url(../images/social_fb2.gif)}
	#sociallink div ul li+li a {background:url(../images/social_tw2.gif)}
	#sociallink div ul li+li+li a {background:url(../images/social_gg2.gif)}
	#sociallink div ul li+li+li+li a {background:url(../images/social_in2.gif)}
	#sociallink div ul li+li+li+li+li a {background:url(../images/social_vd2.gif)}
	#sociallink div ul li+li+li+li+li+li a {background:url(../images/social_insta2.gif)}

	#sociallink div dl{
	float:left;	
	/* transformation du block 
	-webkit-transform: skew(-15deg);
	-moz-transform: skew(-15deg);
	transform: skew(-15deg);*/
	color:white;
	font-size:14px;
	}
	div#menu ul li {	line-height:40px;display:block}
	#sociallink div dl dd a span {visibility:hidden;font-size:1px}
	#sociallink div dl dd a{
		background:url(../images/cv-pdf.jpg) no-repeat center center;
		width:27px;
	}
	#sociallink div dl dd+dd a {background:url(../images/cv-word.jpg) no-repeat center center;}
	div#cm {display:none}
	#htitle ul {
	margin-top:10px;}
	#htitle ul li {	margin:0 0 10px 10px;}
	
	header {
	z-index:0;
	background-color:#e8e2df;overflow:hidden;
	min-height: 100vh; /* La hauteur de la div fait 80% de la hauteurs */
	position:relative;
	}
	header div#cm2 {
	position:absolute;
	bottom:-12px;left:-1%;height:20px;
	background:#faf8f7;
	z-index:10;
	width:102%;
	transform:rotate(-2deg);
	}
	
	.galeriehome ul#contentw li {
	width:42%;
	margin:4%; 
	height:200px;
	font-size:14px;}
	.galeriehome ul#contentw li:hover div.playme {left:0;top:10px;margin:0;padding:0;}
	.galeriehome ul#contentw li div.hpvignette h2 {margin:10px;}
	.galeriehome ul#contentw li div.hpvignette ul {bottom:5px;right:5px;}
	.profilphoto {text-align:center}
	.profilphoto img {width:50%;height:50%}
	.content h2 {
	font-size:24px;
	margin:30px 0 30px;}
	.profilskills{text-align:center;padding:25px 25px 0}
	.profilskills h3 {font-size:33px;}
	.profilskills h3 span {margin-bottom:20px}
	.profilskills dl dt+dd~dd {margin:8px 8px 19px;}
	.profil {
	margin:0 0 0 -6%; /*a cause de la transformation on vois l'angle bas gauche, on deplace alors le block vers la gauche */
	background-color:white;
	width:112%; /* on agrandi le block qui sera cacher par le content en overflow*/
	}
	form {padding:10px;}
	form input {margin:8px 0;width:98%;padding-left:10px}
	form textarea {width:96%;padding:10px;margin:8px 0;}
	
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	#sociallink div {
	width:492px; /*1280 */
	margin: 0 auto;
	padding-left:228px;
}

	#sociallink {
		height:36px;
		line-height:36px;
	}
	#sociallink div ul li{
		height:21px;width:21px;
		margin:7px;
	}
	/* On installe le cache noir */
	#hpbc {
		position:absolute;
		z-index:2;
		left:-85%;
		top:-70%;
		height:200%;
		width:100%;
		background:black url(../images/bgblk.png) left top repeat;
		transform:rotate(23deg);
	}
	div#pme {
	z-index:10;
	position:absolute;
	top:25%;
	left:0;height:300px;
	width:300px;
	background-size:300px 300px;
	background-image:url(../images/me.jpg);
	-webkit-clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	}
	div#pme dl {padding:35px 20px 0;}
	div#pme dl dt {font-size:23px;}
	div#pme dl dd+dd {margin-bottom:30px}
	div#pme dl dd {font-size:15px;}
	#htitle {margin-top:195px;}
	#htitle #title  {width:100%;text-align:right;}
	#htitle #title  h1{font-size:63px;}
	#htitle h1 span {bottom:-21px;right:0;}
	#htitle div#banim {height:65px;}
	#htitle h2 {font-size:54px;text-align:right}
	
	@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
	8.3%,25% { left: 35%; opacity: 1; }
	33.33%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-2 {
		0%, 33.33% { left: -100%; opacity: 0; }
	  41.63%, 58.29% { left: 35%; opacity: 1; }
	  66.66%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
	  74.96%, 91.62% { left: 35%; opacity: 1; }
	  100% { left: 110%; opacity: 0; }
	}
	div#menu {
	z-index:10;
	position:absolute;
	left:-10px;
	bottom:32px;
	width:102%;
	background-color:white;
	transform: rotate(-2deg);
	}
	div#menu ul{
		/*width:1280px;*/
		text-align: center;
		}
	.item-1,.item-2, .item-3 {width: 60%;}
	div#menu ul li.menubt{display:none}
	#sociallink div dl{
	float:right;	
	background-color:#1e1d1d;
	/* transformation du block */
	-webkit-transform: skew(-15deg);
	-moz-transform: skew(-15deg);
	transform: skew(-15deg);
	color:white;
	font-size:14px;
	}
	#sociallink div ul li a {background:url(../images/social_fb.gif)}
	#sociallink div ul li+li a {background:url(../images/social_tw.gif)}
	#sociallink div ul li+li+li a {background:url(../images/social_gg.gif)}
	#sociallink div ul li+li+li+li a {background:url(../images/social_in.gif)}
	#sociallink div ul li+li+li+li+li a {background:url(../images/social_vd.gif)}
	#sociallink div ul li+li+li+li+li+li a {background:url(../images/social_insta.gif)}

	#sociallink div dl dd {border-left: solid white 2px;}
	#sociallink div dl dt a:hover,#sociallink div dl dd a:hover{
	background-color:#27afd6;
	text-decoration: none;
	transition: background-color 0.12s;
	}
	div#menu div#cm { /* on insere un cache pour patcher la soudeurs entre menu et contenue */
	z-index:5;
	position:absolute;
	left:-10px;
	bottom:-99px;
	width:102%;
	height:100px;
	background:#faf8f7;
	}
	div#menu ul li {	line-height:65px;}
	div#menu ul li {display:inline-block;}
	div#menu ul li a {padding:0 10px;color:black;height:65px;}
	
	#htitle ul {
	margin-top:90px;text-align: right;padding-right: 20px;}
	#htitle ul li {	margin-left:60px;}
	#htitle ul li+li {
	border-left:1px solid black;
	}
	header {
	z-index:0;
	background-color:#e8e2df;overflow:hidden;
	height: 85vh; /* La hauteur de la div fait 80% de la hauteurs */
	min-height:850px;
	position:relative;
	}
	#cm2{display:none}
	.galeriehome ul#contentw li {
	width:48%;
	margin:1%; 
	height:300px;
	font-size:14px;}
	.galeriehome ul#contentw li:hover div.playme {left:0;top:40px;margin:0;padding:0;}
	.galeriehome ul#contentw li div.hpvignette h2 {margin:20px 20px 10px;}
	.galeriehome ul#contentw li div.hpvignette ul {bottom:20px;right:20px;}
	.profil,.contact {min-height:90vh;}
	.center {
	margin:0 auto;}
	.profilphoto {
	text-align:center
	}
	.content h2 {
	font-size:34px;
	margin:50px 0 90px;}
	.profilskills{
	text-align:center;}
	.profilskills h3 {font-size:53px;}
	.profilskills h3 span {margin-bottom:60px}
	.profilskills dl dt+dd~dd {margin:8px;}
	.profil {
	margin:0 0 0 -5%; /*a cause de la transformation on vois l'angle bas gauche, on deplace alors le block vers la gauche */
	background-color:white;
	width:110%; /* on agrandi le block qui sera cacher par le content en overflow*/
	}
	form {
	
	margin:0 auto 50px ;
	padding:0;	
	}
	form input {margin:8px;width:289px;padding-left:5px;box-sizing : border-box;}
	form textarea {width:100%;padding:5px;box-sizing : border-box;}
	fieldset {padding:10px;}
	
}

/**/

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 999px) {
	.fancybox-navigation .fancybox-button--arrow_right {right: 301px!important}
	#sociallink div {
	width:636px; /*1280 */
	margin: 0 auto;
	padding-left:300px;
}

	#sociallink {
		height:36px;
		line-height:36px;
	}
	#sociallink div ul li{
		height:21px;width:21px;
		margin:7px;
	}
	/* On installe le cache noir */
	#hpbc {
		position:absolute;
		z-index:2;
		left:-85%;
		top:-70%;
		height:200%;
		width:100%;
		background:black url(../images/bgblk.png) left top repeat;
		transform:rotate(23deg);
	}
	div#pme {
	z-index:10;
	position:absolute;
	top:25%;
	left:0;height:300px;
	width:300px;
	background-size:300px 300px;
	background-image:url(../images/me.jpg);
	-webkit-clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	}
	div#pme dl {padding:35px 20px 0;}
	div#pme dl dt {font-size:23px;}
	div#pme dl dd+dd {margin-bottom:30px}
	div#pme dl dd {font-size:15px;}
	#htitle {margin-top:195px;}
	#htitle #title  {width:100%;text-align:right;}
	#htitle #title  h1{font-size:96px;}
	#htitle h1 span {bottom:-21px;right:0;}
	#htitle div#banim {height:115px;}
	#htitle h2 {font-size:79px;text-align:right}
	
	@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
	8.3%,25% { left: 35%; opacity: 1; }
	33.33%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-2 {
		0%, 33.33% { left: -100%; opacity: 0; }
	  41.63%, 58.29% { left: 35%; opacity: 1; }
	  66.66%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
	  74.96%, 91.62% { left: 35%; opacity: 1; }
	  100% { left: 110%; opacity: 0; }
	}
	div#menu {
	z-index:10;
	position:absolute;
	left:-10px;
	bottom:32px;
	width:102%;
	background-color:white;
	transform: rotate(-2deg);
	}
	div#menu ul{
		/*width:1280px;*/
		text-align: center;
		}
	.item-1,.item-2, .item-3 {width: 60%;}
	div#menu ul li.menubt{display:none}
	#sociallink div dl{
	float:right;	
	background-color:#1e1d1d;
	/* transformation du block */
	-webkit-transform: skew(-15deg);
	-moz-transform: skew(-15deg);
	transform: skew(-15deg);
	color:white;
	font-size:14px;
	}
	#sociallink div ul li a {background:url(../images/social_fb.gif)}
	#sociallink div ul li+li a {background:url(../images/social_tw.gif)}
	#sociallink div ul li+li+li a {background:url(../images/social_gg.gif)}
	#sociallink div ul li+li+li+li a {background:url(../images/social_in.gif)}
	#sociallink div ul li+li+li+li+li a {background:url(../images/social_vd.gif)}
	#sociallink div ul li+li+li+li+li+li a {background:url(../images/social_insta.gif)}

	#sociallink div dl dd {border-left: solid white 2px;}
	#sociallink div dl dt a:hover,#sociallink div dl dd a:hover{
	background-color:#27afd6;
	text-decoration: none;
	transition: background-color 0.12s;
	}
	div#menu div#cm { /* on insere un cache pour patcher la soudeurs entre menu et contenue */
	z-index:5;
	position:absolute;
	left:-10px;
	bottom:-99px;
	width:102%;
	height:100px;
	background:#faf8f7;
	}
	div#menu ul li {	line-height:65px;}
	div#menu ul li {display:inline-block;}
	div#menu ul li a {padding:0 10px;color:black;height:65px;}
	
	#htitle ul {
	margin-top:45px;}
	#htitle ul li {	margin-left:60px;}
	#htitle ul li+li {
	border-left:1px solid black;
	}
	header {
	z-index:0;
	background-color:#e8e2df;overflow:hidden;
	height: 85vh; /* La hauteur de la div fait 80% de la hauteurs */
	min-height:850px;
	position:relative;
	}
	#cm2{display:none}
	.galeriehome ul#contentw li {
	width:31%;
	margin:1%; 
	height:300px;
	font-size:14px;}
	.galeriehome ul#contentw li:hover div.playme {left:0;top:40px;margin:0;padding:0;}
	.galeriehome ul#contentw li div.hpvignette h2 {margin:20px 20px 10px;}
	.galeriehome ul#contentw li div.hpvignette ul {bottom:20px;right:20px;}
	.profil,.contact {min-height:90vh;}
	.center {
	margin:0 auto;}
	.profilphoto {
	text-align:center
	}
	.content h2 {
	font-size:34px;
	margin:50px 0 90px;}
	.profilskills{
	text-align:center;}
	.profilskills h3 {font-size:53px;}
	.profilskills h3 span {margin-bottom:60px}
	.profilskills dl dt+dd~dd {margin:8px;}
	.profil {
	margin:0 0 0 -5%; /*a cause de la transformation on vois l'angle bas gauche, on deplace alors le block vers la gauche */
	background-color:white;
	width:110%; /* on agrandi le block qui sera cacher par le content en overflow*/
	}
	form {
	
	margin:0 auto 50px ;
	padding:0;	
	}
	form input {margin:8px;width:289px;padding-left:5px;box-sizing : border-box;}
	form textarea {width:100%;padding:5px;box-sizing : border-box;}
	fieldset {padding:10px;}
	
}

/* Petit ecran */
@media only screen and (min-width: 1290px) {
	.galeriehome ul#contentw {width:80%;margin:0 auto}
	.fancybox-navigation .fancybox-button--arrow_right {right: 301px!important}
	#sociallink div {
	width:742px; /*1280 */
	margin: 0 auto;
	padding-left:538px;
}
		#sociallink {
		height:36px;
		line-height:36px;
	}
	#sociallink div ul li{
		height:21px;width:21px;
		margin:7px;
	}
	/* On installe le cache noir */
	#hpbc {
		position:absolute;
		z-index:2;
		left:-80%;
		top:-70%;
		height:200%;
		width:100%;
		background:black url(../images/bgblk.png) left top repeat;
		transform:rotate(23deg);
	}
	div#pme {
	z-index:10;
	position:absolute;
	top:25%;
	left:5%;height:400px;
	width:400px;
	background:url(../images/me.jpg);
	-webkit-clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	}
	div#pme dl {padding:90px 20px 0;}
	div#pme dl dt {font-size:34px;}
	div#pme dl dd+dd {margin-bottom:30px}
	div#pme dl dd {font-size:17px;}
	#htitle {margin-top:195px;}
	#htitle #title  {width: 1280px;text-align:right;}
	#htitle #title  h1{font-size:96px;}
	#htitle h1 span {bottom:-21px;right:0;}
	#htitle div#banim {height:115px;}
	#htitle h2 {font-size:98px;}
	
	@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
	8.3%,25% { left: 35%; opacity: 1; }
	33.33%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-2 {
		0%, 33.33% { left: -100%; opacity: 0; }
	  41.63%, 58.29% { left: 35%; opacity: 1; }
	  66.66%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
	  74.96%, 91.62% { left: 35%; opacity: 1; }
	  100% { left: 110%; opacity: 0; }
	}
	div#menu {
	z-index:10;
	position:absolute;
	left:-10px;
	bottom:32px;
	width:102%;
	background-color:white;
	transform: rotate(-2deg);
	}
	div#menu ul{width:1280px;text-align:right;}
	.item-1,.item-2, .item-3 {width: 60%;}
	div#menu ul li.menubt{display:none}
	#sociallink div dl{
	float:right;	
	background-color:#1e1d1d;
	/* transformation du block */
	-webkit-transform: skew(-15deg);
	-moz-transform: skew(-15deg);
	transform: skew(-15deg);
	color:white;
	font-size:14px;
	}
	#sociallink div ul li a {background:url(../images/social_fb.gif)}
	#sociallink div ul li+li a {background:url(../images/social_tw.gif)}
	#sociallink div ul li+li+li a {background:url(../images/social_gg.gif)}
	#sociallink div ul li+li+li+li a {background:url(../images/social_in.gif)}
	#sociallink div ul li+li+li+li+li a {background:url(../images/social_vd.gif)}
	#sociallink div ul li+li+li+li+li+li a {background:url(../images/social_insta.gif)}

	#sociallink div dl dd {border-left: solid white 2px;}
	#sociallink div dl dt a:hover,#sociallink div dl dd a:hover{
	background-color:#27afd6;
	text-decoration: none;
	transition: background-color 0.12s;
	}
	div#menu div#cm { /* on insere un cache pour patcher la soudeurs entre menu et contenue */
	z-index:5;
	position:absolute;
	left:-10px;
	bottom:-99px;
	width:102%;
	height:100px;
	background:#faf8f7;
	}
	div#menu ul li {	line-height:65px;}
	div#menu ul li {display:inline-block;}
	div#menu ul li a {padding:0 10px;color:black;height:65px;}
	
	#htitle ul {
	margin-top:15px;
	width:1280px;
	text-align:right;}
	#htitle ul li {	margin-left:70px;}
	#htitle ul li+li {
	border-left:1px solid black;
	}
	header {
	z-index:0;
	background-color:#e8e2df;overflow:hidden;
	height: 85vh; /* La hauteur de la div fait 80% de la hauteurs */
	min-height:850px;
	position:relative;
	}
	#cm2{display:none}
	.galeriehome ul#contentw li {
	width:31%;
	margin:1%; 
	height:300px;
	font-size:14px;}
	.galeriehome ul#contentw li:hover div.playme {left:0;top:40px;margin:0;padding:0;}
	.galeriehome ul#contentw li div.hpvignette h2 {margin:20px 20px 10px;}
	.galeriehome ul#contentw li div.hpvignette ul {bottom:20px;right:20px;}
	.profil,.contact {min-height:90vh;}
	.center {
	width:1320px;
	margin:0 auto;}
	.profilphoto {
	float:left;
	width:37%;padding-top:100px;
	text-align:center
	}
	.content h2 {
	font-size:34px;
	margin:50px 0 90px;}
	.profilskills{
	float:left;
	width:62%;
	text-align:center;}
	.profilskills h3 {font-size:53px;}
	.profilskills h3 span {margin-bottom:60px}
	.profilskills dl dt+dd~dd {margin:8px;}
	.profil {
	margin:0 0 0 -5%; /*a cause de la transformation on vois l'angle bas gauche, on deplace alors le block vers la gauche */
	background-color:white;
	width:110%; /* on agrandi le block qui sera cacher par le content en overflow*/
	}
	form {
	width:950px;
	margin:0 auto 50px ;
	padding:0;	
	}
	form input {margin:8px;width:289px;padding-left:5px;}
	form textarea {width:900px;padding:10px;margin:8px;}
	
}

/*grand écran */
@media only screen and (min-width: 1500px) {
	.galeriehome ul#contentw {width:80%;margin:0 auto}
	.fancybox-navigation .fancybox-button--arrow_right {right: 301px!important}
	#sociallink div {
	width:782px; /*1280 */
	margin: 0 auto;
	padding-left:497px;
	}
	#sociallink {
		height:36px;
		line-height:36px;
	}
	#sociallink div ul li{
		height:21px;width:21px;
		margin:7px;
	}
	/* On installe le cache noir */
	#hpbc {
		position:absolute;
		z-index:2;
		left:-72%;
		top:-70%;
		height:200%;
		width:100%;
		background:black url(../images/bgblk.png) left top repeat;
		transform:rotate(23deg);
	}
	div#pme {
	z-index:10;
	position:absolute;
	top:25%;
	left:15%;height:400px;
	width:400px;
	background:url(../images/me.jpg);
	-webkit-clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	clip-path: polygon(30% 0, 74% 0, 99% 34%, 95% 78%, 50% 100%, 4% 75%, 0 28%);
	}
	div#pme dl {padding:90px 20px 0;}
	div#pme dl dt {font-size:34px;}
	div#pme dl dd+dd {margin-bottom:30px}
	div#pme dl dd {font-size:17px;}
	#htitle {margin-top:195px;}
	#htitle #title  {width: 1280px;text-align:right;}
	#htitle #title  h1{font-size:96px;}
	#htitle h1 span {bottom:-21px;right:0;}
	#htitle div#banim {height:115px;}
	#htitle h2 {font-size:98px;text-align:center}
	
	@keyframes anim-1 {
	0%, 8.3% { left: -100%; opacity: 0; }
	8.3%,25% { left: 35%; opacity: 1; }
	33.33%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-2 {
		0%, 33.33% { left: -100%; opacity: 0; }
	  41.63%, 58.29% { left: 35%; opacity: 1; }
	  66.66%, 100% { left: 110%; opacity: 0; }
	}

	@keyframes anim-3 {
	0%, 66.66% { left: -100%; opacity: 0; }
	  74.96%, 91.62% { left: 35%; opacity: 1; }
	  100% { left: 110%; opacity: 0; }
	}
	div#menu {
	z-index:10;
	position:absolute;
	left:-10px;
	bottom:32px;
	width:102%;
	background-color:white;
	transform: rotate(-2deg);
	}
	div#menu ul{width:1280px;text-align:right;}
	.item-1,.item-2, .item-3 {width: 60%;}
	div#menu ul li.menubt{display:none}
	#sociallink div dl{
	float:right;	
	background-color:#1e1d1d;
	/* transformation du block */
	-webkit-transform: skew(-15deg);
	-moz-transform: skew(-15deg);
	transform: skew(-15deg);
	color:white;
	font-size:14px;
	}
	#sociallink div ul li a {background:url(../images/social_fb.gif)}
	#sociallink div ul li+li a {background:url(../images/social_tw.gif)}
	/* #sociallink div ul li+li+li a {background:url(../images/social_gg.gif)} */
	#sociallink div ul li+li+li a {background:url(../images/social_in.gif)}
	#sociallink div ul li+li+li+li a {background:url(../images/social_vd.gif)}
	#sociallink div ul li+li+li+li+li a {background:url(../images/social_insta.gif)}

	#sociallink div dl dd {border-left: solid white 2px;}
	#sociallink div dl dt a:hover,#sociallink div dl dd a:hover{
	background-color:#27afd6;
	text-decoration: none;
	transition: background-color 0.12s;
	}
	div#menu div#cm { /* on insere un cache pour patcher la soudeurs entre menu et contenue */
	z-index:5;
	position:absolute;
	left:-10px;
	bottom:-99px;
	width:102%;
	height:100px;
	background:#faf8f7;
	}
	div#menu ul li {	line-height:65px;}
	div#menu ul li {display:inline-block;}
	div#menu ul li a {padding:0 10px;color:black;height:65px;}
	
	#htitle ul {
	margin-top:15px;
	width:1280px;
	text-align:right;}
	#htitle ul li {	margin-left:70px;}
	#htitle ul li+li {
	border-left:1px solid black;
	}
	header {
	z-index:0;
	background-color:#e8e2df;overflow:hidden;
	height: 85vh; /* La hauteur de la div fait 80% de la hauteurs */
	min-height:850px;
	position:relative;
	}
	#cm2{display:none}
	.galeriehome ul#contentw li {
	width:23%;
	margin:1%; 
	height:300px;
	font-size:14px;}
	.galeriehome ul#contentw li:hover div.playme {left:0;top:40px;margin:0;padding:0;}
	.galeriehome ul#contentw li div.hpvignette h2 {margin:20px 20px 10px;}
	.galeriehome ul#contentw li div.hpvignette ul {bottom:20px;right:20px;}
	.profil,.contact {min-height:90vh;}
	.center {
	width:1320px;
	margin:0 auto;}
	.profilphoto {
	float:left;
	width:37%;padding-top:100px;
	text-align:center
	}
	.content h2 {
	font-size:34px;
	margin:50px 0 90px;}
	.profilskills{
	float:left;
	width:62%;
	text-align:center;}
	.profilskills h3 {font-size:53px;}
	.profilskills h3 span {margin-bottom:60px}
	.profilskills dl dt+dd~dd {margin:8px;}
	.profil {
	margin:0 0 0 -5%; /*a cause de la transformation on vois l'angle bas gauche, on deplace alors le block vers la gauche */
	background-color:white;
	width:110%; /* on agrandi le block qui sera cacher par le content en overflow*/
	}
	form {
	width:950px;
	margin:0 auto 50px ;
	padding:0;	
	}
	form input {margin:8px;width:289px;padding-left:5px;}
	form textarea {width:900px;padding:10px;margin:8px;}
	/**/
}	/**/

#prez {background:white;width:80%;float:left;height:100%;}

#prezt {background:#eeebea;width:20%;float:left;height:100%;}

#prezt h1 {color:#3b3b45;text-align:center;margin:20px 0;font-family: "Archive";font-weight: bold;font-size:25px}
#prezt p {color:#3b3b45;font-size:13px;margin:10px;}

#progress{
	background-color: #27afd6;
	height: 6px;
	width: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999; /* Peut être important si vous avez un menu en position fixe */
}