@font-face {
	font-family: 'Galileo';
	src: url('/wp-content/themes/hello-elementor/assets/fonts/Galileo Font.woff')
		format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Kuba';
	src: url('/wp-content/themes/hello-elementor/assets/fonts/KubaReczny_1.2.otf')
			format('opentype'),
		url('/wp-content/themes/hello-elementor/assets/fonts/KubaReczny_1.2.ttf')
			format('truetype');
	font-weight: normal;
	font-style: normal;
}

//* Variables
$cTxtRed: #cc0000;
$cTxtWhite: #fff;

$fKuba: 'Kuba', sans-serif;
$fGalileo: 'Galileo', sans-serif;

//* Global styles

#site-header {
	display: none;
}
#site-footer {
	display: none;
}

html {
	margin: 0 !important;
}

body {
	&.page-id-9 {
		background: black;

		#content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;

			.page-content {
				width: 100%;
				max-width: 800px;
				height: 465px;
			}
		}
	}
	&.page-id-846 {
		background: black;

		#content {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;

			@media (max-width: 768px) or (orientation: portrait) {
				align-items: flex-start;
				padding: 25px 0;
			}

			.page-content {
				width: 100%;
				max-width: 800px;
				height: 465px;

				@media (max-width: 768px) or (orientation: portrait) {
					height: 527px;
				}

				@media ((min-width: 400px) and (max-width: 768px) and (min-height: 650px)) or (orientation: portrait) {
					height: 620px;
				}
			}
		}
	}
}

#frame-box {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	background: #000;
	overflow: hidden;

	#frame-box-header {
		position: relative;
		height: 121px;
		min-height: 121px;

		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 41px;
			background-image: url('/wp-content/uploads/2024/04/header-lines.png');
		}

		.logo {
			grid-area: logo;
			display: inline-block;
			padding: 30px 0 0 20px;

			@media (max-width: 768px) {
				display: flex;
				align-items: center;
			}

			img {
				width: 100%;
				max-width: 250px;
			}
		}

		.song-handler-anim {
			grid-area: music;
			position: absolute;
			top: 0;
			right: 10px;
			cursor: pointer;
			min-width: 100px;

			@media (min-width: 767px) {
			}

			.song-volume {
				position: absolute;
				top: 20px;
				left: 29px;
				z-index: 1;
				filter: brightness(1.1);
				visibility: hidden;
			}
			.song-hand {
				position: absolute;
				top: 49px;
				left: 48px;
				z-index: 1;
				transition: all 500ms ease-in-out;
			}
			.song-line-1 {
				visibility: hidden;
				position: absolute;
				top: 66px;
				left: 35px;
				z-index: 1;
			}

			&.active {
				.song-hand {
					transform: rotate(-20deg);
					top: 54px;
					left: 46px;
				}
				.song-volume {
					visibility: visible;
					animation: song-volume 500ms infinite;
				}
				.song-line-1 {
					visibility: visible;
					animation: song-line-amin 500ms infinite;
				}
			}
		}

		nav {
			grid-area: nav;
			padding: 15px 0 0 20px;

			@media (max-width: 768px) {
				overflow-x: scroll;
			}

			ul {
				position: relative;
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: row;
				// align-items: center;
				align-items: flex-start;
				// gap: 40px;
				gap: 20px;
				width: 460px;
				min-width: 460px;

				li {
					font-family: $fKuba;
					line-height: 1;
					color: #999999;
					font-size: 30px;
					font-weight: 300;
					margin: 0;
					cursor: pointer;

					img {
						width: 100%;
					}

					&:nth-child(1) {
						img {
							max-width: 47px;
						}
					}
					&:nth-child(2) {
						img {
							max-width: 53px;
						}
					}
					&:nth-child(3) {
						img {
							max-width: 50px;
						}
					}
					&:nth-child(4) {
						img {
							max-width: 54px;
						}
					}
					&:nth-child(5) {
						padding-top: 4px;
						img {
							max-width: 73px;
						}
					}
					&:nth-child(6) {
						padding-top: 4px;
						img {
							max-width: 63px;
						}
					}
				}
			}
		}

		@media (max-width: 768px) {
			height: 160px;
			min-height: 160px;
			display: grid;
			grid-template-rows: 1fr 55px;
			grid-template-columns: 1fr 110px;
			grid-template-areas:
				'logo music'
				'nav nav';
		}
	}

	#intro {
		position: absolute;
		inset: 0;
		z-index: 999;
		background: #000;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 15px;

		img {
			width: 100%;
			max-width: fit-content;
		}

		p {
			font-family: $fKuba;
			line-height: 1;
			color: #999999;
			font-size: 30px;
			font-weight: 300;
			margin: 0;
			cursor: pointer;
		}
	}

	#plyty {
		#frame-box-content {
			position: relative;
			height: 239px;
			width: fit-content;

			@media (max-width: 768px) {
				height: 260px;
			}
			@media ((min-width: 400px) and (max-width: 768px)) and (min-height: 650px) {
				height: 354px;
				// height: 700px;
			}

			.frame-box-content-bg {
				position: absolute;
				inset: 0;

				img {
					width: fit-content;
					max-width: unset;
					height: 100%;
				}
			}

			.frame-box-content-data {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: nowrap;
				height: 239px;
				z-index: 1;

				@media (max-width: 768px) {
					height: 260px;
				}
				@media ((min-width: 400px) and (max-width: 768px)) and (min-height: 650px) {
					height: 354px;
				}

				h2 {
					font-family: $fGalileo;
					line-height: 1;
					color: $cTxtRed;
					font-size: 20px;
					text-transform: uppercase;
					margin: 0 0 5px 0;
				}
				h3 {
					font-family: $fKuba;
					line-height: 1;
					color: $cTxtRed;
					font-size: 16px;
					font-weight: 700;
					margin: 0 0 8px 0;
				}
				p {
					color: $cTxtWhite;
					line-height: 1;
					font-size: 12px;
					font-weight: 700;
					font-family: Arial, sans-serif;
					margin-bottom: 10px;
				}

				.actions {
					list-style: none;
					margin: 0;
					padding: 0;

					li {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 5px;
						width: fit-content;

						color: $cTxtWhite;
						font-size: 12px;
						line-height: 1.1;
						font-family: Arial, sans-serif;
						font-weight: 700;

						img {
							width: 100%;
							max-width: fit-content;
							height: fit-content;
						}
					}

					.song {
						cursor: pointer;
					}
					.text {
						position: relative;
						cursor: pointer;

						a {
							color: $cTxtWhite;
							text-decoration: none;
						}

						.text-data {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -80%);
							width: 340px;
							height: 200px;
							overflow: auto;
							z-index: 10;
							background: red;
							padding: 20px;

							opacity: 0;
							visibility: hidden;
							transition: all 250ms ease-in;

							* {
								position: relative;
								z-index: 1;
							}

							&.active {
								opacity: 1;
								visibility: visible;
							}
						}
					}
					.buy {
						a {
							color: $cTxtWhite;
							text-decoration: none;
						}
					}
				}

				.img-box {
					position: absolute;

					&:hover {
						.album {
							transform: rotate(7deg);
						}
						.album-record {
							left: 97%;
							top: 47%;
							animation: rotate 1s infinite linear;
						}
					}

					.album {
						position: relative;
						z-index: 1;
						transition: 200ms linear;
					}
					.album-record {
						position: absolute;
						left: 81%;
						top: 44%;
						transition: left 200ms linear, top 200ms linear;
						transform: translate(-50%, -50%);
					}
				}

				.box {
					position: relative;
					width: 490px;
					min-width: 490px;

					&-1 {
						padding-left: 57px;
						padding-top: 30px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 314px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 128px;
							margin: 5px 0 8px;
						}

						p {
							width: 100%;
							max-width: 300px;
						}

						.img-box {
							top: 30px;
							right: 0px;

							&:hover {
								.album-record {
									left: 95%;
									top: 55%;
								}
							}
							.album-record {
								left: 88%;
								top: 50%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								's0 s1 s2'
								's3 s4 s5'
								's6 s7 .'
								'. s8 .'
								'txt s9 .';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
							}
							.text {
								grid-area: txt;
							}
						}
					}

					&-2 {
						padding-left: 55px;
						padding-bottom: 30px;
						min-width: 470px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 128px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 142px;
							margin: 5px 0 8px;
						}

						p {
							width: 100%;
							max-width: 290px;
						}

						.img-box {
							top: 0px;
							right: 0px;

							&:hover {
								.album-record {
									left: 95%;
									top: 55%;
								}
							}
							.album-record {
								left: 88%;
								top: 50%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								's0 s1 .'
								's2 s3 .'
								's4 s5 .'
								's6 s7 txt'
								's8 . .';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
							}
							.text {
								grid-area: txt;
							}
						}
					}

					&-3 {
						padding-left: 55px;
						padding-top: 40px;
						// min-width: 575px;
						min-width: 620px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 325px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 92px;
							margin: 5px 0 8px;
						}

						p {
							width: 100%;
							max-width: 310px;
						}

						.img-box {
							top: 40px;
							right: 55px;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								's0 s1 s2'
								's3 s4 s5'
								's6 s7 .'
								'. . txt';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
							}
							.text {
								grid-area: txt;
							}
						}
					}

					&-4 {
						padding-left: 60px;
						padding-bottom: 0;
						min-width: 560px;

						// .title_img {
						// 	display: block;
						// 	width: 100%;
						// 	max-width: 325px;
						// }

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 190px;
							margin: 5px 0 0;
						}

						p {
							width: 100%;
							max-width: 290px;
						}

						.img-box {
							top: 0;
							right: 90px;

							&:hover {
								.album-record {
									left: 95%;
									top: 55%;
								}
							}
							.album-record {
								left: 88%;
								top: 50%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								's0 sTxt .'
								's1 s2 .'
								's3 s4 .'
								's5 s6 .'
								's7 s8 .'
								'. s9 txt';

							.song {
								&.song-txt {
									grid-area: sTxt;
								}
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&-10 {
									grid-area: s10;
								}
							}
							.text {
								grid-area: txt;
							}
						}
					}

					&-5 {
						display: grid;
						grid-template-columns: repeat(2, minmax(min-content, max-content));
						column-gap: 10px;
						grid-template-areas:
							'title_img actions-2'
							'subtitle_img actions-2'
							'p actions-2'
							'actions-1 actions-2';

						padding-left: 35px;
						padding-top: 40px;
						min-width: 690px;

						.title_img {
							grid-area: title_img;
							display: block;
							width: 100%;
							max-width: 350px;
						}

						.subtitle_img {
							grid-area: subtitle_img;
							display: block;
							width: 100%;
							max-width: 92px;
							margin: 5px 0 0;
						}

						p {
							grid-area: p;
							width: 100%;
							max-width: 430px;
						}

						.img-box {
							top: 0;
							right: 0px;

							&:hover {
								.album-record {
									left: 95%;
									top: 55%;
								}
							}
							.album-record {
								left: 88%;
								top: 50%;
							}
						}

						ul.actions-1 {
							width: 420px;
							display: grid;
							grid-area: actions-1;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								's0 s1 sTxt'
								's2 s3 s3'
								's4 s5 s5';

							.song {
								&.text {
									grid-area: sTxt;
								}
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
							}
							.text {
								grid-area: txt;
								padding-left: 20px;
							}
						}

						ul.actions-2 {
							display: grid;
							grid-area: actions-2;
							grid-template-columns: 1fr;
							column-gap: 20px;
						}
					}

					&-6 {
						padding-left: 50px;
						padding-top: 15px;
						min-width: 550px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 325px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 260px;
							margin: 5px 0 0px;
						}

						p {
							width: 100%;
							max-width: 350px;
						}
						.song.text {
							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 5px;

							color: $cTxtWhite;
							font-size: 12px;
							line-height: 1.2;
							font-family: Arial, sans-serif;

							margin-left: 260px;
							margin-top: -22px;
						}

						.img-box {
							top: 25px;
							right: 0px;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								'. . s0'
								's1 s2 s3'
								's4 s5 s6'
								's7 s8 s9'
								's10 s11 s12'
								's13 s14 s15';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&-10 {
									grid-area: s10;
								}
								&-11 {
									grid-area: s11;
								}
								&-12 {
									grid-area: s12;
								}
								&-13 {
									grid-area: s13;
								}
								&-14 {
									grid-area: s14;
								}
								&-15 {
									grid-area: s15;
								}
							}
						}
					}

					&-7 {
						display: grid;
						grid-template-columns: repeat(2, minmax(min-content, max-content));
						column-gap: 10px;
						grid-template-areas:
							'title_img title_img'
							'subtitle_img actions-2'
							'p actions-2'
							'actions-1 actions-2';

						padding-left: 125px;
						padding-top: 0px;
						min-width: 640px;
						width: 640px;

						.title_img {
							grid-area: title_img;
							display: block;
							width: 100%;
							max-width: 350px;
						}

						.subtitle_img {
							grid-area: subtitle_img;
							display: block;
							width: 100%;
							max-width: 92px;
							margin: -7px 0 10px;
						}

						p {
							grid-area: p;
							width: 100%;
							max-width: 245px;
						}

						.img-box {
							top: 20px;
							right: 0px;

							&:hover {
								.album-record {
									left: 95%;
									top: 55%;
								}
							}
							.album-record {
								left: 88%;
								top: 50%;
							}
						}

						ul.actions-1 {
							width: 230px;
							display: grid;
							grid-area: actions-1;
							grid-template-columns: 1fr;
							column-gap: 20px;
						}

						ul.actions-2 {
							display: grid;
							grid-area: actions-2;
							grid-template-columns: 1fr;
							column-gap: 20px;
							grid-template-areas:
								's0 .'
								's1 .'
								's2 .'
								's3 .'
								's4 .'
								's5 .'
								's6 .'
								's7 .'
								's8 .'
								's9 .'
								's10 .'
								's11 .'
								's12 .'
								's13 .'
								's14 .'
								's15 .'
								's16 .'
								's17 sTxt';

							.song {
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&-10 {
									grid-area: s10;
								}
								&-11 {
									grid-area: s11;
								}
								&-12 {
									grid-area: s12;
								}
								&-13 {
									grid-area: s13;
								}
								&-14 {
									grid-area: s14;
								}
								&-15 {
									grid-area: s15;
								}
								&-16 {
									grid-area: s16;
								}
								&-17 {
									grid-area: s17;
								}
								&.text {
									grid-area: sTxt;
									margin-left: -25px;
								}
							}
						}
					}

					&-8 {
						padding-left: 45px;
						padding-bottom: 0px;
						min-width: 625px;
						width: 625px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 444px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 210px;
							margin: 0;
						}

						p {
							width: 100%;
							max-width: 520px;
						}

						.img-box {
							top: 7px;
							right: 0px;

							&:hover {
								.album-record {
									left: 95%;
									top: 55%;
								}
							}
							.album-record {
								left: 88%;
								top: 50%;
							}
						}

						ul {
							margin-top: -12px;
							display: grid;
							grid-template-columns: repeat(
								2,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								'. sTxt'
								's0 s1'
								's2 s3'
								's4 s5'
								's6 s7'
								's8 s9'
								's10 s11'
								's12 s13';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&-10 {
									grid-area: s10;
								}
								&-11 {
									grid-area: s11;
								}
								&-12 {
									grid-area: s12;
								}
								&-13 {
									grid-area: s13;
								}
								&.text {
									grid-area: sTxt;
									width: 100%;
									justify-content: flex-end;
									padding-right: 40px;
								}
							}
						}
					}

					&-9 {
						padding-left: 45px;
						padding-top: 45px;
						min-width: 650px;
						width: 650px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 285px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 91px;
							margin: 0px 0 8px;
						}

						p {
							width: 100%;
							max-width: 450px;
						}

						.img-box {
							top: 10px;
							right: 25px;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							margin-top: -35px;
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								'. . sTxt'
								'. . s0'
								's1 s2 s3'
								's4 s5 s6'
								's7 s8 s9'
								's10 s11 s12';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&-10 {
									grid-area: s10;
								}
								&-11 {
									grid-area: s11;
								}
								&-12 {
									grid-area: s12;
								}
								&.text {
									grid-area: sTxt;
									width: 100%;
									justify-content: flex-end;
									padding-right: 30px;
									padding-bottom: 5px;
								}
							}
						}
					}

					&-10 {
						padding-left: 90px;
						padding-bottom: 15px;
						min-width: 630px;
						width: 630px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 380px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 91px;
							margin: 0px 0 8px;
						}

						p {
							width: 100%;
							max-width: 410px;
						}

						.img-box {
							top: 20px;
							right: 0;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 30px;
							grid-template-areas:
								's0 s1 s2'
								's3 s4 s5'
								's6 s7 s8'
								's9 . .'
								'. . sTxt';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&.text {
									grid-area: sTxt;
								}
							}
						}
					}

					&-11 {
						padding-left: 60px;
						padding-top: 40px;
						min-width: 580px;
						width: 580px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 235px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 91px;
							margin: 0px 0 8px;
						}

						p {
							width: 100%;
							max-width: 445px;
							margin: 0;
						}

						.img-box {
							top: 5px;
							right: 120px;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 30px;
							grid-template-areas:
								'. sTxt s0'
								's1 s2 s3'
								's4 s5 s6'
								's7 s8 s9'
								'. . s10';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&-10 {
									grid-area: s10;
								}
								&.text {
									grid-area: sTxt;
									width: 100%;
									justify-content: flex-end;
								}
							}
						}
					}

					&-12 {
						padding-left: 55px;
						padding-top: 0px;
						min-width: 490px;
						width: 490px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 255px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 91px;
							margin: 0px 0 3px;
						}

						p {
							width: 100%;
							max-width: 365px;
							margin-bottom: 3px;
						}

						.img-box {
							bottom: 5px;
							right: 0;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								2,
								minmax(min-content, max-content)
							);
							column-gap: 30px;
							grid-template-areas:
								's0 s1'
								's2 s3'
								's4 s5'
								's6 .'
								's7 .'
								's8 s8'
								's9 .'
								's10 .'
								's11 sTxt';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&-10 {
									grid-area: s10;
								}
								&-11 {
									grid-area: s11;
								}
								&.text {
									grid-area: sTxt;
								}
							}
						}
					}

					&-13 {
						padding-left: 60px;
						padding-top: 55px;
						min-width: 610px;
						width: 610px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 285px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 91px;
							margin: 0px 0 10px;
						}

						p {
							width: 100%;
							max-width: 445px;
							margin-bottom: 10px;
						}

						.img-box {
							top: 35px;
							right: 60px;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								2,
								minmax(min-content, max-content)
							);
							column-gap: 30px;
							grid-template-areas:
								's0 s1 s2'
								's3 s4 s5'
								's6 s7 .'
								'. . sTxt';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&.text {
									grid-area: sTxt;
								}
							}
						}
					}

					&-14 {
						padding-left: 45px;
						padding-top: 40px;
						min-width: 445px;
						width: 445px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 280px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 91px;
							margin: 0px 0 10px;
						}

						p {
							width: 100%;
							max-width: 335px;
							margin-bottom: 10px;
						}

						.img-box {
							top: 13px;
							right: 0px;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								4,
								minmax(min-content, max-content)
							);
							column-gap: 40px;
							grid-template-areas:
								's0 s1 s2 s3'
								's4 s5 s6 .'
								's7 s8 s9 sTxt';

							.song {
								width: 100%;
								justify-content: space-between;

								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&.text {
									grid-area: sTxt;
								}
							}
						}
					}

					&-15 {
						padding-left: 62px;
						padding-top: 0px;
						min-width: 590px;
						width: 590px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 270px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 91px;
							margin: 0px 0 3px;
						}

						p {
							width: 100%;
							max-width: 445px;
							margin-bottom: 8px;
						}

						.img-box {
							top: 80px;
							right: 0;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-areas:
								's0 . .'
								's1 . .'
								's2 . .'
								's3 . .'
								's4 . .'
								's5 . .'
								's6 . .'
								's7 s8 s9'
								's10 s11 .'
								'. . sTxt';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&-10 {
									grid-area: s10;
								}
								&-11 {
									grid-area: s11;
								}
								&.text {
									grid-area: sTxt;
								}
							}
						}
					}

					&-16 {
						padding-left: 70px;
						padding-top: 50px;
						min-width: 1005px;
						width: 1005px;
						padding-right: 120px;

						.title_img {
							display: block;
							width: 100%;
							max-width: 292px;
						}

						.subtitle_img {
							display: block;
							width: 100%;
							max-width: 91px;
							margin: 0px 0 3px;
						}

						p {
							width: 100%;
							max-width: 440px;
							margin-bottom: 8px;
						}

						.img-box {
							top: 7px;
							right: 495px;

							&:hover {
								.album-record {
									left: 99%;
									top: 50%;
								}
							}
							.album-record {
								left: 93%;
								top: 43%;
							}
						}

						ul {
							margin-top: -40px;
							display: grid;
							grid-template-columns: repeat(
								3,
								minmax(min-content, max-content)
							);
							column-gap: 20px;
							grid-template-rows: repeat(6, 14px);
							grid-template-areas:
								'. . sTxt'
								'. . .'
								'. . s0'
								's1 s2 s3'
								's4 s5 s6'
								's7 s8 s9';

							.song {
								&-0 {
									grid-area: s0;
								}
								&-1 {
									grid-area: s1;
								}
								&-2 {
									grid-area: s2;
								}
								&-3 {
									grid-area: s3;
								}
								&-4 {
									grid-area: s4;
								}
								&-5 {
									grid-area: s5;
								}
								&-6 {
									grid-area: s6;
								}
								&-7 {
									grid-area: s7;
								}
								&-8 {
									grid-area: s8;
								}
								&-9 {
									grid-area: s9;
								}
								&.text {
									grid-area: sTxt;
								}
							}
						}
					}
				}
			}
		}

		#frame-box-footer {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 106px;
			background: #000;

			img.img-scroll {
				height: 100%;
				width: unset;
				max-width: fit-content;
			}

			#drag-handle {
				position: absolute;
				z-index: 1;
				bottom: 0;
				left: 0;
				height: 83px;

				.hand {
					height: 83px;
				}

				.hand-finder-part-1 {
					position: absolute;
					top: -4px;
					width: 11px;
					left: 0px;
					// animation: finger-1 500ms infinite;
				}

				.hand-finder-part-2 {
					position: absolute;
					top: -15px;
					width: 9px;
					left: 1px;
					// animation: finger-2 500ms infinite;
				}
			}

			.piano-keys {
				position: relative;
				display: flex;
				flex-direction: row;
				gap: 1px;
				height: 66px;

				background: linear-gradient(
					0deg,
					rgba(0, 0, 0, 1) 50%,
					rgba(255, 255, 255, 1) 150%
				);

				ul {
					width: 362px;
					inset: 0;
					list-style: none;
					padding: 0;
					margin: 0;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					flex-direction: row;
					gap: 2px;
					background-image: url('/wp-content/uploads/2024/04/33.png');
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;

					&.ul-27 {
						width: 227px;
						background-position: center left;
					}
					li {
						line-height: 1;
						font-family: Arial;
						font-size: 11px;
						width: 23px;
						text-align: center;
						padding-bottom: 4px;

						&.red {
							color: $cTxtRed;
							font-size: 16px;
							font-weight: 700;
						}

						&.desc {
							position: relative;

							p {
								width: max-content;
								min-width: max-content;
								font-family: $fKuba;
								line-height: 1;
								color: $cTxtRed;
								font-size: 22px;
								font-weight: 400;
								margin: 0;
							}

							.desc-top {
								position: absolute;
								bottom: 0;
								left: 0;

								img {
									position: absolute;
									bottom: -4px;
									left: 1px;
									min-width: 58px;
									min-height: 83px;
								}
								p {
									position: absolute;
									bottom: 64px;
									left: 62px;
								}
							}
							.desc-bottom {
								position: absolute;
								bottom: 0;
								left: 0;

								img.arrow {
									position: absolute;
									bottom: -40px;
									left: 0px;
									// min-width: 38px;
									// min-height: 46px;
									width: 46px;
									min-width: 46px;
									height: 46px;
									min-height: 46px;
								}
								p {
									position: absolute;
									bottom: -34px;
									left: 42px;
								}
							}
						}

						.desc-bottom-imgs {
							display: flex;
							flex-direction: row;
							align-items: center;
							column-gap: 10px;

							position: absolute;
							bottom: -40px;
							left: 55px;
						}
					}
				}

				.ul-1 {
					.desc-bottom-imgs {
						.desc-bottom-img-1 {
							width: 29px;
							min-width: 29px;
						}
						.desc-bottom-img-2 {
							width: 195px;
							min-width: 195px;
						}
						.desc-bottom-img-3 {
							width: 140px;
							min-width: 140px;
						}
					}
				}

				.ul-6 {
					.arrow {
						bottom: -30px !important;
						height: 28px !important;
						min-height: 28px !important;
					}
					.desc-bottom-imgs {
						right: 5px !important;
						left: auto !important;

						.desc-bottom-img-1 {
							width: 27px;
							min-width: 27px;
						}
						.desc-bottom-img-2 {
							width: 180px;
							min-width: 180px;
						}
						.desc-bottom-img-3 {
							width: 180px;
							min-width: 180px;
						}
					}
				}

				.ul-7 {
					.desc-bottom {
						left: -8px !important;
					}
					.arrow {
						bottom: -30px !important;
						height: 28px !important;
						min-height: 28px !important;
					}
					.desc-bottom-imgs {
						.desc-bottom-img-1 {
							width: 26px;
							min-width: 26px;
						}
						.desc-bottom-img-2 {
							width: 293px;
							min-width: 293px;
						}
						.desc-bottom-img-3 {
							width: 91px;
							min-width: 91px;
						}
					}
				}
			}

			// img {
			// 	z-index: 1;
			// }
		}
	}

	#foto {
		height: 100%;
		display: flex;
		align-items: center;

		ul {
			list-style: none;
			padding: 0;
			margin: 0;

			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			gap: 30px;

			li {
				width: 100%;
				max-width: calc((100% / 7) - 30px);

				@media (max-width: 768px) {
					max-width: calc((100% / 4) - 30px);
				}

				img {
					width: 100%;
					max-width: fit-content;
					aspect-ratio: 1;
					object-fit: cover;
					object-position: top center;
				}
			}
		}
	}

	#book {
		width: fit-content;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
		display: none;

		&::before {
			content: '';
			position: fixed;
			background: rgba(0, 0, 0, 0.8);
			width: 100vw;
			height: 100vh;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			backdrop-filter: blur(3px);
		}

		.book-actions {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.book-close,
			.book-contents {
				position: relative;
				// background: #fff;
				width: fit-content;
				cursor: pointer;
				z-index: 1;

				p {
					padding: 5px 10px;
					margin-bottom: 0;

					font-family: $fGalileo;
					line-height: 1;
					color: $cTxtRed;
					font-size: 20px;
					text-transform: uppercase;
					margin: 0 0 5px 0;
				}
			}
			.book-close {
				margin-left: auto;
			}
		}

		#flipbook {
			position: relative;

			.hard {
				position: relative;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.page-wrapper[page='2'] {
				transform: none !important;
				position: relative !important;

				> div {
					position: relative !important;
				}
				* {
					transform: none !important;
				}
			}
		}
	}
}

@keyframes rotate {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@keyframes song-volume {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	51% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes song-line-amin {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(0deg);
	}
	51% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(10deg);
	}
}
@keyframes finger-1 {
	0% {
		transform: rotateX(0deg);
		top: -4px;
	}
	50% {
		transform: rotateX(47deg);
		top: -2px;
	}
}
@keyframes finger-2 {
	0% {
		transform: rotateX(0deg);
		top: -15px;
	}
	50% {
		transform: rotateX(69deg);
		top: -8px;
	}
}

.post-739 {
	.page-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;

		#flipbook {
			.hard {
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
}

//* NEW STYLES
.page-footer {
	padding: 10px 0;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	text-align: center;

	.footer-title {
		color: $cTxtWhite;
		font-size: 24px;
		margin: 0;
	}

	img {
		width: 100%;
		max-width: 100px;
		filter: brightness(0) invert(1);
	}
	p {
		color: #797b7b;
		font-size: 9px;
		font-weight: 400;
		font-family: 'Arial', sans-serif;
		margin: 0;
	}
}

.table-of-contents {
	padding: 0;
	margin: 0;
	position: absolute;
	// top: 40px;
	top: 10.5%;
	bottom: 0;
	left: 0;
	right: 0;
	list-style: none;
	// display: flex;
	flex-direction: column;
	z-index: 999999;

	display: block;
	height: 84.2%;

	li {
		display: block;
		height: calc(100% / 21);
		a {
			position: relative;
			display: block;
			// height: 17px;
			height: 100%;
			width: 100%;
			z-index: 999;

			// @media (max-width: 768px) {
			// 	height: 11px;
			// }
		}

		// &:nth-child(1) {
		// 	a {
		// 		height: 20px;
		// 		@media (max-width: 768px) {
		// 			height: 11px;
		// 		}
		// 	}
		// }

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: row;
			// column-gap: 10px;
			// height: 17px;
			height: 100%;
			width: 100%;
			// @media (max-width: 768px) {
			// 	height: 11px;
			// }

			&.custom {
				&-1 {
					li {
						&:nth-child(1) {
							width: 29%;

							// a {
							// 	width: 86px;
							// }
						}
						&:nth-child(2) {
							width: 71%;
							// a {
							// 	width: 76px;
							// }
						}
					}
				}
				&-2 {
					li {
						&:nth-child(1) {
							width: 53%;
							// a {
							// 	width: 155px;
							// }
						}
						&:nth-child(2) {
							width: 47%;
							// a {
							// 	width: 86px;
							// }
						}
					}
				}

				li {
					height: 100% !important;
					a {
						height: 100% !important;
					}
				}
			}
		}
	}
}

.fancybox__container {
	.fancybox__backdrop {
		background: transparent !important;
	}
}

@media (max-width: 768px) or (orientation: portrait) {
	body {
		&.page-id-846 {
			#content {
				max-width: unset !important;

				.page-content {
					max-width: unset !important;
					width: 100vw;
				}
			}
		}
	}
}