#services {
  width: 90vw;
}

.presta {
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.presta .textblock {
  width: 100%;
  max-width: 600px;
  min-width: 400px;
}
.presta .listPresta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  width: 100%;
  min-width: 400px;
  height: 400px;
}
.presta .listPresta div {
  width: 75%;
  border: solid black 2px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.presta .listPresta div:hover {
  box-shadow: 2px 5px #e4d8d8;
  cursor: pointer;
}
.presta .listPresta .selectBtn {
  position: relative;
}
.presta .listPresta .selectBtn span {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #4F033C;
  rotate: 15deg;
  border-radius: 5px;
  top: 0.25rem;
  animation: spin 2s linear infinite, slide-up 0.2s linear;
}
.presta .listPresta .selectBtn .left {
  left: -0.75rem;
}
.presta .listPresta .selectBtn .right {
  right: -0.75rem;
}
.presta .noshow {
  display: none;
}

.explanation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  height: 100%;
}
.explanation .price {
  font-size: large;
  font-family: "Oswald", sans-serif;
  width: auto;
  justify-self: flex-end;
  align-self: flex-end;
}
.explanation ul {
  list-style-type: none;
}
.explanation span {
  font-weight: bolder;
}

#services .sm-screen {
  display: none;
  visibility: none;
}

.services_list {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.service_card_detailed {
  background-image: url("../ressources/images/stacked-waves-haikei.svg");
  background-size: cover;
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  width: 380px;
  max-width: 98vw;
  height: 500px;
  border-radius: 15px;
  color: black;
  font-weight: 600;
  overflow: hidden;
}
.service_card_detailed .service_card_title {
  background-color: #000;
  color: white;
  width: 100%;
  max-width: 100%;
  padding: 5px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.service_card_detailed .service_card_title h4 {
  font-size: 1.5em;
  width: 100%;
  text-align: center;
}
.service_card_detailed .service_card_description {
  color: white;
  text-align: justify;
}
.service_card_detailed .service_card_description ul {
  list-style: none;
}
.service_card_detailed .service_card_description ul li {
  padding-left: 20px;
  position: relative;
}
.service_card_detailed .service_card_description ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-80%);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23fff'><path d='M400-280v-400l200 200-200 200Z'/></svg>");
}

@keyframes slide-up {
  0% {
    width: 0.5rem;
    height: 0.5rem;
    top: 5rem;
  }
  100% {
    width: 1.5rem;
    height: 1.5rem;
    top: 0.25rem;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 900px) {
  #services .lg-screen {
    display: none;
    visibility: none;
  }
  #services .sm-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  #services .sm-screen .listPresta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 80%;
  }
  #services .sm-screen .listPresta .price {
    align-self: center;
  }
  #services .sm-screen .listPresta .selectBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 80%;
    height: 50px;
    border: #000 solid 2px;
  }
  #services .sm-screen .listPresta .selectBtn:hover {
    cursor: pointer;
    background-color: #e4d8d8;
  }
  #services .sm-screen .listPresta .noshow {
    display: none;
  }
  .textblock {
    width: 100%;
    height: 430px;
  }
  .textblock .noselection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
  }
  .textblock .noshow {
    display: none;
  }
}/*# sourceMappingURL=services.css.map */