/*
 Theme Name: EntreTierras
 Theme URI: https://www.justbike.es
 Description: Divi Child Theme to EntreTierras
 Author: Vicente Hernández
 Author URI: https://www.justbike.es
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* Start Tarjetas Eventos */
.grid-col,
.grid-col>div,
.grid-col>div>article {
  height: 100%;
  margin-bottom: 0;
  ;
}

.tarjeta {
  /* Ensure the tarjeta is 100% width of the column */
  width: 100%;
  /* Add a shadow to make it stand out */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  /* Subtle rounding on the corners */
  border-radius: 10px;
  /* Hide the content that overflows the tarjeta */
  overflow: hidden;
  /* Ensure the tarjeta is 100% height of the column */
  height: 100%;
  /* Flexbox makes the container flexible */
  display: flex;
  /* Flex direction column makes the children stack vertically */
  flex-direction: column;
  /* Align the children to the top of the container */
  justify-content: flex-start;
}

/* fecha-ruta is the container for our date */
.fecha-ruta {
  /* Flexbox makes the container flexible */
  display: flex;
  /* Flex direction row makes the children stack horizontally */
  flex-direction: row;
  /* Add a shadow to make it stand out */
  box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px;
  /* Subtle rounding on the corners */
  border-radius: 10px;
  /* Position relative allows us to position the date and time on top of the tarjeta */
  position: relative;
  /* Z-index allows us to position the date and time on top of the featured image */
  z-index: 2;
  /* White background */
  background: white;
  /* Padding to give the date and time some space */
  padding: 8px;
  /* Max width to keep the date and time from taking up the whole tarjeta */
  max-width: 90%;
  /* We're adding some negative top margin to get the date and time to overlap the featured image */
  margin: -20px auto 10px;
  /* Bold font weight */
  font-weight: bold;
  /* Center the date and time */
  justify-content: center;
}

/* Target the date */
.fecha-ruta>div {
  font-family: sans-serif;
  width: auto;
  text-align: center;
}

/* Target the date */
.ibr-fecha-ruta {
  /* Add a seperator between the date and time */
  border-right: 1px solid #dedede;
  padding-right: 10px;
}

/* Target the fecha inicio */
.ibr-fecha-inicio {
  padding-left: 10px;
}

/* Target the fecha final */
.ibr-fecha-fin {
  padding-left: 10px;
}

/* Target the container of the title and descripción */
.ibr-detalles-ruta {
  width: 90%;
  margin: 0 auto 0 auto;
  color: #273c75;
  flex-grow: 1;
}

.ibr-detalles-ruta h2 {
  font-family: sans-serif;
}

.ibr-descripcion-corta {
  font-family: sans-serif;
}

/* Setup the container for the CTA buttons */
.ruta-cta-row {
  /* Flexbox makes the container flexible */
  display: flex;
  /* Add some top margin */
  margin-top: 10px;
}

/* Style the CTA buttons */
.ruta-cta-row>a {
  /* Add a transition to the opacity */
  transition: opacity 0.3s ease-in-out;
  /* Allow the buttons to grow to fill the container */
  flex-grow: 1;
}

.ruta-cta-row>a:hover {
  /* Fade the button on hover */
  opacity: 0.8;
}

.ruta-descripcion-cta {
  /* Make the button 50% of the container - It will still grow if there is only 1 button */
  width: 50%;
  /* fallback for old browsers */
  background: #8360c3;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, #2ebf91, #8360c3);
  /* Add some padding */
  padding: 10px;
  /* White text */
  color: white;
  /* Center the text */
  text-align: center;
  /* Sans-serif font */
  font-family: sans-serif;
  /* Remove the underline */
  text-decoration: none;
  /* Bold font weight */
  font-weight: bold;
}

.rutas-reserva-cta {
  /* Make the button 50% of the container - It will still grow if there is only 1 button */
  width: 50%;
  /* fallback for old browsers */
  background: #ad5389;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, #3c1053, #ad5389);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, #3c1053, #ad5389);
  /* Add some padding */
  padding: 10px;
  /* White text */
  color: white;
  /* Center the text */
  text-align: center;
  /* Sans-serif font */
  font-family: sans-serif;
  /* Remove the underline */
  text-decoration: none;
  /* Bold font weight */
  font-weight: bold;
}

/* Style the Title above the icons */
.ibr-icons-list-title {
  /* Center the title */
  text-align: center;
  /* Bold font weight */
  font-weight: bold;
  /* Add some top margin */
  margin-top: 20px;
}

/* Style the icon container */
.ibr-ilt-icons {
  /* Flexbox makes the container flexible */
  display: flex;
  /* Flex direction row makes the children stack horizontally */
  flex-direction: row;
  /* Center the icons */
  justify-content: center;
  /* Add some space between the icons */
  gap: 10px;
  /* Add some top margin */
  margin-top: 10px;
}

.ibr-ilt-icon {
  /* Position relative allows us to position the tooltip */
  position: relative;
}

/* Style the tooltip */
.ibr-ilt-icon:before {
  /* Add the tooltip text */
  content: attr(data-tooltip);
  /* Position absolute allows us to position the tooltip */
  position: absolute;
  /* Add a background color */
  background: rgb(39 60 117 / 100%);
  /* Position the tooltip above the icon */
  top: -35px;
  /* Position the tooltip in the center of the icon */
  left: 50%;
  /* Translate the tooltip to the left by 50% of its own width */
  transform: translateX(-50%);
  /* Make the tooltip width auto so it can grow with the text */
  width: auto;
  /* Prevent the tooltip from wrapping */
  white-space: nowrap;
  /* White text */
  color: white;
  /* Add some padding */
  padding: 5px;
  /* Add some rounding to the corners */
  border-radius: 10px;
  /* Add a transition to the opacity */
  transition: all 0.3s ease-in-out;
  /* Hide the tooltip by default */
  opacity: 0;
}

.ibr-ilt-icon:hover:before {
  /* Show the tooltip on hover */
  opacity: 1;
}

/* Set the width and height of the icon */
.ibr-ilt-icon>img {
  width: 20px;
  height: 20px;
}

/* End Tarjetas Eventos */

/* Keep on your Code */