@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@100;400;900&display=swap');
.w3-bar .w3-bar-item{padding:2em 2em;float:left;width:auto;border:none;display:block;outline:0}
.adjust {
z-index: 3;
background: hsl(248, 17%, 66%);
mix-blend-mode: difference;
}
.featureblock {
	position:relative;
}
.featureblock:hover h2{
	color:#000;
	padding:7px;
	background-color: #6768ab;
	border-radius: 3px;
	transition: 0.3s;
}
.featureblock .centered {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
	z-index: 99;
}
.featureblock img {
filter: grayscale(100%);
}
.featureblock img:hover {
filter: grayscale(50%) contrast(.7) brightness(1.3);
}
.featureblock:hover::before, .featureblock:hover::after, .featureblock:hover .adjust {
opacity: 0;
}
.featureblock::before {
z-index: 1;
background: rgb(0, 81, 102);
mix-blend-mode: exclusion;
	}