/* Style the header with a grey background and some padding */

body{
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	padding: 0;
}
hr{
	margin: 2rem 0;
}
h1{
	font-weight: bold;
}
h1,h2{
	color: #005a8f;
}
#youtube-video{
	width: 100%;
	height: 460px;
	margin: 2rem 0;
} 
.header{
	padding: 0;
	background-color: white;
}
.logo{
	height: 50px;
}
.card-info{
	margin-top: 2rem;
	margin-bottom: 2rem;
	background:linear-gradient( to bottom, #565fa7, #445267);
	color: white;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.card-info .card-header{
	font-size: 20px;
	padding: 2rem;
}

.img-banner{
	padding: 20px 0;
}

.img-banner img{
	height: 110px;
}

.footer{
	background-color:#445267;
}

.custom-background{
	background-color: #0faec0;
	overflow: hidden;
}


.estudiantes {
	margin-bottom: -5px;
	filter: grayscale(100%); /* Comienza en blanco y negro */
	animation: colorize 4s infinite alternate; /* Animación que se repite y alterna entre blanco y negro y color */
}

/* Definir la animación */
@keyframes colorize {
	0% {
		filter: grayscale(100%); /* Blanco y negro */
	}
	100% {
		filter: grayscale(0%); /* Color */
	}
}



.img-footer{
	height: 150px;
}

.img-footer img{
	padding: 2rem;
	height: 100%;
}

.contenedor_prinpcipal{

	overflow: hidden;
}

.logo-header img, .logo-footer img{
	height: 100%;
}

#cont_dias, #cont_horas, #cont_minutos, #cont_segundos{
	margin: 5px;
}
.numero{
	background-color: #046cae;
	padding: 20px;
	font-size: 100px;
	color: white;
	border-radius: 20px;
	min-width: 160px;
}
.unidad_tiempo{
	font-size: 30px;
	color: white;
}

.mensaje{
	color: white;
	font-size: 30px;
	margin: 6rem;
}
.listado-tips{
	list-style-type: decimal;
}
.listado-tips li{
  margin-bottom: 5px;
}

.navbar {
	background: linear-gradient(145deg, #046cae , #0faec0);
	border: none; /* Quita el borde inferior */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}
.navbar-logo {
	display: flex;
	width: 100%;
}
.navbar-logo img {
	margin: 10px;
	max-height: 50px; /* Ajusta el tamaño del logo */
}

@media (max-width: 1400px){
	.numero{
		min-width: 150px;
	}
}
@media (max-width: 768px){
	body{
		min-heigth: 100vh;
	}

	.contenedor_principal{
		min-height: auto;
	}

	.numero{
		background-color: #002364;
		padding: 10px;
		font-size: 50px;
		color: white;
		border-radius: 20px;
		min-width: 80px;
	}

	.unidad_tiempo{
		font-size: 15px;
		color: white;
	}
	.mensaje{
		margin: 30px 0;
		color: white;
		font-size: 20px;
	}

	.img-banner{
		height: auto;
		padding: 20px;
		text-align: center;
	}

	.img-banner img{
		height: auto;
		max-width: 100%;
	}

	.header{
		margin-bottom: 0px !important;
	}

	.img-footer{
		height: 50px;
	}

	.img-footer img{
		height: 100%;
	}

	.estudiantes{
		width: 100%;
	}
	.pr-0{
		padding-left:0; 
	}
}
@media (max-width: 420px){
	.header{
		margin-bottom: 0px !important;
	}
}