.avatar
		{
			position: relative;
			xwidth: min(90vw, 420px);
			xheight: min(90vh, 750px);
			width: 420px;
			height: 580px;

			width: min( 90vw, 420px );
			aspect-ratio: 3 / 4;
			height: auto;
			margin: 0 auto;

			background: #222;
			x-background-color: rgb( 255, 255, 255 );
			overflow: hidden;
			-x-hat-mask: url( /halloween/graphics/avatar/hat-7-mask.png );
		}

	.avatar::before
		{
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 0px;
			background-image: url( /halloween/graphics/bg-a4-5.jpg );
			background-size: cover;
			opacity: 20%;
			filter: blur( 3px );
		}

	.avatar .base
		{
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: contain;
			z-index: 1;
			pointer-events: none;
			transform: translateY( 50px );

		}

	.avatar .slider-wrap
		{
			position: absolute;
			left: 0;
			right: 0;
			height: 100%;
			z-index: 2;
			overflow: visible;
			pointer-events: none;
		}

	.avatar .slider-wrap.active
		{
			pointer-events: auto;
		}

	.avatar .slider-wrap:not(.active) .arrow
		{
			display: none;
		}
	.avatar .slider-wrap:not(.active) .keen-slider__slide:not(.active)
		{
			visibility: hidden;
		}


	.avatar .keen-slider,
	.avatar .keen-slider__slide {
		height: 100%;
		overflow: visible !important;
	}

	.avatar .keen-slider__slide img {
		object-fit: contain;
		width: 200%;
		height: 100%;
		pointer-events: none;
		transform: translateX( -25% );
		transform: translate( -25%, 50px );
	}
	.avatar .keen-slider__slide:not(.active) img
		{
			filter: none;
			opacity: 100%;
			transition: all 0.2s ease-in-out;
		}

	.avatar .keen-slider__slide:not(.active) img
		{
			filter: drop-shadow( 2px 4px 6px black );
			opacity: 50%;
		}

	.avatar .slider-hair .active > img
		{
			-webkit-mask-image: linear-gradient(#fff, #fff), var(--hat-mask, none);
			mask-image: linear-gradient(#fff, #fff), var(--hat-mask, none);
			-webkit-mask-composite: exclude;
			mask-composite: exclude;
			-webkit-mask-size: contain, contain;
			mask-size: contain, contain;
			-webkit-mask-repeat: no-repeat, no-repeat;
			mask-repeat: no-repeat, no-repeat;

			-webkit-mask-position: center 50px, center 50px;
			mask-position: center 50px, center 50px;
			mask-position: center 0px, center -1px;
/*
			-webkit-mask-position-y: -2px;
			mask-position-y: -2px;
			-webkit-mask-position-x: 5px;
			mask-position-x: 5px;
*/

		}

	.avatar .arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 32px;
		height: 32px;
		background: rgba(0,0,0,0.5);
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		cursor: pointer;
		z-index: 10;
		user-select: none;
	}
	.avatar .arrow.prev { left: 4px; }
	.avatar .arrow.next { right: 4px; }


	.avatar select
		{
			position: absolute;
			z-index: 100;
		}

	.avatar .set-selector
		{
			z-index: 20;
			position: absolute;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-around;
			padding: 5px;
		}

	.avatar .set-selector svg
		{
			cursor: pointer;
			stroke-width: 1.8px;
			stroke: #b21dd0;
			stroke: rgba( 0, 0, 0, 0.4 );
			fill: transparent;
			border: 1px solid rgba(255, 255, 255, 0.8);
			border-radius: 50%;
			padding: 6px;
			background: rgba(255, 255, 255, 0.7);
			filter: drop-shadow( 2px 4px 6px black );
			transition: all 0.2s ease-in-out;
			transform: none;
		}

	.avatar .set-selector svg.selected
		{
			stroke: #b21dd0;
			background: rgba(255, 255, 255, 0.7);
			filter: drop-shadow( 2px 4px 6px white );
			transform: scale( 1.1 );
		}

	.avatar .set-selector svg:hover
		{
			transform: scale( 1.1 );
		}