//varijable globalne
.displayNone {
  display: none !important;
}

.page-enter-active,
.page-leave-active {
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 500ms;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}


.vertical-txt {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-orientation: sideways;
  text-align: left;
  text-orientation: sideways;
  color: var(--oki);
  text-transform: uppercase;
  font-family: $ff-monospace;
  // line-height: 20px;
  letter-spacing: 0.055em;
  font-weight: 600;

  display: flex;
  align-self: flex-start;
  justify-content: flex-end;
  align-items: flex-start;
  position: absolute;
  left: 0;

  min-height: 350px;
  width: auto;

  @media (max-width: 1000px) {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
    text-orientation: mixed;

    position: relative;
    min-height: auto;
    padding: 0 !important;
    padding-bottom: 30px !important;
  }
}

.pattern {
  background-image: url('~assets/img/home/pattern.png') !important;
  background-repeat: repeat !important;
  // background-color: rgba(255, 255, 255, 0.5) !important;
  // background-blend-mode: color !important;
}


.overlay-reveal {
  position: relative;
  overflow: hidden;
  z-index: 1;

  &__img {
    transform: translateY(5%) scale(1.1);
    transition: all 3000ms cubic-bezier(0.475, 0.425, 0, 0.995);
    width: 100%;
  }

  &__txt {
    filter: blur(20px);
    opacity: 0;
    transition: all 300ms cubic-bezier(0.475, 0.425, 0, 0.995) 300ms;
  }

  &:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 2;
    background-color: white;
    transition: all 2100ms cubic-bezier(0.475, 0.425, 0, 0.995);
  }

  &.in-viewport {
    .overlay-reveal__img {
      transform: translateY(0) scale(1);
    }

    .overlay-reveal__txt {
      filter: blur(0px);
      opacity: 1;
    }

    &:before {
      height: 0;
    }
  }
}

.overlayOpen-enter-active,
.overlayOpen-leave-active {
  transition: all 400ms ease;
}

.overlayOpen-enter,
.overlayOpen-leave-to {
  opacity: 0;
}

// .overlay {
//   position: absolute;
//   top: 0;
//   left: 0;
//   right: 0;
//   // bottom: 0;
//   background-color: gray;
//   opacity: 0;
//   pointer-events: none;
//   transition: all 500ms;

//   &--opened {
//     opacity: 1;
//     pointer-events: all;
//   }

//   &__close-btn {
//     position: absolute;
//     top: 50px;
//     right: 50px;
//   }
// }




.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}



.slidePartners-enter-active {
  transition: 1s;
}

.slidePartners-enter {
  transform: translate(-20%, 0);
  opacity: 1;
}

.slidePartners-leave-to {
  opacity: 0;
}

.slidePartners-leave-active {
  position: absolute;
  opacity: 0;
}