body{
font-family: 'Rajdhani', sans-serif;
margin: 0px;
}

h1{
  font-size: 48pt;
  margin-bottom: 0px;
}

h2{
  font-size: 36pt;
  margin-top: 0px;
  font-weight: lighter;
}

h3{
  color:#02cfcf
}

a{
  text-decoration:none;
  color: black;
}

input{
  font-family: 'Rajdhani', sans-serif;
  font-size: 12pt;
  width: 800px;
  color: #ACACAC;
  height: 32px;
  border: 2px solid #02cfcf;
  margin-bottom : 5px;
}

textarea{
  font-family: 'Rajdhani', sans-serif;
  font-size: 12pt;
  width: 796px;
  color: #ACACAC;
  height: 256px;
  border: 2px solid #02cfcf;
  margin-bottom : 5px;
  padding-top: 10px;
}

.boutonMenu{
  width: 300px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom : 20px;
  padding-top: 10px;
  padding-bottom : 10px;
  padding-left: 20px;
  padding-right: 20px;
  border: 2px solid #02cfcf;
  text-align : center;
  display:inline-block;
  font-size: 30pt;
  vertical-align:middle;
}

.boutonMenu:hover{
  background-color: #02cfcf;
  color: white;
  cursor: pointer;

}

.envoyer{
  width: 200px;
  height: 45px;
  background: white;
}

.envoyer:hover{
  background-color: #02cfcf;
  color: white;
  cursor: pointer;
}

.imageProjet{
  float: left;
  margin: 0px 50px;
}


#pagePrincipale{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

}
@media screen and (min-width: 1650px){
#border{

  position: absolute;
  top:0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  border: 10px solid #02cfcf;
}

#bordertop{

  position: absolute;
  top:0px;
  right: 0px;
  width: 100%;
  height:10px;
  background-color: white;
  animation-duration: 1s;
  animation-name: borderload;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

#borderright{
  position: absolute;
  bottom:0px;
  right: 0px;
  height: 100%;
  width: 10px;
  background-color: white;
  animation-duration: 1s;
  animation-name: borderload2;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  animation-timing-function: linear;
}

#borderbot{
  position: absolute;
  bottom: 0px;
  width: 100%;
  height:10px;
  background-color: white;
  animation-duration: 1s;
  animation-name: borderload;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  animation-timing-function: linear;
}

#borderleft{
  position: absolute;
  top:0px;
  left: 0px;
  height: 100%;
  width: 10px;
  background-color: white;
  animation-duration: 1s;
  animation-name: borderload2;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  animation-timing-function: linear;
}
@keyframes borderload {
  from {
    width: 100%;
  }
  to{
    width: 0%;
  }
}
@keyframes borderload2 {
  from {
    height: 100%;
  }
  to{
    height: 0%;
  }
}
}

#rs{
    z-index: 99;
  position: absolute;
  top: 20px;
  right: 20px;
}
#retour{
  z-index: 99;
  position: absolute;
  top: 20px;
  left: 20px;
}
#pagePortfolio{
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#gallerie{
  display:inline-block;
  text-align: center;
}

#pageProjet{
  margin-top: 70px;
  display: none;
}
#description{
  margin-right: 3%;
  width: 30%;
  float: right;
}

#illustration{
margin-left: 4%;
width: 60%;
float: left;
}

@media screen and (max-width: 950px){
  #description{
    float: none;
    width: 80%;
    margin: 20px;
  }

  #illustration{

  top: 0px;
  margin-left: 0%;
  width: 100%;
  float: none;
  }
#pageProjet{
  margin-top: 0px;
}
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }




#pageContact{
  position: relative;
}

#formContact{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

#rsContact{
  position: absolute;
  bottom: -10px;
  right: 0px;
}


/*
@font-face{font-weight:normal;font-style:normal;font-family:'feathericons';src:url('../fonts/feathericons/feathericons.eot?-8is7zf');src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg')}
*, *:after, *:before {box-sizing: border-box;}
.grid{text-align:center}
.grid figure{position:relative; display: inline-block; float:left;overflow:hidden;margin:10px 1%;min-width:400px;max-width:400px;max-height:400px;width:48%;background:#3085a3;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:inline-block;min-height:100%;max-width:100%;opacity:.8}
.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}
.grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}
.grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure h2{word-spacing:-0.15em;font-weight:300}
.grid figure h2 span{font-weight:800}
.grid figure h2,.grid figure p{margin:0}
.grid figure p{letter-spacing:1px;font-size:68.5%}
@media screen and (max-width:50em){
.grid figure{display:inline-block;float:none;margin:10px auto;width:100%;text-align: center;}
}
*/
@font-face{font-weight:normal;font-style:normal;font-family:'feathericons';src:url('../fonts/feathericons/feathericons.eot?-8is7zf');src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg')}
*, *:after, *:before {box-sizing: border-box;}
.grid{
  display:none;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width:1700px){
.grid { transform: none; top: 20px;}
}
.grid figure{position:relative;float:left;overflow:hidden;margin:20px 1%;min-width:400px;max-width:400px;max-height:400px;width:48%;background:#3085a3;text-align:center;cursor:pointer}
.grid figure{display:inline-block;float:none;margin:2px 2px;width:100%}
.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:.8}
.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}
.grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}
.grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure h2{word-spacing:-0.15em;font-weight:300}
.grid figure h2 span{font-weight:800}
.grid figure h2,.grid figure p{margin:0}
.grid figure p{letter-spacing:1px;font-size:68.5%}
@media screen and (max-width:50em){
.grid figure{display:inline-block;float:none;margin:10px auto;width:100%}
}


figure.effect-bubba{background:#02cfcf}
 figure.effect-bubba img{opacity:1;-webkit-transition:opacity .35s;transition:opacity .35s}
 figure.effect-bubba:hover img{opacity:.4}
 figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after{position:absolute;top:30px;right:30px;bottom:30px;left:30px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
 figure.effect-bubba figcaption::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1)}
 figure.effect-bubba figcaption::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0)}
 figure.effect-bubba h2{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;padding-top:30%;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
 figure.effect-bubba p{padding:20px 2.5em;opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
 figure.effect-bubba:hover figcaption::before,figure.effect-bubba:hover figcaption::after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
 figure.effect-bubba:hover h2,figure.effect-bubba:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}