@font-face {
    font-family: 'questa_grande';
    src: url('fonts/2-questa_grande_regular_31-webfont.woff2') format('woff2'),
         url('fonts/2-questa_grande_regular_31-webfont.woff') format('woff'),
         url('fonts/2-questa_grande_regular_31') format('otf');
    font-weight: normal;
    font-style: normal;

}


/********************** élements de base **********************/


*{
	margin:0;
	padding:0;
}

html, body, .mzasthead, .content-index{
	width:100%;
	height:100%;
	font-family:'Source Sans Pro',sans-serif;
	/*text-shadow:0 2px 6px rgba(0, 0, 0, 0.1)*/
}

ul{
	list-style-type:none;
}


a{
	text-decoration:none;
  color:#efa30b;
}

.clear{
	clear:both;
}

.mzasthead{
	position:relative;
	z-index:0;
}

/********************** bouton menu général **********************/


.btn {
  position: relative;
  display: inline-block;

  width: 300px;
  height: 45px;
  font-size: 20px;
font-family: 'source sans pro', inherit;
  line-height: 45px;
  text-align: center;
background:rgba(0,0,0,0.3);
margin-top:25px;
padding:10px 25px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition-property: all;
  -webkit-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
  -moz-transition-property: all;
  -moz-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
.btn svg {
  position: absolute;
  top: 0; left: 0;
    -webkit-transition-property: all;
  -webkit-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
  -moz-transition-property: all;
  -moz-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
.btn svg rect {
  fill: none;
  stroke: #efa30b; /* yellow / jaune */
  stroke-width: 3;
  stroke-dasharray: 422, 0;

  @include transition(all 1300ms $ease-out-expo);
    -webkit-transition-property: all;
  -webkit-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
  -moz-transition-property: all;
  -moz-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
}
.btn:hover svg rect {
  stroke-width: 5;
  stroke-dasharray: 10, 310;
  stroke-dashoffset: 33;
}

.btn:hover {
  color:#fff;
  font-size:22px;
  letter-spacing:1px;
  font-weight:bold;
}


/*********************** bouton Menu elements ***********************/

#buttonNav {
position:fixed;
z-index:99;
top:2px;
right:2px;
}

#nav-icon3 {
  width: 50px;
  height: 35px;
  position: relative;
  margin: 20px 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

 #nav-icon3 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}



/*********************** Bouton menu elements animation ***********************/

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 10px;
}

#nav-icon3 span:nth-child(4) {
  top: 20px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
  background:#fff;


}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
    background:#fff;
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
    background:#fff;
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
    background:#fff;
}


/*********************** menu ouvert ***********************/


#content-menu{
  width:100%;
  height:100%;
  position:fixed;
  z-index:95;
  opacity:0;
  background:#efa30b;
  top:-100%;
  transition:0.8s;

}

#content-menu.show{
  opacity:1;
  top:0;
  -webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  -moz-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}



/*********************** Elements menu ouvert ***********************/

#main-menu{
  display:flex;
  flex-direction:column;
  height:80vh;
margin-top: 10vh;
  width:100%;
  align-items:center;
  justify-content:center;
}

#main-menu li{
flex:1;
font-size:20px;
}

#main-menu li a{
  color:#fff;
font-family: 'source serif pro', serif;
  background-image: linear-gradient(180deg, transparent 48%, #EF510B 0);
  background-size: 0% 100%;
  -moz-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
  -o-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
  -ms-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
  -webkit-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
  transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
  background-repeat: no-repeat;
  padding-bottom: 0;

}
#main-menu li a:hover{background-size:100% 100%;}



/********************** homepage **********************/

.mzasthead{
  height:100vh;
  overflow:hidden;
}

.content-index{
	position:absolute;
	background:#fff !important;
  width:100%;
  height:100%;
	z-index: 2;
background: #1D1D1D;
opacity:0.8;
}

p.hello a{color:#000;}

.title-index{color:#000; position:absolute; z-index:3; width:100%; height:100%; margin: 0 auto ;/* flexbox */
  display:flex;
  display:-ms-flexbox;
  display:-webkit-flex;
  align-items:center;
  -ms-flex-align:center;
  -webkit-align-items:center;
  -webkit-bow-align:center;
  justify-content:center;
}
.title-index h1{ /*font-family: 'Damion', cursive; */
font-family: 'source serif pro', serif;
font-weight: 400;
margin-left:25px;
/*color:#efa30b;*/
padding-bottom:5px;
font-size:40px; margin-bottom:35px;  }
.title-index p{/*font-family:  'Source Sans Pro', inherit; */
font-family: 'source sans pro', serif;
font-size:18px; line-height:30px;}
.home-content{width:1024px; margin:0 auto;}

.highlighted, .highlightedb:hover {
background-image: linear-gradient(180deg, transparent 48%, #efa30b 0);
background-size: 100% 100%;
-moz-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
-o-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
-ms-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
-webkit-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
background-repeat: no-repeat;
padding-bottom: 0;
}
.highlightedb {
background-image: linear-gradient(180deg, transparent 48%, #efa30b 0);
background-size: 0% 100%;
-moz-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
-o-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
-ms-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
-webkit-transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
transition: 0.3s cubic-bezier(0.5, 0.60, 0.360, 1) ;
background-repeat: no-repeat;
padding-bottom: 0;
}





  p.hello{margin-left:25px;color:#000; opacity:0.75;letter-spacing: 1px;}

a.hello{margin-left:25px;cursor:pointer;padding:15px 30px; border:1px solid #000;color:#000; font-family: 'source sans pro',inherit ;letter-spacing: 2px;}

.button-home{

  box-sizing: inherit;
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;

	width:200px; margin:50px auto; border:2px solid white; color:#fff; text-transform:uppercase;font-weight:600; font-size: 20px;padding:15px 25px; }

* {

}



/********************* Conteneur Folio **********************/


/*#conteneur-folio{
    height:100%; width:100%;
position:fixed;
z-index:10;
background:#efa30b;
}

#inside-conteneur-folio{
  height:80vh;
width:85%;
margin:10vh auto;
background:#fff;


}

/********************* Contenu Folio **********************/

#fullpage{
position:absolute;
height:100%;
width:100%;
margin:0;
z-index:15;

}

.folio-content-right, .folio-content-left{
  float:left;
  overflow:hidden;
}

.folio-content-left{
  width:50%;

/* flexbox */
  display:flex;
  display:-ms-flexbox;
  display:-webkit-flex;
  align-items:center;
  -ms-flex-align:center;
  -webkit-align-items:center;
  -webkit-bow-align:center;
  justify-content:center;

/* flex-direction:column;*/
  height:100vh;
  text-align:center;

}

.folio-content-right{
  width:50%;
  height:100%;
}

.folio-project-title a{
  font-family: 'source serif pro', serif;
  font-size: 50px;

  color:#000
}

.folio-project-role{
  font-size:17px;
  font-weight:700;
}

.folio-project-date{}
.folio-project-picture{
width:100%; height:100%;
display:flex;
display:-ms-flexbox;
display:-webkit-flex;
align-items:center;
-ms-flex-align:center;
-webkit-align-items:center;
-webkit-bow-align:center;
overflow: hidden;
}



.bgfolio1{
position:relative;
  background: url(img/folio/redaction.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio2{
position:relative;
  background: url(img/folio/wehelp.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}
.bgfolio3{
position:relative;
  background: url(img/folio/self-deploy.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio4{
position:relative;
  background: url(img/folio/saveurs-maud.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}
.bgfolio5{
position:relative;
  background: url(img//folio/hpe.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio6{
position:relative;
  background: url(img/folio/kordam.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}
.bgfolio7{
position:relative;
  background: url(img/folio/miroir.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio8{
position:relative;
  background: url(img/folio/obj-co.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}.bgfolio9{
position:relative;
  background: url(img/folio/more.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio10{
position:relative;
  background: url(img//folio/klap.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio11{
position:relative;
  background: url(img/folio/nissan-mobile.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio12{
position:relative;
  background: url(img/folio/nissan-vms.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio13{
position:relative;
  background: url(img/folio/nissan-finance.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio14{
position:relative;
  background: url(img/folio/dribbble.png) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}

.bgfolio15{
position:relative;
  background: url(img/folio/orthographiq.jpg) no-repeat center center;

  margin:0;
padding:0;
background-size:cover;
}



.folio-content{
  width:100%; height:100%;
  background-color:rgba(255,255,255,0.9);
  position:absolute;
  /* flexbox */
    display:flex;
    display:-ms-flexbox;
    display:-webkit-flex;
    align-items:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    -webkit-bow-align:center;
    justify-content:center;
    text-align:center;
}

 .button-go-project-right{
  width:55px;
  height:55px;
  border-radius: 50%;
margin:50px auto;
  background-color:#efa30b;

  /* flexbox */
    display:flex;
    display:-ms-flexbox;
    display:-webkit-flex;
    align-items:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    -webkit-bow-align:center;
    transition:0.5s;
}



.button-go-project-right img{
margin:auto;
    transition:0.2s;
    width:20px;
    height:20px;
}

.button-go-project-right:hover{
transform:scale(1.5);
}


/****************** Scroll animation **************/


.icon-scroll, .icon-scroll:before {position:absolute;}
.icon-scroll {left:50%; width:40px;height:70px;margin-left:-20px;bottom:10%;margin-top:-35px;box-shadow:inset 0 0 0 1px #efa30b;border-radius:20px;z-index:90}
.icon-scroll:before {left:50%; content: '';width:8px;height:8px;background:#efa30b;margin-left:-4px;top:8px;border-radius:50%;animation-duration:1.5s;animation-iteration-count:infinite;animation-name:scroll}
@keyframes scroll {0%{opacity:1}100%{opacity:0;transform:translateY(46px)}}






/****************** Nouvel essai home plus UX (simple) **************/

.nouvelessai{
width:1024px;
margin:15% auto;
}

p.essaiedeouf{font-size:12px; font-family:"source sans pro", inherit;}
h1.essaideouf{font-size:24px; font-family:"source serif pro",serif; font-weight:400;}

.essaideouf{
  color:#OOO;
  text-align:left;
}


/****************** page one project  **************/


.slide-main-picture{
  width:100%;
  height:100%;
}
.grid a{cursor:pointer;}
.content-problem{ width:100%; color:#efa30b; background:#fff; padding:80px 0;}
.mask-project{width:100%; height:100%; position:absolute; z-index:5;background:rgba(255,255,255,0.8);}
.problem{width:1024px; margin:0 auto; padding:10px 0;}
.pict-project{width: 100%; height:100%; position:relative;}
.problem p{color:#bbb;}
.content-infos-projects, .content-final-projects, .content-solution{height:auto; width:100%; padding:20px 0;color:#efa30b; background:#fff; }
.infos-projects, .final-projects, .solution{max-width: 1024px; margin:0 auto; padding:50px 0;}
.infos-projects p, .final-projects p, .solution p{color:#bbb;}
.infos-projects-part, .final-projects-part{float:left; width:40%;margin-bottom:50px;padding-right:10%;}
.content-mask{  display:flex;
  display:-ms-flexbox;
  display:-webkit-flex;
  align-items:center;
  -ms-flex-align:center;
  -webkit-align-items:center;
  -webkit-bow-align:center;
  justify-content:center; height:100%; color:#efa30b; font-size:40px;}
  .content-colution{width:100%;}


.project1{
  background: url(img/folio/redaction.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}
.project2{
  background: url(img/folio/wehelp.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}
.project3{
  background: url(img/folio/self-deploy.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}
.project4{
  background: url(img/folio/saveurs-maud.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}
.project5{
  background: url(img/folio/hpe.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}
.project6{
  background: url(img/folio/kordam.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}

.project7{
  background: url(img/folio/miroir.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}
.project8{
  background: url(img/folio/obj-co.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}
.project9{
  background: url(img/folio/klap.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}

.project11{
  background: url(img/folio/nissan-mobile.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}

.project12{
  background: url(img/folio/nissan-vms.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}


.project14, .project13{
  background: url(img/folio/nissan-finance.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}

.project15{
  background: url(projects/pajemploi-conception/prototypage.png) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}

.project1{
  background: url(img/folio/pajemploi-research.png) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}


/*.project1{
  background: url(img/redaction.jpg) no-repeat center center;
  margin:0;
padding:0;
background-size:cover; z-index:1;
}*/

.scroll-oneproject{position:absolute;}

body#unique-project p{font-size:20px;}
body#unique-project h3{font-size:24px; margin-bottom:20px;}
body#unique-project .problem h3{font-size:40px;}

.min-pict-project{width:50%;float:left;}
.big-pict-project{width:100%;}

.min-pict-project img, .big-pict-projec img{width:100%;}

body#about{
  position:relative;
    background: url(img/bg-about.jpg) no-repeat center center;

    margin:0;
  padding:0;
  background-size:cover;

font-family: 'source serif pro', serif;
}
#conteneur-contact{  display:flex;
  flex-direction:column;
  height:80vh;

  width:100%;

  justify-content:center;}
.infos{width:33%;
padding:0 5%;}

.infos h1{font-size:30px;font-weight: 700;color:#efa30b;margin-bottom:25px}
.infos p{color:#bbb;font-size:18px;}
.infos ul li{margin-top:10px; color:#efa30b; cursor:pointer}
.infos ul li:hover{text-decoration: line-through;}
.infos ul li a{color:#efa30b;cursor:pointer}
/****************** responsive **************/


.otherprojects{width:100%; height:90px; text-align: center; border-top:1px solid #eee; }
.sideother{ height:100%;  display:flex;
  flex-direction:row;

  align-items:center;
  justify-content:center; float:left;width:33%;}
.sideother img{width:50px; height:3 0px;}


@media screen and (max-width: 1024px) {
.title-index h1 {font-size:30px;}
#nav-icon3 {width:30px; height:20px;}
#nav-icon3 span:nth-child(1) {
  top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 8px;
}
#nav-icon3 span:nth-child(4) {
  top: 15px;
}
.infos {margin-top:10px;}
.folio-project-title a{font-size:30px;}
.min-pict-project{clear:both;width:100%}
.problem{width:75%; }
body#unique-project .problem h3{font-size:25px; line-height:40px;}
.infos-projects-part{clear:both; width:90%; margin:20px 5%;}
.solution{padding:50px 5%; line-height: 30px;}
.final-projects-part{width:90%; margin:0 5%; padding:0;margin-bottom: 50px;}
.content-mask{font-size: 20px;}
.infos{width:75%;}
}




/* //////////////////// Installation de la grille //////////////////// */

#list{max-width:1200px!important; margin: 20px auto 0 auto; padding-left: 50px}
#presentation{max-width:1200px;margin:0 auto;padding:50px 0;padding-left:60px; }
#presentation h1{font-weight:400px!important}
#presentation p.hello{margin-left:0}
#presentation .highlighted{font-weight:400!important; font-family: 'source serif pro'}

footer{color:#666;margin-top:150px;height:200px; width:100%; background:#1d1d1D;padding-top:40px;text-align:center;}

#unique-project h1{text-align: center;}