.staff-container{
	width: 90%;
	margin: 3% auto 0 auto;
}

.staff-container h1{
	text-align: center;
}

.staff-container .staff-list{
	display: flex;
	flex-wrap: wrap;
}

.staff-container .staff-list.collaboratore{
	justify-content: space-between;
}

.staff-container .staff-list .staff-wrap{
	display: flex;
	margin-bottom: 1rem;
	flex: 0 0 100%;
	border: 1px solid var(--color-scuro);
	border-radius: 1rem;
	padding: 1rem;
	flex-wrap: wrap;
	width: 100%;
}
.staff-container .staff-list .staff-wrap.collaboratore{
	flex: 0 0 48%;
	width:48%;
}
.staff-container .staff-list .staff-wrap.collaboratore a span {overflow:visible;text-overflow:unset;white-space:normal}
.staff-container .staff-list .staff-wrap.collaboratore img {display:none}

.staff-container .staff-list .staff-wrap .staff-img-container{
	 position: relative;
	 width: 100%;
}

.staff-container .staff-list .staff-wrap .staff-img-container .staff-img{
	border-radius: 1rem;
	width: 100%;
	height: auto;
}
.staff-container .staff-list .staff-wrap  .staff-img-container .staff-bio {
	display:none
	
}
.staff-container .staff-list .staff-wrap .staff-img-container .staff-bio{
	width: 100%;
	margin: auto;
	padding: 5% 5% 5% 5%;
	border-radius: 15px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--color-verde);
	color: var(--color-scuro);
	visibility: visible;
	opacity: 0;
	transition: opacity .3s;
	text-align: left;
}

.staff-container .staff-list .staff-wrap .staff-img-container .staff-bio:hover{
  	opacity: 1;
}
.staff-container .staff-list .staff-wrap a {display:flex;flex-wrap:wrap;flex:0 0 100%;width: 100%;}
.staff-container .staff-list .staff-wrap a span{
	flex:0 0 100%;
	width: 100%;
	max-width:100%;
	font-size:1.1rem;
	font-weight:bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.staff-container .staff-list .staff-wrap .staff-nome.collaboratore{
	/* width: 81%!important; */
	font-size: 0.8rem;
}

.staff-container .staff-list .staff-wrap .staff-ruolo
{font-size: .9rem;font-weight:normal;padding:.2rem 0 .5rem 0;}
.staff-container .staff-list .staff-wrap.collaboratore .staff-ruolo{display:none}


/**************************/
/** RISOLUZIONE > 1024px **/
/**************************/

@media screen and (min-width: 1024px){
	
	.staff-container{
		width: 64%;
	}

	.staff-container .staff-list{
		gap:.85rem;
	}

	.staff-container .staff-list .staff-wrap{
		flex: 0 0 23.5%;
		width: 23%;
	}
	.staff-container .staff-list .staff-wrap a span{
		font-size:.8rem;
	}
	.staff-container .staff-list .staff-wrap a span.staff-ruolo{
		font-size:.8rem;
	}
	.staff-container .staff-list .staff-wrap.collaboratore{
		flex: 0 0 23%;
	}

}