@charset "utf-8";
/* Colegio Lenka Franulic 2024
Desarrollo web realizado por Francisco Solar A. 
www.zola.cl
 
COLORES 
Azul oscuro: #1c2777;
Celeste Claro: #9396c7;
amarillo: #fbf11e;

TIPOGRAFIA
texto de titulo: verdana, bold
*/



/*NEUTRALIDAD*/

header, html, body, section, nav, footer, article, h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 p{
	display:block;
	margin:0;
	padding:0;
	border:0;
}
* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* ESTRUCTURA */


.modal {

	width: 100%;
	height: 60%;
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 180px;
	left: 0;
	display: flex;
	z-index: 3000;

	animation: modal 2s 3s forwards;
	visibility: hidden;
	opacity: 0;

}
.contenido {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	border-radius: 18px;
	opacity: 0.8;
}




#cerrar {
	display: none;

}
#cerrar + label {
	padding-left: 0.75%;
	position: fixed;
	color: #fff;
	font-size: 25px;
	z-index: 3500;
	background: darkred;
	height: 30px;
	width: 30px;
	right: 400px;
	top: 210px;
	cursor: pointer;
	border-radius: 20%;

	animation: modal 2s 3s forwards;
	visibility: hidden;
	opacity: 0;


}
#cerrar:checked + label, #cerrar:checked ~ .modal {
	display: none;
}

@keyframes modal {
	100% {visibility: visible;
	opacity: 1;}
}
video{
	width:100%;
	
}
.video{
padding-top:15%;

}
.oculto{
display:none;

}
body {background:#dcdded;}

.menu_bar {
	display:none;
}
header {
	width: 100%;
}
.objetos{
position:absolute;
top:0;
margin-left:2%;
margin-right:2%;
}

header nav {
	
	z-index:1000;
	max-width: 1000px;
	width:95%;
	margin:10% 1% 0% 10%;
}
header nav ul {
	list-style:none;
}
header nav ul li {
	display:inline-block;
	position: relative;
}

header nav ul li:hover {
	background:#5a305a;
	border-radius:4px 4px 0 0;
}
header nav ul li a:hover {
	color:white;
}
 
header nav ul li a {
	color:black;
	display:block;
	text-decoration:none;
	padding: 10px;
	font-family:Verdana, Geneva, sans-serif;
}
header nav ul li:hover .children {
	display:block;
}
 
header nav ul li .children {
	display: none;
	background:#011826;
	position: absolute;
	width: 150%;
	z-index:1000;
}
header nav ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
}
 
header nav ul li .children li a {
	display: block;
	color:white;
}
 
 
/*Slider*/

.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 300px; /* ajusta la altura según tus necesidades */
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* para que la imagen ocupe todo el espacio sin deformarse */
}

.slider .slide.active {
    opacity: 1;
}

@keyframes sliderAnimation {
    0% {left: 0;}
    20% {left: 0;}
    25% {left: -100%;}
    45% {left: -100%;}
    50% {left: -200%;}
    70% {left: -200%;}
    75% {left: -300%;}
    95% {left: -300%;}
    100% {left: -400%;}
}

.slider .slide:nth-child(1) {
    animation: sliderAnimation 15s linear infinite 0s;
}
.slider .slide:nth-child(2) {
    animation: sliderAnimation 15s linear infinite 3s;
}
.slider .slide:nth-child(3) {
    animation: sliderAnimation 15s linear infinite 6s;
}
.slider .slide:nth-child(4) {
    animation: sliderAnimation 15s linear infinite 9s;
}
.slider .slide:nth-child(5) {
    animation: sliderAnimation 15s linear infinite 12s;
}




 

/*CLASES*/
.logotipo{
	width:10%;
	float:left;

}

.days {
	width: 100%;
}


.redes{
	width:5%;
	margin-top:2%;
	float:right;
}
.web{
	float:right;
	margin-top:0.5%;
}
.portada{
	width:100%;
	padding-top:0.5%;
	
	
}
.portadas{
	width:100%;
	padding-top:2%;
	padding-bottom: 12%;
	
}
.futer{
	 position:relative;
	 width:100%;
	 float:none;
 }
.imagen{
	width:20%;
	border: 2px solid #FFF;
}
.urgente{
	background: #ff0000;
	padding-top: 3%;
	margin-top: 4%;
	margin-bottom: 4%;
	border-radius:4px;
}
.urgente p{
	color:white;
	padding: 5%;
	font-size: 14px;

}
.admision{
	width: 100%;
}

/*TIPOGRAFIAS*/

 h10{
	 font-size:30px;
	 color:#5a305a;
	 float:left;
	 margin-top:6%;
	 font-family:Verdana, Geneva, sans-serif;
 }

 .linea {
            border-bottom: 1px solid black; /* Borde sólido negro de 1 píxel de grosor */
            margin: 20px 0; /* Margen arriba y abajo para separar del contenido */
        }
 
 h1{
	 background:#f8f203;
	 color:#484842;
	 text-align:center;
	 font-size:14px;
	 margin-bottom:5%;
	 padding-top:2%;
	 padding-bottom:2%;
	 font-family:Verdana, Geneva, sans-serif;
	 border-bottom: 5px #181c79 solid;
	 border-radius: 10%;
	 
 }
 
 h2{
	 font-family:Verdana, Geneva, sans-serif;
	 color:#5a305a;
	 text-align:center;
	 font-size:16px;
 }
 h3{
	 font-family:Verdana, Geneva, sans-serif;
	 color:#999;
	 text-align:justify;
	 font-size:14px;
 }
 
 h4{
	 background:#9596ca;
	 color:#FFF;
	 text-align:center;
	 font-size:14pxpx;
	 margin-bottom:5%;
	 margin-top:5%;
	 padding-top:2%;
	 padding-bottom:2%;
	 font-family:Verdana, Geneva, sans-serif;
 }
 
 
 
 p{
	 font-family:Verdana, Geneva, sans-serif;
	 color:#333;
	 text-align:justify;
	 font-size:12px;
	 padding-top:2%;
	 
	 
 }
 
 a{
	 text-decoration:none;
	 
 }
 /*DIVISIONES*/
 
#der{
	 float:left;
	 margin-left:5%;
	 margin-right:3%;
	 margin-top:5%;
	 margin-bottom:10%;
	 width:28%;
	 
 }
 
 #cen{
	 float:left;
	 margin-top:5%;
	 width:28%;
	 margin-bottom:10%;	 
 }
 
 #izq{
	 float:right;
	 margin-left:2%;
	 margin-right:5%;
	 margin-top:5%;
	 width:28%;
	 margin-bottom:10%;
 }
 
 #lado1{
	  float:left;
	 margin-left:5%;
	 margin-right:3%;
	 margin-top:3%;
	 margin-bottom:10%;
	 width:28%;
 }
 #lado2{
	
	 float:right;
	 margin-left:1%;
	 margin-right:3%;
	 margin-top:3%;
	 margin-bottom:10%;
	 width:58%;
 }
 #lado3{
	
	 float:none;
	 margin-left:10%;
	 margin-right:10%;
	 margin-top:3%;
	 margin-bottom:10%;
	 width:80%;
 }
#imagen{
	width:98%;
	margin-left:10%;
	
}

footer {
	width: 90%;
	margin: 0 auto;
	margin-bottom: 5%;

}
footer h2, h3, p{
	text-align: center;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.day, .day1{
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

@media screen and (max-width: 800px) {

	.day1{
		
		padding: 1px;
		border: 0;
		font-size: 10px;
	}

	.days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

li {
	border-bottom: blue solid 5px;
	margin-top: 10px;
	font-size: 10px;
}

h1{
	 
	 font-size:14px;
	 
	 
 }
 
 h2{
	 
	 font-size:18px;
	 text-align:center;
 }
 p{

	 text-align:justify;;
	 font-size:14px;
 }
.imagen{
width:48%;
margin:0;
padding:0;
}
#imagen{
	width:98%;
	margin-left:2%;
	
}
	
	body {
		padding-top:5px;
	}
	#lado1{
	  
	 margin-left:1%;
	 margin-right:1%;
	 margin-top:3%;
	 margin-bottom:3%;
	 width:98%;
 }
 #lado2{
	   
	 margin-right:1%;
	 margin-top:1%;
	 margin-bottom:2%;
	 width:98%;
 }
	



 #izq{
		

	 margin-left:1%;
	 margin-right:1%;
	 margin-top:2%;
	 margin-bottom:3%;
	 width:98%;
 }

#der{
	
	 margin-left:1%;
	 margin-right:1%;
	 margin-top:2%;
	 margin-bottom:3%;
	 width:98%;
	 
 }
 
 #cen{
	
	margin-left:1%;
	 margin-right:1%;
	 margin-top:2%;
	 margin-bottom:3%;
	 width:98%;
 }

.oculto{
display:block;

}
.logotipo{
	margin-top: 2%;

}	
.web{
	display: none;
}	

	
.objetos p{
	text-align: left;
	position: absolute;
	font-size: 12px;
	margin-left: 40px;

}	
h10{
	 font-size:20px;
	 color:#5a305a;
	 float:left;
	 margin-top:52%;
	 margin-left: 1%;
	 font-family:Verdana, Geneva, sans-serif;

}


}