/* 
Theme Name:		STKMUSIC THEME
Template:		hello-elementor
Version:		1.0.0
Text Domain:	stkmusic-theme
*/


P:last-child { margin-bottom:0 }
.hideit { display:none !important}
.elementor-widget-text-editor LI { margin-bottom:5px }
.elementor-widget-text-editor H3 { margin:20px 0 10px }
.elementor-widget-text-editor H3 + UL, .elementor-widget-text-editor H3 + P { margin:-10px 0 20px }

.cky-notice-btn-wrapper { flex-wrap:nowrap !important }

.arrow-right, .arrow-left { cursor:pointer } 

/* ========================================================= */
#TOPHP { 
	position:relative; top:0;
   	height:calc(100dvh - var(--header-height));
	overflow:hidden;
}
#TOPHP .show { z-index:2 }
#TOPHP .current { z-index:1 }

/* -------------- */
#BG { position:absolute; top:0; left:0; z-index:1 }
#BG .bg { 
	position:absolute;
	height:calc(100dvh - var(--header-height));
	top:100%;
}
#BG .bg.current, #BG .bg.show { top:0% }
#BG .bg.show { 
	animation: bg-riseUp 0.8s ease;
}

@keyframes bg-riseUp {
	0% { top: 100%; }
	50% { top: -5%; } /* Overshoot for bounce effect */
	100% { top: 0%; }
}


/* -------------- */
#VYNIL { 
	pointer-events: none;
	position: absolute; z-index: 5;
	left:50%; bottom:-20dvh; 
	width:40dvh; height:40dvh;
	transform: translateX(-50%);
	cursor:pointer;
}
#SCRATCH { position:absolute; top:26%; left:50%; transform: translate(-50%, -50%); z-index:6 }

#VYNIL .vynil { 
	position: absolute;	 
	opacity:0; transition:opacity 0.3s 
}
#VYNIL .vynil.current, #VYNIL .vynil.show { opacity:1 }
#VYNIL .vynil IMG {	
	transform-origin: center center;
	animation: vynil-spin 2s linear infinite;
}

@keyframes vynil-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


/* -------------- */
#TITLE { 
	position: absolute; z-index: 2;
	left:0; top:15dvh;
	opacity:0.5;
	pointer-events:none
}
#TITLE .title { 
	position:absolute; width:100%; text-align: center; padding:0 20px;
	opacity:0; transition:opacity 0.2s;transition-delay:0.1s;
}
#TITLE .title.current, #TITLE .title.show { opacity:1 }
#TITLE .title IMG { max-height:20dvh; width:auto; height:auto}

@media (max-width:767px) {
	#TITLE { top:6dvh }
}

/* -------------- */
:root {
	--header-height: 100px;
	--bottle-space1: 140px;
	--bottle-space2: 160px;
}
@media (max-width:767px) {
	:root {
		--header-height: 70px;
		--bottle-space1: 110px;
		--bottle-space2: 130px;
	}	
}

#BOTTLE { 
	position:absolute; z-index: 4; pointer-events:none;
	bottom:60px; height:calc(100dvh - var(--bottle-space2));
}
#BOTTLE .bottle {
	position:absolute; height:calc(100dvh - var(--bottle-space2)); z-index:2;
	left:50%;
	transform-origin: left bottom;
	transform: scale(1) rotate(var(--angle)) translateX(-50%);
}
#BOTTLE .bottle.step-1 { --angle: 0deg; --nextangle: -45deg }
#BOTTLE .bottle.step-2 { --angle: -45deg; --nextangle: -90deg }
#BOTTLE .bottle.step-3 { --angle: -90deg; --nextangle: 90deg; z-index:1}
#BOTTLE .bottle.step-4 { --angle: 90deg; --nextangle: 45deg }
#BOTTLE .bottle.step-5 { --angle: 45deg; --nextangle: 0deg }

.reverse #BOTTLE .bottle.step-1 { --angle: 0deg; --nextangle: 45deg }
.reverse #BOTTLE .bottle.step-2 { --angle: -45deg; --nextangle: 0deg }
.reverse #BOTTLE .bottle.step-3 { --angle: -90deg; --nextangle: -45deg}
.reverse #BOTTLE .bottle.step-4 { --angle: 90deg; --nextangle: -90deg; z-index:1 }
.reverse #BOTTLE .bottle.step-5 { --angle: 45deg; --nextangle: 90deg }

@media (max-width:767px) {
	#BOTTLE .bottle.step-1 { --angle: 0deg; --nextangle: -30deg }
	#BOTTLE .bottle.step-2 { --angle: -30deg; --nextangle: -50deg }
	#BOTTLE .bottle.step-3 { --angle: -50deg; --nextangle: 50deg; z-index:1}
	#BOTTLE .bottle.step-4 { --angle: 50deg; --nextangle: 30deg }
	#BOTTLE .bottle.step-5 { --angle: 30deg; --nextangle: 0deg }
	
	.reverse #BOTTLE .bottle.step-1 { --angle: 0deg; --nextangle: 30deg }
	.reverse #BOTTLE .bottle.step-2 { --angle: -30deg; --nextangle: 0deg }
	.reverse #BOTTLE .bottle.step-3 { --angle: -50deg; --nextangle: -30deg}
	.reverse #BOTTLE .bottle.step-4 { --angle: 50deg; --nextangle: -50deg; z-index:1 }
	.reverse #BOTTLE .bottle.step-5 { --angle: 30deg; --nextangle: 50deg }
}

#BOTTLE .bottle.bounce { animation: bottle-bounce-rotate 0.8s ease }
@keyframes bottle-bounce-rotate {
	0% { transform: scale(0.95) rotate(var(--angle)); }
	50% { transform: scale(1.05) rotate(calc(var(--nextangle) - 2deg)); }
	100% { transform: scale(1) rotate(var(--nextangle)); }
}

#BOTTLE .bottle IMG { 
	max-height:calc(80dvh - var(--bottle-space1)); 
	height:80dvh; width:auto; max-width:unset !important;
	filter:blur(var(--blur));
	transform:scale(var(--scale)) translateY(var(--y));
	/* transition:filter 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); */
}
#BOTTLE .bottle.step-1 IMG { 
	z-imdex:3;
	--blur:0px; --scale: 1; --y: 5%;
	--nextblur:4px; --nextscale: 0.6; --nexty: 32%;
}
#BOTTLE .bottle.step-2 IMG { 
	--blur:4px; --scale: 0.6; --y: 32%;
	--nextblur:4px; --nextscale: 0.6; --nexty: 22%;
}
#BOTTLE .bottle.step-3 IMG { 
	--blur:4px; --scale: 0.6; --y: 22%;
	--nextblur:4px; --nextscale: 0.6; --nexty: 22%;
}
#BOTTLE .bottle.step-4 IMG { 
	--blur:4px; --scale: 0.6; --y: 22%;
	--nextblur:4px; --nextscale: 0.6; --nexty: 32%;
}
#BOTTLE .bottle.step-5 IMG { 
	--blur:4px; --scale: 0.6; --y: 32%;
	--nextblur:0px; --nextscale: 1; --nexty: 5%;
}

.reverse #BOTTLE .bottle.step-1 IMG { 
	z-imdex:3;
	--blur:0px; --scale: 1; --y: 5%;
	--nextblur:4px; --nextscale: 0.6; --nexty: 32%;
}
.reverse #BOTTLE .bottle.step-2 IMG { 
	--blur:4px; --scale: 0.6; --y: 32%;
	--nextblur:0px; --nextscale: 1; --nexty: 5%;
}
.reverse #BOTTLE .bottle.step-3 IMG { 
	--blur:4px; --scale: 0.6; --y: 22%;
	--nextblur:4px; --nextscale: 0.6; --nexty: 32%;
}
.reverse #BOTTLE .bottle.step-4 IMG { 
	--blur:4px; --scale: 0.6; --y: 22%;
	--nextblur:4px; --nextscale: 0.6; --nexty: 22%;
}
.reverse #BOTTLE .bottle.step-5 IMG { 
	--blur:4px; --scale: 0.6; --y: 32%;
	--nextblur:4px; --nextscale: 0.6; --nexty: 22%;
}

@media (max-width:767px) {
	#BOTTLE { bottom:0 }
	#BOTTLE, #BOTTLE .bottle { height:calc(100dvh - var(--header-height)) }
	
	#BOTTLE .bottle.step-1 IMG { 
		--scale: 1; --y: 5%;
		--nextscale: 0.5; --nexty: 50%;
	}
	#BOTTLE .bottle.step-2 IMG { 
		--scale: 0.5; --y: 50%;
		--nextscale: 0.3; --nexty: 120%;
	}
	#BOTTLE .bottle.step-3 IMG { 
		--scale: 0.3; --y: 120%;
		--nextscale: 0.5; --nexty: 120%;
	}
	#BOTTLE .bottle.step-4 IMG { 
		--scale: 0.3; --y: 120%;
		--nextscale: 0.5; --nexty: 50%;
	}
	#BOTTLE .bottle.step-5 IMG { 
		--scale: 0.5; --y: 50%;
		--nextscale: 1; --nexty: 5%;
	}
	
	.reverse #BOTTLE .bottle.step-1 IMG { 
		--scale: 1; --y: 5%;
		--nextscale: 0.5; --nexty: 50%;
	}
	.reverse #BOTTLE .bottle.step-2 IMG { 
		--scale: 0.5; --y: 50%;
		--nextscale: 1; --nexty: 5%;
	}
	.reverse #BOTTLE .bottle.step-3 IMG { 
		--scale: 0.3; --y: 120%;
		--nextscale: 0.5; --nexty: 50%;
	}
	.reverse #BOTTLE .bottle.step-4 IMG { 
		--scale: 0.3; --y: 120%;
		--nextscale: 0.3; --nexty: 120%;
	}
	.reverse #BOTTLE .bottle.step-5 IMG { 
		--scale: 0.5; --y: 50%;
		--nextscale: 0.3; --nexty: 120%;
	}	
	
}

#BOTTLE .bottle.bounce IMG { animation: bottle-bounce-img 0.8s ease }
@keyframes bottle-bounce-img {
	0% {
		filter:blur(var(--blur));
		transform: translateX(-50%) scale(var(--scale)) translateY(var(--y));
	}
	50% {
		filter:blur(var(--nextblur));
		transform: translateX(-50%) scale(calc(var(--nextscale) * 1.01)) translateY(calc(var(--nexty) + 5%));
	}
	100% {
		filter:blur(var(--nextblur));
		transform: translateX(-50%) scale(var(--nextscale)) translateY(var(--nexty));
	}
}


#TOPHP:not(.reverse) #BOTTLE .bottle.bounce.step-3 IMG { animation: bottle-bounce-img-step-3 0.8s ease }
@keyframes bottle-bounce-img-step-3 {
	0% {
		transform: translateX(-50%) scale(var(--scale)) translateY(var(--y));
	}
	25% {
		transform: translateX(-50%) scale(var(--scale)) translateY(100%);
	}
	75% {
		transform: translateX(-50%) scale(var(--scale)) translateY(var(--y));
	}
	100% {
		transform: translateX(-50%) scale(var(--scale)) translateY(var(--y));
	}
}

.reverse #BOTTLE .bottle.bounce.step-4 IMG { animation: bottle-bounce-img-step-4 0.8s ease }
@keyframes bottle-bounce-img-step-4 {
	0% {
		transform: translateX(-50%) scale(var(--scale)) translateY(var(--y));
	}
	25% {
		transform: translateX(-50%) scale(var(--scale)) translateY(100%);
	}
	75% {
		transform: translateX(-50%) scale(var(--scale)) translateY(var(--y));
	}
	100% {
		transform: translateX(-50%) scale(var(--scale)) translateY(var(--y));
	}
}


/* -------------- */
#FRUITS { 
	position:absolute; z-index: 3; pointer-events:none;
	top:0; height:calc(80dvh - var(--header-height));
	--fruit-scale:1;
}
@media (max-height:700px) {
	#FRUITS {
		--fruit-scale: 0.8
	}
}

#FRUITS .elementor-widget-shortcode, #FRUITS .elementor-shortcode { position:relative; width:200vw; height:100% }
#FRUITS .fruit { 
	position: absolute; line-height:0; 
	transform:translate(-50%, -50%) scale(var(--fruit-scale)); transform-origin:center center;
}
#FRUITS .fruit IMG { 
	height:auto; position:relative; 
	left:0; opacity:1;  
	transition:left 0.3s, opacity 0.3s, transform 0.3s
}

@media (max-width:767px) {
	#FRUITS .fruit { --fruit-scale: 0.8	}
	#FRUITS .elementor-widget-shortcode, #FRUITS .elementor-shortcode { height:60dvh }	
}

#FRUITS .fruit.bounce-out IMG { opacity:0 }
#FRUITS .fruit.bounce-out.anim-left IMG { left:-20vw }
#FRUITS .fruit.bounce-out.anim-center IMG { transform:scale(0) }
#FRUITS .fruit.bounce-out.anim-right IMG { left:120vw }

#FRUITS .fruit.bounce IMG { animation: fruit-anim 0.8s ease }
@keyframes fruit-anim {
	0% { left:var(--left-1); transform:scale(var(--scale-1)) rotate(var(--rotate-1)); opacity:0 }
	50% { left:var(--left-2); transform:scale(var(--scale-2)) rotate(var(--rotate-2)) }
	100% { left:0; transform:scale(1) rotate(0); opacity:1 }
}

#fruit_11 { 
	bottom:calc(0dvh);	left:calc(50vw - 12dvh);
	--left-1: -20vw; --left-2: 30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:0deg; --rotate-2:0deg;
}
#fruit_12 { 
	bottom:calc(16dvh);	left:calc(50vw - 7dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
#fruit_13 { 
	bottom:calc(10dvh);	left:calc(50vw + 8dvh);
	--left-1: -5vw; --left-2: 5px;
	--scale-1:0; --scale-2:1.1;		
	--rotate-1:0deg; --rotate-2:-5deg;
}
#fruit_14 { 
	top:calc(8dvh);		left:calc(5dvh);
	--left-1: -20vw; --left-2: 30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-180deg; --rotate-2: 10deg;
}
#fruit_15 { 
	top:calc(12dvh); 	right:calc(100vw - 0dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:360deg; --rotate-2:-10deg;
}
#fruit_16 { 
	bottom:calc(-2dvh);	right:calc(100vw - 3dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:0deg; --rotate-2:0deg;
}
#fruit_17 { 
	bottom:calc(5dvh); 	left:calc(15dvh);
	--left-1: -20vw; --left-2: 30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:0deg; --rotate-2:0deg;	
}
@media (max-width:767px) {
	#fruit_13 { left:calc(50vw + 14dvh) }
	#fruit_15 { right:calc(100vw - 13dvh) }
	#fruit_17 { left:2dvh; bottom:8dvh }	
}

#fruit_21 { 
	bottom:calc(10dvh);	left:calc(50vw - 0dvh);
	--left-1:0; --left-2:0;
	--scale-1:0; --scale-2:1.2;
	--rotate-1:0deg; --rotate-2:0deg;
}
#fruit_22 { 
	top:calc(20dvh);	left:calc(20dvh);
	--left-1:-20vw; --left-2: 20px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-5deg; --rotate-2:5deg;
}
#fruit_23 { 
	top:calc(20dvh); 	right:calc(100vw - 5dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:0deg; --rotate-2:0deg;
}
#fruit_24 { 
	bottom:calc(-10dvh);right:calc(100vw - 5dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:0deg; --rotate-2:0deg;
}
@media (max-width:767px) {
	#fruit_21 { bottom:8dvh }
	#fruit_22 { top:30dvh; left:2dvh }
	#fruit_23 { top: 40dvh; right: calc(100vw - 25dvh) }
	#fruit_24 { bottom: calc(25dvh); right: calc(100vw - 18dvh) }
}

#fruit_31 { 
	top:calc(20dvh);	left:calc(30dvh);
	--left-1:-20vw; --left-2: 20px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-5deg; --rotate-2:5deg;
}
#fruit_32 { 
	bottom:calc(-5dvh);	left:calc(15dvh);
	--left-1:-20vw; --left-2: 20px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-5deg; --rotate-2:5deg;
}
#fruit_33 { 
	top:calc(20dvh); 	right:calc(100vw - 5dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-10deg; --rotate-2:10deg;
}
#fruit_34 { 
	bottom:calc(0dvh);	right:calc(100vw + 10dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:10deg; --rotate-2:-10deg;
}
#fruit_35 { 
	bottom:calc(22dvh);	left:calc(10dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
#fruit_36 { 
	top:calc(15dvh);	right:calc(100vw + 30dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
@media (max-width:767px) {
	#fruit_31 { left:calc(50vw - 12dvh) }
	#fruit_32 { bottom: 2dvh; left: 5dvh }
	#fruit_33 { right: calc(100vw - 10dvh) }
	#fruit_34 { bottom: 5dvh; right: calc(100vw - 8dvh) }
}

#fruit_41 { z-index:2;
	top:calc(15dvh);	left:calc(15dvh);
	--left-1:-20vw; --left-2: 20px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-10deg; --rotate-2:10deg;
}
#fruit_42 { 
	bottom:calc(0dvh);	left:calc(15dvh);
	--left-1:-20vw; --left-2: 20px;
	--scale-1:1; --scale-2:1;
	--rotate-1:10deg; --rotate-2:-10deg;
}
#fruit_43 { 
	top:calc(15dvh);	right:calc(100vw + 15dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-10deg; --rotate-2:10deg;
}
#fruit_44 { 
	bottom:calc(-5dvh);	right:calc(100vw + 0dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:10deg; --rotate-2:-10deg;
}
#fruit_45 { 
	top:calc(25dvh);	left:calc(30dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
#fruit_46 { 
	top:calc(15dvh);	left:calc(50vw - 30dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
#fruit_47 { 
	top:calc(35dvh);	left:calc(50vw + 20dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
#fruit_48 { 
	top:calc(10dvh);		left:calc(50vw + 20dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
#fruit_49 { 
	top:calc(35dvh);	right:calc(100vw + 5dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
@media (max-width:767px) {
	#fruit_41 { left:5dvh }
	#fruit_42 { left: 10dvh }
	#fruit_43 { top: 18dvh; right: calc(100vw - 10dvh) }
	#fruit_44 { bottom: calc(-2dvh); right: calc(100vw - 10dvh) }
}

#fruit_51 { z-index:2;
	top:calc(15dvh);	left:calc(15dvh);
	--left-1:-20vw; --left-2: 20px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-10deg; --rotate-2:10deg;
}
#fruit_52 { 
	bottom:calc(-5dvh);	left:calc(15dvh);
	--left-1:-20vw; --left-2: 20px;
	--scale-1:1; --scale-2:1;
	--rotate-1:10deg; --rotate-2:-10deg;
}
#fruit_53 { 
	top:calc(25dvh);	right:calc(100vw - 12dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:-10deg; --rotate-2:10deg;
}
#fruit_54 { 
	bottom:calc(-5dvh);	right:calc(100vw + 0dvh);
	--left-1: 20vw; --left-2: -30px;
	--scale-1:1; --scale-2:1;
	--rotate-1:10deg; --rotate-2:-10deg;
}
#fruit_55 { 
	bottom:calc(-5dvh);	left:calc(50vw + 10dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
#fruit_56 { 
	top:calc(10dvh);	left:calc(50vw + 25dvh);
	--left-1: 5vw; --left-2: -5px;
	--scale-1:0; --scale-2:1.1;
	--rotate-1:0deg; --rotate-2:5deg;
}
@media (max-width:767px) {
	#fruit_51 { left:8dvh }
	#fruit_52 { left:5dvh }
	#fruit_53 { top: 20dvh; right: calc(100vw - 15dvh) }
	#fruit_56 { top: 40dvh; left: calc(50vw + 20dvh) }
}

/* ========================================================= */
#BOTTOMHP { position: relative; width:100vw; height:calc(100vh - var(--header-height)) }
#BOTTOMHP .screen { 
	position:absolute; z-index:1;
	opacity:0;
	width:100vw; height:calc(100vh - var(--header-height));
	transition: opacity 0.3s		
}
#BOTTOMHP .screen.current { opacity:1; z-index:2 }
#BOTTOMHP .screen.next { opacity:1; z-index:3 }

#BOTTOMHP .bottle-sh { position:absolute; bottom:0; left:50%; transform:translateX(-40%); z-index:5; cursor:pointer}
#BOTTOMHP .bottle-sh IMG { 
	max-height:calc(80vh - var(--bottle-space1));
	height:80vh; width:auto; max-width:unset !important;
}

#BOTTOMHP .content-left, #BOTTOMHP .content-right {
	/* flex: 0 0 calc(50dvh - var(--header-height)); */
	padding:4vh 0 4vh;
	height:calc(66vh - var(--header-height))
}
#BOTTOMHP .content-right-box { width:360px !important; transform-origin: top center}

#BOTTOMHP .title { 
	position:absolute; width:100%; text-align: center; padding:0 20px;
	left:0; top:14vh;	
}
#BOTTOMHP .title IMG { max-height:20vh; width:auto; height:auto}

#BOTTOMHP .party { 
	position:absolute; width:100%; text-align: center; padding:0 20px;
	left:0; top:6vh;	
}
#BOTTOMHP .party IMG { max-height:6vh; width:auto; height:auto}

#BOTTOMHP .vynil { cursor:pointer }
#BOTTOMHP .vynil IMG {	
	pointer-events:none;
	width:calc(48vh - var(--header-height));
	height:auto;
	transform-origin: center center;
}
#BOTTOMHP .vynil.play IMG { animation: vynil-spin 2s linear infinite; }

#BOTTOMHP .play-music { pointer-events: none }
#BOTTOMHP .play-music IMG { max-height:8vh; width:auto; height:auto }

#BOTTOMHP .audio-control { cursor:pointer }
#BOTTOMHP .audio-control .audio_play_btn { display:block }
#BOTTOMHP .audio-control .audio_pause_btn { display:none }
#BOTTOMHP .audio-control.play .audio_play_btn { display:none }
#BOTTOMHP .audio-control.play .audio_pause_btn { display:block }

#BOTTOMHP .prev_step, #BOTTOMHP .next_step { cursor: pointer}
#BOTTOMHP .fruit { pointer-events:none }

@media (max-width:767px) {
	#BOTTOMHP { height:auto }
	#BOTTOMHP .screen { height:auto; position:absolute; padding:30px 0 }
	
	#BOTTOMHP .party { position:static; padding:0 20px }
	#BOTTOMHP .title { position:static; padding:0 20px }
	#BOTTOMHP .bottle-sh { position:static; transform:translateX(8%); z-index:3}
	
	#BOTTOMHP .content-left { height:40vh !important; padding:0; margin-top:-18vh }
	#BOTTOMHP .vynil { position:absolute; width:40vh; height:40vh; max-width:unset}	
	#BOTTOMHP .audio-control { position:absolute; bottom:4vh}
	#BOTTOMHP .play-music IMG { max-height:7vh }
	
	#BOTTOMHP .content-right { width:100vw; padding:30px 20px; height:auto; gap:40px }
	#BOTTOMHP .content-right-box { width:100% !important }
	
}


/* ========================================================= */
#SCARFS { 
	position:relative; z-index:5; 
	height:50vh; top:-20vh; margin-bottom:-40vh;
	pointer-events:none; overflow: hidden
}
#SCARFS .scarf { 
	position:absolute; top: 25vh; left: -5vw;
	width: 110vw; max-width: unset;
	padding:10px 0;
    transform-origin:center center; 	
}	
#SCARFS #scarf-1 { transform:rotate(5deg) translate(0%, -50%) }
#SCARFS #scarf-2 { transform:rotate(-5deg) translate(0%, -50%) }

#SCARFS .scarf IMG { /* 129 + 29 W space / 44 H letter =  */
	height:40px; width:auto; max-width:unset;
	position:relative
}
#SCARFS #scarf-1 IMG { left:var(--left); --left:-100px; --left-next:68px; --left-prev:-268px }
#SCARFS #scarf-2 IMG { left:var(--left); --left:-60px; --left-next:-228px; --left-prev:108px }
#SCARFS .scarf.anim.next IMG { animation: scarf-anim-next 0.5s ease }
@keyframes scarf-anim-next {
	0% { left:var(--left) }
	99% { left:var(--left-next) }
	100% { left:var(--left) }
}
#SCARFS .scarf.anim.prev IMG { animation: scarf-anim-prev 0.5s ease }
@keyframes scarf-anim-prev {
	0% { left:var(--left) }
	99% { left:var(--left-prev) }
	100% { left:var(--left) }
}