/* ======================================================================================================================================================
Carousel
====================================================================================================================================================== */
#top div .roundcarousel {
	width: 100%;
    height: 100%;
    padding-top: var(--top);
    padding-bottom: var(--bottom);
    /* overflow: hidden; */
	touch-action: none;
	display: flex;
	align-items: center;
    justify-content: center;
	flex-direction: row;
    border: 1px solid #fff;
    perspective: var(--perspective);
}
#top div .roundcarousel img {
	display: none;
}
#top div .roundcarousel .tilt {
	transform-style: preserve-3d;
    transform: rotateX( var(--tilt) );
}
#top div .roundcarousel .ring {
	position: relative;
	transform-style: preserve-3d;
    transform:  rotateY( var(--rotation ) );
    width: calc( var(--width) * 1px );
    height: calc( var(--height) * 1px );
    /* translateZ( calc( 0 - var(--radius) ) ) */
}
#top div .roundcarousel .image {
	position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
#top div .roundcarousel .image .front {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
	backface-visibility: hidden;
    border-radius: var(--corner);
	background-color: transparent;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
	cursor: pointer;
    opacity: 0.9;
    transition: all .5s ease-out;
}
#top div .roundcarousel .image:hover .front {
	opacity: 1;
    /* transform: scale( 1.2 ); */
}
#top div .roundcarousel .image .back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
	backface-visibility: hidden;
	background-color: transparent;
    transform: rotateY(180deg);
    border-radius: var(--corner);
    filter: brightness( var(--dim) );
}