@import url(./halloween.css);

.alinea {
    text-indent: 3em;
}

.justify {
    text-align: justify;
}

#iconecadeau {
    visibility: hidden;
    color:rgb(255, 188, 4);
}

.citation {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 30px rgb(202, 202, 202);
    /* box-shadow: 0px 0px 50px rgb(252, 241, 216) inset; */
    border-radius: 20px;
    padding: 10px;

}

.quote {
    display:inline-block;
    margin:1em;
    overflow:hidden;
    box-shadow: 0px 0px 30px rgb(202, 202, 202);
    blockquote {
      background-color:#fff;
      border: solid 2px #757575;
      display: inline-block;
      margin: 0;
      padding: 1em;
      position: relative;
      &:before {
        background-color: #fff;
        bottom: -10%;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: -10%;
        transform: rotate(-15deg) skew(5deg);
      }
      cite {
        display: block;
        font-style: italic;
        font-family: Lucida Handwriting, cursive;
        text-align: right;
        &:before {
          content: "- ";
        }
      }
      p {
        font-family: Lucida Handwriting, cursive;
        text-align: center;
      }
      > * {
        position: relative;
        z-index: 1;
      }
    }
}

.quote:hover {
    transform: scale(101%);
}

.img-citation {
    border: 1px solid #1b1b1b;
    border-radius: 50%;
    display: block;
    width: 120px;
    height: 120px;
    margin: auto;
    box-shadow: 0px 0px 30px rgb(202, 202, 202);
}

.img-citation:hover {
    transform: scale(101%);
}

.card-offre {
    background-color: white;
    border-radius: 30px;
    box-shadow: 0px 0px 30px rgb(202, 202, 202);
}

.card-offre:hover {
    transform: scale(101%);
}

.img-card {
    width: 90%;
    border-radius: 30px;
    margin: 10%;
    box-shadow: 0px 0px 30px rgb(202, 202, 202);
}

.bg-blanc {
    background-color: white;
    box-shadow: 0px 0px 30px rgb(202, 202, 202);
}

.bg-jaune {
    background-color: rgb(253, 222, 118);
}
.bg-blanc:hover {
    transform: scale(101%);
}

.radius {
    border-radius: 25px;
}

.read-more {
    color: #1b1b1b;
    text-decoration: none;
    padding-bottom: 7px;
    border-bottom: solid 2px rgb(233, 84, 32);
}

.read-more:hover {
    font-weight: bold;
    color: #1b1b1b;
    text-decoration: none;
    padding-bottom: 10px;
}

.li-center {
    list-style-position: inside;
}

.card:hover {
    transform: scale(101%);
}

.bouton-blanc {
    background-color: white;
    font-size: large;
}

.bouton-blanc:hover {
    background-color: rgb(248, 248, 248);
}


  
#pop-up {
	position: fixed;
    display: flex;
    justify-self: center;
    z-index: 2;
    border-radius: 10px;
    text-align: center;
	width: 400px;
    height: 400px;
	top: 25%;
	

	animation-name: pop-up;
  	animation-duration: 2s;
	animation-delay: 6s;
	animation-fill-mode: both;
}

.image {
    background-image: url("/assets/images/vacances.jpg");
    background-size: 100% 100%;
}

.icone-navbar {
    float: left;
}

.icone-full {
    margin: 0px;
}

.icone-mobile {
    margin: 0px;
    position: absolute;
    right: 20px;
    top: 50px;
}

.buton-navbar {
    position: absolute;
    left: 58%;
    top: 55px;
}
/* @keyframes pop-up {
	from {opacity: 0%;}
	to {opacity: 100%;}
} */


.image-avis {
    background-image: url("/assets/images/avis.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 450px;
    display: grid;
    place-items: center;
}

.text-avis {
    text-align: center;
    margin-right: 15%;
    margin-left: 15%;
    margin-top: 10%;
}

.input-center {
    display: block;
    margin: auto;
}


#progress {
  position: relative;
  margin-bottom: 30px;   
}

#progress-bar {
  position: absolute;
  background: rgb(233, 84, 32);
  height: 10px;
  /* width: 33%; */
  top: 40%;
  left: 0;
}

#progress-num {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

#progress-num::before {
  content: "";
  background-color: lightgray;
  position: absolute;
  top: 40%;
  left: 0;
  height: 10px;
  width: 100%;
  z-index: -1;
}

#progress-num .step {
  border: 5px solid lightgray;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  line-height: 45px;
  text-align: center;
  background-color: #fff;
  font-family: sans-serif;
  font-size: 25px;    
  position: relative;
  z-index: 1;
}

#progress-num .step.active {
  border-color: rgb(233, 84, 32);
  background-color: rgb(233, 84, 32);
  color: #fff;
}

.link-conditions-reservation {
    color: rgb(233, 84, 32);
    text-decoration: underline;
    cursor: pointer;
}

.link-conditions-reservation:hover {
    color: rgb(164, 60, 22);
}


@keyframes pop-up {
    0% {
        top: -100%
    }
    70% {
        top: 25%;
    }
    100% {
        top: 15%;
    }
}


@media (min-width: 1350px) {

    .nav-item {
        margin-left: 20px;
    }
}

@media (min-width: 992px) {
    .img-card {
        transform: translateX(-80px); 
    } 

    .card-img {
        width: 40%;
    }
    
    .card-contenue {
        width: 60%;
    }

    .icone-mobile {
        display: none;
    }

    #pop-up {
        width: 500px;
        height: 500px;
    }
}

@media (max-width: 992px) {
    #iconecadeau {
        visibility: visible;
    }

    .card-offre {
        margin-top: 80px;
    }

    .img-card {
        transform: translateY(-80px);
    }

    .card-img {
        width: 90%;
    }
    
    .card-contenue {
        width: 100%;
        margin-top: -80px;
    }

    /* #pop-up {
        right: 20%;
	    left: 20%;
    } */

    .icone-full {
        display: none;
    }
    
    .nav-item {
        margin-left: 20px;
    }
}

@media (max-width: 768px) {
    .img-citation {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 450px) {
    #pop-up {
        width: 300px;
        height: 300px;
    }
}

@media (min-width: 1650px) {
    .image-avis {
        width: 500px;
        margin: auto;
    }
}

@media (min-width: 767px) and (max-width: 964px) {
    .description-avis {
        font-size: 13px;
    }
}

@media (min-width: 550px) and (max-width: 767px) {
    .image-avis {
        width: 500px;
        margin: auto;
    }
}

@media (max-width: 400px) {
    .description-avis {
        font-size: 13px;
    }

    .image-avis {
        height: 350px;
    }
}

@media (max-width: 350px) {
    .description-avis {
        font-size: 11px;
    }
}