@charset ¨utf-8¨;

* {
    box-sizing: border-box;
}

/* reglas generales */

body { 
    background-color: white;
    font-family: sans-serif;
    text-align: center;
    min-height: 100vh;
    min-height:-webkit-fill-available;
      
/*Caja flexible*/
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;}


main { 
    flex-grow:1;
 }

footer{ background-color:#2a1e82;
        display:flex;
        align-items: center;    
        flex-direction: column;
        padding: 1em;
        padding-top: 2em;}

/* Parte para Celular*/

/*HEADER*/
header .contenedor {
    background-color:#2a1e82;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
#logo {
    display: block;
    width: 7em;
}


/* MENU*/
/*boton que llama al menu*/
#llamamenu {
    display: flex;
    color: white;
    background-color: #2a1e82;
    padding-right: 4em;
    height:2em;
    width:2.5em;
    cursor:pointer;
    position:relative;
    z-index:9999;
    }

header nav ul {display:flex;
    flex-direction: column;}

header ul li a {
    color: white;
    font-size: 2em;
    line-height: 2em;} 

header nav a { 
padding: .5em 1em;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;}

header nav ul {
    background-color: #2a1e82;
    position:fixed;
    top:0;
    bottom:0;
    left:100%;
    width:50%;
    padding-top: 7em;
    transition: all .5s ease;
 }

header nav ul :hover{ background-color: #5c49e0;
border-radius:2em; }


.visible {
/* el menu se muestra corriendose de arriba a abajo */
left:50%;
transition: all .3s ease;}

/* MAIN */ 

/* COLOR NARANJA CÓDIGO :#f49227*/

main{ 
    background-color: azure;
    display: flex;
    flex-direction: column;
}


#portada {
    background-image: url(/webapp/imagenes/portada.jpg);
    background-position: top;
    background-size: cover;
    display:flex;
    height: 40em;
}

#portadavol {
    background-image: url(/webapp/imagenes/voluntariado.jpg);
    background-position: top;
    background-size: cover;
    display:flex;
    height: 40em;
}

.textoportada {
    width: 100%;
    padding-top: 25%;
    padding-bottom: 25%;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.textoportada h1{
    color: white;
    text-align: center;
    font-size: 3.5em;
}
.textoportada h2 {
    color: white;
    text-align: center;
    font-size: 2em;
}

/* PANTALLA AGENDA */
.agendacompleta {
    column-rule-width: inherit;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-content: center;
    margin: inherit;
}
    
h1 { 
     text-align: left;
     color:#361983;
     font-size: 3em;
     padding: 0.5em;
     padding-bottom: 0;}

h2{
    font-family: sans-serif;
     text-align: left;
     color:#2a1e82;
     padding: 0em 1em 0em 1em;
    
}

.agenda h1 {
    padding: 0 0 0 1em;
}

.fechasconactividad {
    background: #f5f2f2;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 1em 1em 1em 1em;
    padding: 1em;
    border-radius: 2em;
}

.fechas {
    position: relative;
    text-align: left;
    display: flex;

}

.fechas h2 {
    color: #2a1e82;
    font-size: 2.5em;
    text-align: left;
    padding: 0 0 0 0.5em;
}

#horarioyactividad{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: inherit;
    align-content: left;
    width: 100%;
}

#horarioyactividad h2{
    text-align: left;
    line-height: 1.2em; 
    margin: 0.2em;
    padding: 0;
    font-size: 2em;
    color: #2a1e82;}


.clasificacion {
    font-size: 0.6em;
    height: inherit;
    display:flex;
    justify-content:flex-start;
}


.atp{
    background: #5c49e0;
    border-radius: 1em;
    padding: 0 1em;
        margin: 1em;
}

.duracion{
    background: #5c49e0;
    border-radius: 1em;
    padding: 0 1em;
    margin: 1em;
}

.gratuito{
    background: #5c49e0;
    border-radius: 1em;
    padding: 0 1em;
        margin: 1em;
}

.clasificacion  h3{
    color: white;
}


p { font-family: sans-serif;
     text-align: left;
     color:black;
    font-size: 1.5em;
}

/*PANTALLA NOVEDADES*/

.novedades img { 
    width:100%;}


.novedades { 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }
.novedades ul li { 
    flex: wrap; 
    background-color: #e2e2e2;
    border-radius: 2em;
    margin: 1em;
}


.novedades h2{
    text-align: left;
    padding-left: 0em;
    padding-top: 1em;
    text-decoration: underline;}

.novedades h3 
    {text-align: left;
    padding-top: 0em;
    line-height: 1.2;
    color: #2a1e82}

.novedades p { 
    font-family: sans-serif;
    text-align: left;
    padding-bottom: 1.5em;
    font-size: 1em;
}

/* PANTALLA HISTORIA */

.cauce img {  flex-basis: auto;
    padding: 0em 2em 2em 0em;
    height: 100%;
    width: 100%;
     
}

.cauce h2 { text-decoration: underline;
      
}

.cauce p { padding: 1em 0em 1em 0em;
    margin-left: auto
    
}

.face { margin-right: auto;
     padding: 0em 0em 3em 0em;
    
}

.video { flex-basis: auto;
    padding: 0em 0em 3em 0em;
    display:         flex;
    
}


/* VOLUNTARIADO */



.voluntariado h1 {      padding: 0 0 0 1em;
    
}

.act {
    background-color: #f4eded;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 1em 1em 1em 1em;
    padding: 1em;
    border-radius: 2em; 
}

.act .titulo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.act .titulo .fecha {
    background-color: #5c49e0;
    border-radius: 2em;
    padding: 0.2em;
    margin: 1em 1em 1em 19em; 
    justify-content: flex-end;
}

.act .titulo .fecha h2{
    color: white;
}

.act .horayaccion h3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.act .horayaccion .sumate h3{
    text-align: center;
    color: white;
    background: #5c49e0;
    border-radius: 2em;
    padding: 1em;
    align-content: center;
    margin: 2em 4em 2em 4em;
    
}

.act .horayaccion p {                     
    color: black;
    margin: 0 1em 0 1em;
}



/* CONTACTO */

/* CAJITA DE FORMULARIO */
.fondotitulocontacto {
    border-top: 5px solid #2a1e82;
    width: 100%;
    margin-bottom: 20px;
	flex-wrap: wrap;}

.comunicate {
    color: #2a1e82;
    font-weight:bold;
    padding: 1em;
    font-size: 2em;}


#cajacontacto {
    background-color: white;
    width: 100%;
    padding: 5px;
    position: relative;
    float: left;
    flex-wrap: wrap;}

.form-control {
    display: block;
    width: 100%;
    height: 5em;
    color: #555;
    background-color: #fff;
    border: 0.2em solid #2a1e82;
    border-radius: 4px;
    margin-top: 10px; 
    margin:2em;}

.form-text {
    display: block;
    width: 100%;
    font-size: 1em;
    color: #2a1e82;
    background-color: #fff;
    border: 0.2em solid #2a1e82;
    border-radius: 4px; 
    margin-top: 10px;
    margin:2em;}

.boton-enviar {
    width: 20%;
    background:  #2a1e82;
    border: none;
    padding: 2em;
    border-radius: 2em;
    color: #fff;
    font-size: 1em;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;}

.boton-enviar:hover {
     background: #f49227;}

.flex-item {
    margin: 15px 0;
	height: auto;}

.mapa {
	margin:1.5em;}

.pagina {
	margin:0.5em 2em 3em -1em;}

#covid { display: flex;
        justify-content: center;
         width:100%;}



/*MEDIAQUERIES*/

/* novedades */
/* dispositivos desde 600px de ancho*/
@media screen and ( min-width: 600px) {
    
 #llamamenu { 
     
     display: flex;}
    
    header nav ul { 
        display: flex;
    flex-wrap: wrap;}
        
    
    header nav ul li{
        flex-shrink: 0;}
}

    footer img {
        width: 5%;
}

    footer p { 
        text-align: center;
        font-size: 1.2em;
        color: white;
}

    footer h5{
        color: white;
        margin: 2em;
}

    .agendacompleta  {
        display: flex;
        flex-direction:column;
        align-items: flex-start;
        width:95%;
        
}
    
        
/* dispositivos desde 768px de ancho tablets*/
@media screen and ( min-width: 768px) { 
        .novedades ul {display: flex;
        flex-direction:row;
        flex-wrap: wrap;}
        
        .novedades ul li {
        display: flex;
        margin:0.5em;
        align-items:flex-start;}
        
    .novedades figure { 100vmin;}
    
    .agendacompleta {
        display: flex;
        flex-direction:column;
        flex-wrap: wrap;
        align-items: flex-start;}
    
    
    .agendacompleta .fechasconactividad {
        width:95%;
        display: flex;
        flex-flow: column;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    header ul li a {
        width:100%;
        display: flex;
        flex-flow: column;
        flex-wrap: wrap;
        align-items: flex-start;}
    }

    /* dispositivos desde 992px de ancho laptops desktops*/
    @media screen and ( min-width: 992px) { 
        #llamamenu { 
            
        display: none;}
    
        header nav ul{
        display:flex;
        flex-wrap: wrap;
        flex-direction:row;
        align-content:space-between;
        background: none;
        position: relative;
        padding-top:0;
        width:100%;
        left: auto;
        top:auto;
        font-size: 0.5em
        
        }
        
        header nav ul .visible { 
        left:auto;
        }
        
        .agendacompleta  {
            width:100%;
            display: flex;
            flex-wrap: wrap;
        }
        
        
        
        .novedades figure { 
            width: 37vmin;}
        
     
        header nav ul{
            display: flex;
            flex-wrap: wrap;}
        
    /* dispositivos desde 1200px de ancho laptops desktops*/
    @media screen and ( min-width: 1200px) { .novedades figure {
        width: 24vmin;
        }
        
    
     .fechasconactividad {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            width: auto;
        }
}
        
/* FOOTER */


footer img{
        justify-content: space-between;
        width:5%;
        }
        
footer p { text-align: center;
        font-size: 1.5em;
        color: white;}
        
.datoscatedra {padding: 1em 4em 0em 4em ;}

h5 { align-content: center;
     padding: 2em;
     color: white;}