/* Keyframe for rotate png icon website */
@-moz-keyframes rotating {
  from {
    -webkit-transform: perspective(200px) rotateY(0deg);
    -moz-transform: perspective(200px) rotateY(0deg);
    transform: perspective(200px) rotateY(0deg);
  }
  to {
    -webkit-transform: perspective(250px) rotateY(360deg);
    -moz-transform: perspective(250px) rotateY(360deg);
    transform: perspective(250px) rotateY(360deg);
  }
}
@keyframes rotating {
  from {
    -webkit-transform: perspective(200px) rotateY(0deg);
    -moz-transform: perspective(200px) rotateY(0deg);
    transform: perspective(200px) rotateY(0deg);
  }
  to {
    -webkit-transform: perspective(250px) rotateY(360deg);
    -moz-transform: perspective(250px) rotateY(360deg);
    transform: perspective(250px) rotateY(360deg);
  }
}

/* Keyframes for fade in from right  */
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Keyframes for fade in from left  */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: none;
    transform: none;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(100%, 0, 0);;
    transform: translate3d(100%, 0, 0);;
  }
}

/* Keyframes for fade in from down  */
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Keyframes for fade in from down  */
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Classes need for effects */
.rotate-img {
  width: 150px;
  -webkit-animation: rotating 2s infinite;
   -moz-animation: rotating 2s infinite;
    -ms-animation: rotating 2s infinite;
     -o-animation: rotating 2s infinite;
        animation: rotating 2s infinite;
}
.from-right {
  -webkit-animation: fadeInRight 1.5s 0s;
   -moz-animation: fadeInRight 1.5s 0s;
    -ms-animation: fadeInRight 1.5s 0s;
     -o-animation: fadeInRight 1.5s 0s;
        animation: fadeInRight 1.5s 0s;
}
.from-left {
  -webkit-animation: fadeInLeft 1.5s 0s;
   -moz-animation: fadeInLeft 1.5s 0s;
    -ms-animation: fadeInLeft 1.5s 0s;
     -o-animation: fadeInLeft 1.5s 0s;
        animation: fadeInLeft 1.5s 0s;
}
.from-down {
  -webkit-animation: fadeInDown 1.5s 0s;
   -moz-animation: fadeInDown 1.5s 0s;
    -ms-animation: fadeInDown 1.5s 0s;
     -o-animation: fadeInDown 1.5s 0s;
        animation: fadeInDown 1.5s 0s;
}
.from-up {
  -webkit-animation: fadeInUp 1.5s 0s;
   -moz-animation: fadeInUp 1.5s 0s;
    -ms-animation: fadeInUp 1.5s 0s;
     -o-animation: fadeInUp 1.5s 0s;
        animation: fadeInUp 1.5s 0s;
}

@keyframes studioImageReveal {
  from {
    opacity: 0;
    transform: scale(1.12);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes studioCopyReveal {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes studioHeadlineReveal {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    letter-spacing: 0.22rem;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: normal;
  }
}

@keyframes studioScrollPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleY(0.82);
    transform-origin: top;
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}