@font-face {
    font-family: 'louis_george_cafebold';
    src: url('font/louis_george_cafe_bold-webfont.woff2') format('woff2'),
         url('font/louis_george_cafe_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'louis_george_cafeitalic';
    src: url('font/louis_george_cafe_italic-webfont.woff2') format('woff2'),
         url('font/louis_george_cafe_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'louis_george_caferegular';
    src: url('font/louis_george_cafe-webfont.woff2') format('woff2'),
         url('font/louis_george_cafe-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*::-webkit-scrollbar { width: 0 !important }
* { -ms-overflow-style: none; }
* { overflow: -moz-scrollbars-none; }
#firstPage,#secondpage
{	overflow: hidden;
	font-family: louis_george_caferegular;
	font-size:2em;}
#secondpage
{	overflow: auto;}
i
{	font-family:louis_george_cafeitalic;}
strong
{	font-family:louis_george_cafebold;}
h2
{	text-align:center;
	font-size:2em;
	font-family:louis_george_cafebold;
	color:#5a6473;}
hr
{	width:50%;
    color: #5a6473;
    border-style: inset;}
#wrap {
	/* position du conteneur pour le préparer à bouger */
	position: relative;
	top: 0;
	/* on prépare la transition à venir */
	transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);}
/* vers Slide 1 */
#s1:target ~ #wrap { top:0; }
#s1:target ~ .header nav li:first-child a { text-shadow: 0 0 5px #a0acbd, 0 0 5px #a0acbd, 0 0 5px #98a6b9, 0 0 5px #8190a6 }
 
 /* décalage des fonds de chaque slide */
#s2:target ~ #wrap { top:-100vh;}
#s2:target ~ .header nav li:nth-child(2) a { text-shadow: 0 0 5px #a0acbd, 0 0 5px #a0acbd, 0 0 5px #98a6b9, 0 0 5px #8190a6 }

/* vers Slide 3 */
#s3:target ~ #wrap { top:-200vh; }
#s3:target ~ .header nav li:nth-child(3) a { text-shadow: 0 0 5px #a0acbd, 0 0 5px #a0acbd, 0 0 5px #98a6b9, 0 0 5px #8190a6 }

/* vers Slide 4 */
#s4:target ~ #wrap { top:-300vh; }
#s4:target ~ .header nav li:nth-child(4) a { text-shadow: 0 0 5px #a0acbd, 0 0 5px #a0acbd, 0 0 5px #98a6b9, 0 0 5px #8190a6 }

/* vers Slide 5 */
#s5:target ~ #wrap { top:-400vh; }
#s5:target ~ .header nav li:last-child a { text-shadow: 0 0 5px #a0acbd, 0 0 5px #a0acbd, 0 0 5px #98a6b9, 0 0 5px #8190a6 }
/*//////*/
/*Header*/
/*//////*/
.header
{	text-align:left;
	position:fixed;
	background-image: linear-gradient(to right, #8190a6, #5a6473, #8190a6);
	width:100vw;
	z-index:9;
	top:0;}
.header h1
{	display: inline-block;
	vertical-align: middle;
	font-size:2em;
	margin-right:31vw;
	color:white;
	width:42vw;}
.header img
{	width:2em;
	margin: 0 3vw 0 1vw;
	display: inline-block;
	vertical-align: middle;}
.header #menuBurger
{	display:inline-block;
	vertical-align:middle;
	z-index: 1;
	-webkit-user-select: none;
	user-select: none;
	margin:0.5em 0 0 3em;}
#menuBurger input
{	display: inline-block;
	vertical-align:middle;
	width: 2em;
	height: 1.5em;
	position: absolute;
	cursor: pointer;
	opacity: 0; /* hide this */
	z-index: 2; /* and place it over the hamburger */
	-webkit-touch-callout: none;}
.header #menuBurger span
{	display:block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background: #fff;
	border-radius: 3px;
	z-index: 1;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				opacity 0.55s ease;}
#menuBurger span:first-child
{	transform-origin: 0% 0%;}
#menuBurger span:nth-last-child(2)
{	transform-origin: 0% 100%;}
#menuBurger input:checked ~ span
{	opacity: 1;
	transform: rotate(45deg) translate(0, 0);
	background: #fff;}
#menuBurger input:checked ~ span:nth-last-child(3)
{	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);}
#menuBurger input:checked ~ span:nth-last-child(2)
{	transform: rotate(-45deg) translate(0, 0.1em);}
#MenuTel
{	position: absolute;
    width: 91vw;
    top: 2.4em;
    background: rgba(90,100,115,0.7);
    padding: 5vw;
    height: 92.6vh;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform: translate(40vw, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
#MenuTel li
{	padding: 3em 0;
	text-align:center;}
#menuBurger input:checked ~ #MenuTel,#menuBurger #MenuTel a:active ~ #menuBurger #MenuTel
{	transform: translate(-95vw, 0);}
#menuBurger ul li a
{	text-decoration:none;
	color:white;
	font-size:3em;
	text-align:center;}
.header #Nav
{	display:none;}
#Nav
{	display: inline-block;
	vertical-align: middle;
	margin-right:1.3vw;
	width:44vw;}
.header #Nav ul li
{	display: inline-block;
	vertical-align: middle;
	margin:1vh 1.2vw 1vh 1.2vw;}
.header #Nav ul li a,.header #Nav ul li a:visited,.header #menuBurger a:visited
{	text-decoration:none;
	color:white;}
.header hr
{   border: 0;
	height: 0.25vh;
	background-image: linear-gradient(to right, #5a6473, #8190a6, #5a6473);
	margin:0;
	width:100vw;
	color:none;}
/*////*/
/*Body*/
/*////*/
.Accueil,.APropos,.MonTravail,.MesComp, .Parcours, .Contact
{	transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);}
.APropos,.MonTravail,.MesComp, .Parcours, .Contact
{	height:75vh;
	padding: 15vh 10vw 10vh 10vw;}
.Accueil
{	background:url("../img/fond1.jpg") center fixed;
	background-size:cover;
	color : white;
	text-align:center;}
.Accueil div
{	height:21vh;
	width:80vw;
	padding: 47vh 10vw 32vh 10vw;
	background-color: rgba(0,0,0,0.5);}
.Accueil h2
{	font-size:2em;
	font-family:louis_george_cafebold;
	color:white;}
.APropos
{	height:75vh;
	padding: 15vh 10vw 10vh 10vw;}
.APropos img, .APropos .descrip,.APropos .infos,.APropos .infosTel
{	display: inline-block;
	vertical-align: top;
	width:22vw;
	margin-right:5vw;}
.APropos .descrip
{	width:52vw;
	text-align:justify;
	color:rgb(96,96,96);}
.APropos .photoPerso,.APropos .infosTel .photoPersoTel
{	border:none;
	box-shadow: 0.25vw 0.25vw 0.4vw #8190a6;
	border-radius:0.5vw;}
.APropos .descrip p:first-child
{	text-align:center;
	font-size:1.2em;
	color:black;
	margin-bottom:3vh;}
.APropos .descrip span
{	display:none}
.APropos .photoPerso
{	display:none;}
.APropos .infosTel
{	margin:0;}
.APropos .infosTel{display:inline-block;}
.APropos .infos{display:none;}
.APropos .infosTel .photoPersoTel
{	width:18vw;
	margin:0 4vw 2vh 0;}
.APropos .infosTel div img
{	width:2vw;}
.APropos .infosTel div img, .APropos .infosTel div strong
{	display:inline-block;
	vertical-align:middle;
	font-size:0.9em;}
.APropos .infosTel div i
 {	font-size:0.7em;
    display: block;}
 .APropos .infosTel div a, .APropos .infosTel div:last-child
 {	text-decoration:none;
	color:#5a6473;}
.APropos .bas
{	margin-bottom:5vh;}
.APropos .infos div, .APropos .infosTel div
{	margin-bottom:1vh;}
.APropos .infos p, .APropos .infosTel strong
{	color:#5a6473;
	display:inline-block;
	vertical-align:top;}
.APropos .infos p i, .APropos .infosTel  i
{	color:rgb(96,96,96);}
.APropos .infos div img, .APropos .infosTel img
{	width:1vw;
	margin:0 1vw 0 0;}
/*==================================================================*/
.MonTravail
{	background-image: linear-gradient(to right, #8190a6, #5a6473, #8190a6);}
.MonTravail h2
{	color:white;}
#Logo, #C4D, #PAO, #Web, #BD{
	display:inline-block;
	vertical-align:center;
	width:32vw;
	margin-left:5vw;}
#Logo a, #C4D a, #PAO a, #Web a, #BD a{
	width:100%;
	height:100%;
	position:relative;}
#PAO{
		width:32vw;
		margin:5vh 0 0 5vw;}
#Web{
		margin:8vh 5vw 0 5vw ;
		width:32vw;}
#BD{
		margin:8vh 24vw 0 24vw;
		width:32;}
#C4D{
		width:25vw;
		margin:5vh 5vw 0 12vw;}
#Logo img, #C4D img, #PAO img, #Web img, #BD img{
	width:100%;}
#Logo .legendeImg, #C4D .legendeImg, #PAO .legendeImg, #Web .legendeImg, #BD .legendeImg{
	width: 80%;
    background-color: rgba(0,0,0,0.75);
    color:white;
    padding:1% 5%;
    position:absolute;
    top:-100%;
    right:0%;}
/*==================================================================*/
.MesComp div .progress,.MesComp div img
{	display:inline-block;
	vertical-align:middle;}
.MesComp .premier, .MesComp .second
{	width:75vw;
	display:inline-block;
	vertical-align:top;
	margin-left:5vw;}
.MesComp h3
{	margin:1vh 0;
	text-align:center;}
.MesComp h4
{	margin:1vh 0 0 10.5vw;
	color:rgb(96,96,96);}
.MesComp div img
{	width:2em;
	height:2em;
	border:none;
	border-radius:1em;
	background:#8190a6;
	margin-right:2vw;}
.MesComp div .progress
{	width:60vw;
	height:1em;
	border:none;
	border-style:indent;
	border-radius:0.5em;
	background:rgb(96,96,96);}
.MesComp .PS,.MesComp .progress .AI,.MesComp .progress .DN,.MesComp .progress .C4D,.MesComp .progress .HTML,.MesComp .progress .CC,.MesComp .progress .EN
{	height:1em;
	border:none;
	border-style:outline;
	border-radius:0.5em;
	background:#8190a6;}
.MesComp .PS
{	width:90%;}
.MesComp .progress .AI
{	width:90%;}
.MesComp .progress .DN
{	width:90%;}
.MesComp .progress .C4D
{	width:75%;}
.MesComp .progress .HTML
{	width:90%;}
.MesComp .progress .CC
{	width:75%;}
.MesComp .progress .EN
{	width:50%;}
.MesComp .progress p
{	font-size:0.8em;
	color:white;
	text-align:center;
	z-index:3;
	position:relative;
	top:-1.2em;}
.CV
{	width: 60vw;
	height:1em;
	margin:2vh 7vw;
	background:#8190a6;;
	border:none;
	border-radius:2vw;
	text-align:center;
	padding:1em 0;}
.CV a
{	text-decoration:none;
	color:white;}
.MesComp .second .CV:hover 
{	background:#5a6473;}
.MesComp .second .CV:hover a
{	color:#8190a6;}
.MesComp .second .CV:active 
{	background:#5a6473;
	border:inset 0.2vw;}
/*==================================================================*/
.Contact {
	background:url("../img/contact.png") center 0 no-repeat fixed;
	padding:0;
	height:100vh;
	background-size:cover;}
/*[ Contact more ]*/
.contact100-more {
  width: calc(100% - 560px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  padding: 30px 15px 0px 15px;}
.contact100-more::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.1);}
.contact100-form {
  width: 91vw;
  height: 82vh;
  display: block;
  padding: 14vh 4.5vw 4vh 4.5vw;
  background:white;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input100 {
	width: 100%;
	position: relative;
	border: 1px solid #e6e6e6;
	border-radius: 1em;
	margin: 0 0 5vw 0;}
.label-input100 {
	color: #666666;
	padding: 1vh 0 1vh 2vw;}
.input100 {
	display: block;
	width: 90%;
	background: transparent;
	color: #404b46;
	padding: 0 1.5vw;
	font-family: louis_george_cafeitalic;
	border:0 transparent;}
.Contact form input.input100 {
	height: 5vh;
	border-radius: 1em;
	border:none;
	outline:none;}
textarea.input100 {
	min-height: 15vh;
	padding-top: 1vh;
	padding-bottom: 1vh;
	border-radius: 1em;
	border:none;
	outline:none;}
/*---------------------------------------------*/

.focus-input100 {
	position: absolute;
	display: block;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	top: -1px;
	left: -1px;
	pointer-events: none;
	border: 1px solid #6675df;
	border-radius: 1em;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scaleX(1.1) scaleY(1.3);
	-moz-transform: scaleX(1.1) scaleY(1.3);
	-ms-transform: scaleX(1.1) scaleY(1.3);
	-o-transform: scaleX(1.1) scaleY(1.3);
	transform: scaleX(1.1) scaleY(1.3);}
.input100:focus + .focus-input100 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);}
.eff-focus-selection {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);}
/*------------------------------------------------------------------
[ Button ]*/
.container-contact100-form-btn {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;}
.contact100-form-btn {
	align-items: center;
	padding: 0 20px;
	width: 100%;
	height: 6vh;
	border-radius: 0.5vw;
	background: #6675df;
	color: #fff;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1px;

	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;}
.contact100-form-btn:hover {
	background: #404b46;}
.Contact form textarea
{	-webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
    appearance: textarea;
    -webkit-rtl-ordering: logical;
    flex-direction: column;
    resize:none;
    cursor: text;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: 0em;
    font-family: louis_george_cafeitalic;
    border:hidden;}
/**/
.copyright
{	text-align:center;
	margin-top:1.5vw;}
.copyright img,.copyright p
{	display:inline-block;
	vertical-align:middle;}
.copyright img
{	width:0.7em;}
.copyright p
{	margin-left:0.5vw;
	font-size:0.7em;}
#conteneurwork
{	background-image: linear-gradient(to right, #8190a6, #5a6473, #8190a6);
	padding:10vh 10vw;
	overflow-x: scroll;}
#conteneurwork h2
{	color:white;}
#conteneurwork div
{	display:block;}
#conteneurwork div:first-child hr, #conteneurwork div:nth-child(2) hr
{	margin-top:0;}
#conteneurwork hr:first-child
{	margin-top:5vh;}
#conteneurwork .logos, #conteneurwork .C4D, #conteneurwork .PAO, #conteneurwork .Web,  #conteneurwork .BD
{	display:inline-block;
	width: 30vw;
	margin:2vh 2vw 0 0;
	border-radius:1vw;}
#conteneurwork .logos
{	margin: 2vh 7.25vw 0 7.25vw;
	width:25vw;}
#conteneurwork .Web, #conteneurwork .BD, #conteneurwork .PAO
{	width:37.5vw;}
#conteneurwork .C4D
{	margin:2vh 4.5vw 0 4.5vw;}
#conteneurwork p
{	display:none;
	width:35.5vw;
	position:relative;
	padding:2.5vh 1vw;
	background-color:rgba(0,0,0,0.5);
	color:white;
	margin:2vh 2vw 0 0;
	vertical-align:top;
	border-radius:1vw;}
#conteneurwork div:first-child p
{	width:35.5vw;
    padding: 4vh 1vw;}
#conteneurwork div:nth-child(2) p
{    padding: 4.5vh 1vw;}
#conteneurwork div:nth-child(4) p
{    padding: 4.3vh 1vw;}
#conteneurwork div:nth-child(5) p
{   padding: 8.75vh 1vw;
	width: 23.7vh}
#conteneurwork a:hover img
{	display:none;}
#conteneurwork a:hover p
{	display:inline-block;}
#copyrightwork
{	background-color:white;
	width:90vw;
	height:5vh;
	padding:1vh 5vw;
	bottom:0;}
#copyrightwork img, #copyrightwork p
{	display: inline-block;
    vertical-align: middle;}
#copyrightwork img
{	width:5vw;}