@charset "UTF-8"
    
@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
    
@font-face {
    font-family: 'robotoblack',
    src: url('roboto-black-webfont.eot'),
    src: url('roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-black-webfont.woff2') format('woff2'),
         url('roboto-black-webfont.woff') format('woff'),
         url('roboto-black-webfont.ttf') format('truetype'),
         url('roboto-black-webfont.svg#robotoblack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.eot');
    src: url('roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff'),
         url('roboto-regular-webfont.ttf') format('truetype'),
         url('roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



*{
    box-sizing: border-box; 
    }   

html {
    height: 100vh;
    background-color: #dedede;
    }



body{
    font-family: 'roboto', sans-serif;
    font-weight: 400;
    width: 100%;
	margin: 0;
	padding: 0;
}

#pagina {
    padding: 0;
    margin:0;
}

header {
    text-align: center;
    background-color: #dedede;
    padding: 0em;
    margin: 0em;
        }
    
header div a {
    margin: 0 0 0 0;
    padding: .2em;
}

nav {
    background-color: cadetblue;
    width: 100%;
        }    

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

#logo{
    padding: .5em;
    margin: 0;
        }


header nav ul li a {
    text-decoration: none;
    color:azure;
    text-align: center;
    display: block;
    font-family: 'roboto';
    font-weight: 900;
    padding: .5em;
    width: auto;
    background-color: cornflowerblue;
    }

header nav ul li a:hover {
    color: azure;
    background-color: darkblue;
    }

main {
    text-align: center;
    margin: 1em;
    min-height: 50vh;
    }

.imagendeperfil {
    display: block;
    margin: 2em;
    
}
h1 {
    text-align: center;
    font-family: 'roboto';
    font-weight: 900;
    font-size: 1.5rem;
    }

h2 {
    font-family: 'roboto';
    font-weight: 900;
    font-size: 1rem;
    }

p {
    font-family: 'roboto';
    font-weight: 400;
    font-size: 1rem;
    }

.imagendeperfil {
    display: block;
    max-height: 20%;
    margin: 2rem;
    
}

#datos{
    text-align: left;
    margin: 1rem;
}

.mapa-webapp img{
    width: 100%;
    margin-right: 2rem;
}

.che3d{
    margin: 1rem;
    width: 200px;
}

.panel img{
    margin: 1rem;
    width: 200px;
}


#estudiantes {
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12px;
    padding: .25em;
    display: flex;
    text-align: center;
    border: 1px solid azure;
        }

@media screen and (min-width: 500px){
    .estudiantes{   
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
    }
}

@media screen and (min-width: 800px) {
    
    .contenedor {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    
        }