

a.navbar-left {
  height: 100%;
  float: left;
  cursor: pointer;
}

a.navbar-right {
  height: 100%;
  float: right;
  font-weight: 700;
}

a:hover {
  cursor: pointer;
}

.separation {
  border-top: 2px solid rgb(86, 183, 224);
  margin-bottom: 0;
}

ul.nav-list {

  float: left;
  padding-left: 100px;
  font-weight: 700;
}

.nav-list li.nav-list-item {
  display: inline-block;
  line-height: 40px;
  margin-left: 10px;
}

a.nav-link {
  color: rgb(86, 183, 224);
  padding: 0 1rem;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
    -webkit-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }


  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto;
    transition: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.nav-list li {
  animation: FadeIn 1s cubic-bezier(0.65, 0.05, 0.36, 1);
  animation-fill-mode: both;
}

.nav-list li:nth-child(1) {
  animation-delay: .3s;
}

.nav-list li:nth-child(2) {
  animation-delay: .6s;
}

.nav-list li:nth-child(3) {
  animation-delay: .9s;
}

.nav-list li:nth-child(4) {
  animation-delay: 1.2s;
}

.nav-list li:nth-child(5) {
  animation-delay: 1.5s;
}

/* Animation */

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0)
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0)
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
  opacity: 0
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}
