@charset "utf-8";
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800|Orbitron:400,500,700,900';

* {box-sizing: border-box;}

html {font-size: 10px;}

/*Mobile First*/

body {
    width: 100%; 
    height: 100%; 
    margin: 0px;
     background: #eee;}

#pagina {width: 100%; 
        margin: 0px;}

h1 {font-family: 'Orbitron', sans-serif; 
    font-weight: 900; 
    text-align: center; 
    color: #0069ff;
    align-content: center;
    font-size: 3rem;}

h2 {font-family: 'Orbitron', sans-serif; 
    font-weight: 900; 
    font-size: 2rem; 
    color: #0069ff;
    text-align: center;
    align-content: center;
    display: flex;
    flex-direction: column;}

p {font-family: 'Open Sans', sans-serif; 
    color: #0069ff; 
    font-size: 1.2rem;
    text-align: center;
    align-content: center;
    padding: 5px;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;}

hr {color: #555;}

header nav ul {list-style: none; 
        margin: 0.5rem 0.5rem; 
        padding: 0.2rem;}

header nav ul li a {font-family: 'Open Sans', sans-serif; 
    color: #45ffaa; 
    font-size: 1.5rem;
    text-decoration: none; 
    display: flex; 
    flex-direction: column;
    align-content: center;
    background-color: #0069ff; 
    text-align: center; 
    height: 3rem; 
    line-height: 3rem; 
    overflow: hidden;}

.nombres {font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none; 
    color: #0069ff;
    text-align: center;
    align-content: center;
    list-style-type: none;}

.nombres a {text-decoration: none;
            text-align: center;
            align-content: center;
            color: #0069ff;
            margin-left: -20px;}

main section h3 {font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    font-size: 1rem; 
    color: #0069ff;}

nav ul li a:hover {color: #555; 
                    background-color: #45ffaa; 
                    font-weight: 700;}

nav ul {list-style-type: none; 
    margin: 0.5rem; 
    padding: 0; 
    overflow: hidden; 
    background-color: #0069ff;}

.nombres a:hover {color: #ff0062; 
                  font-weight: 900;}

.apli {font-family: 'Orbitron', sans-serif; 
    font-size: 2rem; 
    text-decoration: none; 
    color: #0069ff;}

.apli:hover {color: #ddd; 
    background-color: #0069ff; 
    text-align: center;}

.listita {list-style: none; 
    text-decoration: none; 
    font-family: 'Orbitron', sans-serif; 
    font-size: 1.2rem; 
    color: #0069ff; 
    text-align: center;}

footer {margin: 70px auto;}

.mapita img {width: 100%;
            height: auto;
            align-content: center;}

.nombres {display: flex; 
    flex-direction: column; 
    align-items: center;}

.nombres ul li {list-style-type: none; 
                align-items: center;}

.nombres ul li a {text-decoration: none; 
    font-family: 'Orbitron', sans-serif; 
    font-size: 1.5rem; 
    text-align: center; 
    font-weight: 700; 
    color: #0069ff;}

.nombres ul li a:hover {color: #ff0062; 
                        font-weight: 400;}

.conoceme {display: flex; 
    flex-direction:row; 
    align-content: center; 
    margin: auto;
    justify-content: space-around}

.conoceme img { display: flex;
                flex-direction: row;
                align-content: center;}

.rotulo {font-family: 'Open Sans', sans-serif;
    color: #0069ff; 
    list-style: none; 
    text-decoration: none; 
    text-align: center;}

.materias {font-family: 'Open Sans', sans-serif;
    text-align: center; 
    list-style: none;
    color:#0069ff; 
    font-size: 1.2rem;}

h5 {font-family: 'Orbitron', sans-serif; 
    font-size: 1.2rem; 
    font-weight: 600; 
    color: #0069ff; 
    text-align: center;}

.venta p {font-size: 1.8rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        padding: 5px;
        align-content: center;
        font-weight: 500;}


input[type=submit], select { width: 80%; 
        background-color: #0069ff; 
        color: #45ffaa; 
        padding: 10px 20px; 
        margin: 50px auto;
        border: none; 
        border-radius: 5px 20px; 
        cursor: pointer; 
        text-align: center;
        font-family: 'Open Sans', sans-serif; 
        font-weight: 700; 
        font-size: 1.5rem;}

.descarga {display: flex; 
    align-content: center; 
    flex-direction: column;}

footer p {text-align: center;
        padding: 5px;
        align-content: center;}

.perfil {border-radius: 50%;
        margin: auto;
        display: flex;
        flex-direction: column;}

/*MQ para móvil*/


/*MQ para tablet 600*/

@media only screen and (min-width: 60rem) {
    nav  ul {display: flex;
             flex-direction: row;}
    nav ul li {flex: 1;}
    .conoceme {width: 50%;
                display: flex;
                flex-direction: row;
                justify-content: space-around;}
    
    p {font-family: 'Open Sans', sans-serif; 
        color: #0069ff; 
        font-size: 1.3rem;
        text-align: center;
        align-content: center;
        margin: auto;
        padding: 10px;}
    
    .descarga { width: 100%;
                align-content: center;
                display: flex;
                flex-direction: column;}
    
    input[type=submit], select { width: 30%; 
        background-color: #0069ff; 
        color: #45ffaa; 
        padding: 10px 20px; 
        margin: 50px auto;
        border: none; 
        border-radius: 5px 20px; 
        cursor: pointer; 
        text-align: center;
        font-family: 'Open Sans', sans-serif; 
        font-weight: 700; 
        font-size: 1.5rem;}}

/*MQ para desktop 1360*/

@media only screen and (min-width: 100rem) {
  
    nav  ul {display: flex;
             flex-direction: row;
            justify-content: space-around;}
    nav ul li {flex: 1;}
    
    .conoceme {width: 20%;
                display: flex;
                flex-direction: row;
                justify-content: space-around;}
    
    p {font-family: 'Open Sans', sans-serif; 
        color: #0069ff; 
        font-size: 1.4rem;
        text-align: center;
        align-content: center;
        margin: auto;
        padding: 20px;
        width: 80rem;
        word-wrap: break-word;}
    
    .sobre {display: flex;
            width: 50%;
            flex-direction: column;
            align-content: center;
            justify-content: space-around;}
   
    .descarga { width: 100%;
                align-content: center;
                display: flex;
                flex-direction: column;}
    
    input[type=submit], select { width: 30%; 
        background-color: #0069ff; 
        color: #45ffaa; 
        padding: 10px 20px; 
        margin: 50px auto;
        border: none; 
        border-radius: 5px 20px; 
        cursor: pointer; 
        text-align: center;
        font-family: 'Open Sans', sans-serif; 
        font-weight: 700; 
        font-size: 1.5rem;}
    
    footer { width: 80rem;}
    footer p {word-wrap: break-word;}
    .venta {width: 100%;
            display: flex;
            flex-direction: column;
            align-content: center;}}