* {
	margin:0;
	padding:0;
}
body {
	background-color:#353b48;
}
.hexagon {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:40px;
	color:#f1f2f6;
	text-transform:capitalize;
	text-align:center;
}
.hexagon,.hexagon::before,.hexagon::after {
	width:208px;
	height:121px;
	line-height:120px;
	/* border:1px solid #487eb0;
	*/
				border-left:1px solid #487eb0;
	border-right:1px solid #487eb0;
	transition:1s linear;
}
.hexagon::before,.hexagon::after {
	position:absolute;
	content:"";
	left:0;
	top:0;
}
.hexagon::before {
	transform:rotate(60deg);
}
.hexagon::after {
	transform:rotate(-60deg);
}
.hexagon:hover,.hexagon:hover::before,.hexagon:hover::after {
	width:312px;
	height:181px;
	line-height:180px;
}