/* |---------=| ↓ |=--------=| Reveal items on scroll |=--------=| ↓ |=---------| */

.reveal-loaded [class*="reveal-"] {
  animation: reveal-animation 1s cubic-bezier(.5, 0, 0, 1) both;
}

.reveal-loaded .reveal [class*="reveal-"] {
  opacity: 0!important;
  animation: none!important;
  transition: 0s!important;
}

.reveal-loaded .reveal-2 {
  animation-delay: .1s;
}

.reveal-loaded .reveal-3 {
  animation-delay: .2s;
}

.reveal-loaded .reveal-4 {
  animation-delay: .3s;
}

.reveal-loaded .reveal-5 {
  animation-delay: .4s;
}

.reveal-loaded .reveal-6 {
  animation-delay: .5s;
}

.reveal-loaded .reveal-7 {
  animation-delay: .6s;
}

.reveal-loaded .reveal-8 {
  animation-delay: .7s;
}

.reveal-loaded .reveal-9 {
  animation-delay: .8s;
}

.reveal-loaded .reveal-10 {
  animation-delay: .9s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-loaded  [class*="reveal-"] {
    animation: none!important;
  }
}

@keyframes reveal-animation {
  0% {
    opacity: 0;
    transform: translateY(30px);
    -ms-transform: translateY(30px);
    -webkit-transform: translateY(30px);
  }

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

/* |---------=| ↑ |=--------=| Reveal items on scroll |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| CrossBar Menu |=--------=| ↓ |=---------| */

nav .hamburger-lines .line1 {
  transform-origin: 100% 0%;
  transition: transform 0.4s ease-in-out;
}

nav .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

nav .hamburger-lines .line3 {
  transform-origin: 100% 100%;
  transition: transform 0.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  nav .hamburger-lines .line1,
  nav .hamburger-lines .line2,
  nav .hamburger-lines .line3 {
    transition: none;
  }
}

nav input[type="checkbox"]:checked ~ .box-menu .hamburger-lines .line1 {
  transform: rotate(-45deg);
}

nav input[type="checkbox"]:checked ~ .box-menu .hamburger-lines .line2 {
  transform: scaleY(0);
}

nav input[type="checkbox"]:checked ~ .box-menu .hamburger-lines .line3 {
  transform: rotate(45deg);
}

/* |---------=| ↑ |=--------=| CrossBar Menu |=--------=| ↑ |=---------| */




/* |---------=| ↓ |=--------=| Form |=--------=| ↓ |=---------| */

.dialog {
  opacity: 0;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition:
    transform .3s cubic-bezier(1,0,1,0) ,
    opacity 0.3s ease-in-out;
}

.window {
  opacity: 0;
  transform: scale(0);
  transition: 
    transform 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

.checkbox-don ~ .dialog .window {
  transform-origin: 100% 0%;
}

.checkbox-form ~ .dialog .window {
  transform-origin: 100% 100%;
}

.checkbox-don:checked ~ .dialog .window {
  transform-origin: 100% 0%;
}

.checkbox-form:checked ~ .dialog .window {
  transform-origin: 100% 100%;
}

.checkbox-form:checked ~ .dialog,
.checkbox-don:checked ~ .dialog {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.3s ease-in-out,
    transform 0s;
}

.checkbox-form:checked ~ .dialog .window,
.checkbox-don:checked ~ .dialog .window {
  transform: scale(1);
  opacity: 1;
  transition: 
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .dialog,
  .window,
  .checkbox-form:checked ~ .dialog,
  .checkbox-don:checked ~ .dialog, 
  .checkbox-form:checked ~ .dialog .window,
  .checkbox-don:checked ~ .dialog .window {
    transition: none;
  }
}


/* |---------=| ↑ |=--------=| Form |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| Form Button |=--------=| ↓ |=---------| */

#pop-up {
  margin-bottom: calc( -4 * var(--header-position));
  transition: margin-bottom 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  #pop-up {
    transition: none;
  }
}

#pop-up.active {
  margin-bottom: 0;
}

/* |---------=| ↑ |=--------=| Form Button |=--------=| ↑ |=---------| */



/* |---------=| ↓ |=--------=| Top Button |=--------=| ↓ |=---------| */

.bg-top-button img {
  animation: scale-animation-x .5s ease-in infinite alternate;
}

.bg-top-button:hover img {
  animation: empty;
  animation: scale-animation-y 1s ease-in-out infinite ;
}

@media (prefers-reduced-motion: reduce) {
  .bg-top-button img,
  .bg-top-button:hover img {
    animation: none;
  }
}

@keyframes scale-animation-x {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@keyframes scale-animation-y {
  0% {
    transform-origin: 0 0;
    transform: scaleY(1);
  }
  
  50% {
    transform-origin: 0 0;
    transform: scaleY(0);
  }

  50.1% {
    transform-origin: 0 100%;
    transform: scaleY(0);
  }

  100% {
    transform-origin: 0 100%;
    transform: scaleY(1);
  }
}

/* |---------=| ↑ |=--------=| Top Button |=--------=| ↑ |=---------| */