@import url('https://fonts.googleapis.com/css2?family=Gelasio&display=swap');

:root {
  --color-base-claro: #f0d320;
  --color-base-oscuro: #e94f2b;
  --color-texto_hover: #e94f2b;
  --white: #ffffff;
}



.titppal {
  font-family: 'Arial', cursive;
  font-size: 3.4em;
  color: #89867f;
  font-weight: 700;
}

.div-entradas h1, .div-entradas-mosaico h1,
.div-entradas h2, .div-entradas-mosaico h2,
.div-entradas h3, .div-entradas-mosaico h3,
.div-entradas h4, .div-entradas-mosaico h4,
.div-entradas h5, .div-entradas-mosaico h5,
.div-entradas h6, .div-entradas-mosaico h6 {
  /*font-family: 'Gelasio', serif;*/
}

.div-entradas-mosaico h5 {
  font-size: 1.1em;
}

.div-entradas h6, .div-entradas-mosaico h6 {
  font-size: 0.9em;
}


.div-entradas-mosaico {
  background-color: #fff;
}

.div-entradas {
  background-color: #f5f5f5;
}

a {
  text-decoration: none;
  color: #444;
}

a:hover {
  color: var(--color-texto_hover);
  text-decoration: none;
}

/* ************************* */

.div-hero{
  padding: 0;
}

.div-hero img {
  object-fit: cover;
  width: 100%;
}

.banner-header{
  background-color: #e94f2b; 
  min-height: 350px;
}


.div-col-2 {
  width: 100%;
  display: flex;
  flex-flow: row-reverse nowrap;
  justify-content: flex-start;
  align-items: center;
  max-height: 400px !important;
}

.div-col-2 div {
  width: 50%;
  padding: 0 !important;
}

.div-col-2 div img {
  object-fit: cover;
  width: 80%;
  max-height: 80%;
}

/* ************************* */

.div-cabecera {
  color: #444;
}

.div-cabecera>a {
  color: #444;
}

.div-cabecera>h3 {
  color: #444;
}

.div-cabecera>h5 {
  color: #444;
}

/* ----------------------- */

.columnas-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;

  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;

  /* -moz-column-fill: balance;
  column-fill: balance; */

  column-fill: balance-all;

  vertical-align: top;
}


/* ************************ */

.caja-box {
  line-height: 20px;
}

.caja-box h4 {}

.caja-box h5 {}

/* ----------------------- */

.div-foto>img {
  object-fit: fill;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, .3);
  margin: auto;
  border: 1px solid #aaa;
  height: 150px;
}

/* ----------------------- */

.seccion-activa {
  background-color: var(--color-base-oscuro) !important;
  border-color: #444 !important;
  color: #fff !important;
}

.btn-gris {
  background-color: var(--color-base-claro) !important;
  border-color: var(--color-base-claro) !important;
}


.btn-gris:hover {
  transition: background-color 0.2s ease-out, color 0.2s ease-out !important;
  background-color: #fff !important;
  color: var(--color-base-claro);
  border-color: var(--color-base-claro) !important;
}


.bg-gris-claro {
  background-color: #eee;
}

.bg-gris {
  background-color: var(--color-base-claro) !important;
}

.redondeado {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* ------------------------ */

.carousel .carousel-indicators {
  bottom: -35px;
}



.carousel .carousel-indicators li {
  background-color: #444 !important;
  /*background-color: rgba(70, 70, 70, 0.25);*/
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  filter: invert(1);
}

.carousel .carousel-indicators .active {
  background-color: #444;
}

.carousel-caption {
  position: relative;
  left: auto;
  right: auto;
  background-color: #fff;
  color: #444;
  text-align: left;
  padding: 20px;
}


/* ----------------------------------------------- */


.bg-premio {
  background-color: var(--color-base-claro) !important;
  color: #444;
}

.bg-premio h5, .bg-premio h6, .bg-premio a {
  color: #444;
}

.bg-premio h6:hover, .bg-premio h5:hover, .bg-premio:hover, .bg-premio a:hover {
  /* background-color: #444 !important; */
  color: #fff !important;
}

.div-ribbon {
  /*width: auto;
  height: auto;*/
  position: relative;
  display: inline-block;
  /*margin: 10px;
  background: lightblue;*/
  /*border: 2px solid #FF2F68 !important;*/
}

.ribbon-borde {
  border: 1px solid var(--color-base-claro) !important;
}

.ribbon-top {
  /* adjust the below to control the shape */
  --d: 5px;
  --g: 16px;
  --c: #333;
  /**/

  position: absolute;
  top: 0;
  right: 0;

  /*transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
  transform: translate(16.29%, -100%) rotate(45deg);

  color: #fff;
  text-align: center;
  width: 100px;
  transform-origin: bottom left;

  padding: 4px 0 calc(var(--d) + 5px);

  background:
    linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left,
    linear-gradient(-135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)), 0 100%)
}

/* ----------------------------------------------- */


@media (max-width: 992px) {

  .titppal {
    font-family: 'Gelasio', cursive;
    font-size: 3em;
  }

  .footer-logo {
    width: 100% !important;
  }


  .columnas-2 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  
    vertical-align: top;
  }  

}