/*************added by popway ************/
path, svg g {
  transform-box: fill-box;
  transform-origin: center;
}

#main-diplay, #display-dots, #board, #left-big, #right-big, #round-gear, #small-leafs #left, #small-leafs #right {
  transform: scale(0);
}

#main-display.p-anim {
  animation: go_scale 0.4s ease-in-out forwards;
}

#display-dots.p-anim {
  animation: go_scale 0.6s ease-in-out forwards;
}

#round-graph.p-anim, #boxes.p-anim path:nth-child(2) {
  transform: scale(0);
  animation: go_lines 10s ease-in-out infinite 1.5s;
}

#boxes.p-anim path:nth-child(1) {
  transform: scale(0);
  animation: go_lines 10s ease-in-out infinite 1.7s;
}

#rope.p-anim {
  transform: translatey(-100px);
  animation: go_trans 0.6s ease-in-out forwards 0.9s;
}

#board.p-anim {
  transform-origin: 55% 30%;
  animation: go_scale 0.5s ease-in-out forwards 1.4s;
}

#graph-line.p-anim {
  transform: translate(-100px);
  opacity: 0;
  animation: go_trans 0.5s ease-in-out forwards 1.6s;
}

#left-big.p-anim {
  transform-origin: right bottom;
  animation: go_scale 0.5s ease-in-out forwards 1.2s;
}

#left-big.p-anim g {
  transform-origin: right bottom;
  animation: leafs infinite cubic-bezier(0.7, 0.38, 0.52, 1.1) alternate;
}

#left-big.p-anim g:first-child,
#right-big.p-anim g:first-child {
  animation-duration: 1.5s;
  animation-delay: 1.8s;
}

#left-big.p-anim g:nth-child(2),
#right-big.p-anim g:nth-child(2) {
  animation-duration: 1.5s;
  animation-delay: 1.5s;
}

#right-big.p-anim {
  transform-origin: left bottom;
  animation: go_scale 0.5s ease-in-out forwards 1.2s;
}

#right-big.p-anim g {
  transform-origin: left bottom;
  animation: leafs infinite cubic-bezier(0.7, 0.38, 0.52, 1.1) alternate;
}

#gears.p-anim path {
  opacity: 0;
  transform: scale(0);
  animation: go_scale ease-in-out forwards 1.3s, rotate_me  linear infinite;
}

#gears.p-anim path:first-child {
  animation-duration: 0.5s, 6s;
}

#gears.p-anim path:nth-child(2) {
  animation-duration: 0.6s, 8s;
}

#gears.p-anim path:nth-child(3) {
  animation-duration: 0.7s, 10s;
}

#round-gear.p-anim {
  animation: go_scale 0.5s ease-in-out 1.5s, rotate_me 12s linear infinite 1.8s;
}

#small-leafs #left.p-anim {
  transform-origin: right bottom;
  animation: go_scale 0.5s ease-in-out forwards 1.7s, leafs 2.5s infinite cubic-bezier(0.68, 0.04, 0.26, 0.9) 2.1s alternate;
}

#small-leafs #right.p-anim {
  transform-origin: left bottom;
  animation: go_scale 0.5s ease-in-out forwards 1.7s, leafs 2.4s infinite cubic-bezier(0.68, 0.04, 0.26, 0.9) 2.1s alternate;
}

#lines.p-anim path, #dashes.p-anim path {
  transform-origin: left;
  transform: scalex(0);
  animation: go_lines 8s ease-in-out infinite 1.5s;
}

#dashes.p-anim path {
  animation-delay: 0.8s;
}

#search-box.p-anim #actual-search {
  opacity: 0;
  transform: translatex(-100px);
  animation: go_trans 0.6s ease-in-out forwards 1.8s;
}

#search-box.p-anim > path:nth-child(1) {
  transform: translate(-11px, 16px);
  opacity: 0;
  animation: go_trans 0.6s ease-in-out forwards 2.1s;
}

#search-box.p-anim > path:nth-child(2) {
  transform: translate(-5px, 10px);
  opacity: 0;
  animation: go_trans 0.6s ease-in-out forwards 2s;
}

#boy.p-anim {
  transform: translatex(130px);
  opacity: 0;
  animation: go_trans 0.8s ease-in-out forwards 1s;
}

#shadow.p-anim {
  opacity: 0;
  animation: go_trans 0.3s ease-in-out forwards 2.5s;
}

#right-hand.p-anim {
  transform: rotate(-55deg);
  transform-origin: 99% 60%;
  animation: go_trans 0.8s ease-in-out forwards 1.8s;
}

#popway-txt.p-anim rect {
  opacity: 0;
  transform: translatey(3px);
  animation: go_trans 0.8s ease-in-out forwards 2.8s;
}

#actual-search .blinking-cursor {
  opacity: 0;
  animation: go_trans 0.8s ease-in-out infinite 8.8s;
}

#popway-txt.p-anim path:nth-child(1) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-1 0.8s ease-in-out forwards 0.4s;
}

@keyframes type-1 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(2) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-2 0.8s ease-in-out forwards 0.8s;
}

@keyframes type-2 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(3) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-3 0.8s ease-in-out forwards 1.2s;
}

@keyframes type-3 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(4) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-4 0.8s ease-in-out forwards 1.6s;
}

@keyframes type-4 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(5) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-5 0.8s ease-in-out forwards 2s;
}

@keyframes type-5 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(6) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-6 0.8s ease-in-out forwards 2.4s;
}

@keyframes type-6 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(7) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-7 0.8s ease-in-out forwards 2.8s;
}

@keyframes type-7 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(8) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-8 0.8s ease-in-out forwards 3.2s;
}

@keyframes type-8 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(9) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-9 0.8s ease-in-out forwards 3.6s;
}

@keyframes type-9 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(10) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-10 0.8s ease-in-out forwards 4s;
}

@keyframes type-10 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(11) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-11 0.8s ease-in-out forwards 4.4s;
}

@keyframes type-11 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(12) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-12 0.8s ease-in-out forwards 4.8s;
}

@keyframes type-12 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(13) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-13 0.8s ease-in-out forwards 5.2s;
}

@keyframes type-13 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(14) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-14 0.8s ease-in-out forwards 5.6s;
}

@keyframes type-14 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(15) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-15 0.8s ease-in-out forwards 6s;
}

@keyframes type-15 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(16) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-16 0.8s ease-in-out forwards 6.4s;
}

@keyframes type-16 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(17) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-17 0.8s ease-in-out forwards 6.8s;
}

@keyframes type-17 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(18) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-18 0.8s ease-in-out forwards 7.2s;
}

@keyframes type-18 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}
#popway-txt.p-anim path:nth-child(19) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-19 0.8s ease-in-out forwards 7.6s;
}

@keyframes type-19 {
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

#popway-txt.p-anim path:nth-child(20) {
  opacity: 0;
  transform: translatey(3px);
  animation: type-19 0.8s ease-in-out forwards 8s;
}

@keyframes go_scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes go_lines {
  0% {
    transform: scale(0);
  }
  10% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes go_trans {
  100% {
    transform: translatex(0) translatey(0) rotate(0);
    opacity: 1;
  }
}
@keyframes rotate_me {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes leafs {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}



@-webkit-keyframes jump {
  0%   {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
  40%  {-webkit-transform: translate3d(0,50%,0);transform: translate3d(0,50%,0);}
  100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
}
@keyframes jump {
  0%   {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
  40%  {-webkit-transform: translate3d(0,50%,0);transform: translate3d(0,50%,0);}
  100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
}

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

@-webkit-keyframes rotatedHalf {
  0%   {-webkit-transform: rotate(0);transform: rotate(0);}
  50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
  100%   {-webkit-transform: rotate(0);transform: rotate(0);}
}
@keyframes rotatedHalf {
  0%   {-webkit-transform: rotate(0);transform: rotate(0);}
  50% {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
  100%   {-webkit-transform: rotate(0);transform: rotate(0);}
}

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


@-webkit-keyframes scale-upOne {
  0%   {-webkit-transform: scale(1);transform: scale(1);}
  100% {-webkit-transform: scale(0.2);transform: scale(0.2);}
}
@keyframes scale-upOne {
  0%   {-webkit-transform: scale(1);transform: scale(1);}
  100% {-webkit-transform: scale(0.2);transform: scale(0.2);}
}

@-webkit-keyframes scale-right {
  0%  {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
  50% {-webkit-transform: translateX(50%);transform: translateX(50%);}
  100% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
}
@keyframes scale-right {
  0%  {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
  50% {-webkit-transform: translateX(50%);transform: translateX(50%);}
  100% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
}

@-webkit-keyframes fade-in {
  0%   {opacity: 0.7;}
  40%  {opacity: 1;}
  100% {opacity: 0.7;}
}
@keyframes fade-in {
  0%   {opacity: 0.7;}
  40%  {opacity: 1;}
  100% {opacity: 0.7;}
}


@keyframes hvr-ripple-out {
  0% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100% {
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
  }
}
@keyframes hvr-ripple-out-two {
  0% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100% {
    top: -18px;
    right: -18px;
    bottom: -18px;
    left: -18px;
    opacity: 0;
  }
}

@-webkit-keyframes scale-up-one {
  0%   {-webkit-transform: scale(1);transform: scale(1);}
  40%  {-webkit-transform: scale(0.5);transform: scale(0.5);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes scale-up-one {
  0%   {-webkit-transform: scale(1);transform: scale(1);}
  40%  {-webkit-transform: scale(0.5);transform: scale(0.5);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}
@-webkit-keyframes scale-up-two {
  0%   {-webkit-transform: scale(0.5);transform: scale(0.5);}
  40%  {-webkit-transform: scale(0.8);transform: scale(0.8);}
  100% {-webkit-transform: scale(0.5);transform: scale(0.5);}
}
@keyframes scale-up-two {
  0%   {-webkit-transform: scale(0.5);transform: scale(0.5);}
  40%  {-webkit-transform: scale(0.8);transform: scale(0.8);}
  100% {-webkit-transform: scale(0.5);transform: scale(0.5);}
}
@-webkit-keyframes scale-up-three {
  0%   {-webkit-transform: scale(0.7);transform: scale(0.7);}
  40%  {-webkit-transform: scale(0.4);transform: scale(0.4);}
  100% {-webkit-transform: scale(0.7);transform: scale(0.7);}
}
@keyframes scale-up-three {
  0%   {-webkit-transform: scale(0.7);transform: scale(0.7);}
  40%  {-webkit-transform: scale(0.4);transform: scale(0.4);}
  100% {-webkit-transform: scale(0.7);transform: scale(0.7);}
}


@keyframes animationFramesOne{
  0% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  20% {
    transform:  translate(73px,-1px)  rotate(36deg) ;
  }
  40% {
    transform:  translate(141px,72px)  rotate(72deg) ;
  }
  60% {
    transform:  translate(83px,122px)  rotate(108deg) ;
  }
  80% {
    transform:  translate(-40px,72px)  rotate(144deg) ;
  }
  100% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
}


@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  translate(73px,-1px)  rotate(36deg) ;
  }
  40% {
    -webkit-transform:  translate(141px,72px)  rotate(72deg) ;
  }
  60% {
    -webkit-transform:  translate(83px,122px)  rotate(108deg) ;
  }
  80% {
    -webkit-transform:  translate(-40px,72px)  rotate(144deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
}

@keyframes animationFramesTwo{
  0% {
    transform:  translate(0px,0px)  rotate(0deg) scale(1) ;
  }
  20% {
    transform:  translate(73px,-1px)  rotate(36deg) scale(0.9);
  }
  40% {
    transform:  translate(141px,72px)  rotate(72deg) scale(1);
  }
  60% {
    transform:  translate(83px,122px)  rotate(108deg) scale(1.2);
  }
  80% {
    transform:  translate(-40px,72px)  rotate(144deg) scale(1.1);
  }
  100% {
    transform:  translate(0px,0px)  rotate(0deg) scale(1);
  }
}


@-webkit-keyframes animationFramesTwo {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) scale(1);
  }
  20% {
    -webkit-transform:  translate(73px,-1px)  rotate(36deg) scale(0.9);
  }
  40% {
    -webkit-transform:  translate(141px,72px)  rotate(72deg) scale(1);
  }
  60% {
    -webkit-transform:  translate(83px,122px)  rotate(108deg) scale(1.2);
  }
  80% {
    -webkit-transform:  translate(-40px,72px)  rotate(144deg) scale(1.1);
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) scale(1);
  }
}


@keyframes animationFramesThree{
  0% {
    transform:  translate(165px,-179px)  ;
  }
  100% {
    transform:  translate(-346px,617px)  ;
  }
}


@-webkit-keyframes animationFramesThree {
  0% {
    -webkit-transform:  translate(165px,-179px)  ;
  }
  100% {
    -webkit-transform:  translate(-346px,617px)  ;
  }
}


@keyframes animationFramesFour{
  0% {
    transform:  translate(-300px,151px)  rotate(0deg) ;
  }
  100% {
    transform:  translate(251px,-200px)  rotate(180deg) ;
  }
}


@-webkit-keyframes animationFramesFour {
  0% {
    -webkit-transform:  translate(-300px,151px)  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  translate(251px,-200px)  rotate(180deg) ;
  }
}


@keyframes animationFramesFive{
  0% {
    transform:  translate(61px,-99px)  rotate(0deg) ;
  }
  21% {
    transform:  translate(4px,-190px)  rotate(38deg) ;
  }
  41% {
    transform:  translate(-139px,-200px)  rotate(74deg) ;
  }
  60% {
    transform:  translate(-263px,-164px)  rotate(108deg) ;
  }
  80% {
    transform:  translate(-195px,-49px)  rotate(144deg) ;
  }
  100% {
    transform:  translate(-1px,0px)  rotate(180deg) ;
  }
}


@-webkit-keyframes animationFramesFive {
  0% {
    -webkit-transform:  translate(61px,-99px)  rotate(0deg) ;
  }
  21% {
    -webkit-transform:  translate(4px,-190px)  rotate(38deg) ;
  }
  41% {
    -webkit-transform:  translate(-139px,-200px)  rotate(74deg) ;
  }
  60% {
    -webkit-transform:  translate(-263px,-164px)  rotate(108deg) ;
  }
  80% {
    -webkit-transform:  translate(-195px,-49px)  rotate(144deg) ;
  }
  100% {
    -webkit-transform:  translate(-1px,0px)  rotate(180deg) ;
  }
}


