@charset "UTF-8";
/* CSS Document */

.animated {
  animation-duration: 3s;
  animation-delay: 0.1s;
  animation-fill-mode: both;
}
.arrowDown {
	animation-name: arrowDown;
	-webkit-animation-name: arrowDown;
  animation-duration: 2s;	
	-webkit-animation-duration: 2s;
  animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes arrowDown {
  0% {
    transform: translateY(-4vw);
  }
  55% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }  
}

@-webkit-keyframes arrowDown {
  0% {
    transform: translateY(-4vw);
  }
  55% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }  
}

.fly {
  animation-name: fly;
	-webkit-animation-name: fly;
  animation-delay: 1.5s;
  animation-duration: 1.5s;
}
@keyframes fly {
  0% {
    opacity: 0;
    transform: translate(-20px,-20px);
  }
  100% {
    opacity: 1;
    transform: translate(0px,0px);
  }
}
@-webkit-keyframes fly {
  0% {
    opacity: 0;
    transform: translate(-20px,-20px);
  }
  100% {
    opacity: 1;
    transform: translate(0px,0px);
  }
}

.grass-1 {
  animation-name: grass-1;
	-webkit-animation-name: grass-1;
  animation-delay: .5s;
  animation-duration: 1s;
}
@keyframes grass-1 {
  0% {
    opacity: 0;
    transform: translateX(-25px);
    transform: rotate(-3deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
    transform: rotate(0deg);
  }
}
@-webkit-keyframes grass-1 {
  0% {
    opacity: 0;
    transform: translateX(-25px);
    transform: rotate(-3deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
    transform: rotate(0deg);
  }
}




.bikein {
  animation-name: bikein;
	-webkit-animation-name: bikein;
  animation-delay: .5s;
  animation-duration: 1.25s;
}
@keyframes bikein {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@-webkit-keyframes bikein {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.peoplein {
  animation-name: bikein;
	-webkit-animation-name: bikein;
  animation-delay: .5s;
  animation-duration: 1.25s;
}
@keyframes peoplein {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@-webkit-keyframes peoplein {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}



@media ( min-width : 768px ) {

  @keyframes arrowDown {
    0% {
      transform: translateY(-30px);
    }
    55% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(0px);
    }  
  }
  
  @-webkit-keyframes arrowDown {
    0% {
      transform: translateY(-30px);
    }
    55% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(0px);
    }  
  }

}