/* client requirement */
/* page swinging animation */
#page {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
   transform-origin: 50% 0;
   -webkit-animation: swing 3.5s ease-in-out forwards infinite;
   -moz-animation: swing 3.5s ease-in-out forwards infinite;
   -o-animation: swing 3.5s ease-in-out forwards infinite;
   -ms-animation: swing 3.5s ease-in-out forwards infinite;
   animation: swing 3.5s ease-in-out forwards infinite;
}

@-webkit-keyframes swing {
  0%,100%{transform: rotate(10deg);}
   50%{transform: rotate(-5deg);}
}
@-moz-keyframes swing {
  0%,100%{transform: rotate(10deg);}
   50%{transform: rotate(-5deg);}
}
@-o-keyframes swing {
  0%,100%{transform: rotate(10deg);}
   50%{transform: rotate(-5deg);}
}
@keyframes swing {
  0%,100%{transform: rotate(10deg);}
   50%{transform: rotate(-5deg);}
}


/* design problem */
/* question mark shaking */
#questionmark {
  -webkit-animation: shake 0.82s infinite;
  -moz-animation: shake 0.82s infinite;
  -o-animation: shake 0.82s infinite;
  -ms-animation: shake 0.82s infinite;
  animation: shake 0.82s infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@-webkit-keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
@-moz-keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
@-o-keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}



/* research */
/* foot moving */
#legs #Vector_55 {
  -webkit-animation: move 3s infinite;
  -moz-animation: move 3s infinite;
  -o-animation: move 3s infinite;
  -ms-animation: move 3s infinite;
  animation: move 3s infinite;
  -webkit-transform-origin: right;
  -moz-transform-origin: right;
  -o-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  -webkit-transform-box: fill-box;
  -moz-transform-box: fill-box;
  -o-transform-box: fill-box;
  -ms-transform-box: fill-box;
  transform-box: fill-box;
}

#legs #Vector_54 {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}
@-webkit-keyframes move {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(40deg);
  }

  20%, 40%, 60%, 80% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes move {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(40deg);
  }

  20%, 40%, 60%, 80% {
    transform: rotate(0deg);
  }
}
@-o-keyframes move {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(40deg);
  }

  20%, 40%, 60%, 80% {
    transform: rotate(0deg);
  }
}

@keyframes move {
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(40deg);
  }

  20%, 40%, 60%, 80% {
    transform: rotate(0deg);
  }
}



/* generatealotofideas 4 */
/* glowing bulb */
#lightbulb #Vector_23, #lightbulb #Vector_24, #lightbulb #Vector_25, #generatealotofideas1 #Vector_17 {
  -webkit-animation: glow 1s ease-in infinite;
  -moz-animation: glow 1s ease-in infinite;
  -o-animation: glow 1s ease-in infinite;
  -ms-animation: glow 1s ease-in infinite;
  animation: glow 1s ease-in infinite;
}
@-webkit-keyframes glow {
  from {
    fill: yellow;
  }

  to {
    fill: #E6E6E6;
  }
}
@-moz-keyframes glow {
  from {
    fill: yellow;
  }

  to {
    fill: #E6E6E6;
  }
}
@-o-keyframes glow {
  from {
    fill: yellow;
  }

  to {
    fill: #E6E6E6;
  }
}

@keyframes glow {
  from {
    fill: yellow;
  }

  to {
    fill: #E6E6E6;
  }
}

/* developselectedideas 5 */
#posters #Vector_45, #posters #Vector_46, #posters #Vector_48, #posters #Vector_49 {
  -webkit-animation: shaking 2s infinite;
  -moz-animation: shaking 2s infinite;
  -o-animation: shaking 2s infinite;
  -ms-animation: shaking 2s infinite;
  animation: shaking 2s infinite;
  -webkit-transform-box: fill-box;
  -moz-transform-box: fill-box;
  -o-transform-box: fill-box;
  -ms-transform-box: fill-box;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes shaking {
  0%, 40%, 80%, 100% {
    transform: rotate(10deg);
  }

  20%, 60%, 90% {
    transform: rotate(-10deg);
  }
}
@-moz-keyframes shaking {
  0%, 40%, 80%, 100% {
    transform: rotate(10deg);
  }

  20%, 60%, 90% {
    transform: rotate(-10deg);
  }
}
@-o-keyframes shaking {
  0%, 40%, 80%, 100% {
    transform: rotate(10deg);
  }

  20%, 60%, 90% {
    transform: rotate(-10deg);
  }
}

@keyframes shaking {
  0%, 40%, 80%, 100% {
    transform: rotate(10deg);
  }

  20%, 60%, 90% {
    transform: rotate(-10deg);
  }
}
#posters #Vector_47 {
  -webkit-animation: posterfall 4s infinite;
  -moz-animation: posterfall 4s infinite;
  -o-animation: posterfall 4s infinite;
  -ms-animation: posterfall 4s infinite;
  animation: posterfall 4s infinite;
  -webkit-transform-box: fill-box;
  -moz-transform-box: fill-box;
  -o-transform-box: fill-box;
  -ms-transform-box: fill-box;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes posterfall {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  100% {
    transform: translate(-260px, 400px) rotate(360deg) rotateX(85deg);
  }
}
@-moz-keyframes posterfall {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  100% {
    transform: translate(-260px, 400px) rotate(360deg) rotateX(85deg);
  }
}
@-o-keyframes posterfall {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  100% {
    transform: translate(-260px, 400px) rotate(360deg) rotateX(85deg);
  }
}
@keyframes posterfall {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  100% {
    transform: translate(-260px, 400px) rotate(360deg) rotateX(85deg);
  }
}




/* clients clientsfeedback */
#circles #Vector_13, #circles #Vector_14, #circles #Vector_15 {
  -webkit-animation: ballsize 3s infinite;
  -moz-animation: ballsize 3s infinite;
  -o-animation: ballsize 3s infinite;
  -ms-animation: ballsize 3s infinite;
  animation: ballsize 3s infinite;
  -webkit-transform-box: fill-box;
  -moz-transform-box: fill-box;
  -o-transform-box: fill-box;
  -ms-transform-box: fill-box;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes ballsize {
  from {
    transform: scale(1.5);
    fill: greenyellow;
  }

  to {
    transform: scale(1);
  }
}
@-moz-keyframes ballsize {
  from {
    transform: scale(1.5);
    fill: greenyellow;
  }

  to {
    transform: scale(1);
  }
}
@-o-keyframes ballsize {
  from {
    transform: scale(1.5);
    fill: greenyellow;
  }

  to {
    transform: scale(1);
  }
}

@keyframes ballsize {
  from {
    transform: scale(1.5);
    fill: greenyellow;
  }

  to {
    transform: scale(1);
  }
}
/* tooltip text(small popup appear disappear) */
.tooltip1 text,.tooltip2 text,.tooltip3 text {
    fill: black;
    font-size: 30px;
    font-family: sans-serif;
}
.tooltip1 rect ,.tooltip2 rect,.tooltip3 rect{
    fill: aliceblue;
    stroke: azure;
}
.tooltip1{
  -webkit-transform:translate(250px,50px);
  -moz-transform:translate(250px,50px);
  -o-transform:translate(250px,50px);
  -ms-transform:translate(250px,50px);
  transform: translate(250px,50px);
  -webkit-animation:hide1 7s infinite;
  -moz-animation:hide1 7s infinite;
  -o-animation:hide1 7s infinite;
  -ms-animation:hide1 7s infinite;
  animation:hide1 7s infinite;
}
.tooltip2{
  -webkit-transform:translate(250px,280px);
  -moz-transform:translate(250px,280px);
  -o-transform:translate(250px,280px);
  -ms-transform:translate(250px,280px);
    transform: translate(250px,280px);
    -webkit-animation:hide2 7s infinite;
    -moz-animation:hide2 7s infinite;
    -o-animation:hide2 7s infinite;
    -ms-animation:hide2 7s infinite;
    animation:hide2 7s infinite;
}
.tooltip3{
  -webkit-transform:translate(250px,520px);
  -moz-transform:translate(250px,520px);
  -o-transform:translate(250px,520px);
  -ms-transform:translate(250px,520px);
    transform: translate(250px,520px);
    -webkit-animation:hide3 7s infinite;
    -moz-animation:hide3 7s infinite;
    -o-animation:hide3 7s infinite;
    -ms-animation:hide3 7s infinite;
    animation:hide3 7s infinite;
}
@-webkit-keyframes hide1 {
  10%,30%,50%,70%,90%{
    opacity:0;
  }
  20%,40%,60%,80%,100%{
    opacity: 1;
  }
}
@-moz-keyframes hide1 {
  10%,30%,50%,70%,90%{
    opacity:0;
  }
  20%,40%,60%,80%,100%{
    opacity: 1;
  }
}
@-o-keyframes hide1 {
  10%,30%,50%,70%,90%{
    opacity:0;
  }
  20%,40%,60%,80%,100%{
    opacity: 1;
  }
}
@keyframes hide1 {
  10%,30%,50%,70%,90%{
    opacity:0;
  }
  20%,40%,60%,80%,100%{
    opacity: 1;
  }
}
@-webkit-keyframes hide2 {
  10%,30%,50%,70%,90%{
    opacity:1;
  }
  20%,40%,60%,80%,100%{
    opacity: 0;
  }
}
@-moz-keyframes hide2 {
  10%,30%,50%,70%,90%{
    opacity:1;
  }
  20%,40%,60%,80%,100%{
    opacity: 0;
  }
}
@-o-keyframes hide2 {
  10%,30%,50%,70%,90%{
    opacity:1;
  }
  20%,40%,60%,80%,100%{
    opacity: 0;
  }
}
@keyframes hide2 {
  10%,30%,50%,70%,90%{
    opacity:1;
  }
  20%,40%,60%,80%,100%{
    opacity: 0;
  }
}
@-webkit-keyframes hide3 {
  15%,35%,55%,75%,95%{
    opacity:1;
  }
  5%,25%,45%,65%,85%{
    opacity: 0;
  }
}
@-moz-keyframes hide3 {
  15%,35%,55%,75%,95%{
    opacity:1;
  }
  5%,25%,45%,65%,85%{
    opacity: 0;
  }
}
@-o-keyframes hide3 {
  15%,35%,55%,75%,95%{
    opacity:1;
  }
  5%,25%,45%,65%,85%{
    opacity: 0;
  }
}
@keyframes hide3 {
  15%,35%,55%,75%,95%{
    opacity:1;
  }
  5%,25%,45%,65%,85%{
    opacity: 0;
  }
}

/* prototype */
/* balls moving up and down */
#balls #Vector_26 {
  -webkit-animation: ball1 10s infinite;
  -moz-animation: ball1 10s infinite;
  -o-animation: ball1 10s infinite;
  -ms-animation: ball1 10s infinite;
  animation: ball1 10s infinite;
}
#balls #Vector_27 {
  -webkit-animation: ball2 10s infinite;
  -moz-animation: ball2 10s infinite;
  -o-animation: ball2 10s infinite;
  -ms-animation: ball2 10s infinite;
  animation: ball2 10s infinite;
}
@-webkit-keyframes ball2 {
  0%, 40%, 80% {
    transform: translate(325px,370px);
  }
  20%, 60%, 100% {
        transform: translate(0, 0);
  }
}
@-moz-keyframes ball2 {
  0%, 40%, 80% {
    transform: translate(325px,370px);
  }
  20%, 60%, 100% {
        transform: translate(0, 0);
  }
}
@-o-keyframes ball2 {
  0%, 40%, 80% {
    transform: translate(325px,370px);
  }
  20%, 60%, 100% {
        transform: translate(0, 0);
  }
}
@keyframes ball2 {
  0%, 40%, 80% {
    transform: translate(325px,370px);
  }
  20%, 60%, 100% {
        transform: translate(0, 0);
  }
}
@-webkit-keyframes ball1 {
  0%, 40%, 80% {
    transform: translate(425px, -165px);
  }

  20%, 60%, 100% {
    transform: translate(0, 0);
  }
}
@-moz-keyframes ball1 {
  0%, 40%, 80% {
    transform: translate(425px, -165px);
  }

  20%, 60%, 100% {
    transform: translate(0, 0);
  }
}
@-o-keyframes ball1 {
  0%, 40%, 80% {
    transform: translate(425px, -165px);
  }

  20%, 60%, 100% {
    transform: translate(0, 0);
  }
}
@keyframes ball1 {
  0%, 40%, 80% {
    transform: translate(425px, -165px);
  }

  20%, 60%, 100% {
    transform: translate(0, 0);
  }
}


/* test 8 */
/* block falling */
#block {
  -webkit-animation: blockfalling 2s infinite;
  -moz-animation: blockfalling 2s infinite;
  -o-animation: blockfalling 2s infinite;
  -ms-animation: blockfalling 2s infinite;
  animation: blockfalling 2s infinite;
}
@-webkit-keyframes blockfalling {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(94px);
  }
}
@-moz-keyframes blockfalling {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(94px);
  }
}
@-o-keyframes blockfalling {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(94px);
  }
}

@keyframes blockfalling {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(94px);
  }
}
/* hands moving */
#hands{
  -webkit-animation: handsmoving 2s infinite;
  -moz-animation: handsmoving 2s infinite;
  -o-animation: handsmoving 2s infinite;
  -ms-animation: handsmoving 2s infinite;
  animation: handsmoving 2s infinite;
  -webkit-transform-box: fill-box;
  -moz-transform-box: fill-box;
  -o-transform-box: fill-box;
  -ms-transform-box: fill-box;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes handsmoving {
  from{
    transform: translate(0,0);
  }
  to{
    transform: translate(0,20px) rotate(-23deg);
  }

}
@-moz-keyframes handsmoving {
  from{
    transform: translate(0,0);
  }
  to{
    transform: translate(0,20px) rotate(-23deg);
  }

}
@-o-keyframes handsmoving {
  from{
    transform: translate(0,0);
  }
  to{
    transform: translate(0,20px) rotate(-23deg);
  }

}
@keyframes handsmoving {
  from{
    transform: translate(0,0);
  }
  to{
    transform: translate(0,20px) rotate(-23deg);
  }

}


/* deploy */
/* box placing and wheel spinning */
#deliverybox {
  -webkit-animation: deliverybox 30s ease-in-out infinite;
  -moz-animation: deliverybox 30s ease-in-out infinite;
  -o-animation: deliverybox 30s ease-in-out infinite;
  -ms-animation: deliverybox 30s ease-in-out infinite;
  animation: deliverybox 30s ease-in-out infinite;
}
@-webkit-keyframes deliverybox {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: translate(-137px, -84px);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate(0, 0);
  }
}
@-moz-keyframes deliverybox {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: translate(-137px, -84px);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate(0, 0);
  }
}
@-o-keyframes deliverybox {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: translate(-137px, -84px);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate(0, 0);
  }
}
@keyframes deliverybox {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: translate(-137px, -84px);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate(0, 0);
  }
}

#sticks1, #sticks2, #sticks3, #sticks4 {
  -webkit-animation: spin 2s infinite;
  -moz-animation: spin 2s infinite;
  -o-animation: spin 2s infinite;
  -ms-animation: spin 2s infinite;
  animation: spin 2s infinite;
  -webkit-transform-box: fill-box;
  -moz-transform-box: fill-box;
  -o-transform-box: fill-box;
  -ms-transform-box: fill-box;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes spin {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: rotate(3600deg);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes spin {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: rotate(3600deg);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: rotate(0deg);
  }
}
@-o-keyframes spin {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: rotate(3600deg);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: rotate(0deg);
  }
}

@keyframes spin {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: rotate(3600deg);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: rotate(0deg);
  }
}