/*

Theme Name: wp-bootstrap-starter

Theme URI: https://info-playas.com

Version: 1.0

Description: wp-bootstrap-starter

Author: Tu

Author URI: https://info-playas.com

Template: wp-bootstrap-starter

*/

/*----------------- Cambios a partir de aquí -------------------------------*/



body {
    font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: #463c32;
    font-size: 1.125rem;
    line-height: 140%;
}

/* -- Jumbotron -- */
.jumbotron {
  background-color: #5BA4C1;
  color: #D4EEF0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* Ajusta esto según la altura que desees para tu Jumbotron */
  margin-top: 0 !important; /* Asegúrate de que el margen superior sea 0 */
}

.buscador-largo {
    width: 70%; /* Este es solo un valor de ejemplo, puedes ajustarlo a tus necesidades */
}




/* --- Ficha de playa -- */

.pushlateral {
  padding: 30px !important;
}

.pushlateral.border-top {
    border-top: 3px solid #ddd;
}

.title {
    font-size: 1.875rem;
    line-height: 2.125rem;
    font-weight: 700;
    color: #463c32;
}

.col-sm-6.col-md-4.col-lg-3.item {
    padding: 30px;
}

/* --- END Ficha de playa -- */

.imagebox {
  background: black;
  padding: 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

.imagebox img {
  opacity: 1;
  transition: 0.5s opacity;
}

.imagebox .imagebox-desc {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0px;
  color: white;
  font-size: 1.2em;
  left: 0px;
  padding: 10px 15px;
  position: absolute;
  transition: 0.5s padding;
  text-align: center;
  width: 100%;
}

.imagebox:hover img {
  opacity: 0.7;
}

.imagebox:hover .imagebox-desc {
  padding-bottom: 10%;
}


/* --- Droddown menu --- */

.facetwp-hierarchy_select.is-disabled {
    display: none;
}

select.facetwp-hierarchy_select {
    padding: 6px;
    margin: 5px;
}

/* --- Droddown menu --- */



/* --- Footer widget  --- */

h3.widget-title {
    font-size: 1.2rem;
    margin-top: 30px;
    color: #99979c;
}
/* --- END Footer widget --- */

.bg-content {

  width: 65%;

    background: #fff;

    padding: 40px 40px 20px;

    box-shadow: 0px 20px 40px 0px rgb(0 0 0 / 10%);



}

.bgGrey {
    background-color: #f5f5f5;
}

.bg-sidebar {

    background: #fff;

    box-shadow: 0px 20px 40px 0px rgb(0 0 0 / 10%);

}



.nopadding {

   padding: 0 !important;

   margin: 0 !important;

}



a {

  color: #333;

}



.lista-playas {

    color: white !important;

}



i.fa-servicios {

    font-size: 3rem;

  }



/* Carousel */



.carousel-item img {

    width: 100%;

}  



.height360{

  height: 360px;

}

/* Rank Math SEO customization */

.rank-math-breadcrumb a, .rank-math-breadcrumb,.last, .separator {

font-size: .65em !important;

color: rgba(0,0,0,.5);

}

.categories-wrap {

    display: block;

    left: 0;

}

.categories-wrap a {

    background: #ff3209;

    color: #fff;

    display: block;

    font-size:  0.75em;

    font-weight: bold;

    line-height: 1.2;

    padding: 6px 15px;

    text-decoration: none;

    text-transform: uppercase;

}



/** 

Box

**/

.poblaciones-relacionadas {

padding: 15px;

    background-color: transparent;

    background-image: linear-gradient(

250deg

,#22b8d1 0%,#26a8e0 100%);

}



.author-box {

padding: 15px;

    background-color: transparent;

    background-image: linear-gradient(

250deg

,#9d4edd 0%,#7b2cbf 100%);

     color:white !important;

}


i.fas.fa-flag.bandera-roja {
    color: red;
    font-size: 16px;
  }

i.fas.fa-flag.bandera-amarilla {
    color: #fcda4c;
    font-size: 16px;
  }


  i.fas.fa-flag.bandera-verde {
    color: green;
    font-size: 16px;
  }


  i.fas.fa-flag.bandera-sininfo {
    font-size: 16px;
  }



.poblaciones-relacionadas a, .author-box a{



  color:white !important;

}

/*space ratios 

Tiny gaps = 8

Small gaps = 16

Medium gaps = 32

Big gaps = 64

*/

.mt-8 {

  margin-top: 8px!important;

}

.mb-8 {

margin-bottom: 8px!important;

}

.mt-32 {

  margin-top: 32px!important;

}

.mb-32 {

margin-bottom: 32px!important;

}

.mt-64 {

  margin-top: 64px!important;

}

.mb-64 {

margin-bottom: 64px!important;

}

.mb-10 {

  margin-top: 10px;

}

.mt-10 {

  margin-top: 10px;

}

.pb-70 {

  padding-bottom: 70px;

}

.pt-10 {

  padding-top: 10px;

}



/*Fondos*/

.bg-amarillo-suave {

background-color: #fffcf0;

}

.navbar, .navbar-amarillo {

    border-top: 3px solid  #22b8d1;
    background: #5BA4C1 !important;

}

time.amarillo-fuerte, .amarillo-fuerte {

  color:#22b8d1;

}

hr.separador {

    width: 5%;

    border: 2px solid #22b8d1;

}

.border-bottom {

    border-bottom: 1px solid #dee2e6!important;

}

.s-azul{

    background-color: #22b8d1;

}

.s-blanco{

    background-color: #fff;

}

.s-negro{

    background-color: #000;

}

.s-gris{

    background-color: #efefef;

}

.text-gris {

  color:#efefef;

}

.fondo-naranja {

  border-bottom:#ffbe01;



}

.underline-amarillo {

  border-bottom: 2px solid #22b8d1;

}



.articulo a {

  color: #007bff;

}



.color-negro {

  color: #000000;

}



strong {

  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color:  #CAF0F8;


}



.menuDestacado {

  background: #CAF0F8;

  text-align: center;

  padding-left: 15px;

}



.opacity-0 {

  opacity:0!important;

}

.opacity-1 {

  opacity:0.2!important;

}

.opacity-2 {

  opacity:0.4!important;

}

.opacity-3 {

  opacity:0.6!important;

}

.opacity-4 {

  opacity:.8!important;

}

.opacity-5 {

  opacity:1!important;

}



/* Maybe even support hover opacity shifts */

.opacity-0h5 {

  opacity:0!important;

  transition: opacity .25s ease-in-out!important;

  -moz-transition: opacity .25s ease-in-out!important;

  -webkit-transition: opacity .25s ease-in-out!important;

}

.opacity-0h5:hover {

  opacity:1!important;

}



.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

  margin-top: 0;

  font-family: 'Raleway', sans-serif;

  text-rendering: optimizelegibility;

  word-wrap: break-word;

  line-height: 2em;

}



h1.display-3 {

  margin-bottom: 0px;

}



.display-5 {

    font-size: 3rem;

    font-weight: 300;

    line-height: 1.2;

  }

  .display-6 {

    font-size: 2.5rem;

    font-weight: 300;

    line-height: 1.2;

  }



   .display-7 {

    font-size: 2rem;

    font-weight: 300;

    line-height: 1.2;

  }



    .display-8 {

    font-size: 1.5rem;

    font-weight: 300;

    line-height: 1.2;

  }



p {

  margin: 0 0 1.5em;

  /* font-size: 18px; */

  font-size: 1.125rem;

  line-height: 1.65em;

  margin-bottom: 1rem;

}



img.img-fluid.mx-auto.d-block {

  opacity: 0.25;

}



/*COLORES*/



.bg-colorines {

    padding-top: 90px;

    padding-bottom: 90px;

    background-color: #E9C46A;

    background: linear-gradient(#E9C46A, #F4A261);

}

.grisclaro_bg {

  background-color: #fafbfc;

}



a.active, .current_page_item {

  border-bottom: 2px solid #22b8d1;

}



ul.tags {

  padding-left: 0;

  margin-top: 20px;

}



pre {

  display: block;

  font-size: 87.5%;

  color: #fff;

  background: #000;

  padding: 5px;

}



.h3-falso {

  font-weight: 300;

  font-size: 1.75rem;

}



.h4-falso {

  font-weight: 300;

  font-size: 1.25rem;

}



.letras-grandes {

  font-size: 3.9rem;

  line-height: 81px;

  letter-spacing: -1.97px;

}



.shadow, .shadow a{

  display: inline;

  background: #111;

  line-height: 1.3em;

  padding: .1em;

  color: #fff;

  box-shadow: .3em 0 0 #111, -.3em 0 0 #111;

}



.img-opacity-5 {

  opacity: 0.5;

}



.img-opacity-6 {

  opacity: 0.6;

}



.img-opacity-1 {

  opacity: 1;

}



.zindex1 {

  z-index: 1;

}



.zindex2 {

  z-index: 2;

}



/*Home */

.jumbotron {

  /* The image used */

  background-size: cover;

  background-repeat: no-repeat;

  height: 100vh;

  margin-bottom: 0rem !important;

  border-bottom: #f6f8fa;

}



.servicios {

  margin-top: 150px !important;

}



/*menu */

a.nav-link {

 color: #D4EEF0 !important;

}



.navbar {

  font-weight: 300;

 box-shadow: 0 3px 12px rgba(2, 20, 43, 0.08);

}



.move {

  box-shadow: 0 0 4px rgba(0, 0, 0, .22) !important;

  background-color: #fff;

}



main.container {

  margin-top: 75px;

}



span.logo {

  font-size: 1rem;

}



/*Miga pan */

ol.breadcrumb {

  font-size: 12px;

  padding-left: 0px;

}



.fa-home {

  margin-right: 5px;

}



a.breadcrumb-item, .fa-home {

  color: #6c757d;

}



a.breadcrumb-item.active {

  color: #c5cace;

}



/*Mi foto */

.imgFrame {

  border: 2px solid #e0e3e4;

  width: 154px;

  height: 154px;

  overflow: hidden;

  position: relative;

  left: 0;

  right: 0;

  bottom: 50px;

  margin: auto;

}



i.fa-angle-down {

  font-size: 3.5rem;

    margin-top: 30px;

color:#efefef;

text-align: center;

}



a.ancla {

text-decoration:none;

}

.introarticle {

  font-weight: 900;

  font-style: normal;

}



a.botoncomentario {

  color: #ffffff !important;

}



p.compartir {

  font-size: 1rem;

}



i.compartir {

  font-size: 2rem;

  color: #333;

}




/*Footer */

footer {

  background: #2b0e0f;

  color: #fff;

  font-size: 0.8em;

  line-height: 1.5em;

}



.copyright {

  margin-bottom: 1.5em;

  border-bottom: 1px solid #fff;

  padding-bottom: 1.5em;

  text-align: center;

}



.copy {

  top: 21px;

}



i.fa.fa-heart.heart {

  color: #da3826;

}



footer a, footer a:hover {

  color: #fff;

  text-decoration: none;

}



nav.social {

  margin-top: 8px;

  font-size: 2rem;

}



/* tags */

li.tags a {

  color: #666;

}



li.tags a:hover {

  color: #22b8d1;

}



li.tags {

  background-color: #f0f0f0;

  color: #666;

  font-weight: 400;

  margin-right: .375em;

  padding: 2px 8px;

  font-size: .875rem;

}



/* Formulario */

.honeypot {

  position: absolute;

  left: -9999px;

}



/* HEADER */

.header {

  position: relative;

  margin-top: 178px;

  overflow: hidden;

}



.header--text {

  padding: 7.5em 0 12em;

}



.header--centered {

  text-align: center;

}



/* ENCABEZADOS */

h1 {

  margin-bottom: 1.1481481481481481em;

  line-height: 1.1481481481481481em;

  font-size: 54px;

  font-size: 3.375rem;

  font-family: 'Raleway', sans-serif;

  text-rendering: optimizelegibility;

  word-wrap: break-word;

  font-weight: bold;

}

.text-block {
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

/*** Comentarios ***/

.review {
    padding-top: 2rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    border-bottom: 1px solid #e9ecef;
  }

.avatar.avatar-xl {
    width: 7rem;
    height: 7rem;
    line-height: 7rem;
}
.avatar {
    display: inline-block;
    position: relative;
    width: 3rem;
    height: 3rem;
    text-align: center;
    border: #dee2e6;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
    line-height: 3rem;

}

.comment-container .comment-content {
  margin-left: 20px; /* Ajusta el valor según tu preferencia */
}

.comment-container .comment-rating {
  margin-top: 10px; /* Ajusta el valor según tu preferencia */
}


.subtitle {
    margin-bottom: 0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: bold;

}

@media screen and (max-width: 600px) {

  h2 {

    padding-top: .75em;

    margin-bottom: .75em;

  }



  .display-3 {

    font-size: 2rem;

    font-weight: 300;

    line-height: 1.2;

}



  .display-5 {

    font-size: 2.5rem;

    font-weight: 300;

    line-height: 1.2;

  }

  .display-6 {

    font-size: 1.5rem;

    font-weight: 300;

    line-height: 1.2;

  }



   .display-7 {

    font-size: 1rem;

    font-weight: 300;

    line-height: 1.2;

  }





    h2, .article h2, .h2-falso {

      margin-bottom: 1.1975308641975309em;

      line-height: 1.1975308641975309em;

      font-size: 30.5px;

      font-size: 1.53125rem;

    

  }

}

  .fontweight-medium {

    font-weight: 500;

  }



  /* Social icons post */

  .content__meta p {

    font-size: 14px;

    font-size: .875rem;

  }



  i.fab.fa-twitter.compartir, i.fa-facebook-f.compartir {

    margin-right: 10px;

    font-size: 25px;

    color: #000;

  }