/* keyframe animations */
 /* Slide - right */
 
  @keyframes slide-right {
    from {
      transform: translateX(-50%);
    }
    to {
      transform: translateX(0%);
    }
  }

  .box {
    animation: slide-right 3000ms;
    
  }
   /* Slide - up to down */
  @keyframes slide-down {
    from {
      transform: translateY(-100%);
	  
    }
    to {
      transform: translateY(0%);
	  
    }
  }

  .slide-down {
    animation: slide-down 3000ms;
	
  }
  /* slide - up */

  @keyframes slide-up {
    from {
      transform: translateY(20%);
	  opacity: 0;
    }
    to {
      transform: translateY(0%);
	  opacity: 1;
    }
  }

  .slide-up {
    animation: slide-up 3000ms;
	
  }
  /* slide - left */
   @keyframes slide-left {
    from {
      transform: translateX(20%);
    }
    to {
      transform: translateX(-0%);
    }
  }

  .slide-left {
    animation: slide-left 3000ms;
    
  }/***/