/*Hoja de estilos CSS*/

/* Fuentes */
@font-face {
    font-family: 'roboto_slabregular';
    src: url('../font/RobotoSlab-Regular-webfont.eot');
    src: url('../font/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/RobotoSlab-Regular-webfont.woff') format('woff'),
         url('../font/RobotoSlab-Regular-webfont.ttf') format('truetype'),
         url('../font/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_slabthin';
    src: url('../font/RobotoSlab-Thin-webfont.eot');
    src: url('../font/RobotoSlab-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/RobotoSlab-Thin-webfont.woff') format('woff'),
         url('../font/RobotoSlab-Thin-webfont.ttf') format('truetype'),
         url('../font/RobotoSlab-Thin-webfont.svg#roboto_slabthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotothin';
    src: url('../font/Roboto-Thin-webfont.eot');
    src: url('../font/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Roboto-Thin-webfont.woff') format('woff'),
         url('../font/Roboto-Thin-webfont.ttf') format('truetype'),
         url('../font/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'roboto_slablight';
    src: url('../font/RobotoSlab-Light-webfont.eot');
    src: url('../font/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/RobotoSlab-Light-webfont.woff') format('woff'),
         url('../font/RobotoSlab-Light-webfont.ttf') format('truetype'),
         url('../font/RobotoSlab-Light-webfont.svg#roboto_slablight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotobold';
    src: url('../font/Roboto-Bold-webfont.eot');
    src: url('../font/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Roboto-Bold-webfont.woff') format('woff'),
         url('../font/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../font/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.contenido{margin-top: 4.8em;}

/*perfil usuario*/

* {
    box-sizing: border-box;
    list-style: none;
    margin:  0;
    padding: 0;
}

body {
    font-size: 10 px;
    margin:  0;
    padding: 0;
    background-color: #ededec;
    justify-content: center;
   
    margin-bottom: 5em;
    
}


.contenedor{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0;
    width: 100vw;
    background-image: url(../imagenes/fondoport.png);
    
}

h4{
    letter-spacing: 0.5em;
    font-family: 'robotothin';
    font-size: 1.2em;
    
}
    

.persona{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:flex-start
    margin-top: 5em;
   
    padding-bottom: 3em;
}

.persona .nombre{
    font-family: 'roboto_slabregular';
}

.descripcion{
    display: flex;
    
    align-items:flex-start;
    flex: 0 1 auto;
}
.descripcion div{
    margin: 0.5em;
}



.usuario{  
    border-radius: 50%;
    overflow: hidden;
    max-width: 30vw;
    margin: 1em auto;
    box-shadow: 0 0.35em 0.5em 0 rgba(0, 0, 0, 0.2);
 
}

.nombre {
    font-family: 'robotobold';
    color: #ffffff
}

 



section p{
    color: #460081;
    font-size: 1.4em;
        font-family: 'robotothin';
}



.portfolio{
  padding: 40px;
  display: flex;
  align-items: center;
    flex-direction: column;
    
      
}

.portfolio img{
    width: 40em;
    box-shadow: 5px 5px 5px #888888;
    margin-bottom: 5%;
   
    
}



h3{ 
    

    font-size:  3em;
    font-family: 'robotothin';
    color: #ffffff; 
    margin-right: 1em;
    letter-spacing: 0.2em;

   
}
.imagenFondo {
    position: relative;
    opacity: 0.8; 
    align-items: center;
    
}
.imagenFondo span {
    object-position:top;  
    left: 0;
    padding: 1em;
    font-size: 2em;
    color: #ffffff; 
    font-family: 'roboto_slabregular';    
    text-align: center;
     
    
     
}

.imagenFondo:hover {
height: 300px; 
width: 400px;
margin-left: -0px;
}




/*A partir de 320*/
@media screen and (min-width:20em){

    .persona p{
        font-size: 2em;
        padding-bottom: 0em;
        text-align: center;
        
        
    }
    .main{
        margin-top: 5em;
    }
    .carrera{
    font-family: 'robotothin';
    font-size: 0.9em;
    color: #ffffff
     
}
.imagenFondo {
    position: relative;
    opacity: 0.8; 
    
    
}
.imagenFondo span {
    object-position:top;  
    left: 0;
    padding: 1em;
    font-size: 2em;
    color: #ffffff; 
    font-family: 'roboto_slabregular';    
    text-align: center;
    display:flex;
    
    
    
    
     
}

.imagenFondo:hover {
height: 300px; 
width: 400px;
margin-left: -0px;
}

    
}
    .descripcion{
        display: flex;
        justify-content: center;
    }
    
    .usuario{
       max-width: 40%;
        align-self: center;
    
   
}
    /*A partir de 480*/
@media screen and (min-width:30em){
    .contenido{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin:auto;
    }
    .usuario{
        max-width: 40%;
        margin: 0 1em 0.5em 0;
        align-self: center;
    }
    
}

.imagenFondo {
    position: relative;
    opacity: 0.8; 
    
    
}
.imagenFondo span {
    object-position:top;  
    left: 0;
    padding: 1em;
    font-size: 2em;
    color: #ffffff; 
    font-family: 'roboto_slabregular';    
    text-align: center;
   display: flex;
    
    
    
     
}

.imagenFondo:hover {
height: 300px; 
width: 400px;
margin-left: -0px;
}