@charset "utf-8";
@import url(nav.css);
@import url(mainAside.css);
@import url(mainSection.css);
@import url(iniciarSesión.css);
@import url(footer.css);
*{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
/* BODY */
body{
    background: rgb(235, 235, 235);
}
/* HEADER */
header{
    background-color: black;
}
.barra ul{
    width: 90%;
    margin: auto;
    display: flex;
    Justify-content: flex-end;
}
.barra li{
    list-style: none;
    margin: 5px 0 5px 0;
    
}
.barra a{
    text-decoration: none;
    padding: 5px 12px;
    color:#669e37;
    font-family: bahnschrift;
}
.barra a:hover{
    color: white;
    background-color: #0277bd;
    border-radius: 4px;
}
.logo{
    width: 350px;
    padding: 10px 0 15px 35px;
}
/* BANNER */
.banner{
    overflow: hidden;
}
.banner ul{
    display: flex;
    width: 400%;

    animation: animacion 10s infinite alternate;
}
.banner li{
    width: 100%;
}
.banner img{
    width: 100%;
    border-top: 2px solid grey;
}
@keyframes animacion{

    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%;}
}