/*estilo generales de etiquetas*/
body {
	margin: 0px;
    padding: 0px;
    background-image: url('Imagenes/foto6.jfif');
    background-size: 100%;
    background-attachment: fixed;
}
a {
	text-decoration: none;
}

/* estilos especificos de la pagina*/

.index {
	/*background: rgba(210, 210, 10, 0.548);*/
}
.menu-sup {
	width: 100%;
	position: fixed;
	display: flex;
	flex:row wrap;
	justify-content: space-between;
	background-color:white;
	padding: 8px;
	align-items: center;
	z-index:100;
}
.menu-sup .menu-item {
	display:flex;
}
.menu-sup .menu-item a {
	color:blue;
	background: white;
	padding: 8px;
	font-size: 1.5em;
	transition: all 500ms ease;
}
.menu-sup .menu-item a:hover {
	color:blue;
	background: rgba(250,255,0,0.6);
	padding: 8px;
	font-size: 1.5em;
	border-radius: 10px;
	transition: all 500ms ease;
}
.inicio {
	background: rgba(250, 250, 20, 0.5);
	flex:row wrap;
}

.inicio h1 {
	flex-direction: column;
	justify-content: space-evenly;
	position:relative;
	font-size: 4em;
	text-align:center;
	text-shadow: -3px 3px #ffffff, -3px -3px #ffffff, 3px -3px #ffffff, 3px 3px #f3f3f2, 6px 6px #6ac7c2;
}
.contenido {
	/*position:absolute;*/
	z-index:100;
	margin: 0px;
}

/**********************************************************etilo del carrusel de fotos**********************************/

/* Estilos para el contenedor del carrusel */
.carousel-container {
    width: 65%; /* Ajuste del ancho al 80% */
    overflow: hidden;
    position: relative;
    height: 400px; /* Altura fija para el carrusel */
    margin: 0 auto; /* Centrar el contenedor */
}

/* Estilos para el carrusel de imágenes */
.carousel {
    display: flex;
    width: 500%; /* 100% por imagen (5 imágenes) */
    animation: slide 25s infinite; /* Animación de deslizamiento continua */
}

.carousel img {
    width: 100%;
    height: 400px;
    object-fit: cover; /* Ajustar la imagen sin deformarla */
}

/* Animación del carrusel */
@keyframes slide {
    0% { transform: translateX(0); }
    10% { transform: translateX(0); }
    20% { transform: translateX(-20%); }
    30% { transform: translateX(-20%); }
    40% { transform: translateX(-40%); }
    50% { transform: translateX(-40%); }
    60% { transform: translateX(-60%); }
    70% { transform: translateX(-60%); }
    80% { transform: translateX(-80%); }
    90% { transform: translateX(-80%); }
    100% { transform: translateX(0); }
}

/***************************************************************aqui termina lo de las imagenes************************************/


/*aqui los estilos de la pagina de certificados*/
.certi .titulo {
	text-align:center;
	font-size: 55px;
}
.certi .buscar {
	text-align:center;
}
.buscar button {
	background: blue;
	border-radius:0px 0px 25px 25px;
	font-size: 3em;
	width: 780px;
}
.buscar input {
	text-align:center;
	border-radius:25px 25px 0px 0px;
	font-size: 4em;
	width: 780px;
}


/*estilos del banner de las fotografias*/
.banner-fotos {
	position:relative;
	display:flex;
	flex:row wrap;
	align-items: center;
}

.banner-fotos img {
	width: 90%;
	/*border-radius:50%;*/
}
.banner-fotos .foto {
	/*border:solid 2px red;*/
}
.logo img {
	width: 50%;
}

.loginintra {
	color:blue;
	align-items: center;

	position:absolute;
	top:15%;
	left:40%;
	background: white;
	display: none;
	padding: 13px;
	border: solid 8px blue;
	border-radius: 25px;
}
.loginintra label {
	font-size:2em;
	color: black;
}
.loginintra input {
	border: 2px double blue;
	font-size: 1.5em;
}
.loginintra button{
	border-radius:5px;
	font-size:1.7em;
	background: yellow;
}
.close-btn {
	background:red;
	color:yellow;
	border-radius:10px;
	position:absolute;
	width:20px;
	height:20px;
	align-items: center;
	top: 0px;
	right:0px;
	cursor:pointer;
}
.nosotros {
	align-items: center;
	text-align: center;
}
/*aqui el responsive para movil*/
@media screen and (max-width: 480px) {
	.menu-sup {
		width: 100%;
	}
	.menu-sup .menu-item {
		display:none	;
	}
}