@charset "utf-8";
    
    /* Reglas generales*/

body {
    font-family: "Montserrat", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height:  100vh;
    min-height: -webkit-fill-available;
    background-color: beige;
    /*background: rgb(0,178,246);
    background: linear-gradient(177deg, rgba(0,178,246,1) 3%, rgba(78,223,216,1) 100%);*/



}
div{
    margin:auto;
   }
html{
 height: -webkit-fill-available; 
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
header{
    text-align: center;
    background-color:#0094d7;
}
header .contenedor{
    display: flex;
    justify-content:space-between;
    align-items: center; /* para corregir las imagenes estiradas en el eje secundario*/
}
header ul {
    display: flex;
     text-decoration: none;
    list-style: none;
}
header ul li {
    margin:1em;
    
    
    /* caja flexible */
    display: flex;
justify-content: space-around;
    
}
header nav ul li a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    
}
a{

    text-decoration: none;
    list-style: none;
}
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
footer{
    background-color: gray;
   /*padding: 1em;
    margin: 2em 0 0 0;*/
    font-size: 0.8em;
}
h1{
    background-color: #0094d7;
    font-size: : 1.5em;
    }
h2{
    font-size: 1.1em;
}
h3{
    font-size: 1em;
    font-weight: 300;
}
h6{
    margin: auto;
    max-width: 640px; /*SE QUE ESTA MAL, PERO NO ME FUNCIONABA DE OTRA FORMA*/
}
img{
    max-width:100%;
    height:auto;
}
p{
    text-align: justify;
    
}
.contenedor {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 1em;
    margin: 1em;
    
}
.contenedor2 {
    display: flex;
    margin: auto;
    justify-content: space-between;
    
}
.contenedor3 {
    max-width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    margin: 1em;
    
}
.contenedor4 {
    display: flex;  
    justify-content: flex-end;
    
}
.alignleft{
    display:block;
}
.usuario {
    margin:auto;
    text-align: center;
    max-width: 50%;
    align-items: center;
}
.newsletter{
   display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin:auto;
    flex-wrap:wrap; 
    
}
.articulo {
    margin:auto;
    display: block;
    align-items: flex-start;
    background-color: white;

}
.articulo img {
    width: 100%;
}
.articulo h3{
    overflow: hidden;
}
.integrantes{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin:auto;
    flex-wrap:wrap; 
}
.linkto{
    font-style: italic;
    font-size: 0.7em;
}
.boton{
    border-radius: 1em;
    background-color: aliceblue;
    margin: 1rem;
}
iframe{
    width: 640px; /*PONGO PIXELES PORQUE NO ENCONTRE OTRA FORMA DE QUE ENTRARA EN UN TILE SE QUE ESTA MAL*/
    height: 480px;
}
.donar{
    display: flex;
    display: block;
    justify-content: space-around;
    margin:auto;
    
}
/*--------------------------------------------------mecanicas del menu responsive-----------------------------------------------------*/

#btn-menu{display: none;}

header label{
    display: none; 
    width: 3rem; 
    height: 3rem; 
    padding: 1rem; 
}
header label:hover{
    cursor: pointer; 
    background: rgba(0,0,0,0.3);
}
.menu ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}
.menu li:hover{
    background: rgba(0,0,0,0.3);   
}
.menu li a{
    display: block;
    padding: 1rem 2rem;
    color: white;
    text-decoration: none;
}

@media (max-width:768px){
    header label{
        display: block;
    }
    
    .menu{
        position: absolute;
        background-color:#0094d7;
        width: 40%;
        margin-left: -70%;
        transition: all .3s;
    }
    .menu ul{
        flex-direction: column;
    }
    .menu li{
        border-top: 1px solid white;
    }
    #btn-menu:checked ~ .menu{
        margin: 0;  
    }
}
/*---------------------------------------------------------------slider DE 4 IMAGENES------------------------------------------------------------------*/
.slider {
	width: 95%;
	margin: auto;
	overflow: hidden;
}
.slider ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: cambio 20s infinite alternate linear;
}
.slider li {
	width: 100%;
	list-style: none;
}
.slider img {
	width: 100%;
}
@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}