.mask {
    width: 100%;
    height: 100%;
    bottom: 0px;
    position: absolute;
}
/*
input_dropoff
*/

@media (min-width: 992px) {
    #mainNav {
      border-color: transparent;
      background-color: rgba(0,0,0,0.8) !important;
    }
    #mainNav:hover {
      background-color: rgba(0,0,0,0.8) !important;
    }
    #mainNav .navbar-brand {
      color: rgba(255, 255, 255, 0.7);
    }
    #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
      color: #fff;
    }
    #mainNav .navbar-nav > li.nav-item > a.nav-link {
      padding: 0.5rem 1rem;
    }
    #mainNav .navbar-nav > li.nav-item > a.nav-link,
    #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
      color: rgba(255, 255, 255, 0.7);
    }
    #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
    #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
      color: #fff;
    }
    #mainNav.navbar-shrink {
      border-bottom: 1px solid rgba(33, 37, 41, 0.1);
      background-color: #fff;
    }
    #mainNav.navbar-shrink .navbar-brand {
      color: #18BC9C;
    }
    #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
      color: #212529;
    }
    #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
    #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
      color: #FFFF29;
    }
    #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
    #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
      color: #18BC9C;
    }
    #carouselExampleSlidesOnly {
      margin-top: initial;
    }
    .nav-wrapper {
      position: initial;
    }
    .navbar-nav .dropdown-menu-right{
      left: auto!important;
    }
    
  }
  @media screen and (min-width: 896px) {
    .box-reza {
      position: absolute;
      top: 65px;
      left: 0;
      width: 450px;
    }
    .box-reza .title {
      display: none;
    }
    .box-reza .form-search-wrap{
      padding-top: 5px;
      background: rgba(230, 228, 228, 0.8);
    }
    .carousel-caption {
      top: 350px;
      right: -502px;
    }
    .content-price {
      position: absolute;
      top: 15px;
      right: 15px;
    }
    .content-caracteristique {
      position: absolute;
      bottom: 25px;
      right: 25px;
      left: initial;
    }
    .agences .map-focused {
      display: block;
    }
  }
 
  @media screen and (min-width: 1198.99px) {
    .box-reza {
      position: absolute;
      top: 350px;
      left: calc(50% - 580px);
      width: auto;
    }
    .box-reza .form-search-wrap{
      padding-top: 20px;
    }
    .carousel-caption {
      top: 250px;
      right: 15%;
    }

    .form-search-wrap .btn-search .btn {
        position: absolute;
        right: 5px;
        padding: 45px 30px;
        top: -76px;
        bottom: auto;
    }
  }

  @media screen and (min-width: 1427px) {
    .box-reza {
      position: absolute;
      top: 370px;
    }
    .carousel-caption {
      top: 200px;
    }
  }

  @media screen and (min-width: 2038px) {
    .box-reza {
      position: absolute;
      top: 600px;    
    }
    .carousel-caption {
      top: 500px;
    }
  }
 
  @media screen and (max-width: 1198px) {
    .box-reza .form-search-wrap{
      background: rgba(218, 218, 218, 0.48);
    }
  }

  @media screen and (max-width: 575px) {
    #contact iframe, #contact #overlay {
      height: 550px;
    }
    .section-title h2 {
      font-size: 20px;
    }
  }
  @media screen and (max-width: 400px) {
    .number-day-resa, .status-resa, .date-resa {
      font-size: 10px;
    }
    .progress{
      margin: 5px!important;
    }
  }