body {
  overflow-x: hidden;
}

.animate {
  visibility:visible;
}

.enterbotton {
      animation-name: enterbotton;
      -webkit-animation-name: enterbotton;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
}

@keyframes enterbotton {
    0% {
      opacity: 0;
      transform: translateY(10%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
}
 
@-webkit-keyframes enterbotton {
    0% {
      opacity: 0;
      -webkit-transform: translateY(10%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
 }

 .entertop {
      animation-name: entertop;
      -webkit-animation-name: entertop;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
}

@keyframes entertop {
    0% {
      opacity: 0;
      transform: translateY(-10%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
}
 
@-webkit-keyframes entertop {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-10%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
 }

 .enterright {
      animation-name: enterright;
      -webkit-animation-name: enterright;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
}

@keyframes enterright {
    0% {
      opacity: 0;
      transform: translateX(10%);
    } 
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
}
 
@-webkit-keyframes enterright {
    0% {
      opacity: 0;
      -webkit-transform: translateX(10%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateX(0%);
    }
 }


.enterleft {
      animation-name: enterleft;
      -webkit-animation-name: enterleft;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
}

@keyframes enterleft {
    0% {
      opacity: 0;
      transform: translateX(-10%);
    } 
    100% {
      opacity: 1;
      transform: translateX(0%);
    }
}
 
@-webkit-keyframes enterleft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-10%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateX(0%);
    }
 }


