* {
  font-family: 'Lato', sans-serif;
}

body {
  margin : 0;
  overflow: hidden;
}

.grid {
  background: #000;
  display: inline-block;
}

.grid-row {
  white-space: nowrap;
  font-size: 0;
}

.cell {
  position: relative;
  perspective: 500px;
  display: inline-block;
  white-space: normal;
  background: #2A333D;
}

.cell-content {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.cell-content--rotate-180 {
  animation-name: rotate-180;
}

.cell-content--rotate-360 {
  animation-name: rotate-360;
}

@keyframes rotate-180 {
  0% {
    transform: rotateX( 0deg );
  }
  100% {
    transform: rotateX( 360deg );
  }
}

@keyframes rotate-360 {
  0% {
    transform: rotateX( 360deg );
  }
  100% {
    transform: rotateX( 720deg );
  }
}

.cell-side {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.cell-side--front {
}

.cell-side--back {
}

.cell-template {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.eventicious {
  padding: 7px 15px 5px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #1b1e23;
  color: rgba(255,255,255,.5);
  font-size: 20px;
  font-family: 'LatoMedium';
  vertical-align: middle;
}

.eventicious-img {
  vertical-align: middle;
  margin-right: 5px;
}