.wave {
  -webkit-animation: wave 2s ease-in-out infinite alternate both;
  animation: wave 2s ease-in-out infinite alternate both; }

/* ------- */
@-webkit-keyframes wave {
  0% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg); }
  100% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg); } }

@keyframes wave {
  0% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg); }
  100% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg); } }

body { overflow-x: hidden; }

.js .anime {
  opacity: 0;
  transform: translate3D(-150px, 0px, 0px);
  transition: .3s all ease;
}

.js .anime-init {
  opacity: 1;
  transform: translate3D(0px, 0px, 0px);
  transition: .3s all ease;
}

.js .anime2 {
  opacity: 0;
  transform: translate3D(150px, 0px, 0px);
  transition: .3s all ease;
}

.js .anime-init2 {
  opacity: 1;
  transform: translate3D(0px, 0px, 0px);
  transition: .3s all ease;
}

.js .anime3 {
  opacity: 0;
  transform: translate3D(0px, 150px, 0px);
  transition: .3s all ease;
}

.js .anime-init3 {
  opacity: 1;
  transform: translate3D(0px, 0px, 0px);
  transition: .3s all ease;
}

.js .anime4 {
  opacity: 0;
  transform: translate3D(0px, -150px, 0px);
  transition: .3s all ease;
}

.js .anime-init4 {
  opacity: 1;
  transform: translate3D(0px, 0px, 0px);
  transition: .3s all ease;
}

.zoom-out {
  animation: zoom-out 1s ease-out;
}

.exit-intro {
  transform: translateY(-300%);
  transform: scale(2);
  transition: 1s all ease;
  opacity: 0;
  visibility: hidden;
}

.superZoom {
  animation: zoom-out 1s ease-out;
}

@keyframes zoom-out {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes superZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(3);
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(100px);
  }
}

svg #wheel {
  animation: scroll ease 1.5s infinite;
}


/* mobile : : : : : : : : : : : :  */

@media ( max-width: 600px ) {

  .js .anime {
    opacity: 0;
    transform: translate3D(-10px, 0px, 0px);
    transition: .3s all ease;
  }

  .js .anime-init {
    opacity: 1;
    transform: translate3D(0px, 0px, 0px);
    transition: .3s all ease;
  }

  .js .anime2 {
    opacity: 0;
    transform: translate3D(5px, 0px, 0px);
    transition: .3s all ease;
  }

  .js .anime-init2 {
    opacity: 1;
    transform: translate3D(0px, 0px, 0px);
    transition: .3s all ease;
  }

  .js .anime3 {
    opacity: 0;
    transform: translate3D(0px, 5px, 0px);
    transition: .3s all ease;
  }

  .js .anime-init3 {
    opacity: 1;
    transform: translate3D(0px, 0px, 0px);
    transition: .3s all ease;
  }

  .js .anime4 {
    opacity: 0;
    transform: translate3D(0px, -5px, 0px);
    transition: .3s all ease;
  }

  .js .anime-init4 {
    opacity: 1;
    transform: translate3D(0px, 0px, 0px);
    transition: .3s all ease;
  }

}



.animated-button1 {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  overflow: hidden;
}

.animated-button1::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #ad8585;
  opacity: 0;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}

.animated-button1:hover::before {
  opacity: 0.9;
}

.animated-button1 span {
  position: absolute;
}

.animated-button1 span:nth-child(1) {
  border-radius: 8px;
  top: 0px;
  left: 0px;
  width: 100%;
  margin: 0 auto;
  height: 2px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff40);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.animated-button1 span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
 background: linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff50);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.animated-button1 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff40);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.animated-button1 span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff50);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

.animated-button1:after {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;animation: shiny-btn1 3s ease-in-out infinite; }

@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.slider-thumb { position: absolute; width: 100%; height: 100%; left: 0px;; z-index: 1; pointer-events: none; }
.slider-thumb::before {
  position: absolute;
  content: "";
  left: 30%;
  top: 20%;
  width: 450px;
  height: 450px;
  background: #ffffff10;
  border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
  will-change: border-radius, transform, opacity;
  animation: sliderShape 5s linear infinite;
  display: block;
  z-index: -1;
  -webkit-animation: sliderShape 5s linear infinite;
}
@keyframes sliderShape{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

@media ( max-width: 768px ) {
.slider-thumb::before { left: 0px; top: 0px; }
}