.carouselbox
{
	width:100%;
	height:100%;
	position:relative;
	z-index:1;
}



.carouselbox.clipped
{
	overflow:hidden;
}

.carouselbox>.slide
{
	position:absolute;	
	height:50%;
	aspect-ratio: 6/4;
	right:100%;
	z-index:2;
	opacity:0;
	transform-origin: 0% 100%;
	left: 100%;
	animation-fill-mode: both;	
	transform-style: preserve-3d;	
}

.carouselbox .right_arrow
{
	right:0;
	top:0;
	bottom:0;
	height:100%;
	position:absolute;	
}
.carouselbox .left_arrow
{
	left:0;
	top:0;
	bottom:0;
	height:100%;
	position:absolute;	
}

.carouselbox.ended:not(.auto):hover>div.control::after
{
	content: '';
	border-right:26px double white;
	border-top:26px double white;
	border-radius: 2px;
	left:50%;
	left:calc(50% - 5px);
	transform: rotate(45deg);
	transform-origin: 100% 0;
	z-index:12;
	content: '';
	height:5%;
	aspect-ratio: 1/1;	
	position:absolute;
	bottom:8px;
	cursor:pointer;	
}

.carouselbox.ended:not(.auto):hover>div.control::before
{
	content: '';
	border-right:34px solid black;
	border-top:34px solid black;
	border-radius: 4px;
	left:50%;
	left:calc(50% - 7px);
	transform: rotate(45deg);
	transform-origin: 100% 0;
	z-index:12;		
	content: '';
	height:5%;
	aspect-ratio: 1/1;	
	position:absolute;
	bottom:0;
	cursor:pointer;
	opacity:0.5;
}

.carouselbox:hover .right_arrow::after
{
	content: '';
	border-right:16px solid white;
	border-top:16px solid white;
	border-radius: 8px;
	right:6px;	
	transform: rotate(45deg);
	transform-origin: 100% 0;
	z-index:10;
	content: '';
	height:25%;
	aspect-ratio: 1/1;	
	position:absolute;
	top:50%;
	cursor:pointer;	
}

.carouselbox:hover .right_arrow::before
{
	content: '';
	border-right:24px solid black;
	border-top:24px solid black;
	border-radius: 12px;
	right:0;
	transform: rotate(45deg);
	transform-origin: 100% 0;
	z-index:10;		
	content: '';
	height:25%;
	aspect-ratio: 1/1;	
	position:absolute;
	top:50%;
	cursor:pointer;
	opacity:0.5;
}

.carouselbox:hover .left_arrow::after
{
	content: '';
	border-left:16px solid white;
	border-top:16px solid white;
	border-radius: 8px;
	left:6px;
	transform: rotate(-45deg);
	transform-origin: 0 0;
	z-index:10;
	content: '';
	height:25%;
	aspect-ratio: 1/1;	
	position:absolute;
	top:50%;
	cursor:pointer;
}

.carouselbox:hover .left_arrow::before
{
	content: '';
	border-left:24px solid black;
	border-top:24px solid black;
	border-radius: 12px;
	left:0;
	transform: rotate(-45deg);
	transform-origin: 0 0;
	z-index:10;
	content: '';
	height:25%;
	aspect-ratio: 1/1;	
	position:absolute;
	top:50%;
	cursor:pointer;
	opacity:0.5;
}

.carouselbox>.slide>div
{
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:200%;
	height:200%;
	margin:0;
	padding:0;
	overflow: hidden;
}

.carouselbox>.slide { animation-duration: 2s; animation-timing-function: ease-in-out; }

.carouselbox.forward.threed>.slide.animate_in_1  { animation-name: threed_slidein1; } 
.carouselbox.forward.threed>.slide.animate_in_2  { animation-name: threed_slidein2; } 
.carouselbox.forward.threed>.slide.animate_in_3  { animation-name: threed_slidein3; } 
.carouselbox.forward.threed>.slide.animate_out_1 { animation-name: threed_slideout1; }
.carouselbox.forward.threed>.slide.animate_out_2 { animation-name: threed_slideout2; }
.carouselbox.forward.threed>.slide.animate_out_3 { animation-name: threed_slideout3; }

.carouselbox.reverse.threed>.slide.animate_in_1  { animation-name: reverse_threed_slidein1; } 
.carouselbox.reverse.threed>.slide.animate_in_2  { animation-name: reverse_threed_slidein2; } 
.carouselbox.reverse.threed>.slide.animate_in_3  { animation-name: reverse_threed_slidein3; } 
.carouselbox.reverse.threed>.slide.animate_out_1 { animation-name: reverse_threed_slideout1; }
.carouselbox.reverse.threed>.slide.animate_out_2 { animation-name: reverse_threed_slideout2; }
.carouselbox.reverse.threed>.slide.animate_out_3 { animation-name: reverse_threed_slideout3; }


.carouselbox.forward.left>.slide.animate_in_1  { animation-name: left_slidein1; } 
.carouselbox.forward.left>.slide.animate_in_2  { animation-name: left_slidein2; } 
.carouselbox.forward.left>.slide.animate_in_3  { animation-name: left_slidein3; } 
.carouselbox.forward.left>.slide.animate_out_1 { animation-name: left_slideout1; }
.carouselbox.forward.left>.slide.animate_out_2 { animation-name: left_slideout2; }
.carouselbox.forward.left>.slide.animate_out_3 { animation-name: left_slideout3; }

.carouselbox.reverse.left>.slide.animate_in_1  { animation-name: reverse_left_slidein1; } 
.carouselbox.reverse.left>.slide.animate_in_2  { animation-name: reverse_left_slidein2; } 
.carouselbox.reverse.left>.slide.animate_in_3  { animation-name: reverse_left_slidein3; } 
.carouselbox.reverse.left>.slide.animate_out_1 { animation-name: reverse_left_slideout1; }
.carouselbox.reverse.left>.slide.animate_out_2 { animation-name: reverse_left_slideout2; }
.carouselbox.reverse.left>.slide.animate_out_3 { animation-name: reverse_left_slideout3; }

.carouselbox.forward.scroll>.slide.animate_in_1  { animation-name: scroll_slidein1; } 
.carouselbox.forward.scroll>.slide.animate_in_2  { animation-name: scroll_slidein2; } 
.carouselbox.forward.scroll>.slide.animate_in_3  { animation-name: scroll_slidein3; } 
.carouselbox.forward.scroll>.slide.animate_out_1 { animation-name: scroll_slideout1; }
.carouselbox.forward.scroll>.slide.animate_out_2 { animation-name: scroll_slideout2; }
.carouselbox.forward.scroll>.slide.animate_out_3 { animation-name: scroll_slideout3; }

.carouselbox.reverse.scroll>.slide.animate_in_1  { animation-name: reverse_scroll_slidein1; } 
.carouselbox.reverse.scroll>.slide.animate_in_2  { animation-name: reverse_scroll_slidein2; } 
.carouselbox.reverse.scroll>.slide.animate_in_3  { animation-name: reverse_scroll_slidein3; } 
.carouselbox.reverse.scroll>.slide.animate_out_1 { animation-name: reverse_scroll_slideout1; }
.carouselbox.reverse.scroll>.slide.animate_out_2 { animation-name: reverse_scroll_slideout2; }
.carouselbox.reverse.scroll>.slide.animate_out_3 { animation-name: reverse_scroll_slideout3; }

.carouselbox.forward.scroll>.slide
{
	max-width:10%;
}

.carouselbox.slow>.slide { animation-duration: 4s }
.carouselbox.linear>.slide { animation-timing-function: linear;}
.carouselbox.reverse>.slide { animation-direction: reverse;}





		@keyframes threed_slidein1 {
      0% { left:99%;  z-index:1; opacity:0;  transform: perspective(30vw) translate3d(0, 0, -67vw) rotateY(90deg);}
	 25% { opacity:1; } 
	100% { left:95%;   z-index:2; opacity:1; transform: perspective(30vw) translate3d(0, 0, -26vw) rotateY(60deg);}	
}	

		@keyframes threed_slidein2 {
      0% { left:95%;  z-index:2; opacity:1;  transform: perspective(30vw) translate3d(0, 0, -26vw) rotateY(60deg); }
	100% { left:79%;   z-index:3; opacity:1; transform: perspective(30vw) translate3d(0, 0, -9vw) rotateY(30deg); }	
}	

		@keyframes threed_slidein3 {
      0% { left:79%; z-index:3; opacity:1;   transform:  perspective(30vw) translate3d(0, 0, -9vw) rotateY(30deg);}
	100% { left:50%; z-index:4; opacity:1;   transform:  perspective(30vw) translate3d(0, 0, -3vw) rotateY(0);}	
}	

		@keyframes threed_slideout1 {
	  0% { left:50%; z-index:4; opacity:1;   transform: perspective(30vw) translate3d(0, 0, -3vw) rotateY(0); }
	100% { left:21%; z-index:3; opacity:1;   transform: perspective(30vw) translate3d(0, 0, -9vw) rotateY(-30deg);}	
}	

		@keyframes threed_slideout2 {
	  0% { left:21%; z-index:3; opacity:1;   transform: perspective(30vw) translate3d(0, 0, -9vw) rotateY(-30deg);}
	100% { left:5%; z-index:2; opacity:1;    transform: perspective(30vw) translate3d(0, 0, -26vw) rotateY(-60deg);}	
}	

		@keyframes threed_slideout3 {
	  0% { left:5%; z-index:2; opacity:1;    transform: perspective(30vw) translate3d(0, 0, -26vw) rotateY(-60deg);}
	 75% { opacity:1; } 
	100% { left:1%; z-index:1; opacity:0;    transform: perspective(30vw) translate3d(0, 0, -67vw) rotateY(-90deg);}	
}

		@keyframes reverse_threed_slidein1 {
      0% { left:99%;  z-index:1; opacity:0;  transform: perspective(30vw) translate3d(0, 0, -67vw) rotateY(90deg);}
	 25% { opacity:1; } 
	100% { left:95%;   z-index:2; opacity:1; transform: perspective(30vw) translate3d(0, 0, -26vw) rotateY(60deg);}	
}	

		@keyframes reverse_threed_slidein2 {
      0% { left:95%;  z-index:2; opacity:1;  transform: perspective(30vw) translate3d(0, 0, -26vw) rotateY(60deg); }
	100% { left:79%;   z-index:3; opacity:1; transform: perspective(30vw) translate3d(0, 0, -9vw) rotateY(30deg); }	
}	

		@keyframes reverse_threed_slidein3 {
      0% { left:79%; z-index:3; opacity:1;   transform:  perspective(30vw) translate3d(0, 0, -9vw) rotateY(30deg);}
	100% { left:50%; z-index:4; opacity:1;   transform:  perspective(30vw) translate3d(0, 0, -3vw) rotateY(0);}	
}	

		@keyframes reverse_threed_slideout1 {
	  0% { left:50%; z-index:4; opacity:1;   transform: perspective(30vw) translate3d(0, 0, -3vw) rotateY(0); }
	100% { left:21%; z-index:3; opacity:1;   transform: perspective(30vw) translate3d(0, 0, -9vw) rotateY(-30deg);}	
}	

		@keyframes reverse_threed_slideout2 {
	  0% { left:21%; z-index:3; opacity:1;   transform: perspective(30vw) translate3d(0, 0, -9vw) rotateY(-30deg);}
	100% { left:5%; z-index:2; opacity:1;    transform: perspective(30vw) translate3d(0, 0, -26vw) rotateY(-60deg);}	
}	

		@keyframes reverse_threed_slideout3 {
	  0% { left:5%; z-index:2; opacity:1;    transform: perspective(30vw) translate3d(0, 0, -26vw) rotateY(-60deg);}
	 75% { opacity:1; } 
	100% { left:1%; z-index:1; opacity:0;    transform: perspective(30vw) translate3d(0, 0, -67vw) rotateY(-90deg);}		
}	



		@keyframes left_slidein1 {
      0% { left:100%;  z-index:1; opacity:0; transform: scale(0.4);  }
	  25% { opacity:1; } 
	100% { left:95%;   z-index:2; opacity:1;  transform: scale(0.6); }	
}	

		@keyframes left_slidein2 {
      0% { left:95%;  z-index:2; opacity:1; transform: scale(0.6);    }
	100% { left:77.5%;   z-index:3; opacity:1;  transform: scale(0.8);  }	
}	

		@keyframes left_slidein3 {
      0% { left:77.5%; z-index:3; opacity:1; transform: scale(0.8); }
	100% { left:50%; z-index:4; opacity:1; transform: scale(1);   }	
}	

		@keyframes left_slideout1 {
	  0% { left:50%; z-index:4; opacity:1; transform: scale(1);    }
	100% { left:22.5%; z-index:3; opacity:1; transform: scale(0.8); }	
}	

		@keyframes left_slideout2 {
	  0% { left:22.5%; z-index:3; opacity:1; transform: scale(0.8); }
	100% { left:5%; z-index:2; opacity:1; transform: scale(0.6); }	
}	

		@keyframes left_slideout3 {
	  0% { left:5%; z-index:2; opacity:1; transform: scale(0.6); }
	  75% { opacity:1; } 
	100% { left:0%; z-index:1; opacity:0; transform: scale(0.4); }	
}	



		@keyframes reverse_left_slidein1 {
      0% { left:100%;  z-index:1; opacity:0; transform: scale(0.4);  }
	  25% { opacity:1; } 
	100% { left:95%;   z-index:2; opacity:1;  transform: scale(0.6); }	
}	

		@keyframes reverse_left_slidein2 {
      0% { left:95%;  z-index:2; opacity:1; transform: scale(0.6);    }
	100% { left:77.5%;   z-index:3; opacity:1;  transform: scale(0.8);  }	
}	

		@keyframes reverse_left_slidein3 {
      0% { left:77.5%; z-index:3; opacity:1; transform: scale(0.8); }
	100% { left:50%; z-index:4; opacity:1; transform: scale(1);   }	
}	

		@keyframes reverse_left_slideout1 {
	  0% { left:50%; z-index:4; opacity:1; transform: scale(1);    }
	100% { left:22.5%; z-index:3; opacity:1; transform: scale(0.8); }	
}	

		@keyframes reverse_left_slideout2 {
	  0% { left:22.5%; z-index:3; opacity:1; transform: scale(0.8); }
	100% { left:5%; z-index:2; opacity:1; transform: scale(0.6); }	
}	

		@keyframes reverse_left_slideout3 {
	  0% { left:5%; z-index:2; opacity:1; transform: scale(0.6); }
	  75% { opacity:1; } 
	100% { left:0%; z-index:1; opacity:0; transform: scale(0.4); }	
}	



		@keyframes scroll_slidein1 {
      0% { left:110%;  z-index:1; opacity:0;  }
	  25% { opacity:1; } 
	100% { left:90%;   z-index:2; opacity:1; }	
}	

		@keyframes scroll_slidein2 {
      0% { left:90%;  z-index:2; opacity:1;   }
	100% { left:70%;   z-index:3; opacity:1;  }	
}	

		@keyframes scroll_slidein3 {
      0% { left:70%; z-index:3; opacity:1; }
	100% { left:50%; z-index:4; opacity:1; }	
}	

		@keyframes scroll_slideout1 {
	  0% { left:50%; z-index:4; opacity:1;  }
	100% { left:30%; z-index:3; opacity:1;  }	
}	

		@keyframes scroll_slideout2 {
	  0% { left:30%; z-index:3; opacity:1;  }
	100% { left:10%; z-index:2; opacity:1;  }	
}	

		@keyframes scroll_slideout3 {
	  0% { left:10%; z-index:2; opacity:1;  }
	  75% { opacity:1; } 
	100% { left:-10%; z-index:1; opacity:0;  }	
}