@import url("https://fonts.googleapis.com/css?family=Schoolbell");
body {
  margin: 0;
  background: #FFF;
  width: 100%;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

a {
  text-decoration: none;
  color: #f9c85d;
}
a:first-child {
  color: rgba(0, 55, 255, 0.9);
}
a:last-child {
  color: #ff333d;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.51);
  background-color: rgba(19, 46, 5, 0.51);
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #111;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#e9a616), to(#c05d07), color-stop(0.6, #eb1e55));
}

svg {
  will-change: transform;
}

.path {
  mix-blend-mode: multiply;
}

@supports not (mix-blend-mode: multiply) {
  .path {
    fill: #000 !important;
    opacity: .6;
  }
}
section.mobile {
  display: none;
}

section.mobile-footer {
  display: none;
}

section.all {
  width: 90%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 5%;
  z-index: 9;
  text-align: justify;
  color: #eee;
  font-size: 20px;
  font-family: "schoolbell", cursive;
  line-height: 1.8em;
}
section.all h1 {
  font-size: 1.5em;
}
section.all h2 {
  font-size: 1.3em;
}
section.all p {
  font-size: 1em;
  line-height: .8em;
}
section.all .exp {
  font-size: .7em;
  line-height: 1.7em;
  font-family: "Open Sans", sans-serif;
  color: gray;
}
section.all .exp i {
  color: #cdcdcd;
}

.gal {
  position: absolute;
  border: black;
  opacity: 0;
  z-index: 100;
  -webkit-mix-blend-mode: lighter;
  top: 2vh;
  left: 75%;
  width: 20%;
  height: 36%;
  z-index: 10;
  -webkit-animation: appear 11s ease-in 1 forwards;
          animation: appear 11s ease-in 1 forwards;
}

.tel {
  position: absolute;
  -webkit-box-shadow: 3vh 3vh 3vh rgba(0, 0, 0, 0.1);
          box-shadow: 3vh 3vh 3vh rgba(0, 0, 0, 0.1);
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
}

@-webkit-keyframes appear {
  to {
    opacity: .7;
  }
}

@keyframes appear {
  to {
    opacity: .7;
  }
}
.tel {
  position: relative;
  border: black;
  -webkit-box-shadow: 3vh 3vh 3vh rgba(0, 0, 0, 0.1);
          box-shadow: 3vh 3vh 3vh rgba(0, 0, 0, 0.1);
  bottom: 34vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 330vh;
}

@media (max-width: 1019px) {
  body {
    overflow-x: hidden;
    font-size: 11px;
    width: 100%;
    height: 50vh;
  }

  .tel {
    width: 90% !important;
    top: -150px !important;
  }

  section.all {
    display: none;
  }

  section.mobile {
    width: 90%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 5%;
    z-index: 2;
    text-align: justify;
    color: #eee;
    font-size: 11px;
    font-family: "schoolbell", cursive;
    line-height: 1.8em;
  }

  h2:after {
    content: " \A Pour activer ACOR DOCS, descendez l'ascenseur.";
    white-space: pre;
    font-size: .5em;
    font-family: "Open Sans", sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: .5;
  }
}
section.footer-mobile {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 0;
  padding: 1em 2em 1em 1em;
  left: 0;
  z-index: 9;
  text-align: justify;
  background: white;
  color: gray;
  font-size: 11px;
  font-family: "schoolbell", cursive;
  line-height: 1.8em;
}
section.footer-mobile p {
  width: 80%;
  margin-left: 10%;
  font-family: "Open Sans", sans-serif;
}

@media (max-width: 599px) {
  body {
    font-size: 18px;
  }

  .tel {
    top: -100px !important;
    height: auto;
  }

  section.footer-mobile {
    position: fixed;
  }

  p {
    font-size: .9em;
    line-height: 1.3em;
  }
}
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}