@import url(../inc/reset.css);
@import url(../inc/reset.css);
body {
  font-family: "Josefin Slab", serif;
  line-height: 25px;
  background-color: rgba(227, 195, 145, 0.6); }
  body a:hover {
    color: #ff5a5f;
    text-underline: none; }

nav {
  line-height: 50px;
  background: #6b9aad;
  height: 50px;
  width: 100%;
  position: fixed;
  z-index: 10; }
  nav li {
    line-height: 50px;
    float: left;
    font-size: 120%;
    margin: 2px 10px 20px 30px; }
    nav li a {
      line-height: 50px;
      text-decoration: none;
      color: white; }
    nav li a:hover {
      text-decoration: none;
      color: #ff5a5f; }
  nav .contact {
    float: right;
    margin: 2px 10px 20px 30px; }

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 99999999;
  /* Sit on top */
  left: 0;
  top: 0;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  background-color: rgba(255, 90, 95, 0.9); }
  .overlay li {
    color: #6b9aad; }

.overlay-content {
  margin-top: 100px;
  z-index: 9;
  display: block; }
  .overlay-content span {
    margin: 80px; }
  .overlay-content a {
    line-height: 40%;
    font-size: 10vw;
    margin: 25px;
    width: 100%;
    height: auto;
    margin-top: 5%;
    float: left;
    -ms-grid-column-align: center;
    justify-self: center;
    margin-left: 15%;
    text-decoration: none;
    color: white; }
  .overlay-content a:hover {
    color: #548cbe; }

.close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px; }
  .close img {
    width: auto;
    height: 150px; }

@media (min-width: 930px) {
  .on {
    display: none; } }

@media (max-width: 928px) {
  nav {
    line-height: 250%;
    font-size: 150%;
    height: 50px; }
    nav li > a {
      line-height: 25px;
      display: none; }
      nav li > a span {
        margin: 80px; }
    nav img {
      display: none; }
  nav .on {
    color: white;
    display: block;
    margin-left: -10px;
    margin-top: 7px;
    cursor: pointer; } }

footer {
  width: 100%;
  height: 100%;
  background: #6b9aad;
  color: white;
  position: -webkit-sticky;
  position: sticky; }
  footer .address {
    float: left;
    margin: 10px 0px 10px 10px; }
  footer .tel {
    float: right;
    margin: 10px 10px 0 0; }
  footer .share {
    clear: both;
    width: 100%; }

body {
  opacity: 1;
  -webkit-transition: 5s opacity;
  -o-transition: 5s opacity;
  transition: 5s opacity; }

.fadeOut {
  opacity: 0;
  -webkit-transition: none;
  -o-transition: none;
  transition: none; }

body nav {
  -webkit-transition: top 0.3s;
  -o-transition: top 0.3s;
  transition: top 0.3s;
  top: -75px; }

body main .paralax {
  height: 85vh;
  background: url("../../images/index/exterieur-min.jpg") no-repeat fixed center;
  -webkit-background-size: cover;
  background-size: cover;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 500px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }
  body main .paralax span {
    margin-top: 23vh;
    position: absolute;
    font-size: 5em;
    color: white;
    text-align: center; }
  body main .paralax h1 {
    line-height: 123%;
    margin-top: 43vh;
    width: 80%;
    position: absolute;
    font-size: 160%;
    color: white;
    text-align: center; }
  body main .paralax h2 {
    line-height: 125%;
    position: absolute;
    width: 90%;
    margin-top: 55vh;
    font-size: 150%;
    color: white;
    text-align: center; }
  body main .paralax .fleche {
    margin-top: 70vh;
    color: white;
    font-size: 300%; }

body main article div {
  margin: 10vh 4em 80px 4em; }
  body main article div p {
    font-size: 110%; }

body main .i2 figure {
  width: 100%;
  margin: 0 0 6vh 0; }
  body main .i2 figure img {
    width: 100%; }

body main .i2 h2 {
  margin: 3vh 4em 0px 3.6em;
  font-size: 125%; }

body main .i2 p {
  font-size: 110%;
  margin: 3vh 4em 80px 4em; }

@media (max-width: 668px) {
  body main .paralax {
    height: 87vh; }
    body main .paralax span {
      font-size: 300%; }
    body main .paralax h1 {
      margin-top: 40vh;
      font-size: 120%; }
    body main .paralax h2 {
      font-size: 100%; }
  body main article div {
    margin: 10vh 2em 80px 2em; }
    body main article div p {
      font-size: 110%; }
  body main .i2 article h2 {
    margin: 8vh 2em 0px 2em; }
  body main .i2 article p {
    margin: 4vh 2em 80px 2em; } }