@charset "utf-8";
/* CSS Document */
@keyframes logo_in {
  from {transform: translateY(200px);}
  to {transform: translateY(0px);;}
}

/* The element to apply the animation to */
.home section#welcome {
  animation-name: logo_in;
  animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(.02,.7,.02,1);
}
.home section#welcome{
	position: relative;
	z-index: 2;
    transform: translateY(0px);}

@keyframes content_in {
  from {opacity:0; transform: translateY(50px);}
  to {opacity:1;transform: translateY(0px);}
	
}


.button, .event {transform:scale(1);transition:transform 0.2s  cubic-bezier(.02,.7,.02,1)}
.button:active{transform:scale(0.9);}
.event:active{transform:scale(0.95);}
.ball { 
animation-name: ball;
  animation-duration: 1.5s; 
  animation-timing-function: cubic-bezier(.75,0,.1,1); 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;}

.fade_in  {
	
	animation-name: content_in;
  	animation-duration: 1.5s;
 	animation-timing-function: cubic-bezier(.02,.7,.02,1);
	animation-delay:2s;
	opacity:0;
	animation-fill-mode: forwards;
	
}

    #dice{
    transition: transform 2s cubic-bezier(.35,-0.36,.26,1);
    }