@keyframes notification-countdown {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
 }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { top: 20px; }
  to { top: 0px; }
}

@keyframes slideDown {
  from { top: 0px; }
  to { top: 20px; }
}

@keyframes opacityOnAndOff {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes openVertical {
  from {
    max-height: 0;
    overflow: hidden;
  }
  to {
    max-height: 25vh;
    overflow: scroll;
  }
}

@keyframes openVerticalMedium {
  from {
    max-height: 0;
    overflow: hidden;
  }
  to {
    max-height: 50vh;
    overflow: inherit;
  }
}

@keyframes openVerticalLarge {
  from {
    max-height: 0;
    overflow: hidden;
  }
  to {
    max-height: 75vh;
    overflow: inherit;
  }
}

.border-hover {
  transition-delay: 0s;
  transition-duration: 0.3s;
  transition-property: border-color;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.open-vertical {
  overflow: visible;
  animation: openVertical $hi-slow ease;
  animation-fill-mode: both;
}

.open-vertical--medium {
  overflow: visible;
  animation: openVerticalMedium $hi-slow ease;
  animation-fill-mode: both;
}

.open-vertical--large {
  overflow: visible;
  animation: openVerticalLarge $hi-slow ease;
  animation-fill-mode: both;
}

.on-off {
  animation: opacityOnAndOff 4s ease 0s 1 normal;
  opacity: 0;
}

.fade-in {
  opacity: 0;
  animation: fadeIn ease 1;
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

.slide-up {
  position: relative;
  animation: slideUp ease 1;
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

.slide-down {
  position: relative;
  animation: slideDown ease 1;
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

.fade-out {
  opacity: 0;
  animation: fadeOut ease 1;
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}