/*
 #1#- body
 #2#- header
 #3#- nav
 #4#- article
 #5#- aside
 #6#- footer
 #7#- MOBILE
*/

html{
    background: aqua;
}

/* #1#- body */

body{
    width: 95%;
    background-color: #EAEADA;
    margin: 0 auto;
    border: 5px solid grey;
    font-family: sans-serif;
/*
    min-height: 100vh;
    position: relative;
    padding-bottom: 2em;
*/   
}

.wrapper {
    width: 100%;
    height: 100%;
}


/*  #2#- header */
header, nav, article, aside {
    margin-bottom: 0.3em;
}

header{
    background: red;
    height: 70px;
    position: relative;
}
header img {
    height: 60px;
    position: absolute;
    top: 4px;
    left: 3px;
}

header p.titulo {
    font-family: fantasy;
    font-size: 2em;
}


/*  #3#- nav */
nav{
    background: green;
    height: 40px;
}

nav li {
    float: left;
    margin: 0.7em 0.3em;
    border-right: solid #fff 1px;
    padding-right: 0.4em;
}

nav li a {
    color: #fff;
    text-decoration: none;
}

nav li a:hover {
    color: red;
    text-decoration: none;
}

/*  #4#- article */
article{
    background: yellow; 
    /* height: 300px;  */
    width: 98%;  /* OJO! Si ponemos aside tocar width */
    float: left;
    box-shadow: 0px 0px 4px 0px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
}

/* #5#- aside */
aside {
    background: blue;
    height: 250px;
    width: 30%;
    float: right;
}

/* #6#- footer */
footer{
    background: black;
    height: 70px;
    width: 100%;
    color: white;
    clear: both;
/*
    position: absolute;
    bottom: 0;
*/   
    margin: -120 auto 0;
}


/* #7#- MOBILE  */
@media screen and (max-width: 580px) {

    body {
        width: 100%;
    }    
    article, aside {
        float: none;
        width: 100%;
        padding: 1em;
    }
}

/* iPhone Retina */
@media screen and (max-width: 320px) {

}

/* Extra Small Devices, Phones */
@media screen and (max-width: 480px) {

}

/* Small Devices, Tablets */
@media screen and (max-width: 768px) {

}


/* Medium Devices, Desktops */
@media screen and (max-width: 992px) {

}

/* Large Devices, Wide Screen */
@media screen and (max-width: 1200px) {

}