body{
	font-family: Zalando Sans SemiExpanded;
	background-color:#EDEDED ;
}

div.flexbox {
	display: flex;
	flex-direction: column;
}

div.flexbox1{
	flex: 0 0 300px;
	background-color: #393e41;
	padding-left: 30px;
	padding-right: 30px;

	background: linear-gradient(-65deg, #3d3d3d, #c2c2c2, #3196F5, #3d3d3d);
	animation: gradient 15s ease infinite;
	background-size: 400% 400%;
	color:rgba(255,255,255,0.7);
}

div.flexbox2{
	background-color: #EDEDED;
	padding-top: 0px;
	padding-left: 70px;
	padding-right:70px;
}

div.flexbox3{
	flex: 0 0 300px;
}


h1{
	color:grey;
	font-size: 56px;
	margin-bottom: 0;
	display: block;
}

h2{
	font-size: 26px;
	font-weight: 700;

}

h1,h3 span{
	display: block;
	text-align: center;
}

span.nombre{
	color:white;
}

span.apellido{
	color: #3196F5;
}

h3{
	color:white;
	font-weight: 170;
	font-size: 26px;
	margin-top: 0;
}

.contacto, .contactoh4, .pblanc{
	color:white;
}

.biografia{
	margin-top: 2em;
}

.contactoh4{
	margin-bottom: 0;
}

.educacionh4negre{
	margin-bottom: 0;
}

.pnegre{
	margin-top: 0;
	margin-bottom: 3em;
}

.pblanc{
	margin-top: 0;
}

 .contacto, .biografia {
	text-decoration: underline;
	text-decoration-color: #3196F5;
	text-underline-offset: 7px;
	text-decoration-thickness: 3px;
}

.contacto:hover {
	background-color: #3196F5;
	transition: 0.5s;
	padding: 0px 14px;
	text-decoration: none;
}

.biografia:hover {
	background-color: #3196F5;
	transition: 0.5s;
	padding: 0px 15px;
	text-decoration: none;
}

img{
	display: block;
	width:200px;
	margin: 0 auto;
}

a{
	font-size: 22px;
	font-weight: 900;
	background-color: #3196F5 ;
	color:#EDEDED;

	padding: 5px 20px;
	margin-bottom: 70px;
	display: block; 
  	text-align: right;	
  	text-decoration: none;
}

a:hover{
	filter: brightness(110%);
	transition: 0.5s;
	cursor: pointer;
	text-decoration: underline;
}


p{
	color: black;
	font-size: 16px;
	font-weight: 50;
}



/* PORTFOLI */

.ContenedorPortfoli{
	padding-top: 0px;
	padding-left: 70px;
	padding-right:70px;
	background-color: black: 
}


.PortfoliTitulo{

	font-size: 12vw;
	font-weight: 900;
	color: #3196F5;
	padding-top-bottom: 40px 40px;
	margin: 0;
	margin-bottom: 70px;

	background: linear-gradient(-45deg, #3d3d3d, #c2c2c2, #3196F5, #3d3d3d);
	animation: gradient 15s ease infinite;
	background-size: 400% 400%;
	color:rgba(255,255,255,0.7);
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

div.portafoli{
	display: grid;
  	grid-template-columns: 1fr;
 	gap: 15px;
 }


@media screen and (min-width:768px) {
	div.portafoli {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	div.flexbox{
		flex-direction: row;
	}
}


div.portafoli img{
	width: 100%;
	height: auto;
  	display: block;
}

div.portafoli img:hover{
	scale:90%;
	filter: brightness(115%);
	transition: 0.2s;
}