.hacker-portrait{
	display: inline-block;
	width: 250px;
	height: 500px;
	background-color: lightgreen;
	margin: 10px 10px 10px 0px;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0), 0px 2px 3px 0px rgba(0,0,0,0);
	transition: -webkit-filter 0.4s, filter 0.4s, box-shadow 0.4s;
}

.h-left {
	float: left;
}
.h-right {
	float: right;
}

.hacker-portrait:hover{
	filter: grayscale(0%) !important;
	-webkit-filter: grayscale(0%) !important;
	box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.3), 0px 2px 3px 0px rgba(0,0,0,0.5) !important;
}

.hacker-portrait .hname {
	opacity: 0;
	font-size: 24px;
	font-family: 'Righteous', cursive;
	transition: opacity 0.4s;
}

.hacker-portrait:hover .hname {
	opacity: 0;
}

.hacker-info {
	display: inline-block;
	width: 0px;
	overflow: hidden;
	margin-top: 10px;
	height: 500px;
	white-space: nowrap;
}

.h-lefti {
	float: left;
}
.h-righti {
	float: right;
}

.hacker-info .h-icon {
	box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.3), 0px 2px 3px 0px rgba(0,0,0,0.5);
	display: inline-block;
	background-size: 100px 100px;
	height: 100px;
	width: 100px;
	margin: 10px 20px 0px 20px;
	transition: box-shadow 0.2s;
}

.hacker-info .h-icon:hover {
	box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.7), 0px 2px 3px 0px rgba(0,0,0,0.5);
}

.hacker-info .h-about {
	height: 320px;
	width: 100%;
	background-color: white !important;
}

.hacker-info .h-title {
	text-align: center;
	margin-top: 20px;
	font-size: 48px;
	font-family: 'Righteous', cursive;
}

.hacker-info .h-introtext {
	width: 600px;
	height: 250px;
	margin: auto;
	text-align: justify;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	white-space: normal;
	font-weight: bold;
}

.hacker-info .h-abilityname {
	text-align: center;
	font-size: 36px;
	font-family: 'Righteous', cursive;
}