body {
  background: #f5f5f5;
  font-family: 'Open Sans', sans-serif;
}

a {
  color: inherit;
}

.h-100 {
  min-height: 100vh;
}

h1 {
  font-size: 20px;
  font-weight: bold;
}

ul {
  max-width: 378px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

ul li {
  padding-top: 8px;
  border-top: 1px solid #ddd;
}

ul li:not(:last-child) {
  margin-bottom: 8px;
}

ul li i {
  padding-right: 15px;
}

ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

ul li i {
  font-size: 20px !important;
}

@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200%);
    transform: translateY(200%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

ul li, h1 {
  -webkit-animation: slideUp;
  /* Safari 4+ */
  /* Fx 5+ */
  /* Opera 12+ */
  animation: slideUp;
  /* IE 10+, Fx 29+ */
}

.delay-0 {
  -webkit-animation-duration: 0.5s !important;
  animation-duration: 0.5s !important;
}

.delay-1 {
  -webkit-animation-duration: 1s !important;
  animation-duration: 1s !important;
}

.delay-2 {
  -webkit-animation-duration: 1.5s !important;
  animation-duration: 1.5s !important;
}

.delay-3 {
  -webkit-animation-duration: 2s !important;
  animation-duration: 2s !important;
}

.delay-4 {
  -webkit-animation-duration: 2.5s !important;
  animation-duration: 2.5s !important;
}