:root{
	--enlarge-duration:1s;
	--fade-delay: 0.25s;
}

canvas{
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.fadeOut, .fadeIn{
	-webkit-transition: opacity var(--fade-delay) ease-in-out;
	-moz-transition: opacity var(--fade-delay) ease-in-out;
	-ms-transition: opacity var(--fade-delay) ease-in-out;
	transition: opacity var(--fade-delay) ease-in-out;
}

.fadeOut{
	opacity: 0 !important;
	height:0 !important;
}

.fadeIn{
	 opacity: 1;
	 height:auto;
}

.slideUpFadeIn{
	 animation: slide-up-fade-in ease 1s;
	 animation-iteration-count: 1;
	 animation-fill-mode:forwards;
}

@keyframes slide-up-fade-in{
	0% {
		opacity:0;
		transform:  translate(0px,100px)  ;
	}
	100% {
		opacity:1;
		transform:  translate(0px,0px)  ;
	}
}

@-moz-keyframes slide-up-fade-in{
	0% {
		opacity:0;
		-moz-transform:  translate(0px,100px)  ;
	}
	100% {
		opacity:1;
		-moz-transform:  translate(0px,0px)  ;
	}
}

@-webkit-keyframes slide-up-fade-in {
	0% {
		opacity:0;
		-webkit-transform:  translate(0px,100px)  ;
	}
	100% {
		opacity:1;
		-webkit-transform:  translate(0px,0px)  ;
	}
}

@-o-keyframes slide-up-fade-in {
	0% {
		opacity:0;
		-o-transform:  translate(0px,100px)  ;
	}
	100% {
		opacity:1;
		-o-transform:  translate(0px,0px)  ;
	}
}

@-ms-keyframes slide-up-fade-in {
	0% {
		opacity:0;
		-ms-transform:  translate(0px,100px)  ;
	}
	100% {
		opacity:1;
		-ms-transform:  translate(0px,0px)  ;
	}
} 	

.slideDownFadeIn{
	 animation: timeline-appear ease 1s;
	 animation-iteration-count: 1;
	 animation-fill-mode:forwards;
}

@keyframes timeline-appear{
	0% {
		opacity:0;
		transform:  translate(0px,-300px)  ;
	}
	100% {
		opacity:1;
		transform:  translate(0px,0px)  ;
	}
}

@-moz-keyframes timeline-appear{
	0% {
		opacity:0;
		-moz-transform:  translate(0px,-300px)  ;
	}
	100% {
		opacity:1;
		-moz-transform:  translate(0px,0px)  ;
	}
}

@-webkit-keyframes timeline-appear {
	0% {
		opacity:0;
		-webkit-transform:  translate(0px,-300px)  ;
	}
	100% {
		opacity:1;
		-webkit-transform:  translate(0px,0px)  ;
	}
}

@-o-keyframes timeline-appear {
	0% {
		opacity:0;
		-o-transform:  translate(0px,-100px)  ;
	}
	100% {
		opacity:1;
		-o-transform:  translate(0px,0px)  ;
	}
}

@-ms-keyframes timeline-appear {
	0% {
		opacity:0;
		-ms-transform:  translate(0px,-100px)  ;
	}
	100% {
		opacity:1;
		-ms-transform:  translate(0px,0px)  ;
	}
} 	

.timeline-event{
	transition: all .5s ease-in-out;
	z-index:100;
}