::selection { background: #DAF7D4; color: #fff;}

body {
  font-family: 'ralewaylight';
  color: #333;
  height: 100%;
}

b {
  font-family: 'lieberuth_regular';
}

/********************************************/
/******************  NAV  *******************/
/********************************************/


nav {
  width: 100%;
  height: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  z-index: 10;
  -webkit-transition: padding .4s ease;
  -moz-transition: padding .4s ease;
  -ms-transition: padding .4s ease;
  -o-transition: padding .4s ease;
  transition: padding .4s ease;
}

.bgwhite {
  background: white;
}

#logo {
  position: absolute; 
  margin-left: 10%;
}

nav.active #logo span {
  display: none;
}

nav.active {
  height: 25px;
  padding: 15px 0;
  box-shadow: 0px 0px 26.7px 3.3px rgba(0, 0, 0, 0.03); 
}

#menu {
  font-size: 18px;
  right: 0;
  position: absolute;
  margin-right: 10%;
  margin-top: 6px;
}

#menu li {
  display: inline-block;
  margin-left: 20px;
}

#menu a {
  color: #333;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; 
}

#menu a:hover {
  color: #455ED1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; 
}

#logo h1 {
  font-family: "ralewayextrabold", sans-serif;
  font-size: 28px;
}

#logo a {
  text-decoration: none;
  color: #333;
}

#logo p {
  letter-spacing: .1px;
  font-size: 18px;
  font-family: 'lieberuth_light';
}


/********************************************/
/*****************  HEADER  *****************/
/********************************************/

header {
  width: 100%;
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
  margin: 0 auto;
  border-top: 0px white solid;
  background-size: cover;
  height: 100vh;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; 
}

.index {
  background: url(../img/index.jpg) no-repeat center center;
  background-size: cover;
}

.me {
  background: url(../img/me.jpg) no-repeat center center;
  background-size: cover;
}

.work {
  background: url(../img/projects.jpg) no-repeat center center;
  background-size: cover;
}

.projet {
background: #d1f5eb; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #d1f5eb 0%, #ecf9a9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #d1f5eb 0%,#ecf9a9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #d1f5eb 0%,#ecf9a9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f5eb', endColorstr='#ecf9a9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

header.smaller {
  height: 80vh; 
  width: 90%;
  overflow: hidden;
  margin: 0 auto;
  border-top: solid white 143px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

header h6 {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  opacity: .2;
  font-family: 'ralewayextrabold';
  font-size: 400px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

header.smaller h6 {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  color: #FFF;
  opacity: .2;
  font-family: 'ralewayextrabold';
  font-size: 400px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

header p {
  opacity: 0;
  color: #455ED1;
  text-align: center;
  position: relative;
  top: 35%;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

header .ico {
  opacity: 0;
  background: #fff;
  position: relative;
  top: 55%;
  width: 40%;
  margin: 0 auto;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.27);
-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.27);
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.27);
-webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

header.smaller .ico {
  opacity: 1;
  background: #fff;
  position: relative;
  top: 55%;
  width: 40%;
  margin: 0 auto;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.27);
-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.27);
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.27);
-webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

header .ico span {
  display: block;
  text-align: center;
  margin-top: 5px;
}

header .alignico {
  font-family: 'lieberuth_light';
  display: inline-block;
  margin: 10px 30px 0 30px;
  text-align: center;
}

header.smaller p {
  opacity: 1;
  color: #455ED1;
  text-align: center;
  position: relative;
  top: 35%;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

header h3 {
  opacity: 0;
  color: white;
  font-size: 100px;
  font-family: 'ralewaysemibold';
  margin-top: -50px;
  text-align: center;
  position: relative;
  text-shadow: 0px 2px 4px rgba(0,0,0,0.27);
  top: 50%;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

header.smaller h3 {
  opacity: 1;
  color: white;
  font-size: 100px;
  font-family: 'ralewaysemibold';
  margin-top: -50px;
  display: block;
  text-align: center;
  position: relative;
  top: 50%;
  z-index: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}


/********************************************/
/***************  CONTAINER  ****************/
/********************************************/


#container {
  width: 90%;
  margin: 0 auto;
}

.triangle {
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

.triangle2 {
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 20px;
}

.wave {
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

.clear {
  clear: both;
}


/********************************************/
/*****************  INDEX  ******************/
/********************************************/

h2 {
  font-size: 30px;
  font-family: 'ralewayextrabold';
  text-align: center;
  margin-bottom: 50px;
}


.inner, .innerImg {
    float: left;
    position: relative;
    width: 33.33%;
}

.innerImg {
  overflow: hidden;
  cursor: pointer;
}

.innerImg .img {
  width: calc(100% + 60px);
  overflow: hidden;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.img:hover {
  transform: translate(-50px);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.inner:hover .inner h4 {
  color: red;
}

.dummy {
    margin-top: 100%; /* 4:3 aspect ratio */
}
.element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.txt {
  padding: 10% 13%;
}

.img1 {
  background: url(../img/couv/index-sodi.jpg);
  background-size: cover;
}

.img2 {
  background: url(../img/couv/index-pkmn.png);
  background-size: cover;
}

.img3 {
  background: url(../img/couv/index-mealty.jpg);
  background-size: cover;
}

.number {
  position: absolute;
  opacity: 0.2;
  font-size: 105px;
  color: #84EBCE;
  margin-top: -20px;
  z-index: 1;
}

.inner h4 {
  position: relative;
  font-family: 'ralewayextrabold';
  font-size: 28px;
  z-index: 2;
}

.inner ul {
  margin-top: 15px;
}

.inner ul li {
  display: inline-block;
  font-size: 20px;
  color: #bbb;
  margin-right: 10px;
}

.description {
  font-family: 'lieberuth_light';
  margin-top: 30px;
  line-height: 25px;
}

.pentone {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -33.5px;
}

.arrowleft {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -27px;
  margin-top: -17.5px;
}

.arrowtop, .arrowtest {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -37px;
  margin-left: -17.5px;
  -ms-transform: rotate(90deg); 
  -moz-transform: rotate(90deg); 
  -o-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.arrowtest { display: none;}

.arrowright {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -27px;
  margin-top: -17.5px;
  -ms-transform: rotate(180deg); 
  -moz-transform: rotate(180deg); 
  -o-transform: rotate(180deg); 
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}


.seemore {
  position: relative;
  clear: both;
  cursor: pointer;
  display: block;
  border: 1px #333 solid;
  text-align: center;
  margin: 0 auto;
  margin-top: 50px;
  padding: 10px;
  max-width: 261px;
  text-decoration: none;
  color: #333;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.seemore:hover {
  background: #455ED1;
  color: #fff;
  border: 1px solid #455ED1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}


/********************************************/
/****************  CONTENT  *****************/
/********************************************/

#content {
  width: 80%;
  margin: 0 auto;
}

#content p {
  display:block; 
  margin:0 auto; 
  width:80%;
  font-family: 'lieberuth_light';
  font-size:18px;
  line-height: 25px;
}

.barre {
  display: block;
  position: relative;
  width: 90%;
  margin: 0 auto;
  background: blue;
  height: 20px;
  top: 44px;
  z-index: -2;
  background: #d1f5eb; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #d1f5eb 0%, #ecf9a9 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #d1f5eb 0%,#ecf9a9 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #d1f5eb 0%,#ecf9a9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f5eb', endColorstr='#ecf9a9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.hello {
  font-family: 'ralewaysemibold';
  font-size: 64px;
  text-align: center;
}

.meico {
  opacity: 0;
  margin: 0 auto;
  width: 90%;
  margin-top: 40px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}



.meico.active {
  opacity: 1;
}

.line {
  width: 70%;
  margin: 0 auto;
  height: 60px;
}

.column {
  width: 33.33%;
  height: 60px;
  float: left;
}

.column svg {
  width: 35px;
  float: left;
}

.column p {
  display: block;
  padding-top: 6px;
  margin-left: 45px;
  float: ;
}

.column span {
  margin-left: 10px;
  color: #9B9B9B;
  line-height: 23px;
}

/********************************************/
/***************  CONTACT  ******************/
/********************************************/

.stripe {
  position: relative;
  top: 5px;
  height: 10px;
  background: url(../img/stripe.svg);
}

.contact {
padding: 100px 0;
background: #d1f5eb;
background: -moz-linear-gradient(-45deg, #d1f5eb 0%, #ecf9a9 100%);
background: -webkit-linear-gradient(-45deg, #d1f5eb 0%,#ecf9a9 100%);
background: linear-gradient(135deg, #d1f5eb 0%,#ecf9a9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f5eb', endColorstr='#ecf9a9',GradientType=1 );
height: 100%;
}

.pidgeon {
  box-sizing: border-box;
  padding: 40px 40px;
  width: 80%;
  margin: 0 auto;
  background: #fff;
  -webkit-box-shadow: 0px 3px 4px 0px rgba(6,5,5,0.3);
  -moz-box-shadow: 0px 3px 4px 0px rgba(6,5,5,0.3);
  box-shadow: 0px 3px 4px 0px rgba(6,5,5,0.3);
}

.pidgeon h3 {
  font-family: 'ralewayextrabold';
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
}

.pidgeon p {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 40px;
  line-height: 25px;
  font-size: 18px;
  font-family: 'lieberuth_light';
}


.pidgeon a {
  text-decoration: none;
  font-size: 40px;
  display: block;
  width: 441px;
  margin: 0 auto;
  padding: 50px 0;
  background: url(../img/ball.svg) no-repeat 40px 0px;
  color: #333;
}

/********************************************/
/***************** PROJET *******************/
/********************************************/

.left h5 {
  font-size: 24px;
  display: block;
  position: relative;
  top: -10px;
  left: -47px;
  font-family: 'ralewayextrabold';
}

.left {
  font-size: 15px;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #333;
  background: #FFF;
  display: block;
  width: 30%;
  padding: 20px 30px;
  float: left;
}

.left::before {
  content: ' ';
  display: block;
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/stripe.svg);
}


.right {
  box-sizing: border-box;
  float: right;
  display: block;
  padding: 20px 50px 20px 90px;
  font-family: 'lieberuth_light';
  font-size: 18px;
  width: 70%;
  line-height: 25px;
}

.right a, .textproject a {
  text-decoration: none;
  font-family: 'lieberuth_regular';
  cursor: pointer;
  color: #455ED1;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.right a:hover, .textproject a:hover {
  color: #687cda;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.titleproject {
  position: relative; 
  z-index: 2;
  font-size: 64px;
}

.titleproject::after {
  content: ' ';
  height: 1px;
  width: 240px;
  background: #000;
  margin: 0 auto;
  display: block;
  margin-bottom: 10px;
}

.numbercenter {
  left: 50%;
  margin-left: -150px;
  z-index: 1;
  top: 6px;
}

.textproject {
  font-family: 'lieberuth_light';
  font-size: 18px;
  line-height: 25px;
  width: 70%; 
  margin: 0 auto;
}
.textproject p{
  max-width: 1200px;
  margin: 0 auto;
}

.sectionpro {
  width:90%; 
  margin:0 auto; 
  position:relative; 
  margin-bottom:40px;
}

.oneimg {
  margin: 0 auto;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 100%;
}

.oneimg img {
  border-top: 20px solid #fff;
  border-bottom: 20px solid #fff;
}

.twoimg {
  text-align: center;
  width: 100%;
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 40px;
}

.inline {
  display: inline-block;
}

.twoimg img {
  float: left;
  box-sizing: border-box;

  border-left: 20px solid #fff;
  border-right: 20px solid #fff;
}


.allimg {
    float: left;
    position: relative;
    width: 33.33%;
}
.propimg {
    margin-top: 100%; /* 4:3 aspect ratio */
}
.elementimg {
  box-sizing: border-box;
  border-left: 20px solid #fff;
  border-right: 20px solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 40px;
  margin-bottom: 40px;
}

.imgpro1 { background: url(../img/projet/sodi-01.jpg); background-size: cover; }
.imgpro2 { background: url(../img/projet/sodi-02.jpg); background-size: cover; }
.imgpro3 { background: url(../img/projet/sodi-03.jpg); background-size: cover; }

.bigalign {
  width: 70%;
  margin: 0 auto;
  font-family: 'lieberuth_light';
  line-height: 25px;
}

.perso {
  box-sizing: border-box;
  width: 33.33%;
  padding: 0 20px;
  float: left;
  padding-top: 200px;
}

.billy {
  background: url(../img/projet/billyetwally-08.png) no-repeat top center;
}

.wally {
  background: url(../img/projet/billyetwally-09.png) no-repeat top center;
}

.rocher {
  background: url(../img/projet/billyetwally-10.png) no-repeat top center;
}

.perso-name {
  text-transform: uppercase;
  font-size: 20px;
  font-family: 'ralewayregular';
  text-align: center;
  margin-bottom: 10px;
}

.perso-name::after {
  content: " ";
  display: block;
  height: 3px;
  background: #DBF7D3;
  width: 50%;
  margin: 0 auto;
}

/********************************************/
/*************  BLOCK FOOTER  ***************/
/********************************************/

.fooblock {
  width: 50%;
  opacity: .9;
  background: red;
  cursor: pointer;
  color: #FFF;
  font-family: 'ralewaysemibold';
  font-size: 34px;
  box-sizing: border-box;
  padding: 70px 10%;
}

.fooblock span {
  font-family: 'lieberuth_light';
  font-size: 15px;
  display: block;
}

.previousproject {
  float: left;
  background: #F5B3A9;
  box-sizing: border-box;
  text-align: left;
  background: #b0a2d0; /* Old browsers */
  background: -moz-linear-gradient(45deg, #b0a2d0 0%, #f5b3a9 63%, #f5b3a9 63%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #b0a2d0 0%,#f5b3a9 63%,#f5b3a9 63%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #b0a2d0 0%,#f5b3a9 63%,#f5b3a9 63%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0a2d0', endColorstr='#f5b3a9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.previousproject:hover {
  padding-left: 13%;
  opacity: .8;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.nextproject {
  float: left;
  text-align: right;
  background: #455ed1; /* Old browsers */
  background: -moz-linear-gradient(45deg, #455ed1 0%, #12bfa9 63%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #455ed1 0%,#12bfa9 63%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, #455ed1 0%,#12bfa9 63%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#455ed1', endColorstr='#12bfa9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.nextproject:hover {
  opacity: .8;
  padding-right: 13%;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.arrowproject {
  opacity: 0;
  position: absolute;
  width: 30px;
  height: 30px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.previousproject:hover .arrowproject {
  opacity: 1;
  margin-left: -3%;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.arrowprojectright {
  -ms-transform: rotate(180deg); 
  -moz-transform: rotate(180deg); 
  -o-transform: rotate(180deg); 
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  right: 10%;
}

.nextproject:hover .arrowproject {
  opacity: 1;
  right: 10%;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}



/********************************************/
/*****************  FOOTER  *****************/
/********************************************/

footer {
  background: #F0F0F0;
}

footer #footer {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

footer svg {
  margin-top: 40px;
  margin-bottom: 35px;
}

footer ul li {
  display: inline-block;
  font-size: 13px;
}

footer a {
  text-decoration: none;
  color: #333;
  color: #aaa;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

footer a:hover {
  color: #455ED1;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

footer p {
  color: #333;
}

footer .copy {
  margin-top: 20px;
  padding-bottom: 40px;
  display: block;
  color: #aaa;
  font-size: 13px;
}

.footlogo {
opacity: 1;
stroke: #fff;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}


.footlogo:hover{
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  opacity: .6;
}


/********************************************/
/*********** ANIMATION TRANSITION ***********/
/********************************************/


.animate-in {
    -webkit-animation: fadeIn .5s ease-in;
    -moz-animation: fadeIn .5s ease-in;
    -o-animation: fadeIn .5s ease-in;
    -webkit-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
}

.animate-out {
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}









/********************************************/
/**************** PROJECTS ******************/
/********************************************/




.projects {
    float: left;
    position: relative;
    width: 33.33%;
    box-sizing: border-box;
    border: solid 10px white;

}

.sizepro {
    margin-top: 75%; /* 4:3 aspect ratio */
}

.elementpro {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: fff; /* show me! */
}

.what {
    box-sizing: border-box;
  position: relative;
  width: 102%;
  background: #fff;
  bottom: -3px;
  height: 98px;
  padding: 20px 30px;
}

.what h3 {
  font-family: 'ralewayextrabold';
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  width: 100%;
  overflow: hidden;
      white-space: nowrap;
  color: #333;
   text-overflow: ellipsis;
  font-size: 28px;
}

.projects:hover h3 {
  color: #455ED1;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.what span {
      display: inline-block;
    font-size: 20px;
    color: #bbb;
    margin-right: 10px;
    margin-top: 10px;
}

.hover {

  color: #fff;
  text-shadow: 0px 0px 22px rgba(150, 150, 150, 0.60);
  position: absolute;
  z-index: 2;
  font-family: 'ralewayextrabold';
  font-size: 34px;
  width: 80%;
  text-align: center;
  top: 50%;  
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;

}

.projects:hover .hover{
  opacity: 1;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;

}

.hovereffect {
  overflow: hidden;
  position: relative;
  z-index: 1;
  cursor: pointer;

}


.eye {
  position: absolute;
  z-index: 2;
  width: 50px;
  height: 50px;
  opacity: 0;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;

  top: 50%;
  left: 50%;
   margin-top: -20%; /* Half the height */
   margin-left: -25px; /* Half the width */

}

.projects:hover .eye {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  opacity: 1;
}

.hovereffect .couv {
  display: block;
  width: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
  -moz-transition: opacity 0.35s, -moz-transform 0.45s;
  -ms-transition: opacity 0.35s, -ms-transform 0.45s;
  -o-transition: opacity 0.35s, -webkit-transform 0.45s;
  transition: opacity 0.35s, transform 0.45s;
  -webkit-transform: translate3d(-40px,0,0);
  -ms-transform: translate3d(-40px,0,0);
  -moz-transform: translate3d(-40px,0,0);
  -o-transform: translate3d(-40px,0,0);
  transform: translate3d(-40px,0,0);
}

.hovereffect:hover .couv {
  opacity: 1;
  filter: alpha(opacity=60);
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}













.projet_sodi_01 { display:block; width:700px; margin:0 auto; }
.projet_sodi_04 { display:block; width:200px; margin:0 auto; }
.projet_sodi_05 { display:block; width:700px; margin:0 auto; }
.projet_sodi_06 { display:block; width:800px; margin:0 auto; }
.projet_sodi_07 { display:block; width:800px; margin:0 auto; }
.projet_pkbll_01 { display:block; width:700px; margin:0 auto; }
.projet_mealty_01 { display:block; width:200px; margin:0 auto; }
.projet_mealty_02 { display:block; width:800px; margin:0 auto; }
.projet_mealty_05 { display:block; width:600px; margin:0 auto; }
.projet_mealty_06 { display:block; width:600px; margin:0 auto; margin-top: -30px;}
.projet_gameboy_01 { display:block; width:700px; margin:0 auto; }
.projet_gameboy_02 { display:block; width:300px; margin:0 auto; }
.projet_philibert_01 { display:block; width:700px; margin:0 auto; }
.projet_philibert_02 { display:block; width:700px; margin:0 auto; }
.projet_philibert_03 { display:block; width:700px; margin:0 auto; }
.projet_philibert_04 { display:block; width:700px; margin:0 auto; }
.projet_philibert_05 { display:block; width:700px; margin:0 auto; }
.projet_philibert_06 { display:block; width:700px; margin:0 auto; }
.projet_philibert_07 { display:block; width:700px; margin:0 auto; }
.projet_dribbble_01 { display:block; width:400px; margin:0 auto; }
.projet_skate_01 { display:block; width:800px; margin:0 auto; margin-top: 20px; }
.projet_skate_02 { display:block; width:800px; margin:0 auto; margin-top: 20px; }
.projet_skate_03 { display:block; width:800px; margin:0 auto; margin-top: 20px; }
.projet_skate_04 { display:block; width:800px; margin:0 auto; margin-top: 20px; }
.projet_skate_04 { display:block; width:800px; margin:0 auto; margin-top: 20px; }
.projet_skate_05 { display:block; width:500px; margin:0 auto; margin-bottom: 80px; }
.projet_wedding_01 { display:block; width:700px; margin:0 auto; }
.projet_cupcake_01 { display:block; width:600px; margin:0 auto; }
.projet_cupcake_02 { display:block; width:600px; margin:0 auto; margin-top: 20px; }
.projet_bb_01 { display:block; width:300px; margin:0 auto; margin-bottom: 40px; }
.projet_bb_02 { display:block; width:800px; margin:0 auto; margin-top: 20px; }
.projet_tastypatty_01 { display:block; width:500px; margin:0 auto; }
.projet_tastypatty_02 { display:block; width:600px; margin:0 auto; }
.projet_billyetwally_04 { display:block; width:400px; margin:0 auto; }
.projet_billyetwally_05 { display:block; width:400px; margin:0 auto; }
.projet_billyetwally_06 { display:block; width:400px; margin:0 auto; }
.projet_billyetwally_07 { display:block; width:400px; margin:0 auto; }
.projet_totem_01 { display:block; width:700px; margin:0 auto; }
.projet_school_01 { display:block; width:700px; margin:0 auto; }
.projet_school_02 { display:block; width:700px; margin:0 auto; }
.projet_fatsfood_01 { display:block; width:500px; margin:0 auto; }
.projet_fatsfood_02 { display:block; width:400px; margin:0 auto; }
.projet_lise_01 { display:block; width:600px; margin:0 auto; }
.projet_me_01 { display:block; width:500px; margin:0 auto; }
.projet_me_02 { display:block; width:600px; margin:0 auto; }
.projet_me_03 { display:block; width:500px; margin:0 auto; }






.bold{
  /*font-family: 'ralewayextrabold';*/
  font-weight: bold;
}








.second { display: none; }
.third {display: none;}
.vistripe { display: none; }




/* -------------------------- */
/* ------- NAVIGATION ------- */
/* -------------------------- */


@media screen and (max-width: 600px) {
  #menu li svg { display: none;}
  #logo p { opacity: 0;}
  #menu li { margin-left: 10px;}
}

@media screen and (max-width: 680px) {
  #nav { top: 0 !important;}
  header{ width: 90%;}
  header h3{opacity: 1 !important; font-size: 70px !important;}
  nav.active{ height: 48px !important;}
}

@media screen and (max-width: 600px) {
  nav.active{ height: 25px !important;}
}

@media screen and (max-width: 680px) {
  #logo { margin-left: 3%;}
  #menu { margin-right: 3%;}
}

/* -------------------------- */
/* ---------- INDEX --------- */
/* -------------------------- */


@media screen and (max-width: 1100px) {
  .inner, .innerImg { width: 50%;}
  .dummy { margin-top: 70%;}
  .first { display: none;}
  .second { display: block;}
  .arrowtop {
    top: 50%;
    left: -10px;
    margin-top: -17.5px;
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  .img1 { background: url(../img/couv/index-sodi.jpg) center center; background-size: cover;}
  .img2 { background: url(../img/couv/index-pkmn.png) center center; background-size: cover;}
  .img3 { background: url(../img/couv/index-mealty.jpg) center center; background-size: cover;}
}

@media screen and (max-width: 1000px) {
  .description span { display: none;}
}

@media screen and (max-width: 900px) {
  .inner, .innerImg { width: 100%; }
  .inner .dummy { margin-top: 320px;}
  .innerImg .dummy { margin-top: 200px;}
  .inner .seemore { margin-top: 20px;}
  .second { display: none;}
  .third { display: block;}
  .description span { display: block;}
  .txt { padding: 10% 13%;} 
  .seemoremar { margin-top: 40px;}
  .vistripe { display: block;}
  .arrowright { display: none;}
  .arrowtop, .arrowleft, .arrowtest {
    left: 50%;
    top: -19px;
    margin-left: -17.5px;
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  } 
  .arrowtest { display: block; top: -37px;}
}

@media screen and (max-width: 370px) {
  .vistripe { margin-top: 40px;}
}

/* -------------------------- */
/* -------- GALLERY --------- */
/* -------------------------- */


@media screen and (max-width: 1055px) {
  .projects { width: 50%;}
}

@media screen and (max-width: 702px) {
  .projects { width: 100%;}
}


/* -------------------------- */
/* ---------- ABOUT --------- */
/* -------------------------- */

@media screen and (max-width: 900px) {
  #content p { width: 100%;}
  .pidgeon p { width: 100%;}
}

@media screen and (max-width: 1200px) {
  .column { width: 50%;}
  .meico { width: 70%;}
}

@media screen and (max-width: 960px) {
  .meico { width: 100%;}
}

@media screen and (max-width: 700px) {
  .pidgeon { width: 90%;}
  .column { width: 100%;}
  .meico { width: 60%;}
}

@media screen and (max-width: 670px) {
  .meico { width: 70%;}
  .pidgeon a { font-size: 30px; width: 330px; padding: 50px 0 60px 0;}
}

@media screen and (max-width: 480px) {
  .meico { width: 100%;}
  .pidgeon a { font-size: 20px; width: 223px; padding: 50px 0 70px 0;}
}


/* -------------------------- */
/* ---------- PROJECT ------- */
/* -------------------------- */

@media screen and (max-width: 1500px) {
  .right { padding: 20px 20px 20px 90px;}
}

@media screen and (max-width: 1000px) {
  header.smaller .ico { display: none;}
}

@media screen and (max-width: 900px) {
  .left { float: none;width: 70%; margin: 0 auto;}
  .right {
    float: none; padding: 50px 0 20px 0; width: 90%; margin: 0 auto;
  }
  .previousproject p, .previousproject span { margin-left: 10px; }
  .nextproject p, .nextproject span { margin-right: 10px; }
  .textproject { width: 90%; }
  .inline img { float: none; margin-bottom: 10px;}

}

@media screen and (max-width: 600px) {
 header.smaller h3 { top: 25%;}
 header.smaller p { top:  10%;}
 .fooblock {padding: 70px 7%;}
}

@media screen and (max-width: 500px) {
 header.smaller p { display: none;}
}




@media screen and (max-width: 600px) {
  .previousproject p { font-size: 22px;}
  .nextproject p { font-size: 22px;}
  .arrowproject { display: none;}
  .previousproject:hover { padding-left: 7%;}
  .nextproject:hover { padding-right: 7%;}
}




@media screen and (max-width: 1000px) {
  .projet_mealty_03 { width: 100%;}
  .projet_mealty_04 { width: 100%;}
}


@media screen and (max-width: 800px) {
  .projet_sodi_06 { width: 100%;}
  .projet_sodi_07 { width: 100%;}
  .projet_mealty_02 { width: 100%;}
  .projet_skate_01 { width: 100%;}
  .projet_skate_02 { width: 100%;}
  .projet_skate_03 { width: 100%;}
  .projet_skate_04 { width: 100%;}
  .projet_bb_02 { width: 100%;}
  .perso { width: 100%;}
}


@media screen and (max-width: 700px) {
  .projet_pkbll_01 { width: 100%;}
  .projet_gameboy_01 { width: 100%;}
  .projet_philibert_01 { width: 100%;}
  .projet_philibert_02 { width: 100%;}
  .projet_philibert_03 { width: 100%;}
  .projet_philibert_04 { width: 100%;}
  .projet_philibert_05 { width: 100%;}
  .projet_philibert_06 { width: 100%;}
  .projet_philibert_07 { width: 100%;}
  .projet_wedding_01 { width: 100%;}
  .projet_totem_01 { width: 100%;}
  .projet_school_01 { width: 100%;}
  .projet_school_02 { width: 100%;}
}



@media screen and (max-width: 600px) {
  .allimg { width: 100%;}
  .projet_mealty_05 { width: 100%;}
  .projet_mealty_06 { width: 100%;}
  .projet_cupcake_01 { width: 100%;}
  .projet_cupcake_02 { width: 100%;}
  .projet_tastypatty_02 { width: 100%;}
  .projet_billyetwally_01 { width: 100%;}
  .projet_billyetwally_11 { width: 100%;}
  .projet_billyetwally_12 { width: 100%;}
  #iframe { width: 100%}
  .projet_lise_01 { width: 100%;}
  .projet_me_02 { width: 100%;}


}

@media screen and (max-width: 500px) {
  .projet_sodi_08 { width: 100%;}
  .projet_sodi_09 { width: 100%;}
  .projet_skate_05 { width: 100%;}
  .projet_tastypatty_01 { width: 100%;}
  .projet_fatsfood_01 { width: 100%;}
  .projet_me_01 { width: 100%;}
  .projet_me_03 { width: 100%;}

}

@media screen and (max-width: 400px) {
  .projet_dribbble_01 { width: 100%;}
  .projet_bb_01 { width: 100%;}
  .projet_billyetwally_04 { width: 100%;}
  .projet_billyetwally_05 { width: 100%;}
  .projet_billyetwally_06 { width: 100%;}
  .projet_fatsfood_02 { width: 100%;}

}


@media screen and (max-width: 340px) {
  .projet_billyetwally_02 { width: 100%;}
}


@media screen and (max-width: 300px) {
  .projet_gameboy_02 { width: 100%;}
}