/* Fuentes */

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');


/* fin */

ul {
margin:0;
padding:0;
}

li {
    list-style: none;   
}

/* BODY */

body {
    background-color: black;
    padding: 1.2em 3em 1.2em 3em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    font-family: Roboto;
    color: white;
    }


/* HEADER */

.headeruno {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    background-color: black;
    padding: 0.8em;
      align-items: center;
    }

header> .headeruno > a> img {flex-grow: 0;
  
    
}
header> .headeruno > .cajados{flex-grow: 1;}

.cajados>h1 {text-align: center;
text-transform: uppercase;
font-size: 2m;
font-family: Oswald, sans-serif;
color: red;
}

header { flex-grow: 0;
    
}

/* NAV BAR */

nav {
    font-family:sans-serif;
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background-color:red;
    padding: 0.4em;
        }

nav>ul {
        display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    list-style: none; 
}

a {
    text-decoration: none;
    font-family:Roboto ;
    color: white;
    display: block;
}

/* MAIN */

main { background-color: black;
    padding: 1em 1.5em;
    margin: 1.5em 0em 1.5em;
    flex-grow: 1;
    
}

#rotulo {
    font-family: Oswald;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 300;
    flex-direction: row
}

.rotulo {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 560px) {
  .rotulo {
    display: flex;
    flex-flow: row wrap; 
      width: 100%;
        }
}

.perfil {
   
 flex-grow: 0;
    }
@media only screen and (max-width: 1080px) {
  .perfil {
      width: 100%;
      height: auto;
    display: flex;
    flex-flow: row wrap; 
}
}

.info {
    text-transform: uppercase;
    color: white;
    padding: 1em;
    width: auto;
    flex-grow: 1;
    font-size: 0.8em;
    width: auto;     
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    align-items: flex-start;
    list-style: none; 
    }

    }
    .info2 {
    text-transform: uppercase;
    color: white;
    padding: 1em;
    width: auto;
    flex-grow: 1;
    font-size: 0.8em;
    width: auto;     
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    list-style: none; 
      }  
        .info3 {
    color: white;
    padding: 1em;
    width: auto;
    flex-grow: 1;
    font-size: 0.8em;
    width: auto;    
}

#webapp {
    font-family: Oswald;
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 300;
    text-align: center;
    background-color: red;
    color: white;
    padding: 0.5em 0em;
    
}

#webapp2 {   
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    padding: 0em 0em 3em;
    font-family: Roboto;
    color: white;
    }

.foto2 {
    width: 12em;
    height: 13m;
    display: block;
}

.foto3 {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: 100%
        }

/* FOOTER */

footer {
    background-color: red;
    flex-grow: 0;
        padding: 2em 1.5em 2em;
display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: space-between;
}

#bajada-footer {
    font-family: Oswald;
    font-weight: 300;
    }

h4 {
    font-size: 0.7em;
    font-family: Oswald;
    text-transform: uppercase;
    color: white;
    line-height: 1.2em;
    margin: 0.6em 0em;
    
}

.foot1 {
    font-size: 0.5em;
    font-family: Roboto;
    color: white;
    line-height: 1.2em;
    }

.foot2 {
    font-size: 0.5em;
    font-family: Roboto;
    color: white;
    line-height: 1.2em;
    padding: 1em;
    
    
    
}