/*#page-avatar {*/
/*	display: block !important;*/
/*	z-index: 100000 !important;*/
/*}*/

/*.layer2 {*/
/*	display: block !important;*/
/*	z-index: 100000 !important;*/
/*}*/

#avatar-icon {
	position: absolute;
	top: 0;
	left: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
	transition-delay: 2s;
	transition-duration: 2s;
}

.init #avatar-icon {
	opacity: 1;
}

.on-tutorial-step-1 #avatar-icon {
	z-index: 1;
	transition-delay: unset;
	transition-duration: unset;
}

.step-badge #avatar-icon,
.step-avatar #avatar-icon,
.on-tutorial-step-5:not(.on-tutorial-step-6) #avatar-icon,
.on-tutorial-step-7:not(.on-tutorial-step-8) #avatar-icon {
	z-index: 999999;
}

.no-beta #page-avatar {
	display: none;
}

.step-avatar #page-avatar {
	display: block;
}

.step-avatar .orb {
	transition-delay: unset;
	transition-duration: unset;
	opacity: 0;
}

.select-avatar-step {
	position: relative;
	display: none;
	margin-top: 340px;
	text-align: center;
}

.select-avatar-step p:nth-child(1) {
	font-size: 48px;
	color: #fff;
}

.select-avatar-step p:nth-child(3) {
	font-size: 24px;
    color: #fff;
    margin-bottom: 24px;
}

.select-avatar-step .swiper {
	width: 900px;
	height: 400px;
	margin: 0 auto;
    margin-top: 42px;
    margin-bottom: 0;
}

.select-avatar-step .btn-confirm-avatar {
	width: 300px;
	height: 64px;
	border-radius: 70px;
	border: 1px solid rgba(255,255,255,0.2);
	font-size: 20px;
	color: #fff;
    line-height: 64px;
    margin: 0 auto;
    margin-top: 42px;
}

.swiper-slide {
}

.swiper-slide img {
	margin-top: 0px;
	width: 240px !important;
	margin-left: 30px;
	margin-right: 30px;
	transition: all 0.3s;
}

.swiper-slide-active, .slick-center, .slick-current {
	width: 300px !important;
}

.swiper-slide-active img, .slick-center img, .slick-current img {
	margin-top: 0px;
/*	width: 280px !important;*/
/*	margin-left: 10px;*/
/*	margin-right: 10px;*/
	transform: scale(1.15);
}

.slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] img {
	margin-top: 0px;
	transform: scale(1.15);
}

.swiper-slide-next img {
	margin-left: -40px;
}

.swiper-slide-prev img {
	margin-right: -40px;
}

.swiper-button-next, .swiper-button-prev {
	color: rgba(0,0,0,0) !important;
	display: block !important;
	height: 24px !important;
    margin-top: -12px !important;
}

.swiper-button-next:after, .swiper-button-prev:after {
	content: unset !important;
}

.swiper-button-next img, .swiper-button-prev img {
	margin: 0 auto;
}

.swiper-button-prev img {
	transform: rotate(180deg);
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
	left: 0;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
	right: 0;
}

/* AVATAR PAGE */
.step-avatar .avatar, .step-avatar .hello, .step-avatar .score-div {
	opacity: 0;
	transition-delay: unset;
	transition-duration: unset;
}

.step-avatar #avatar-board {
	pointer-events: visiblePainted;
	opacity: 1;
}

.layer.step-avatar .world-canvas canvas {
	transform: translate(-860px, 200px) scale(0.65);
}

#page-avatar-board, #tutorial-avatar-board {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px;
	height: 1080px;
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.5s;
}

#page-avatar-board {
	opacity: 1;
	z-index: 9998;
}

#tutorial-avatar-board {
	opacity: 1;
}

#page-avatar-board .world-progress p:nth-child(3), #tutorial-avatar-board .world-progress p:nth-child(3) {
	top: 140px;
    left: 550px;
	color: white;
}

#page-avatar-board .float-left, #tutorial-avatar-board .float-left {
	float: left;
    width: 810px;
}

#page-avatar-board .float-right, #tutorial-avatar-board .float-right {
	float: right;
    width: 500px;
    text-align: right;
}

#page-avatar-board .badge-progress progress[value], #tutorial-avatar-board .badge-progress progress[value] {
  	background: rgba(237, 131, 123, 0.4);
}

#page-avatar-board .badge-progress progress[value]::-webkit-progress-bar, #tutorial-avatar-board .badge-progress progress[value]::-webkit-progress-bar {
  	background: rgba(237, 131, 123, 0.4);
}

#page-avatar-board .badge-progress progress[value]::-webkit-progress-value, #tutorial-avatar-board .badge-progress progress[value]::-webkit-progress-value {
  	background: rgba(237, 131, 123, 1);
}

#page-avatar-board .badge-progress progress[value]::-moz-progress-bar, #tutorial-avatar-board .badge-progress progress[value]::-moz-progress-bar {
  	background: rgba(237, 131, 123, 0.4);
}

#page-avatar-board .badge-progress-header .float-left p, #tutorial-avatar-board .badge-progress-header .float-left p {
	font-family: BarlowLight, sans-serif;
    font-size: 38px;
    line-height: 46px;
    color: #fff;
	opacity: 0.4;
	width: 180px;
	float: left;
	margin-right: 30px;
}

#page-avatar-board .badge-progress-header .float-left p:last-child, #tutorial-avatar-board .badge-progress-header .float-left p:last-child {
	margin-right: 0;
}

#page-avatar-board .badge-progress-header .float-left p.active, #tutorial-avatar-board .badge-progress-header .float-left p.active {
	opacity: 1;
}

.current-avatar {
	float: unset;
	width: 400px !important;
    position: absolute;
    margin-left: 0;
    margin-right: 0;
    margin: 0 auto !important;
    left: 0;
    right: 0;
    bottom: 200px;
}

.avatar-underline {
    width: 422px;
    height: 4px;
    position: absolute;
    bottom: 264px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgba(135, 75, 70, 0) 0%, rgba(237, 131, 123, 1) 20%, rgba(237, 131, 123, 1) 80%, rgba(135, 75, 70, 0) 100%);
}

.avatar-confirm-group {
	position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 160px;
    height: 64px;
    z-index: 20;
}

.avatar-confirm-group > div {
	float: left;
}

.avatar-confirm-arrow-button img {
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
}

.avatar-confirm-arrow-button:nth-child(1) {
	margin-left: 0;
	margin-right: 0;
}

.avatar-confirm-arrow-button:nth-child(3) {
	margin-right: 0;
	margin-left: 0;
}

.avatar-confirm-button {
    width: 238px;
    height: 64px;
    border: solid #ED837B 1px;
    border-radius: 70px;
    color: #ED837B;
    font-size: 19px;
    margin: 0 26px;
    text-align: center;
    line-height: 64px;
}

.avatar-confirm-button.flash {
	border: solid #FFF 1px;
	color: #FFF;
}

.avatar-category-headers {
	border-bottom: solid 1px rgba(255, 255, 255, 0.3);
    height: 54px;
}

.avatar-category-selection-underline {
	width: 180px;
    height: 4px;
    background-color: rgba(237, 131, 123, 1);
    margin-top: -3px;
    transform: translate(420px, 0px);
}

.avatar-category-selected-1 .avatar-category-selection-underline {
    transform: translate(0px, 0px);
}

.avatar-category-selected-2 .avatar-category-selection-underline {
    transform: translate(210px, 0px);
}

.avatar-category-selected-3 .avatar-category-selection-underline {
    transform: translate(420px, 0px);
}

.avatar-category-selected-4 .avatar-category-selection-underline {
    transform: translate(630px, 0px);
}

.avatar-progress-body {
	position: relative;
	height: 660px;
    overflow-y: auto;
    width: 100%;
}

.avatar-asset-icon {
	position: relative;
    float: left;
    border: 4px solid rgba(0, 0, 0, 0);
    width: 172px;
    height: 172px;
    margin: 14.5px;
    filter: grayscale(1);
    opacity: 0.2;
    transition: 0.5s;
    overflow: hidden;
}

.avatar-asset-icon > img {
	width: 100%;
}

.avatar-asset-icon.selected {
    border: 4px solid rgba(237, 131, 123, 1);
    width: 172px;
    height: 172px;
    border-radius: 28px;
}

.avatar-asset-icon.active {
	filter: unset;
	opacity: 1;
}

.avatar-asset-icon:nth-child(6n + 1) {
	margin-left: 0;
}

.avatar-asset-icon:nth-child(6n) {
	margin-right: 0;
}

.avatar-asset-selected-icon {
	position: absolute;
    /*
    top: 8px;
    left: 140px;
    */
    top: -100px;
    left: -100px;
}

.avatar-asset-selected-icon img {
	width: 48px;
	height: 48px;
}

.current-avatar-body-only, .current-avatar-head1, .current-avatar-head2, .current-avatar-accessory, .current-avatar-cloth, .current-avatar-head, .current-avatar-cloth-back {
	display: none;
    float: unset !important;
    width: 400px !important;
    position: absolute;
    margin: 0 auto !important;
    left: 0;
    right: 0;
    bottom: 200px;
    z-index: 2;
}

.beta .current-avatar-body-only, 
.beta .current-avatar-head1, 
.beta .current-avatar-head2, 
.beta .current-avatar-accessory, 
.beta .current-avatar-cloth, 
.beta .current-avatar-head, 
.beta .current-avatar-cloth-back,
.no-beta .current-avatar-body-only, 
.no-beta .current-avatar-head1, 
.no-beta .current-avatar-head2, 
.no-beta .current-avatar-accessory, 
.no-beta .current-avatar-cloth, 
.no-beta .current-avatar-head, 
.no-beta .current-avatar-cloth-back {
	bottom: 274px;
}

.beta .avatar-2 .current-avatar-body-only, 
.beta .avatar-2 .current-avatar-head1,
.beta .avatar-2 .current-avatar-head2,
.beta .avatar-2 .current-avatar-accessory,
.beta .avatar-2 .current-avatar-head,
.beta .avatar-6 .current-avatar-body-only, 
.beta .avatar-6 .current-avatar-head1,
.beta .avatar-6 .current-avatar-head2,
.beta .avatar-6 .current-avatar-accessory,
.beta .avatar-6 .current-avatar-head,
.no-beta .avatar-2 .current-avatar-body-only, 
.no-beta .avatar-2 .current-avatar-head1,
.no-beta .avatar-2 .current-avatar-head2,
.no-beta .avatar-2 .current-avatar-accessory,
.no-beta .avatar-2 .current-avatar-head,
.no-beta .avatar-6 .current-avatar-body-only, 
.no-beta .avatar-6 .current-avatar-head1,
.no-beta .avatar-6 .current-avatar-head2,
.no-beta .avatar-6 .current-avatar-accessory,
.no-beta .avatar-6 .current-avatar-head {
	bottom: 186px;
}

.beta .avatar-2 .default-avatar-2.current-avatar-cloth,
.beta .avatar-6 .default-avatar-6.current-avatar-cloth,
.no-beta .avatar-2 .default-avatar-2.current-avatar-cloth,
.no-beta .avatar-6 .default-avatar-6.current-avatar-cloth {
	/*width: 400px !important;*/
	/*bottom: 186px !important;*/
}

.beta .current-avatar-cloth,
.no-beta .current-avatar-cloth {
	bottom: 274px !important;
    width: 400px !important;
}

.current-avatar-head {
	z-index: 2;
}

.current-avatar-head1 {
	z-index: 1;
}

.current-avatar-head2 {
	z-index: 3;
}

.current-avatar-cloth-back {
	z-index: 1;
}

.current-avatar-cloth {
    bottom: 266px !important;
    width: 414px !important;
}

.current-avatar-accessory {
	z-index: 3;
}

.avatar-6 .current-avatar-head1 {
	bottom: 180px;
}

.avatar-2 .current-avatar-cloth,
.avatar-2 .current-avatar-cloth-back,
.avatar-6 .current-avatar-cloth,
.avatar-6 .current-avatar-cloth-back {
    width: 306px !important;
}

.beta .layer2 {
	display: block;
	opacity: 1;
    z-index: 99990;
}

.avatar-asset-icon > img {
	position: absolute;
}

.avatar-1 .current-avatar-head1, .avatar-1 .current-avatar-head2, .avatar-1 .current-avatar-accessory {
	bottom: 330px;
}

.avatar-5 .current-avatar-head1,
.avatar-5 .current-avatar-head2,
.avatar-5 .current-avatar-accessory.non-default-avatar-item {
	bottom: 324px;
}

.beta .avatar-progress-body,
.no-beta .avatar-progress-body {
	display: none;
}

.beta .avatar-progress-body.active,
.no-beta .avatar-progress-body.active {
	display: block;
}

.avatar-selection-block-3 .avatar-asset-icon img,
#tutorial-avatar-board .avatar-asset-icon img {
	margin-top: -84px;
}

.avatar-asset-process {
	display: none;
}

.avatar-asset-process.active {
	display: block;
}

.default-avatar-1,
.default-avatar-2,
.default-avatar-3,
.default-avatar-4,
.default-avatar-5,
.default-avatar-6,
.default-avatar-7,
.default-avatar-8 {
	display: none;
}

.default-avatar-item.without-ear {
	display: none;
}

.without-accessory {
	display: none;
}

.avatar-1 .default-avatar-1,
.avatar-2 .default-avatar-2,
.avatar-3 .default-avatar-3,
.avatar-4 .default-avatar-4,
.avatar-5 .default-avatar-5,
.avatar-6 .default-avatar-6,
.avatar-7 .default-avatar-7,
.avatar-8 .default-avatar-8 {
	display: block;
}

.default-avatar-1.current-avatar-cloth-back,
.default-avatar-6.current-avatar-cloth-back {
	z-index: 1;
}

.default-avatar-5.current-avatar-accessory {
	z-index: 2 !important;
}

.avatar-thumbnail.badge-menu {
	pointer-events: none;
    position: absolute;
    clip-path: inset(200px 92px 580px 92px);
    z-index: 2;
    transform: scale(0.4);
    left: -160px;
    backdrop-filter: none;
    top: -394px;
    background-color: unset;
}

.avatar-thumbnail.badge-menu .current-avatar-body-only,
.avatar-thumbnail.badge-menu .current-avatar-cloth,
.avatar-thumbnail.badge-menu .current-avatar-cloth-back {
	display: none !important;
}

.avatar-2 .avatar-thumbnail.badge-menu, 
.avatar-6 .avatar-thumbnail.badge-menu {
	top: -436px;
	clip-path: inset(340px 92px 440px 92px);
}

.avatar-3 .avatar-thumbnail.badge-menu, 
.avatar-4 .avatar-thumbnail.badge-menu, 
.avatar-7 .avatar-thumbnail.badge-menu, 
.avatar-8 .avatar-thumbnail.badge-menu {
	top: -400px;
	clip-path: inset(200px 92px 530px 92px);
}

.badge-menu-title p {
	margin-left: 126px;
}