@media screen and (max-width: 768px) {
  #site-border-bottom,
  #site-border-left,
  #site-border-right,
  #site-border-top {
    z-index: 2;
  }

  body,
  html {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
  }

  .titleMobile {
    color: #333 !important;
    font-weight: 600 !important;
    text-decoration: underline #333 !important;
    position: absolute !important;
    width: 95% !important;
  }

  /* nav */
  .navMobile {
    display: flex !important;
    flex-direction: column;
    height: 25vh !important;
    background-color: black !important;
    width: 100% !important;
    transform: translateY(-100%);
  }

  .navMobile a {
    border: none !important;
    padding: 0 !important;
  }

  #masthead {
    background: none;
  }

  @keyframes animateMenu {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0%);
    }
  }

  #icon_menu {
    display: none;
    color: white;
    position: absolute;
    top: 1rem;
    right: 3vw;
    transform: scale(1.4);
    z-index: 20000;
    background-color: black;
    padding: 0.6rem;
  }

  .panels-navigation {
    width: 100% !important;
    justify-content: space-around !important;
    margin: 1rem auto 0.5rem auto !important;
    right: 0 !important;
    z-index: 3 !important;
    display: none !important;
  }

  .panels-navigation > a {
    text-align: center;
  }

  .nav-panel {
    width: 100% !important;
    margin: 0 !important;
    text-align: center;
  }

  /* root */
  #content {
    max-height: 100vh;
    max-width: 100%;
    position: relative;
  }

  /* intro */
  #intro {
    height: 100vh;
    width: 100%;
    position: absolute;
    z-index: 1;
    background-color: #dddddd;
  }

  #next {
    align-self: flex-end;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
  }

  /* panels */
  #panels-container {
    height: 100vh;
    width: 100% !important;
    display: block !important;
  }
  #panels {
    height: 100vh;
    width: 100%;
    position: absolute;
  }

  /* .panel {
    overflow: visible !important;
  } */

  /* panel 1 landing page */
  #panel-1 {
    opacity: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #panel-1 h1 {
    font-size: 2rem;
  }

  /* panel 2 */

  #panel-2 {
    /* overflow: auto !important; */
  }

  /* panel 4 about */
  /* #panel-4 .container,
  #panel-4 .row,
  #panel-4 .about {
    width: 100%;
    height: 100vh;
  } */

  #panel-4 {
    text-align: center;
    margin: 0;
    height: 100% !important;
    overflow: scroll !important;
    height: 100vh !important;
    /* position: inherit !important; */
  }

  #panel-4 .about {
    margin: 0;
    /* overflow: scroll; */
    height: auto;
  }

  .about h3 {
    font-size: 1.5rem;
    text-align: center;
  }

  .about p {
    font-size: 1rem;
    margin: 0 1rem;
  }

  #panel-4 .panels-navigation {
    position: inherit !important;
    margin-top: 2rem;
  }

  #panel-4 .elem-5 {
    padding-bottom: 2rem;
  }

  #panel-4 .elem-1 {
    margin-top: 6rem;
  }

  #panel-4 .row {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #panel-4 .backImage {
    width: 95%;
  }

  /* #panel-4 .row img {
    width: 50%;
    height: 50% !important;
    margin: 0 auto;
    padding-bottom: 2rem;
  } */

  /* panel 5 contact */
  #send_mail {
    flex-direction: column;
    height: auto;
    width: 100%;
    /* justify-content: flex-end !important; */
  }

  #blocContact {
    width: 100% !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #submit_mail {
    width: 85%;
    margin: 0 auto;
  }

  #textContact {
    width: 100% !important;
    margin: 0;
    padding: 0;
  }

  .list-unstyled > li {
    font-size: 1rem;
  }

  #textContact h3 {
    font-size: 1.3rem;
    width: 75%;
    margin: 1rem auto;
    text-align: center;
  }

  .icon_contact {
    font-size: 1.5rem;
    margin: 1rem 0 5rem 0;
    display: flex;
    justify-content: space-around;
  }

  .form-group {
    margin: 0.5rem auto;
    width: 85%;
  }

  .form-control {
    padding: 0;
  }

  /* DIVERS */
  iframe {
    height: 95vh !important;
    z-index: 5;
  }

  #map {
    display: none;
  }
}