* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.dm-serif display-regular {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}


.header{
    font-family: "DM Serif Display", serif;
    width: 100%;
    height: 10vh;
    display: flex;
    flex-wrap: wrap;
    background: #0b5f3f;
    padding-left: 5rem;
    
}

.header a {
    display: inline-block;
    text-decoration: none;
    margin: auto 1rem auto 2rem;
    font-size: 1.25rem;
    color: #e3e5ea;
}

.footer {
    width: 100%;
    height: 10vh;
    background: #0b5f3f;
    color: #e3e5ea;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "DM Serif Display", serif;
    font-size: 1.5rem;
    margin-top: 6rem;
}

.footerFixe{
    position: fixed;
        left: 0;
        bottom: 0;
}

.h2Title{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0b5f3f;
    color:#e3e5ea;
    height: 10rem;
}

.conteneurParking{
    width: 80%;
    margin: 0 10%;
    display: flex;
    align-items: center;
    color: #0b5f3f;
    margin-top: 4rem;
}

.listeParking{
    width: 50%;
    
}

.vueCadeau{
    width: 90%;
    margin: 5%;
    
    -webkit-box-shadow: 0px 0px 31px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 31px -6px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 31px -6px rgba(0, 0, 0, 0.75);
}

.cadeauFlex{
    padding: 0 5% 2% 5%;
    display: flex;
}

.vueCadeau h2{
    text-align: center;
    padding: 2%;
}

.cadeauListe{
    width: 50%;
    font-size: 20px;
}

 #myProgressBar {
    appearance: none;
    width: 40%;
    height: 5%;
   
 }

.myProgressBar {
      appearance: none;
      width: 100% !important;
      height: 5%;
  }

progress[value]::-webkit-progress-bar {
      background-color: #e3e5ea;
      border: #0b5f3f 1px solid;
    border-radius: 4px;
  }
  progress[value]::-webkit-progress-value {
      background-image: linear-gradient(#0b5f3f, #0b5f3f);;
      border-radius: 4px;
      background-size: 20px 15px, 100% 100%, 100% 100%;
  }

 #progressText {
     font-size: 2rem;
 }

.progressText {
      font-size: 2rem;
    
  }

.cadeauListe p{
    margin: 2rem 0;
}

.parkingListe{
    margin: 2rem;
    font-size: 20px;
}

 .conteneurListe {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     width: 90%;
     margin: 2rem auto;
 }

.saveDate{
    display: block;
    text-align: center;
    margin: 5% 0;
    color: #0b5f3f;
}

.saveDate h2{
    font-family: "DM Serif Display", serif !important;
    margin: 2.5%;
}

.saveDate h3 {
font-family: "Roboto", sans-serif !important;
}

.saveDate img{
    margin: 2.5%;
}

 .conteneurListe a {
     background: #e3e5ea;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     color: rgb(53, 53, 53);
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     -webkit-box-shadow: 0px 0px 31px -6px rgba(0, 0, 0, 0.75);
     -moz-box-shadow: 0px 0px 31px -6px rgba(0, 0, 0, 0.75);
     box-shadow: 0px 0px 31px -6px rgba(0, 0, 0, 0.75);
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-property: box-shadow, transform;
     transition-property: box-shadow, transform;
 }

 .conteneurListe a:hover {
     -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
     -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
     box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
     -webkit-transform: scale(1.05);
     transform: scale(1.05);
 }

 .liste {
     display: block !important;
     font-family: "DM Serif Display", serif;
     margin: 1rem;
     padding: 2rem;
 }

 .liste a {
     height: 200px;
 }

 .liste p {
     font-size: 1.5rem;
     text-align: center;
padding: 1% 0;
 }

 .liste img {
     margin: auto;
     display: block;
 }

 .formCadeau1{
    width: 50%;
    color: #0b5f3f;
 }

 .formCadeau1 a{
    background: #0b5f3f;
    color: #e3e5ea;
    outline: none;
    border: none;
    font-size: 17px !important;
    text-decoration: none;
 }

  .submitBtn{
      background: #0b5f3f;
      color: #e3e5ea;
      outline: none;
      border: none;
      font-size: 20px !important;
      padding: 1% 2%;
  }

 .formCadeau1 input{
    margin: 1% 2% 1% 0 ;
    width: 40%;
 }

 .formCadeau1MarginPadding{
    margin: 2% 0 0 !important;
    padding: 2% !important;
    cursor: pointer;
    
 }

.formCadeau1Padding{
    padding: 1% 2% !important;
cursor: pointer;
}

.marginAForm{
    margin: 5% 0 0 0;
}

.conteneurViremement{
    width: 60%;
    background: grey;
    padding: 2% 5%;
    color: #e3e5ea;
    margin: 5% 0;

}

#desactive{
    display:none;
}

.btnPaypal{
display: none;
}



.mapsParking{
    width: 640px !important;
    height: 480px;
    position: relative;
    overflow: hidden;
}

.mapsHotel{
    width: 640px !important;
    height: 1080px;
    position: relative;
    overflow: hidden;
}

.cadeauListe img {
    width: 300px !important;
}

.conteneurListe img{
    width: 214px;
height: 214px
}

 @media screen and (max-width: 768px) {
.conteneurParking {
    display: inline-block;
}

.cadeauFlex{
    display: inline-block;
}

.header{
    padding-left: 0;
}

.listeParking{
    width: 80%;
}

.mapsParking{
    width: 100% !important;
}

.mapsHotel{
    width: 100% !important;
    height: 40% !important;
}

.cadeauListe{
    width: 100%;
}

.formCadeau1{
    width: 100%;
}

.formCadeau1MarginPadding{
    padding: 3% 5% !important;
}

.formCadeau1Padding {
    padding: 2% 5% !important;
    
}

.marginAForm{
    display: flex;
    flex-wrap: wrap;
}

.conteneurViremement{
    width: 100% !important;
}

.submitBtn{
    padding: 2% 5%;
    width: 100% !important;
}

.formCadeau1 input{
    width: 60%;
}

.footer{
    font-size: 15px;
}

}