@-webkit-keyframes yoyo {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(50px);
  }
}

@keyframes yoyo {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(50px);
  }
}

@-webkit-keyframes yoyomin {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(20px);
  }
}

@keyframes yoyomin {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(20px);
  }
}

.parallax-layer {
    --scale: 1;
    --vel: 20;
    --opacity: 1;
    --vel-parallax: 3s;
    --mouse-vel: 100;
    --offset-y: 0px;
  
    position: absolute;
    display: block; 
    top: 0;
    left: 0;
		transition: transform var(--vel-parallax) cubic-bezier(0, 0, 0.1, 0.97);
    transform-origin: center center;
    transform: translateY(min(100px, calc((var(--scroll) - var(--offset-y)) * var(--vel) * -0.012 )));
}

.parallax-layer .parallax-mouse{
    position: absolute;
    display: block; 
    top: 0;
    left: 0;
    transition: transform calc(4s-var(--scale)*3s) cubic-bezier(0, 0, 0.73, 1.02);
    --mouse-parallax-x: calc(var(--mouse-x)*var(--mouse-vel)*0.001);
    --mouse-parallax-y: calc(var(--mouse-y)*var(--mouse-vel)*0.0005);
    transform-origin: center center;
    transform: translate(var(--mouse-parallax-x), var(--mouse-parallax-y));
}

.parallax-layer .yoyo,
.parallax-layer .yoyo-min{
  --vel: 10s;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation-duration: var(--vel);
          animation-duration: var(--vel);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.parallax-layer .yoyo {
  -webkit-animation-name: yoyo;
          animation-name: yoyo;
}
.parallax-layer .yoyo-min {
  -webkit-animation-name: yoyomin;
          animation-name: yoyomin;
}

.parallax-layer .ball{
  position: absolute;
  display: block; 
  width: 300px; 
  height: 300px;
  top: 0;
  left: 0;
  border-radius: 100%;
  box-shadow: 2px 10px 44px rgba(0,0,0,0.05), 2px 5px 15px rgba(0,0,0,0.1);
  transform-origin: center center;
  transform: scale(var(--scale)) translate(-50%, -50%);
  overflow: hidden;
  z-index: 1;
  backdrop-filter: blur(4px);
}
.parallax-layer .ball::after{
  content: '';
  position: absolute;
  display: block; 
  width: 100%; 
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(farthest-corner at 29% 31%,#eeffff 0%,#b2ddd6 20%,#457772 62%,#539898 100%);
  opacity: var(--opacity);
  z-index: 1;
}

.parallax-layer .ball[color="yellow"]::after{
  background: radial-gradient(farthest-corner at 29% 31%, #fffbea 0%, #f8f1d0 10%, #c5a000 62%, #ebd782 100%);
}


/* Disable in page-editor */
.hs-inline-edit .parallax-layer .yoyo{
  -webkit-animation-name: unset;
          animation-name: unset;
}

/* Media queries */
/* Very Big */
@media (min-width: 1500px) {
  .parallax-layer:not(.mq-big){
    display: none;
  }
}
/* Big */
@media (min-width: 1280px) and (max-width: 1500px) {
  .parallax-layer:not(.mq-medium){
    display: none;
  }
}
/* Medium */
@media (min-width: 767px) and (max-width: 1280px) {
  .parallax-layer:not(.mq-medium){
    display: none;
  }
}
/* Small */
@media (max-width: 767px) {
  .parallax-layer:not(.mq-small){
    display: none;
  }
}