@font-face {
    font-family: 'chivobold';
    src: url('chivo-bold-webfont.woff2') format('woff2'),
         url('chivo-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'chivolight';
    src: url('chivo-light-webfont.woff2') format('woff2'),
         url('chivo-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'chivoregular';
    src: url('chivo-regular-webfont.woff2') format('woff2'),
         url('chivo-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*{
    box-sizing: border-box;
    padding:0;
margin:0;
list-style: none;
display: flex;
flex-direction: column;
align-items: stretch;

}

title { display: none;}

h1 {height: 10vh;
    background: url(../images/logo1.svg) no-repeat center ;
     
    margin: 0.5em 0 0.5em 00;
}
span {display: none;   
    color: white;
    font-family: 'chivobold';
    padding: 0.5em 0em 0.5em 0em;
    margin: 0 0 0.5em 0;
    font-size: 1.4em;
    text-align: center;
   }

.menu ul li{
    background-color: transparent;
    font-family: 'chivoregular';
    font-size: 0.9em;
    margin-bottom: 0.3em;
    color: black;
    text-decoration: none;
    text-align: center;
    max-width: 50vw;
    align-self: center;    
}


.menu ul li a:link{
    color: black;
    text-decoration: none;
}

.menu ul li a:visited{
    color: black;
    text-decoration: none;
}
.menu ul li a:hover{
    color: lightgrey;
    text-decoration: none;
}

.paginaActual {
    font-family: 'chivobold';
    }

.contenedormenu {display: flex;
flex-direction: }


#foto1 {max-width: 100%;
    }

.contenedorinfo {
    font-family: 'chivoregular';
    font-size: 0.75em;
    text-align: left;
    padding: 1em;
    margin-bottom: 2em;
    }

#website:link {
    font-family: 'chivobold';
    }
.contenedorinfo a:visited {
    color: black;
    }


footer {display: flex;
    flex-direction: column;
    background-color: black;
    color: white;
    padding: 1em 1em 1em 1em;
    }

.titular-footer{
    font-family: 'chivoregular';
    font-size: 0.8em;
    text-align: center;
    margin-bottom: 0.5em
    }

.texto-footer{
    font-family: 'chivolight';
    font-size: 0.55em;
    text-align: center;
    margin-top: 0.5em
    }

.academico h3{
    margin: 1em 0 0.5em 0;
    padding: 0.5em 0em 0.5em 0em;
    text-align: center;
    font-family: 'chivobold';
    background-color:black;
    color: white;
    }
.titulos-academico{
    font-family: 'chivobold';
    text-decoration: underline;
    height: 2em;
    color: black;
    margin-top:0.5em;
    padding-top: 0.5em; 
   
}

.contenedor-academico{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    width: 80%
   
}

.contenido-academico{
    font-family: 'chivoregular';
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    margin: 1em;
            
}
    
    .contenido-academico a{
    font-family: 'chivoregular';
    font-size: 0.9em;
    align-self: center;
        text-align: center;
  
        
}
.portfolio{margin: 0.5em 1em 0.5em 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    align-self: center;
       
    }

.foto-portfolio {
    margin:0.5em 0em 0.5em 0em;
    width: 100%;
 }



@media screen and (min-width: 20em){
    .portfolio{margin: 0.5em 1em 2em 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    
    }

.foto-portfolio {
    margin:0.5em 0em 0.5em 0em;
    width: 190px;}




}

@media screen and (min-width: 30em){
   
    
    
    #foto1{max-width: 60vw;
        margin: 0 1em 0;
        align-self: center; }
   
    
    #texto-info{
        margin-top: 1em;
        font-size: 1.1em;
         align-self: center;
        max-width: 80%  }
  
    

.contenedormenu{
    flex-direction: row;
    align-self: center;
    justify-content:space-between;
    width: 80vw;}
    
.contenedor-academico{
        width: 95vw;
    }
    
.contenedorcontacto{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    align-self: center;
        width: 80vw;
              
}
}

@media screen and (min-width: 50em){
       
	header{
            		flex-direction: row;
		justify-content: space-between;
		align-items: center;
        width: 90%;
        align-self: center;
            	}
        
        
	span{
	            display: block;   
	            color: black;
	            font-family: 'chivobold';
	            margin: -0 0 0 0em;
	            font-size: 0.8em;
	            text-align: left;
	}
        
        h1{
	background: none;
	        padding: 0;
	            margin:0;
	}
        
       
        .contenedormenu{
   	 flex-direction: row;
   	 justify-content: space-between;
    	width: 50vw;
	}
        
    
    .contenedorinfo{
        flex-direction: row;
    }

    #foto1{
	max-width: 40vw;
	}
        
        #texto-info{
            margin-right: 3em;
            margin-left: -4em;
	}    
    
 }

@media screen and (min-width: 60em){
    
    .contenedormenu{width: 35vw;}
    
    .contenido-academico{width: 20vw;}
    
    .contenedorinfo {margin-bottom: 8em;}
    #texto-info{font-size: 1em;
    margin-right: 15em;}
   }