* {
  box-sizing: border-box;
}

html {
  color: #4e585c;
  font-size: 1rem;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

body {
  font: 16px/26px Helvetica, Helvetica Neue, Arial;
  margin: 0;
  padding: 0;
  color: #536372;
}

/* --- Styling of the demo page ---*/
.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 50px 0;
  max-width: 60%;
  margin: 0 auto;
}

h1 {
  margin: .5rem 50px;
  text-align: center;
  line-height: 1.4;
}

p {
  margin: .5rem 50px 3rem 50px;
  text-align: center;
  line-height: 1.4;
}

a {
  text-decoration: none;
  color: #5FCFF6;
}

/* Page fade in transistion */
.grid div, h1, p {
  opacity: 0;
  -webkit-transform: translateY(-50px) translateZ(-1000px);
  transform: translateY(-50px) translateZ(-1000px);
  -webkit-animation: fadein .5s;
  animation: fadein .5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.grid div:first-child, .grid div:nth-child(2), .grid div:nth-child(3), .grid div:nth-child(4) {
  -webkit-animation-delay: 0.03s;
  animation-delay: 0.03s;
}

.grid div:nth-child(5), .grid div:nth-child(6) {
  -webkit-animation-delay: 0.06s;
  animation-delay: 0.06s;
}

.grid div:nth-child(7), .grid div:nth-child(8), .grid div:nth-child(9) {
  -webkit-animation-delay: 0.09s;
  animation-delay: 0.09s;
}

.grid div:nth-child(10), .grid div:nth-child(11) {
  -webkit-animation-delay: .12s;
  animation-delay: .12s;
}

.grid div:nth-child(12), .grid div:nth-child(13), .grid div:nth-child(14), .grid div:nth-child(15) {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* --- Here we set the container div to display as flex.  --- */
.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/* --- Style and set the column widths to 100% on small screens --- */
.cols-2, .cols-4 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  background-color: #5FCFF6;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}

/* --- Set the layout to be two and four columns on larger screens  --- */
@media only screen and (min-width: 800px) {
  .cols-2 {
    -ms-flex-preferred-size: 47.5%;
    flex-basis: 47.5%;
  }
  .cols-4 {
    -ms-flex-preferred-size: 21.125%;
    flex-basis: 21.125%;
  }
}