* {margin: 0; padding: 0; transition: 0.5s;}

html {font-size: 100%;
    background-image: url(imagenes/fondo.png);}

body {font-family: Arial; font-size: 16px}
a {color: #000; text-decoration: none;}

.contendor {min-width: 960px; margin: 0 auto 0 auto}
.separador {clear: both;}


/* HEADER */
header {width: 960px;
        height: 120px;
        margin: 0 auto 0 auto;}

header h1 {padding: 25px;
           position: relative;
           float: left;
           font-family: "Roboto", sans-serif;
           font-weight: 800;
           color: #492881;
           font-size: 35px;}

header nav {color: #FFF;
            padding: 3px;
            text-decoration: none;
            margin-top: 25px;
            width: 400px;
            position: relative;
            float: right}

header nav ul {list-style-type: none;
                text-align: center;
                margin: 3px;}

header nav ul li {display: inline;
                  padding: 3px;}

header nav ul li a {font-family: "Roboto", sans-serif;
                    font-weight: 800;
                    text-decoration: none;
                    text-align: center;
                    color: #ed3952;
                    font-size: 18px;
                    margin: 5px;
                    padding: 5px;}

/* NAV */
.navegador {list-style-type: none;
            text-align: center;
            text-decoration: none;
            align-content: center;
            padding: 10px;}

.nombre {display: inline;
            margin: 5px;
            text-align: center;
            z-index: 0;}

.foto {padding: 15px;}

/* MAIN */
main {width: 960px;
    min-height: 500px;
      margin: 0 auto 0 auto;
        padding: 10px;}

/* SECTION */
section {width: 50%; position: relative; float: left;}

/* ARTICLES */
article {padding: 30px;}
h3 {font-family: "Roboto" sans-serif;
    font-weight: 700;
    margin: 10px auto 10px auto;
    color: #492881;}
h4 {font-family: "Roboto" sans-serif;
    font-weight: 400;
    margin: 15px auto 5px auto;
    color: #ed3952;}
p {font-family: "Roboto" sans-serif;
    font-weight: 200;}

/* ASIDE */
aside {width: 50%; position: relative; float: right;
        text-align: right;}



.aside-conocenos {min-height: 40px;
margin-top: 111px;}

/* FOOTER */
footer {margin: 10px auto 0 auto;
        text-align: center;
        width: 960px;
        padding: 17px;
        background: #ed3952;
        font-family: "Roboto" sans-serif;
        font-weight: 200;
        font-size: 12px;
        color: #fff;}

/* HOVER */
header nav ul li a:hover {background:#ed3952; color: #ffffff; padding: 5px;}
nav ul li a img:hover {background-image: url(imagenes/hoverfoto.png);}




/* RESPONSIVE */

@media screen and (max-width: 700px) {
    header {width: 500px;
            height: auto;
            margin: 0 auto 10px auto;}
    header h1 {font-size: 15px;
                width: 50%;
                padding: 15px;}
    header nav {width: 50%;
                margin: 0;}
    header nav ul {position: relative; float: right;}
    header nav ul li {padding: 3px;}
    header nav ul li a {font-size: 10px;
                        padding: 1px;
                        margin: auto;}
    
    .foto {width: 35%;
            padding: 3px;}
    
    main {width: 500px;
            min-height: 400px;}
    article {padding: 10px;}
    h2 {font-size: 15px;}
    h3 {font-size: 12px;
        margin: 7px auto 2px auto;}
    p {font-size: 10px;}
    
    footer {width: 500px;
            font-size: 3px;
            padding: 15px;}
    footer p {width: 500px;
            text-align: center;
            margin: 0 auto 0 auto;}
}