html,
body {
  min-height: 100%;
}

body {
  font-family: 'Raleway', sans-serif;
  background-color: #afafaf;
  background-image: radial-gradient(circle farthest-side at 50% 100%, #EFEFEF 0%, #afafaf);
  background-size: contain;
}

.stage {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  padding: 32px;
  min-height: calc(100vh - 80px);
}
.stage:hover > .tile {
  opacity: 0.5;
}
.stage .tile {
  position: relative;
  flex: 1 1 calc(33.333% - 96px);
  padding: 64px 32px;
  margin: 16px;
  background: #303030;
  cursor: pointer;
  box-shadow: 5px 5px 0 0 rgba(48, 48, 48, 0.25);
  transform-origin: 50% 100% 0;
  transition-property: transform box-shadow;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.76, -0.35, 0.21, 1.45);
}
.stage .tile:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: none;
}
.stage .tile > h1 {
  font-weight: 700;
  color: #EFEFEF;
  text-align: center;
  text-transform: uppercase;
}

.tile:after, .tile::after {
  content: '';
  position: absolute;
  top: .5em;
  left: .5em;
  height: calc(100% - .5em);
  width: calc(100% - .5em);
  pointer-events: none;
  opacity: 0.15;
  background-image: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.tile.profiles {
  background-color: #004a5a;
  background-image: radial-gradient(circle farthest-corner at 100% 0, #007F9A, transparent);
  
}
.tile.profiles:after, .tile.profiles::after {
  background-image: url(information.png);
}
.tile.teams {
  background-color: #087a4b;
  background-image: radial-gradient(circle farthest-corner at 100% 0, #0dc176, transparent);
}
.tile.teams:after, .tile.teams::after {
  background-image: url(team.png);
}
.tile.business {
  background-color: #876f97;
  background-image: radial-gradient(circle farthest-corner at 100% 0, #58366e, transparent);
}
.tile.business:after, .tile.business::after {
  background-image: url(calculations.png);
}
.tile.home {
  background-color: #4180aa;
  background-image: radial-gradient(circle farthest-corner at 100% 0, #484091, transparent);
}
.tile.home:after, .tile.home::after {
  background-image: url(two-houses.png);
}
.tile.inventory {
  background-color: #c97ec9;
  background-image: radial-gradient(circle farthest-corner at 100% 0, #91408d, transparent);
}
.tile.inventory:after, .tile.inventory::after {
  background-image: url(inventory.png);
}
.tile.payroll {
  background-color: #e28eae;
  background-image: radial-gradient(circle farthest-corner at 100% 0, #914058, transparent);
}
.tile.payroll:after, .tile.payroll::after {
  background-image: url(certificate.png);
}
.tile.store {
  background-color: #a99ad3;
  background-image: radial-gradient(circle farthest-corner at 100% 0, #57458a, transparent);
}
.tile.store:after, .tile.store::after {
  background-image: url(shopping-cart.png);
}
.tile.accreditation {
  background-color: #b66f0c;
  background-image: radial-gradient(circle farthest-corner at 100% 0, #f5ba67, transparent);
}