/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  -moz-animation-name: fade;
  -moz-animation-duration: 1s;
  -ms-animation-name: fade;
  -ms-animation-duration: 1s;
  -o-animation-name: fade;
  -o-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
  /*display:block;*/
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.fade2 {
      -webkit-animation-name: fade2;
  -webkit-animation-duration: 1s;
  -moz-animation-name: fade2;
  -moz-animation-duration: 1s;
  -ms-animation-name: fade2;
  -ms-animation-duration: 1s;
  -o-animation-name: fade2;
  -o-animation-duration: 1s;
  animation-name: fade2;
  animation-duration: 1s;
  /*display:block;*/
}

@keyframes fade2 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInTop{
  0% {
      opacity: 0;
      transform: translateY(-50px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.muncul-animasi{
      -webkit-animation: fadeInTop 1s both;
  /*-webkit-animation-delay: 3s;*/
  -moz-animation: fadeInTop 3s both;
  /*-moz-animation-delay: 1s;*/
  -ms-animation: fadeInTop 1s both;
  /*-ms-animation-delay: 3s;*/
  -o-animation: fadeInTop 1s both;
  /*-o-animation-delay: 3s;*/
  animation: fadeInTop 1s both;
  /*animation-delay:3s;*/
}

.muncul-animasi1{
      -webkit-animation: fadeInTop 1s both;
  /*-webkit-animation-delay: 3s;*/
  -moz-animation: fadeInTop 1s both;
  /*-moz-animation-delay: 3s;*/
  -ms-animation: fadeInTop 1s both;
  /*-ms-animation-delay: 3s;*/
  -o-animation: fadeInTop 1s both;
  /*-o-animation-delay: 3s;*/
  animation: fadeInTop 1s both;
  /*animation-delay:3s;*/
}

.muncul-animasi2{
    -webkit-animation: fadeInTop 1s both;
  /*-webkit-animation-delay: 1s;*/
  -moz-animation: fadeInTop 1s both;
  /*-moz-animation-delay: 1s;*/
  -ms-animation: fadeInTop 1s both;
  /*-ms-animation-delay: 1s;*/
  -o-animation: fadeInTop 1s both;
  /*-o-animation-delay: 1s;*/
  animation: fadeInTop 3s both;
  /*animation-delay:1s;*/
}

.muncul-animasi3{
    -webkit-animation: fadeInTop 1s both;
  /*-webkit-animation-delay: 2s;*/
  -moz-animation: fadeInTop 1s both;
  /*-moz-animation-delay: 2s;*/
  -ms-animation: fadeInTop 1s both;
  /*-ms-animation-delay: 2s;*/
  -o-animation: fadeInTop 1s both;
  /*-o-animation-delay: 2s;*/
  animation: fadeInTop 1s both;
  /*animation-delay:2s;*/
}

.fadeInX {
    -webkit-animation: fadeInX 7s both;
  
  -moz-animation: fadeInX 7s both;
  -ms-animation: fadeInX 7s both;
  -o-animation: fadeInX 7s both;
  animation: fadeInX 7s both;
}

@keyframes fadeInX{
  0% {
      opacity: 0;
      transform: translateX(-100px);
  }
  100% {
      opacity: 1;
      transform: translatex(0);
  }
}

.fadeInX2 {
    -webkit-animation: fadeInX2 7s both;
  -moz-animation: fadeInX2 7s both;
  -ms-animation: fadeInX2 7s both;
  -o-animation: fadeInX2 7s both;
  animation: fadeInX2 7s both;
  /*animation-duration: 2s;*/
  /*display:block;*/
}

@keyframes fadeInX2{
  0% {
      opacity: 0;
      transform: translateX(100px);
  }
  100% {
      opacity: 1;
      transform: translatex(0);
  }
}

.fadeInY {
    -webkit-animation: fadeInY 1s both;
  
  -moz-animation: fadeInY 1s both;
  -ms-animation: fadeInY 1s both;
  -o-animation: fadeInY 1s both;
  animation: fadeInY 1s both;
  
}

@keyframes fadeInY{
  0% {
      opacity: 0;
      transform: translateY(5%);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}