.wrap {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1em;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
      grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: (1fr)[4];
      grid-template-rows: repeat(4, 1fr);
  width: 120px;
  height: 120px;
}
.grid > div {
  -webkit-transition: -webkit-transform .3s linear;
  transition: -webkit-transform .3s linear;
  transition: transform .3s linear;
  transition: transform .3s linear, -webkit-transform .3s linear;
}
.grid:hover > div {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.byline {
  font-family: 'Roboto Condensed', sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: calc(120px*3);
  font-size: 40px;
}
.byline span {
  position: relative;
  display: block;
  -webkit-transition: -webkit-box-ordinal-group 1s;
  transition: -webkit-box-ordinal-group 1s;
  transition: order 1s;
  transition: order 1s, -webkit-box-ordinal-group 1s, -ms-flex-order 1s;
}
.byline:hover .k {
  -webkit-box-ordinal-group: 10;
      -ms-flex-order: 9;
          order: 9;
}
.byline:hover .a {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}
.byline:hover .l {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}
.byline:hover .e {
  -webkit-box-ordinal-group: 12;
      -ms-flex-order: 11;
          order: 11;
}
.byline:hover .i {
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}
.byline:hover .d {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
.byline:hover .o {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}
.byline:hover .s {
  -webkit-box-ordinal-group: 13;
      -ms-flex-order: 12;
          order: 12;
}
.byline:hover .c {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}
.byline:hover .o2 {
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
}
.byline:hover .p {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.byline:hover .e2 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

/* 
colours and helpers
*/
.red {
  background-image: -webkit-linear-gradient(45deg, #ab2e33 50%, transparent 50%);
  background-image: linear-gradient(45deg, #ab2e33 50%, transparent 50%);
}

.blue {
  background-image: -webkit-linear-gradient(45deg, #618bd7 50%, transparent 50%);
  background-image: linear-gradient(45deg, #618bd7 50%, transparent 50%);
}

.yellow {
  background-image: -webkit-linear-gradient(45deg, #d7ae43 50%, transparent 50%);
  background-image: linear-gradient(45deg, #d7ae43 50%, transparent 50%);
}

.navy {
  background-image: -webkit-linear-gradient(45deg, #1d47a0 50%, transparent 50%);
  background-image: linear-gradient(45deg, #1d47a0 50%, transparent 50%);
}

.black {
  background-image: -webkit-linear-gradient(45deg, #080f33 50%, transparent 50%);
  background-image: linear-gradient(45deg, #080f33 50%, transparent 50%);
}

.ne {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.nw {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.se {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

@media (min-width: 600px) {
  .grid {
    width: 180px;
    height: 180px;
  }

  .byline {
    width: calc(180px*3);
    font-size: 60px;
  }
}