/* Navbar TODOS styling */
ul#nav-ppal ul li a.todos { 
  border-bottom:1px solid #ccc7c7;
}
ul#nav-ppal ul li a.todos:hover { 
  background:#ccc7c7; 
}  

/* Title styling */
.title {
  display: grid;
  grid-template-columns: 80% 15% 5%;
  padding: 60px; 
  padding-bottom: 0px;
  overflow: hidden;
  position: relative;
}
  
#sort_alphabet {
  font-family: gotham book, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 0px;
  color: rgba(103, 67, 39, 0.9);
  cursor: pointer;
  justify-content: flex-end;
}
  
/* Filter navbar styling */
#filter_list {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none;
}
 
#filter_list li {
  padding: 8px; /* Add some padding */
  align-items: center;
  font-family: 'Gotham Rounded', sans-serif;
  text-decoration: none;
  font-size: 14px;
  display: flex; 
  text-transform: uppercase;
  cursor: pointer;
}

#close {
  justify-content: flex-end;
  background-color: #ccc7c7;
  color: black;
}
  
#filter_all {
  background-color: #f6f6f6;
  color: black;
}
  
#filter_esteticos {
  background-color: #598974;
  color: white;
}
  
#filter_capilares {
  background-color: #ef775b;
  color: white;
}
  
#filter_oncologicos {
  background-color: #cc5870;
  color: white;
}
  
#filter_dermatologicos {
  background-color: #445063;
  color: white;
}
  
#filter_antiaging {
  background-color: #2480a5;
  color: white;
}
  
input[type="checkbox" i] {
  transform: scale(0.9);
}
  
/* Main and content_box styling */
.box {
  display: flex;
  align-items: center;
}
  
.content_box {
  display: flex;
  flex-direction: column;
  padding: 40px;
  column-gap: 16px;
}
  
/* Titulos tratamientos */
.tratamientos {
  width: 100%;
  display: none;
}
  
.show {
  display: block;
}
  
.titulo_tratamientos {
  padding:  30px 20px;
  font-family: gotham book, sans-serif;
  font-weight: normal;
  font-size: 1.2rem;
  color: #674327;
  text-transform: uppercase;
  text-decoration: underline;
}
  
#titulo_esteticos {
  padding: 10px 20px;
}
  
.contenido {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
  
.subtitulo_esteticos {
  padding: 20px;
  font-family: gotham book, sans-serif;
  font-weight: normal;
  font-size: 1rem;
  color: #674327;
  text-transform: uppercase;
}
  
/* Cards styling */
.card_box {
  grid-area: card;
  display: grid;
  width: 23.35%;
  height: 400px;
  grid-template-rows: 50% 7.5% 27% 15.5%;
  grid-template-columns: 100%;
  grid-template-areas:
  "card"
  "card"
  "card" 
  "card";
  background: #FFFFFF;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  margin: 10px;
}

.card_box:hover {
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari 3-8 */
  transform: scale(1.01); 
}
  
.foto_tratamiento {
  background-size: cover;
  background-position: center;
  border-radius: 12px 12px 0px 0px;
  border: none;
  outline:none;
}
  
.time {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
  
.clock_image {
  width: 20px;
  height: 20px;
}
  
.hour {
  display: flex;
  align-items: center;
}
  
.text {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  margin-top: 20px;
  font-family: gotham book, sans-serif;
  font-size: 0.85rem;
  line-height: 1.4;
}
  
.button_container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  
/* Button styling */
button {
  display: flex;
  justify-content: space-evenly;
  width: 143px;
  height: 36px;
  background-color: #674327;
  border-radius: 20px;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  font-family: gotham book, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  word-spacing: -0.25px;
  color: #FFFFFF;
  align-items: center;
  cursor: pointer;
}

.select {
  display: flex;
  align-items: center;
}

button:focus {
  outline: none;
}
  
#arrow {
  height: 10px;
  color: white;
  display: flex;
  justify-content: flex-start;
}
  
/* Fotos tratatmientos */
/* Fotos cejas */
#foto_sesion_cejas {
  background-image: url('../assets/cejas/1sesion290.jpg');
}
  
#foto_difuminado_cejas {
  background-image: url('../assets/cejas/Difuminado\ bicolor\ 390€.jpg');
}

#foto_pelo_cejas {
  background-image: url('../assets/cejas/Pelo\ a\ pelo\ 450€.jpg');
}
  
#foto_lifting_cejas {
  background-image: url('../assets/cejas/Efecto\ lifting-restructuracion\ total\ 490€.jpg');
}
  
#foto_revision_cejas {
  background-image: url('../assets/cejas/Revisión\ 9-12\ meses\ -\ 250€\ :\ 290€.jpg');
}
  
#foto_24meses_cejas {
  background-image: url('../assets/cejas/24\ meses-\ precio\ inicial.jpg');
}
  
#foto_correcciones_cejas {
  background-image: url('../assets/cejas/Correcciones\ -\ Consultar\ precio.jpg');
}
  
#foto_restaurar_cejas {
  background-image: url('../assets/cejas/Restaurar\ forma\ y\ color\ -\ Consultar\ precio.jpg');
}
  
/* Fotos ojos */
#foto_sesion_ojos {
  background-image: url('../assets/ojos/1\ Sesión\ 290€.jpg');
}
  
#foto_relleno_pestanas {
  background-image: url('../assets/ojos/Relleno\ de\ pestañas\ 390€.jpg');
}
  
#foto_superior_ojos {
  background-image: url('../assets/ojos/Superior\ 450€.jpg');
}
  
#foto_sup_inf_ojos {
  background-image: url('../assets/ojos/Superior\ e\ inferior\ 490€.jpg');
}
  
#foto_revision_ojos {
  background-image: url('../assets/ojos/12453456-1554751580767346.jpeg');
}
  
#foto_bicolor_ojos {
  background-image: url('../assets/ojos/Bicolor\ o\ iluminación\ -\ Consultar\ precio.jpg');
}
  
#foto_masculinos {
  background-image: url('../assets/ojos/Revisión\ 9-12\ meses\ -\ 250€\ :\ 290€.jpg');
}
  
/* Fotos labios */
#foto_sesion_labios {
  background-image: url('../assets/labios/1\ Sesión\ 290€.jpg');
}
  
#foto_contorno_labios {
  background-image: url('../assets/labios/Contorno\ 390€.jpg');
}
  
#foto_contorno_difuminado {
  background-image: url('../assets/labios/Contorno\ y\ difuminado\ 450€.jpg');
}
  
#foto_mucosa {
  background-image: url('../assets/labios/Mucosa\ o\ difuminado\ completo\ 490€.jpg');
}
  
#foto_revision_labios {
  background-image: url('../assets/labios/Revisión\ 9-12\ meses\ -\ 250€\ :\ 290€.jpg');
}
  
/* Fotos capilar */
#foto_repoblacion {
  background-image: url('../assets/capilares/Repoblación\ capilar\ -\ 250:290€\ x\ sesión.jpg');
}
  
#foto_densidad {
  background-image: url('../assets/capilares/Densidad\ capilar\ -\ 390€\ x\ sesión.jpg');
}
  
#foto_repoblacion_cicatrices {
  background-image: url('../assets/capilares/Repoblación\ cicatrices\ -\ 450€\ x\ sesión.jpg');
}
  
#foto_rep_post_ingertos {
  background-image: url('../assets/capilares/Rep.\ cicatrices\ post\ ingertos\ -\ 490€\ x\ sesión.jpg');
}
  
#foto_tricopigmentacion {
  background-image: url('../assets/capilares/Tricopigmentación\ -\ 590€\ x\ sesión\ .jpg');
}
  
/* Fotos oncologico */
#foto_cicatriz_onco {
  background-image: url('../assets/oncologicos/Cicatriz\ simple\ 490€.jpg');
}
  
#foto_doble_periareolar {
  background-image: url('../assets/oncologicos/Doble\ periareolar\ 590€.jpg');
}
  
#foto_oncologicos {
  background-image: url('../assets/oncologicos/Oncológicos.jpg');
}
  
#foto_oncologico_doble {
  background-image: url('../assets/oncologicos/Oncológico\ doble\ areola\ -\ Desde\ 790€.jpg');
}
  
#foto_revision_onco {
  background-image: url('../assets/oncologicos/Revisión\ -\ Consultar\ precio.jpg');
}
  
/* Fotos dermatologicos */
#foto_cicatrices_derma {
  background-image: url('../assets/dermatologicos/Cicatrices\ -\ 250:290€\ x\ zona\ .jpg');
}
  
#foto_pecas {
  background-image: url('../assets/dermatologicos/Pecas\ 250€.jpg');
}
  
#foto_estrias {
  background-image: url('../assets/dermatologicos/Estrías\ 290€.jpg');
}
  
#foto_vitiligo {
  background-image: url('../assets/dermatologicos/Vitiligo\ 350€.jpg');
}
  
#foto_ojeras {
  background-image: url('../assets/dermatologicos/Ojeras\ 390€.jpg');
}
  
#foto_piel_quemada {
  background-image: url('../assets/dermatologicos/Piel\ quemada\ 490€.jpg');
}
  
/* Fotos antiaging */
#foto_cicatrices_acne {
  background-image: url('../assets/antiaging/Cicatrices\ post\ acné\ -\ A\ partir\ de\ 250€.jpg');
}
  
#foto_manchas_piel {
  background-image: url('../assets/antiaging/Pigmentación\ en\ manchas\ de\ la\ piel\ -\ A\ partir\ de\ 250€.jpg');
}

#foto_patas_gallo {
  background-image: url('../assets/antiaging/Patas\ de\ gallo\,\ contorno\ de\ ojos\ -\ A\ partir\ de\ 290€.jpg');
}
  
#foto_blefaroplastia {
  background-image: url('../assets/antiaging/Blefaroplastia\ sin\ cirujía\ -\ A\ partir\ de\ 390€.jpg');
}
  
#foto_rictus {
  background-image: url('../assets/antiaging/Rictus\,\ surcos\ periculares\ -\ A\ partir\ de\ 390€.jpg');
}
  
#foto_cuello {
  background-image: url('../assets/antiaging/Marcas\ de\ expresión\ cuello\ -\ A\ partir\ de\ 490€.jpg');
}

h4 {
  font-family: 'Fahkwang', sans-serif;
  color: #674327;
  font-size: 1.5rem;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
}

/* Contact page whatsapp icon and text */
#whatsapp, #whats_text {
  color: #674327;
  font-weight: 800;
}
  
/* Text styling */
@font-face {
  font-family: 'gotham book';
  src: url('/fonts/Gotham\ Bold\ Regular.ttf');
}

a { text-decoration: none; }
  
/* Responsive design */
@media (max-width: 1300px){
    .card_box {
      width: 30%;
    }
    #filter_list {
      position: fixed;
      z-index: 99;
      right: 80px;
    }
}
  
@media (max-width: 992px){
    .card_box {
      width: 46%;
    }
    #filter_list {
      position: fixed;
      z-index: 99;
      right: 60px;
    }
    ul#nav-ppal ul li a.todos { 
      border-bottom: 0px; 
      background: #f6f6f6; 
    }
}
  
/* Responsive design for mobile */
@media (max-width: 600px){
    /* Change title elements' layout for mobile */ 
    .title {
      padding: 40px;
      padding-bottom: 0px;
    }
    #filter_list {
      position: fixed;
      z-index: 99;
      right: 40px;
    }
    ul#nav-ppal ul li a.todos { 
      border-bottom: 0px; 
      background: #f6f6f6; 
    }
    .titulo_tratamientos {
      padding: 30px 0px;
      font-size: 1rem;
    }
    #titulo_esteticos {
      padding: 0px;
    }
    .subtitulo_esteticos {
      padding-left: 0px;
    }
  
    /* Customised card layout for mobile */
    .card_box {
      width: 100%;
      margin: 0px;
      margin-bottom: 20px;
    }
    h4 {
      font-size: 1.3rem;
    }
  }