@keyframes slide-in-from-bottom {
  from {
    opacity: 0;
    transform: translateY(calc(0.4*var(--content-height-unit)));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element-to-animate {
  opacity: 0;
}

.element-to-animate.is-visible {
  animation: slide-in-from-bottom 1s ease-out forwards;
}


@keyframes open-responsive-menu {
  from {
    opacity: 0;
    width: 0;
  }

  to {
    opacity: 1;
    width: 100%;
  }
}

@keyframes close-responsive-menu {
  from {
    opacity: 1;
    width: 100%;
  }

  to {
    opacity: 0;
    width: 0;
  }
}

.responsive-overlay-start{
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.responsive-overlay-start.is-opened{
  animation:  open-responsive-menu 0.3s ease-out forwards;
}

.opened-closed-available{
  animation: close-responsive-menu 0.3s ease-out forwards;
}