/* Estilos del carrusel principal y secciones */

.sitios {
	width: 50%;
	margin: 0px auto;
}

.principal {
	width: 100%;
	/*height: 60vh;*/
	margin: 0px 0px;
	margin-bottom:0px;
}

.slick-slide {
  margin: 0px 0px;
}

.anexo > .slick-prev:before { /* Flecha gris - lado izquierdo */
	background: url('../img/flechas/izquierda_gris.png');
	background-size: contain;
	color: transparent;
}

.anexo > .slick-next:before { /* Flecha gris - lado derecho */
	background: url('../img/flechas/derecha_gris.png');
	background-size: contain;
	color: transparent;
}

#noticias > .slick-prev:before { /* Flecha azul - lado izquierdo */
	background: url('../img/flechas/izquierda_azul.png');
	background-size: contain;
	color: transparent;
}

#noticias > .slick-next:before { /* Flecha azul - lado derecho */
	background: url('../img/flechas/derecha_azul.png');
	background-size: contain;
	color: transparent;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: 1;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}

.one-time .slick-list {
	overflow: hidden;
}

/* Bolitas del carrusel de banners */
.one-time .slick-dots li {
	width: 10px;
	height: 10px;
	margin: 0 3px;
}

.one-time .slick-dots li button {
	width: 10px;
	height: 10px;
	padding: 0;
}

.one-time .slick-dots li button:before {
	font-size: 10px;
	width: 10px;
	height: 10px;
	line-height: 10px;
	color: #aaaaaa;
	opacity: 0.75;
}

.one-time .slick-dots li.slick-active button:before {
	color: #1B396A;
	opacity: 1;
}

.carousel-item {
	width: 100%;
	height: 60vh;
	min-height: 10%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: block !important; /* Slick fade maneja visibilidad con opacity/z-index */
}

.card-columns .card {
  display: inline-block;
  width: 100%;
}

.card-img-top {
  width: 100%;
  height: 200px !important;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

@media (max-width: 400px) {
	.carousel-item {
		height: 30vh;
	}
}

@media (max-width: 500px) {
	.carousel-item {
		height: 25vh;
	}
}