/* Diseño General */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
*{margin: 0;padding: 0;border: 0; box-sizing: border-box;}

body{ background: white ;height: 100vh;display: grid;grid-template-columns: repeat(4,0.25fr);grid-template-rows: 0.2fr 2fr 0.2fr;grid-template-areas: "header header header header" "main main main main" "footer footer footer footer";}
main{grid-area: main;}
header{grid-area: header;}

/* Header */
header .navbar .navbar-brand{color: black;font-family:'Lora';}
header .navbar .navbar-brand:hover{ color:rgb(66, 185, 224)}
#offcanvasNavbar{background-color:rgb(201, 201, 201)}
#offcanvasNavbarLabel{color: black;font-family: 'Lora'}
.offcanvas-body ul li{font-family:'Poppins' ;}

/*Main Home*/
.mainHome{ background-image: url(../imagenes/Home.svg); background-repeat: no-repeat; background-size: cover;}
.menuHome h1{font-family: 'Lora';margin-left: 50px;}
.menuHome {display: flex;color: black;flex-direction: column;justify-content: center;align-items:  center;margin-top: 50px;}
.menuHome ul{color:black;margin: 10px;list-style: none;margin: 10px;justify-content: center;text-align: center;}
.menuHome  ul li{font-size: 15px;padding: 5px;margin: 10px;font-weight: bold;font-family: 'Poppins';background-color: rgb(201, 201, 201);border-radius: .5em;width:10rem}
.menuHome ul li a{text-decoration: none;color: black;}

@media screen and (min-width: 600px){
.menuHome {height:30rem}
.menuHome ul li a:hover{ color:rgb(66, 185, 224)}
.menuHome ul{display:grid;grid-template-columns: repeat(3,0.33fr);grid-template-rows: repeat(2,0.5fr);grid-template-areas: "historia fotografia artes" "actividades noticia contacto"}
.menuHome ul li{height: 2.5rem;}
.menuHome ul li a{font-size: larger;}}

/*Footer*/
footer{background-color: pink;margin-top: 10px;grid-area: footer;grid-area: footer}
footer p{padding: .5em;text-align: center;font-size: 12px;font-weight: bold;font-family: 'Poppins'}

/* Main Historia */
.historia{display:flex;flex-direction: column;margin-top: 30px;}
.imagenQuinquela {text-align: center;}
.imagenQuinquela img{margin:20px;border: 4px solid orange; width: 80%;}
.sobreQuinquela{color: black;font-size: 15px; text-align: center;margin: 10px;border-radius: 0.5em;padding: .5em;font-family: 'Poppins';}
.sobreQuinquela h2{font-family: 'Lora';border-bottom: 5px double pink;}

.imagenEscuela {text-align: center;}
.imagenEscuela img{margin:20px; border: 4px solid rgb(249, 249, 91);width: 80%}
.sobreEscuela {color: black;font-size: 15px;text-align: center; margin: 10px;border-radius: 0.5em;padding: .5em;font-family: 'Poppins';}
.sobreEscuela h2{font-family: 'Lora';border-bottom: 5px double pink;}

@media screen and (min-width: 600px){
.imagenQuinquela img{width: 40%;}
.imagenEscuela img{width: 40%;}}

@media screen and (min-width: 1200px){
.historiaQuinquela{display: grid;grid-template-columns: 0.5fr 1fr;grid-template-areas: "imagenQuinquela sobreQuinquela";}
.imagenQuinquela{grid-area: imagenQuinquela;margin-right: 50px;}
.sobreQuinquela{color: black;font-size: 17px;grid-area: sobreQuinquela;position:relative;bottom:100px;}
.imagenQuinquela img{width: 100%;}
.sobreQuinquela p{margin-top: 20px;}

.historiaEscuela{display: grid;grid-template-columns: 1fr 0.5fr;grid-template-areas: "sobreEscuela imagenEscuela";margin-top: 50px;}
.imagenEscuela{grid-area: imagenEscuela;margin-right: 50px;}
.sobreEscuela{color: black;font-size: 17px;grid-area: sobreEscuela;position:relative;bottom:100px;}
.imagenEscuela img{width: 100%;}
.sobreEscuela p{margin-top: 20px;}}

/* Main Contacto*/
.contactanos {display: flex;flex-direction: column;margin: 50px;justify-content: center;text-align: left;}
.contactanos h2{font-family:'Lora';margin-top: 30px;}
.formulario .itemsFormulario {display: flex;flex-direction: column;}
.itemsFormulario label{font-family: 'Poppins'}
.itemNombre {display: flex; flex-direction: column;margin-bottom: 15px;}
.itemMail {display: flex; flex-direction: column;margin-bottom: 15px;}
.itemMensaje {display: flex; flex-direction: column;margin-bottom: 15px;}
.itemMensaje input {height: 10rem;}
.botonesFormulario input{background-color:rgb(201, 201, 201) ;width: 10rem;}
.formulario .itemsFormulario input{border: 2px solid  rgb(201, 201, 201); border-radius: .5rem;}
.iconos {display: flex;flex-direction: row;justify-content: center;text-align: center;margin-bottom: 10px;}
.iconos img{width:30%}

@media screen and (min-width: 600px){
.contactanos {display: flex;flex-direction: row;justify-content: space-around}
.formulario{margin-top: 25px;}
.iconos img{width: 20%;}}

@media screen and (min-width: 1200px){
.contactanos {display: flex;flex-direction: row;justify-content: space-evenly}
.formulario .itemsFormulario{display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(3,0.25fr);grid-template-areas: "itemNombre itemMail" "itemMensaje itemMensaje" "botonesFormulario botonesFormulario";}
.itemNombre{grid-area: itemNombre;}
.itemMail{grid-area: itemMail;margin-left: 15px;}
.itemMensaje{grid-area: itemMensaje;}
.botonesFormulario{grid-area: botonesFormulario;}
.iconos img{width:15%}}

/* Main Noticias */
.noticias{margin-top:50px;}
.noticiaUno {display: flex;flex-direction: column;justify-content: center;text-align: center;background-color: rgb(201, 201, 201);margin: 10px;border-radius: .8rem;border: 4px solid rgb(66, 185, 224) ;}
.noticiaUno div a img{width:80%}
.noticiaUno h3{font-family:'Lora';margin-top:20px;}
.noticiaUno p{margin: 20px;font-family: 'Poppins';}

.noticiaDos {display: flex;flex-direction: column;justify-content: center;text-align: center;margin-top: 50px;background-color: rgb(201, 201, 201);margin: 10px;border-radius: .8rem;border: 4px solid rgb(253, 182, 51);}
.noticiaDos div a img{width:80%}
.noticiaDos h3{font-family:'Lora';margin-top:20px;}
.noticiaDos p{margin: 20px;font-family: 'Poppins';}
.noticiaDos {margin-top: 30px;}

.noticiaTres {display: flex;flex-direction: column;justify-content: center;text-align: center;margin-top: 50px;background-color: rgb(201, 201, 201);margin: 10px;border-radius: .8rem;border: 4px solid rgb(81, 225, 81);}
.noticiaTres div a img{width:80%}
.noticiaTres h3{font-family:'Lora';margin-top:20px;}
.noticiaTres p{margin: 20px;font-family: 'Poppins';}
.noticiaTres {margin-top: 30px;}

.noticiaCuatro {display: flex;flex-direction: column;justify-content: center;text-align: center;margin-top: 50px;background-color: rgb(201, 201, 201);margin: 10px;border-radius: .8rem;border: 4px solid rgb(249, 249, 91);}
.noticiaCuatro div a img{width:80%}
.noticiaCuatro h3{font-family:'Lora';margin-top:20px;}
.noticiaCuatro p{margin: 20px;font-family: 'Poppins';}
.noticiaCuatro {margin-top: 30px;}

@media screen and (min-width: 600px){
.noticiaUno:hover{background-color:rgb(66, 185, 224)}
.noticiaDos:hover{background-color:rgb(253, 182, 51)}
.noticiaTres:hover{background-color:rgb(81, 225, 81)}
.noticiaCuatro:hover{background-color:rgb(249, 249, 91)}}

@media screen and (min-width: 1200px){
.noticias{display: flex;justify-content: space-around;text-align: center;flex-direction: row;}
.noticiaUno{margin: 10px;width:25%;}
.noticiaUno img{width: 31.5%;margin: 10px;}
.noticiaUno h3{font-size: 30px;}
.noticiaDos {margin: 10px;width:25%;}
.noticiaDos  img{width: 31.5%;margin: 10px;}
.noticiaDos h3{font-size: 30px;}
.noticiaTres {margin: 10px;width:25%;}
.noticiaTres  img{width: 31.5%;margin: 10px;}
.noticiaTres h3{font-size: 30px;}
.noticiaCuatro {margin: 10px;width:25%;}
.noticiaCuatro  img{width: 31.5%;margin: 10px;}
.noticiaCuatro h3{font-size: 30px;}}
.video video{width: 85%;}

/* Main Actividades */
main h2{margin-top: 80px;justify-content: center;text-align: center;font-family: 'Lora'}
.actividades{margin-top:20px;}
.actividadUno {display: flex;flex-direction: column;justify-content: center;text-align: center;margin: 10px;border-radius: .8rem;}
.actividadUno div a img{width:80%;border: 4px solid rgb(66, 185, 224)}
.actividadUno h3{font-family:'Lora';margin-top:20px;border-bottom: 5px double pink;}
.actividadUno p{margin: 20px;font-family: 'Poppins';}
.textoUno a p{border-radius: .5rem;background-color:  rgb(201, 201, 201);}
.textoDos a p{border-radius: .5rem;background-color:  rgb(201, 201, 201);}
.textoUno a {list-style: none;text-decoration: none;color: black;}
.textoDos a {list-style: none;text-decoration: none;color: black;}

.actividadDos {display: flex;flex-direction: column;justify-content: center;text-align: center;margin-top: 50px;margin: 10px;border-radius: .8rem;}
.actividadDos div a img{width:80%;border: 4px solid rgb(81, 225, 81)}
.actividadDos h3{font-family:'Lora';margin-top:20px;border-bottom: 5px double pink;}
.actividadDos p{margin: 20px;font-family: 'Poppins';}
.actividadDos {margin-top: 30px;}

.actividadTres {display: flex;flex-direction: column;justify-content: center;text-align: center;margin-top: 50px;margin: 10px;border-radius: .8rem;}
.actividadTres div a img{width:80%;border: 4px solid rgb(249, 249, 91)}
.actividadTres h3{font-family:'Lora';margin-top:20px;border-bottom: 5px double pink;}
.actividadTres p{margin: 20px;font-family: 'Poppins';}
.actividadTres {margin-top: 30px;}

.actividadCuatro {display: flex;flex-direction: column;justify-content: center;text-align: center;margin: 10px;border-radius: .8rem;}
.actividadCuatro div a img{width:80%;border: 4px solid rgb(253, 182, 51)}
.actividadCuatro h3{font-family:'Lora';margin-top:20px;border-bottom: 5px double pink;}
.actividadCuatro p{margin: 20px;font-family: 'Poppins';}

@media screen and (min-width: 1200px){
.actividadUno{display: grid;grid-template-columns: 1fr 1fr;grid-template-areas: "imagenUno textoUno"; text-align: center;justify-content: center;margin-top: 30px;}
.actividadUno .imagenUno{grid-area: imagenUno;}
.actividadUno .imagenUno a img{width: 70%;}
.actividadUno .textoUno {grid-area: textoUno;}
.actividadUno .textoUno a p:hover{color: rgb(66, 185, 224);}
.actividadDos .textoDos a p:hover{color: rgb(11, 189, 11);}
.actividadTres .textoUno a p:hover{color: rgb(249, 249, 91);}
.actividadCuatro .textoDos a p:hover{color: rgb(245, 164, 12);}

.actividadDos{display: grid;grid-template-columns: 1fr 1fr;grid-template-areas: "textoDos imagenDos"; text-align: center;justify-content: center;}
.actividadDos .imagenDos{grid-area: imagenDos;}
.actividadDos .imagenDos a img{width: 70%;}
.actividadDos .textoDos {grid-area: textoDos;}

.actividadTres{display: grid;grid-template-columns: 1fr 1fr;grid-template-areas: "imagenTres textoUno"; text-align: center;justify-content: center;}
.actividadTres .imagenTres{grid-area: imagenTres;}
.actividadTres .imagenTres a img{width: 70%;}
.actividadTres .textoUno{grid-area: textoUno;}

.actividadCuatro{display: grid;grid-template-columns: 1fr 1fr;grid-template-areas: "textoDos imagenCuatro"; text-align: center;justify-content: center;}
.actividadCuatro .imagenCuatro{grid-area: imagenCuatro;margin-top: 20px;}
.actividadCuatro .imagenCuatro a img{width: 70%;}
.actividadCuatro .textoDos {grid-area: textoDos;}}

/*Main Fotografías*/
.fotografia{margin-top:50px;}
.duracionCursada {display: flex;flex-direction: row;}
.fotografiaUno {display: flex;flex-direction: column;justify-content: center;text-align: center;background-color: rgb(201, 201, 201);margin: 10px;border-radius: .8rem;border: 4px solid rgb(66, 185, 224) ;}
.fotografiaUno div a img{width:80%;margin-top: 20px;}
.fotografiaUno h3{font-family:'Lora';margin-top:20px;}
.fotografiaUno p{margin: 20px;font-family: 'Poppins';}
.fotografiaUno {margin-top: 30px;}

.fotografiaDos {display: flex;flex-direction: column;justify-content: center;text-align: center;margin-top: 50px;background-color: rgb(201, 201, 201);margin: 10px;border-radius: .8rem;border: 4px solid rgb(253, 182, 51);}
.fotografiaDos div a img{width:80%;margin-top: 20px}
.fotografiaDos h3{font-family:'Lora';margin-top:20px;}
.fotografiaDos p{margin: 20px;font-family: 'Poppins';}
.fotografiaDos {margin-top: 30px;}

.fotografiaTres {display: flex;flex-direction: column;justify-content: center;text-align: center;margin-top: 50px;background-color: rgb(201, 201, 201);margin: 10px;border-radius: .8rem;border: 4px solid rgb(81, 225, 81);}
.fotografiaTres div a img{width:80%;margin-top: 20px}
.fotografiaTres h3{font-family:'Lora';margin-top:20px;}
.fotografiaTres p{margin: 20px;font-family: 'Poppins';}
.fotografiaTres {margin-top: 30px;}

.fotografiaCuatro {display: flex;flex-direction: column;justify-content: center;text-align: center;margin-top: 50px;background-color: rgb(201, 201, 201);margin: 10px;border-radius: .8rem;border: 4px solid rgb(249, 249, 91);}
.fotografiaCuatro div a img{width:80%;margin-top: 20px}
.fotografiaCuatro h3{font-family:'Lora';margin-top:20px;}
.fotografiaCuatro p{margin: 20px;font-family: 'Poppins';}
.fotografiaCuatro {margin-top: 30px;}

@media screen and (min-width: 600px){

.fotografia{display: grid;grid-template-columns: repeat(2,1fr);}
}

@media screen and (min-width: 1200px){
.fotografia{display: flex;justify-content: space-around;text-align: center;flex-direction: row;}
.fotografiaUno{margin: 10px;width:25%;}
.fotografiaUno img{width: 31.5%;margin: 10px;}
.fotografiaUno h3{font-size: 30px;}
.fotografiaDos {margin: 10px;width:25%;}
.fotografiaDos  img{width: 31.5%;margin: 10px;}
.fotografiaDos h3{font-size: 30px;}
.fotografiaTres {margin: 10px;width:25%;}
.fotografiaTres  img{width: 31.5%;margin: 10px;}
.fotografiaTres h3{font-size: 30px;}
.fotografiaCuatro {margin: 10px;width:25%;}
.fotografiaCuatro  img{width: 31.5%;margin: 10px;}
.fotografiaCuatro h3{font-size: 30px;}
}