/*Dialog Styles*/
dialog {
  padding: 1rem 1rem;
  background: white;
  max-width: 75%;
  padding-top: 2rem;
  border-radius: 15px;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
  -webkit-animation: fadeIn 1s ease both;
          animation: fadeIn 1s ease both;
}
dialog::-webkit-backdrop {
  -webkit-animation: fadeIn 1s ease both;
          animation: fadeIn 1s ease both;
  background: rgba(255, 255, 255, 0.4);
  z-index: 2;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
dialog::backdrop {
  -webkit-animation: fadeIn 1s ease both;
          animation: fadeIn 1s ease both;
  background: rgba(255, 255, 255, 0.4);
  z-index: 2;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
dialog .x {
  filter: grayscale(1);
  border: none;
  background: none;
  position: absolute;
  top: 30px;
  right: 20px;
  transition: ease filter, transform 0.3s;
  cursor: pointer;
  transform-origin: center;
}
dialog .x:hover {
  filter: grayscale(0);
  transform: scale(1.1);
}
dialog h2 {
  font-weight: 600;
  font-size: 2rem;
  padding-bottom: 1rem;
}
dialog p {
  font-size: 1rem;
  line-height: 1.3rem;
  padding: 0px !important;
}
dialog p a:visited {
  color: rgb(var(--vs-primary));
}

/*General Styles*/

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}








.dialog-header {
  font-size: 15px;
  text-align: center;
  padding-bottom: 15px;
}

.card__image img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* .btn .card__btn {
  background-color: white;
  color: @gray-dark;

}

.card__btn .btn--block {
  
  display: block;
  width: 100%;
} */
  
.fba {
  background-color: #e47ca0;
  border: none;
}
.fba a{
  text-decoration: none;
}
.book-appoint{
  color: #fff; 
}

.card__content a{
  
  text-align: center;
  color: #fff;
}
.card__content a :hover{
  /* background-color: #555; */
}
 
.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards__item {
  display: flex;
  padding: 1rem;
  @media(min-width: 40rem) {
    width: 50%;
  }
  @media(min-width: 56rem) {
    width: 33.3333%;
  }
}

.card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  &:hover {
    .card__image {
      filter: contrast(100%);
    }
  }
}

.card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 5px;
}

.card__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  filter: contrast(70%);
  filter: saturate(180%);
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);
  &::before {
    content: "";
	  /* display: block; */
    padding-top: 56.25%; 
    /*// 16:9 aspect ratio*/
  }
  
  /*@media(min-width: 40rem) {*/
  /*  &::before {*/
      /* padding-top: 66.6%; // 3:2 aspect ratio */
  /*  }*/
  /*}*/
/*}*/



.card__title{
  font-weight: 400;
  color: @gray-dark;
  font-size : 1.25rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.card__text{
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 500;
}
.card-price{
  background-color: #f150bf;
}


@media  (max-width :576px){
    #dialog {
        padding: 1rem 1rem !important;
    }
    /*.dialog-head {*/
    /*    font-size:20px;*/
    /*}*/
    
    #dialog .x {
    top: 10px;
    right: 10px;
    }
}