body {
	background: #E6F5FA;
}

h2 {
  font-family: 'Open Sans', san-serif;
  font-size: 3.5rem;
  text-align: center;
  color: #0099CC;
  margin-top: 4rem;
}

.list-wrap {
	padding: 0;
  margin-left: 25%;
  margin-right: 25%;
	list-style: none;
	text-align: center;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.list-wrap a {
	display: inline-block;
	width: 20%;
	min-width: 10rem;
	max-width: 10rem;
	padding: 4rem 1rem 2rem;
	position: relative;
	vertical-align: top;
	margin: 10px;
  font-family: 'Open Sans', san-serif;
	min-height: 3vh;
	background: #5F6A7D;
	text-align: left;
}

.list-wrap a li {
  color: #ffffff;
	font-size: 1.7rem;
	margin: 0;
	position: absolute;
	opacity: 0.7;
	top: 1.5rem;
  text-decoration:none;
  transition: all 0.2s ease-in-out;
}

.list-wrap a:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	z-index: -1;
	background: #fff;
	transform: skew(2deg, 2deg);
}
.list-wrap a:after {
	content: '';
	position: absolute;
	width: 40%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(255, 255, 255, 0.02);
}

.list-wrap a:before {
	background: #CEDFE4;
  background: -webkit-linear-gradient(to right, #0099CC, #CEDFE4);
  background: linear-gradient(to right, #0099CC, #CEDFE4);
}

.list-wrap a:hover::before {
	background: #02CA81;
  background: -webkit-linear-gradient(to right, #018D5A, #02CA81);
  background: linear-gradient(to right, #018D5A, #02CA81);
  transform: skew(5deg, 5deg);
}

.list-wrap a:hover > li {
	opacity: 1;
	top: 2.2rem;
}