.scrollbox
{
	width:100%;
	height:100%;
	min-height:100px;
	position:relative;
	z-index:1;
	aspect-ratio: 4/3;
}

.scrollbox.clipped
{
	overflow:hidden;
}

.scrollbox>*
{
	position:absolute;
	width:100%;
	height:100%;	
	
	z-index:2;
	opacity:0;
}

.scrollbox>.default, .scrollbox>.slide_up_in
{
	transform: translate(0, 100%);
}
.scrollbox>.slide_left_in
{
	transform: translate(-100%, 0);
}
.scrollbox>.slide_down_in
{
	transform: translate(0, -100%);
}
.scrollbox>.slide_right_in
{
	transform: translate(100%,0);
}


.scrollbox>.slidein.default		{	animation: slide_up_in 2s ease-in-out 1;	}
.scrollbox>.slideout.default, .scrollbox>.slideout.drop_out	{	animation: drop_out 1s ease-in 1;	}
.scrollbox>.slidein.slide_left_in			{	animation: slide_left_in 2s ease-in 1;	}
.scrollbox>.slideout.slide_left_out		{	animation: slide_left_out 1s ease-in 1;	}
.scrollbox>.slidein.slide_up_in				{	animation: slide_up_in 2s ease-in 1;	}
.scrollbox>.slideout.slide_up_out			{	animation: slide_up_out 1s ease-in 1;	}
.scrollbox>.slidein.slide_down_in			{	animation: slide_down_in 2s ease-in 1;	}
.scrollbox>.slideout.slide_down_out		{	animation: slide_down_out 1s ease-in 1;	}
.scrollbox>.slidein.slide_right_in		{	animation: slide_right_in 2s ease-in 1;	}
.scrollbox>.slideout.slide_right_out		{	animation: slide_right_out 1s ease-in 1;	}
.scrollbox>.slidein.fade_in						{	animation: fade_in 2s ease-in 1;	}
.scrollbox>.slideout.fade_out					{	animation: fade_out 1s ease-out 1;	}




.scrollbox.slow>.slidein.default	{	animation: slide_up_in 4s ease-in-out 1;	}
.scrollbox.slow>.slideout.default, .scrollbox.slow>.slideout.drop_out	{	animation: drop_out 2s ease-in 1;	}

@keyframes fade_in {
    0% { z-index:1; opacity:0; }
   40% { z-index:2; opacity:0.5; }
	 60% { z-index:2; opacity:1; }	
	100% { z-index:2; opacity:1; }	
}

@keyframes fade_out {
    0% { z-index:2; opacity:1; }
   20% { z-index:2; opacity:1; }		
	 60% { z-index:1; opacity:0.5; }
	100% { z-index:1; opacity:0; }	
}	

@keyframes slide_up_in {
    0% { transform: translate(0, 100%); z-index:2; opacity:0; }
	 25% { opacity:0; }
   50% { transform: translate(0, 0); z-index:2; opacity:1; }
	100% { transform: translate(0, 0%); z-index:1; opacity:1; }	
}

@keyframes slide_up_out {
    0% { transform: translate(0, 0%); z-index:2; opacity:1; }
	 25% { transform: translate(0, 0); z-index:1; opacity:1; }
	 75% { opacity:0; }
	100% { transform: translate(0, -100%); z-index:1; opacity:0; }	
}	

@keyframes slide_down_in {
    0% { transform: translate(0, -100%); z-index:2; opacity:0; }
	 25% { opacity:0; }
   50% { transform: translate(0, 0); z-index:2; opacity:1; }
	100% { transform: translate(0, 0%); z-index:1; opacity:1; }	
}

@keyframes slide_down_out {
    0% { transform: translate(0, 0%); z-index:2; opacity:1; }
	 25% { transform: translate(0, 0); z-index:1; opacity:1; }
	 75% { opacity:0; }
	100% { transform: translate(0, 100%); z-index:1; opacity:0; }	
}	

@keyframes slide_left_in {
    0% { transform: translate(-100%,0 ); z-index:2; opacity:0; }
	 25% { opacity:0; }
   50% { transform: translate(0, 0); z-index:2; opacity:1; }
	100% { transform: translate(0, 0%); z-index:1; opacity:1; }	
}

@keyframes slide_left_out {
    0% { transform: translate(0, 0%); z-index:2; opacity:1; }
	 25% { transform: translate(0, 0); z-index:1; opacity:1; }
	 75% { opacity:0; }
	100% { transform: translate(100%, 0); z-index:1; opacity:0; }	
}	

@keyframes slide_right_in {
    0% { transform: translate(100%, 0); z-index:2; opacity:0; }
	 25% { opacity:0; }
   50% { transform: translate(0, 0); z-index:2; opacity:1; }
	100% { transform: translate(0, 0%); z-index:1; opacity:1; }	
}

@keyframes slide_right_out {
    0% { transform: translate(0, 0%); z-index:2; opacity:1; }
	 25% { transform: translate(0, 0); z-index:1; opacity:1; }
	 75% { opacity:0; }
	100% { transform: translate(-100%, 0); z-index:1; opacity:0; }	
}	

@keyframes drop_out {
    0% { transform: translate(0, 0); z-index:1; opacity:1; }
  100% { transform: perspective(500px) rotateX(15deg) translateZ(-50px) translate3d(0,-100px,0); transform-origin: 50% 100%; z-index:1; opacity:0; }
}