@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; } #site-header { display: none; } #site-footer { display: none; } html { margin: 0 !important; } body.page-id-9 { background: black; } body.page-id-9 #content { display: flex; align-items: center; justify-content: center; height: 100vh; } body.page-id-9 #content .page-content { width: 100%; max-width: 800px; height: 465px; } body.page-id-846 { background: black; } body.page-id-846 #content { display: flex; align-items: center; justify-content: center; height: 100vh; } @media (max-width: 768px) or (orientation: portrait) { body.page-id-846 #content { align-items: flex-start; padding: 25px 0; } } body.page-id-846 #content .page-content { width: 100%; max-width: 800px; height: 465px; } @media (max-width: 768px) or (orientation: portrait) { body.page-id-846 #content .page-content { height: 527px; } } @media ((min-width: 400px) and (max-width: 768px) and (min-height: 650px)) or (orientation: portrait) { body.page-id-846 #content .page-content { height: 620px; } } #frame-box { position: relative; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; background: #000; overflow: hidden; } #frame-box #frame-box-header { position: relative; height: 121px; min-height: 121px; } #frame-box #frame-box-header::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 41px; background-image: url("/wp-content/uploads/2024/04/header-lines.png"); } #frame-box #frame-box-header .logo { grid-area: logo; display: inline-block; padding: 30px 0 0 20px; } @media (max-width: 768px) { #frame-box #frame-box-header .logo { display: flex; align-items: center; } } #frame-box #frame-box-header .logo img { width: 100%; max-width: 250px; } #frame-box #frame-box-header .song-handler-anim { grid-area: music; position: absolute; top: 0; right: 10px; cursor: pointer; min-width: 100px; } #frame-box #frame-box-header .song-handler-anim .song-volume { position: absolute; top: 20px; left: 29px; z-index: 1; filter: brightness(1.1); visibility: hidden; } #frame-box #frame-box-header .song-handler-anim .song-hand { position: absolute; top: 49px; left: 48px; z-index: 1; transition: all 500ms ease-in-out; } #frame-box #frame-box-header .song-handler-anim .song-line-1 { visibility: hidden; position: absolute; top: 66px; left: 35px; z-index: 1; } #frame-box #frame-box-header .song-handler-anim.active .song-hand { transform: rotate(-20deg); top: 54px; left: 46px; } #frame-box #frame-box-header .song-handler-anim.active .song-volume { visibility: visible; animation: song-volume 500ms infinite; } #frame-box #frame-box-header .song-handler-anim.active .song-line-1 { visibility: visible; animation: song-line-amin 500ms infinite; } #frame-box #frame-box-header nav { grid-area: nav; padding: 15px 0 0 20px; } @media (max-width: 768px) { #frame-box #frame-box-header nav { overflow-x: scroll; } } #frame-box #frame-box-header nav ul { position: relative; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; align-items: flex-start; gap: 20px; width: 460px; min-width: 460px; } #frame-box #frame-box-header nav ul li { font-family: "Kuba", sans-serif; line-height: 1; color: #999999; font-size: 30px; font-weight: 300; margin: 0; cursor: pointer; } #frame-box #frame-box-header nav ul li img { width: 100%; } #frame-box #frame-box-header nav ul li:nth-child(1) img { max-width: 47px; } #frame-box #frame-box-header nav ul li:nth-child(2) img { max-width: 53px; } #frame-box #frame-box-header nav ul li:nth-child(3) img { max-width: 50px; } #frame-box #frame-box-header nav ul li:nth-child(4) img { max-width: 54px; } #frame-box #frame-box-header nav ul li:nth-child(5) { padding-top: 4px; } #frame-box #frame-box-header nav ul li:nth-child(5) img { max-width: 73px; } #frame-box #frame-box-header nav ul li:nth-child(6) { padding-top: 4px; } #frame-box #frame-box-header nav ul li:nth-child(6) img { max-width: 63px; } @media (max-width: 768px) { #frame-box #frame-box-header { height: 160px; min-height: 160px; display: grid; grid-template-rows: 1fr 55px; grid-template-columns: 1fr 110px; grid-template-areas: "logo music" "nav nav"; } } #frame-box #intro { position: absolute; inset: 0; z-index: 999; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; } #frame-box #intro img { width: 100%; max-width: -moz-fit-content; max-width: fit-content; } #frame-box #intro p { font-family: "Kuba", sans-serif; line-height: 1; color: #999999; font-size: 30px; font-weight: 300; margin: 0; cursor: pointer; } #frame-box #plyty #frame-box-content { position: relative; height: 239px; width: -moz-fit-content; width: fit-content; } @media (max-width: 768px) { #frame-box #plyty #frame-box-content { height: 260px; } } @media ((min-width: 400px) and (max-width: 768px)) and (min-height: 650px) { #frame-box #plyty #frame-box-content { height: 354px; } } #frame-box #plyty #frame-box-content .frame-box-content-bg { position: absolute; inset: 0; } #frame-box #plyty #frame-box-content .frame-box-content-bg img { width: -moz-fit-content; width: fit-content; max-width: unset; height: 100%; } #frame-box #plyty #frame-box-content .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) { #frame-box #plyty #frame-box-content .frame-box-content-data { height: 260px; } } @media ((min-width: 400px) and (max-width: 768px)) and (min-height: 650px) { #frame-box #plyty #frame-box-content .frame-box-content-data { height: 354px; } } #frame-box #plyty #frame-box-content .frame-box-content-data h2 { font-family: "Galileo", sans-serif; line-height: 1; color: #cc0000; font-size: 20px; text-transform: uppercase; margin: 0 0 5px 0; } #frame-box #plyty #frame-box-content .frame-box-content-data h3 { font-family: "Kuba", sans-serif; line-height: 1; color: #cc0000; font-size: 16px; font-weight: 700; margin: 0 0 8px 0; } #frame-box #plyty #frame-box-content .frame-box-content-data p { color: #fff; line-height: 1; font-size: 12px; font-weight: 700; font-family: Arial, sans-serif; margin-bottom: 10px; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions { list-style: none; margin: 0; padding: 0; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions li { display: flex; flex-direction: row; align-items: center; gap: 5px; width: -moz-fit-content; width: fit-content; color: #fff; font-size: 12px; line-height: 1.1; font-family: Arial, sans-serif; font-weight: 700; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions li img { width: 100%; max-width: -moz-fit-content; max-width: fit-content; height: -moz-fit-content; height: fit-content; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions .song { cursor: pointer; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions .text { position: relative; cursor: pointer; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions .text a { color: #fff; text-decoration: none; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions .text .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; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions .text .text-data * { position: relative; z-index: 1; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions .text .text-data.active { opacity: 1; visibility: visible; } #frame-box #plyty #frame-box-content .frame-box-content-data .actions .buy a { color: #fff; text-decoration: none; } #frame-box #plyty #frame-box-content .frame-box-content-data .img-box { position: absolute; } #frame-box #plyty #frame-box-content .frame-box-content-data .img-box:hover .album { transform: rotate(7deg); } #frame-box #plyty #frame-box-content .frame-box-content-data .img-box:hover .album-record { left: 97%; top: 47%; animation: rotate 1s infinite linear; } #frame-box #plyty #frame-box-content .frame-box-content-data .img-box .album { position: relative; z-index: 1; transition: 200ms linear; } #frame-box #plyty #frame-box-content .frame-box-content-data .img-box .album-record { position: absolute; left: 81%; top: 44%; transition: left 200ms linear, top 200ms linear; transform: translate(-50%, -50%); } #frame-box #plyty #frame-box-content .frame-box-content-data .box { position: relative; width: 490px; min-width: 490px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 { padding-left: 57px; padding-top: 30px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 .title_img { display: block; width: 100%; max-width: 314px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 .subtitle_img { display: block; width: 100%; max-width: 128px; margin: 5px 0 8px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 p { width: 100%; max-width: 300px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 .img-box { top: 30px; right: 0px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 .img-box:hover .album-record { left: 95%; top: 55%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 .img-box .album-record { left: 88%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: "s0 s1 s2" "s3 s4 s5" "s6 s7 ." ". s8 ." "txt s9 ."; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-1 ul .text { grid-area: txt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 { padding-left: 55px; padding-bottom: 30px; min-width: 470px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 .title_img { display: block; width: 100%; max-width: 128px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 .subtitle_img { display: block; width: 100%; max-width: 142px; margin: 5px 0 8px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 p { width: 100%; max-width: 290px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 .img-box { top: 0px; right: 0px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 .img-box:hover .album-record { left: 95%; top: 55%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 .img-box .album-record { left: 88%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: "s0 s1 ." "s2 s3 ." "s4 s5 ." "s6 s7 txt" "s8 . ."; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-2 ul .text { grid-area: txt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 { padding-left: 55px; padding-top: 40px; min-width: 620px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 .title_img { display: block; width: 100%; max-width: 325px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 .subtitle_img { display: block; width: 100%; max-width: 92px; margin: 5px 0 8px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 p { width: 100%; max-width: 310px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 .img-box { top: 40px; right: 55px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: "s0 s1 s2" "s3 s4 s5" "s6 s7 ." ". . txt"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-3 ul .text { grid-area: txt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 { padding-left: 60px; padding-bottom: 0; min-width: 560px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 .subtitle_img { display: block; width: 100%; max-width: 190px; margin: 5px 0 0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 p { width: 100%; max-width: 290px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 .img-box { top: 0; right: 90px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 .img-box:hover .album-record { left: 95%; top: 55%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 .img-box .album-record { left: 88%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: "s0 sTxt ." "s1 s2 ." "s3 s4 ." "s5 s6 ." "s7 s8 ." ". s9 txt"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song.song-txt { grid-area: sTxt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .song-10 { grid-area: s10; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-4 ul .text { grid-area: txt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 { display: grid; grid-template-columns: repeat(2, minmax(min-content, max-content)); -moz-column-gap: 10px; 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; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 .title_img { grid-area: title_img; display: block; width: 100%; max-width: 350px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 .subtitle_img { grid-area: subtitle_img; display: block; width: 100%; max-width: 92px; margin: 5px 0 0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 p { grid-area: p; width: 100%; max-width: 430px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 .img-box { top: 0; right: 0px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 .img-box:hover .album-record { left: 95%; top: 55%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 .img-box .album-record { left: 88%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 { width: 420px; display: grid; grid-area: actions-1; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: "s0 s1 sTxt" "s2 s3 s3" "s4 s5 s5"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 .song.text { grid-area: sTxt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-1 .text { grid-area: txt; padding-left: 20px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-5 ul.actions-2 { display: grid; grid-area: actions-2; grid-template-columns: 1fr; -moz-column-gap: 20px; column-gap: 20px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 { padding-left: 50px; padding-top: 15px; min-width: 550px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 .title_img { display: block; width: 100%; max-width: 325px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 .subtitle_img { display: block; width: 100%; max-width: 260px; margin: 5px 0 0px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 p { width: 100%; max-width: 350px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 .song.text { display: flex; flex-direction: row; align-items: center; gap: 5px; color: #fff; font-size: 12px; line-height: 1.2; font-family: Arial, sans-serif; margin-left: 260px; margin-top: -22px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 .img-box { top: 25px; right: 0px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: ". . s0" "s1 s2 s3" "s4 s5 s6" "s7 s8 s9" "s10 s11 s12" "s13 s14 s15"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-10 { grid-area: s10; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-11 { grid-area: s11; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-12 { grid-area: s12; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-13 { grid-area: s13; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-14 { grid-area: s14; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-6 ul .song-15 { grid-area: s15; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 { display: grid; grid-template-columns: repeat(2, minmax(min-content, max-content)); -moz-column-gap: 10px; 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; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 .title_img { grid-area: title_img; display: block; width: 100%; max-width: 350px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 .subtitle_img { grid-area: subtitle_img; display: block; width: 100%; max-width: 92px; margin: -7px 0 10px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 p { grid-area: p; width: 100%; max-width: 245px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 .img-box { top: 20px; right: 0px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 .img-box:hover .album-record { left: 95%; top: 55%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 .img-box .album-record { left: 88%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-1 { width: 230px; display: grid; grid-area: actions-1; grid-template-columns: 1fr; -moz-column-gap: 20px; column-gap: 20px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 { display: grid; grid-area: actions-2; grid-template-columns: 1fr; -moz-column-gap: 20px; 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"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-10 { grid-area: s10; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-11 { grid-area: s11; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-12 { grid-area: s12; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-13 { grid-area: s13; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-14 { grid-area: s14; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-15 { grid-area: s15; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-16 { grid-area: s16; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song-17 { grid-area: s17; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-7 ul.actions-2 .song.text { grid-area: sTxt; margin-left: -25px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 { padding-left: 45px; padding-bottom: 0px; min-width: 625px; width: 625px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 .title_img { display: block; width: 100%; max-width: 444px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 .subtitle_img { display: block; width: 100%; max-width: 210px; margin: 0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 p { width: 100%; max-width: 520px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 .img-box { top: 7px; right: 0px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 .img-box:hover .album-record { left: 95%; top: 55%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 .img-box .album-record { left: 88%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul { margin-top: -12px; display: grid; grid-template-columns: repeat(2, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: ". sTxt" "s0 s1" "s2 s3" "s4 s5" "s6 s7" "s8 s9" "s10 s11" "s12 s13"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-10 { grid-area: s10; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-11 { grid-area: s11; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-12 { grid-area: s12; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song-13 { grid-area: s13; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-8 ul .song.text { grid-area: sTxt; width: 100%; justify-content: flex-end; padding-right: 40px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 { padding-left: 45px; padding-top: 45px; min-width: 650px; width: 650px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 .title_img { display: block; width: 100%; max-width: 285px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 .subtitle_img { display: block; width: 100%; max-width: 91px; margin: 0px 0 8px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 p { width: 100%; max-width: 450px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 .img-box { top: 10px; right: 25px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul { margin-top: -35px; display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: ". . sTxt" ". . s0" "s1 s2 s3" "s4 s5 s6" "s7 s8 s9" "s10 s11 s12"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-10 { grid-area: s10; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-11 { grid-area: s11; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song-12 { grid-area: s12; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-9 ul .song.text { grid-area: sTxt; width: 100%; justify-content: flex-end; padding-right: 30px; padding-bottom: 5px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 { padding-left: 90px; padding-bottom: 15px; min-width: 630px; width: 630px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 .title_img { display: block; width: 100%; max-width: 380px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 .subtitle_img { display: block; width: 100%; max-width: 91px; margin: 0px 0 8px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 p { width: 100%; max-width: 410px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 .img-box { top: 20px; right: 0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 30px; column-gap: 30px; grid-template-areas: "s0 s1 s2" "s3 s4 s5" "s6 s7 s8" "s9 . ." ". . sTxt"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-10 ul .song.text { grid-area: sTxt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 { padding-left: 60px; padding-top: 40px; min-width: 580px; width: 580px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 .title_img { display: block; width: 100%; max-width: 235px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 .subtitle_img { display: block; width: 100%; max-width: 91px; margin: 0px 0 8px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 p { width: 100%; max-width: 445px; margin: 0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 .img-box { top: 5px; right: 120px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 30px; column-gap: 30px; grid-template-areas: ". sTxt s0" "s1 s2 s3" "s4 s5 s6" "s7 s8 s9" ". . s10"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song-10 { grid-area: s10; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-11 ul .song.text { grid-area: sTxt; width: 100%; justify-content: flex-end; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 { padding-left: 55px; padding-top: 0px; min-width: 490px; width: 490px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 .title_img { display: block; width: 100%; max-width: 255px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 .subtitle_img { display: block; width: 100%; max-width: 91px; margin: 0px 0 3px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 p { width: 100%; max-width: 365px; margin-bottom: 3px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 .img-box { bottom: 5px; right: 0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul { display: grid; grid-template-columns: repeat(2, minmax(min-content, max-content)); -moz-column-gap: 30px; column-gap: 30px; grid-template-areas: "s0 s1" "s2 s3" "s4 s5" "s6 ." "s7 ." "s8 s8" "s9 ." "s10 ." "s11 sTxt"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-10 { grid-area: s10; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song-11 { grid-area: s11; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-12 ul .song.text { grid-area: sTxt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 { padding-left: 60px; padding-top: 55px; min-width: 610px; width: 610px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 .title_img { display: block; width: 100%; max-width: 285px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 .subtitle_img { display: block; width: 100%; max-width: 91px; margin: 0px 0 10px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 p { width: 100%; max-width: 445px; margin-bottom: 10px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 .img-box { top: 35px; right: 60px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul { display: grid; grid-template-columns: repeat(2, minmax(min-content, max-content)); -moz-column-gap: 30px; column-gap: 30px; grid-template-areas: "s0 s1 s2" "s3 s4 s5" "s6 s7 ." ". . sTxt"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-13 ul .song.text { grid-area: sTxt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 { padding-left: 45px; padding-top: 40px; min-width: 445px; width: 445px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 .title_img { display: block; width: 100%; max-width: 280px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 .subtitle_img { display: block; width: 100%; max-width: 91px; margin: 0px 0 10px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 p { width: 100%; max-width: 335px; margin-bottom: 10px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 .img-box { top: 13px; right: 0px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul { display: grid; grid-template-columns: repeat(4, minmax(min-content, max-content)); -moz-column-gap: 40px; column-gap: 40px; grid-template-areas: "s0 s1 s2 s3" "s4 s5 s6 ." "s7 s8 s9 sTxt"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song { width: 100%; justify-content: space-between; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-14 ul .song.text { grid-area: sTxt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 { padding-left: 62px; padding-top: 0px; min-width: 590px; width: 590px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 .title_img { display: block; width: 100%; max-width: 270px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 .subtitle_img { display: block; width: 100%; max-width: 91px; margin: 0px 0 3px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 p { width: 100%; max-width: 445px; margin-bottom: 8px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 .img-box { top: 80px; right: 0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul { display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-areas: "s0 . ." "s1 . ." "s2 . ." "s3 . ." "s4 . ." "s5 . ." "s6 . ." "s7 s8 s9" "s10 s11 ." ". . sTxt"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-10 { grid-area: s10; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song-11 { grid-area: s11; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-15 ul .song.text { grid-area: sTxt; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 { padding-left: 70px; padding-top: 50px; min-width: 1005px; width: 1005px; padding-right: 120px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 .title_img { display: block; width: 100%; max-width: 292px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 .subtitle_img { display: block; width: 100%; max-width: 91px; margin: 0px 0 3px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 p { width: 100%; max-width: 440px; margin-bottom: 8px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 .img-box { top: 7px; right: 495px; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 .img-box:hover .album-record { left: 99%; top: 50%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 .img-box .album-record { left: 93%; top: 43%; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul { margin-top: -40px; display: grid; grid-template-columns: repeat(3, minmax(min-content, max-content)); -moz-column-gap: 20px; column-gap: 20px; grid-template-rows: repeat(6, 14px); grid-template-areas: ". . sTxt" ". . ." ". . s0" "s1 s2 s3" "s4 s5 s6" "s7 s8 s9"; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-0 { grid-area: s0; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-1 { grid-area: s1; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-2 { grid-area: s2; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-3 { grid-area: s3; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-4 { grid-area: s4; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-5 { grid-area: s5; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-6 { grid-area: s6; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-7 { grid-area: s7; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-8 { grid-area: s8; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song-9 { grid-area: s9; } #frame-box #plyty #frame-box-content .frame-box-content-data .box-16 ul .song.text { grid-area: sTxt; } #frame-box #plyty #frame-box-footer { position: absolute; bottom: 0; left: 0; right: 0; height: 106px; background: #000; } #frame-box #plyty #frame-box-footer img.img-scroll { height: 100%; width: unset; max-width: -moz-fit-content; max-width: fit-content; } #frame-box #plyty #frame-box-footer #drag-handle { position: absolute; z-index: 1; bottom: 0; left: 0; height: 83px; } #frame-box #plyty #frame-box-footer #drag-handle .hand { height: 83px; } #frame-box #plyty #frame-box-footer #drag-handle .hand-finder-part-1 { position: absolute; top: -4px; width: 11px; left: 0px; } #frame-box #plyty #frame-box-footer #drag-handle .hand-finder-part-2 { position: absolute; top: -15px; width: 9px; left: 1px; } #frame-box #plyty #frame-box-footer .piano-keys { position: relative; display: flex; flex-direction: row; gap: 1px; height: 66px; background: linear-gradient(0deg, rgb(0, 0, 0) 50%, rgb(255, 255, 255) 150%); } #frame-box #plyty #frame-box-footer .piano-keys 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; } #frame-box #plyty #frame-box-footer .piano-keys ul.ul-27 { width: 227px; background-position: center left; } #frame-box #plyty #frame-box-footer .piano-keys ul li { line-height: 1; font-family: Arial; font-size: 11px; width: 23px; text-align: center; padding-bottom: 4px; } #frame-box #plyty #frame-box-footer .piano-keys ul li.red { color: #cc0000; font-size: 16px; font-weight: 700; } #frame-box #plyty #frame-box-footer .piano-keys ul li.desc { position: relative; } #frame-box #plyty #frame-box-footer .piano-keys ul li.desc p { width: -moz-max-content; width: max-content; min-width: -moz-max-content; min-width: max-content; font-family: "Kuba", sans-serif; line-height: 1; color: #cc0000; font-size: 22px; font-weight: 400; margin: 0; } #frame-box #plyty #frame-box-footer .piano-keys ul li.desc .desc-top { position: absolute; bottom: 0; left: 0; } #frame-box #plyty #frame-box-footer .piano-keys ul li.desc .desc-top img { position: absolute; bottom: -4px; left: 1px; min-width: 58px; min-height: 83px; } #frame-box #plyty #frame-box-footer .piano-keys ul li.desc .desc-top p { position: absolute; bottom: 64px; left: 62px; } #frame-box #plyty #frame-box-footer .piano-keys ul li.desc .desc-bottom { position: absolute; bottom: 0; left: 0; } #frame-box #plyty #frame-box-footer .piano-keys ul li.desc .desc-bottom img.arrow { position: absolute; bottom: -40px; left: 0px; width: 46px; min-width: 46px; height: 46px; min-height: 46px; } #frame-box #plyty #frame-box-footer .piano-keys ul li.desc .desc-bottom p { position: absolute; bottom: -34px; left: 42px; } #frame-box #plyty #frame-box-footer .piano-keys ul li .desc-bottom-imgs { display: flex; flex-direction: row; align-items: center; -moz-column-gap: 10px; column-gap: 10px; position: absolute; bottom: -40px; left: 55px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-1 .desc-bottom-imgs .desc-bottom-img-1 { width: 29px; min-width: 29px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-1 .desc-bottom-imgs .desc-bottom-img-2 { width: 195px; min-width: 195px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-1 .desc-bottom-imgs .desc-bottom-img-3 { width: 140px; min-width: 140px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-6 .arrow { bottom: -30px !important; height: 28px !important; min-height: 28px !important; } #frame-box #plyty #frame-box-footer .piano-keys .ul-6 .desc-bottom-imgs { right: 5px !important; left: auto !important; } #frame-box #plyty #frame-box-footer .piano-keys .ul-6 .desc-bottom-imgs .desc-bottom-img-1 { width: 27px; min-width: 27px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-6 .desc-bottom-imgs .desc-bottom-img-2 { width: 180px; min-width: 180px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-6 .desc-bottom-imgs .desc-bottom-img-3 { width: 180px; min-width: 180px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-7 .desc-bottom { left: -8px !important; } #frame-box #plyty #frame-box-footer .piano-keys .ul-7 .arrow { bottom: -30px !important; height: 28px !important; min-height: 28px !important; } #frame-box #plyty #frame-box-footer .piano-keys .ul-7 .desc-bottom-imgs .desc-bottom-img-1 { width: 26px; min-width: 26px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-7 .desc-bottom-imgs .desc-bottom-img-2 { width: 293px; min-width: 293px; } #frame-box #plyty #frame-box-footer .piano-keys .ul-7 .desc-bottom-imgs .desc-bottom-img-3 { width: 91px; min-width: 91px; } #frame-box #foto { height: 100%; display: flex; align-items: center; } #frame-box #foto ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 30px; } #frame-box #foto ul li { width: 100%; max-width: calc(14.2857142857% - 30px); } @media (max-width: 768px) { #frame-box #foto ul li { max-width: calc(25% - 30px); } } #frame-box #foto ul li img { width: 100%; max-width: -moz-fit-content; max-width: fit-content; aspect-ratio: 1; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; } #frame-box #book { width: -moz-fit-content; width: fit-content; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; display: none; } #frame-box #book::before { content: ""; position: fixed; background: rgba(0, 0, 0, 0.8); width: 100vw; height: 100vh; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } #frame-box #book .book-actions { display: flex; flex-direction: row; justify-content: space-between; } #frame-box #book .book-actions .book-close, #frame-box #book .book-actions .book-contents { position: relative; width: -moz-fit-content; width: fit-content; cursor: pointer; z-index: 1; } #frame-box #book .book-actions .book-close p, #frame-box #book .book-actions .book-contents p { padding: 5px 10px; margin-bottom: 0; font-family: "Galileo", sans-serif; line-height: 1; color: #cc0000; font-size: 20px; text-transform: uppercase; margin: 0 0 5px 0; } #frame-box #book .book-actions .book-close { margin-left: auto; } #frame-box #book #flipbook { position: relative; } #frame-box #book #flipbook .hard { position: relative; } #frame-box #book #flipbook .hard img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #frame-box #book #flipbook .page-wrapper[page="2"] { transform: none !important; position: relative !important; } #frame-box #book #flipbook .page-wrapper[page="2"] > div { position: relative !important; } #frame-box #book #flipbook .page-wrapper[page="2"] * { 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; } .post-739 .page-content #flipbook .hard img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .page-footer { padding: 10px 0; display: flex; flex-direction: column; row-gap: 10px; text-align: center; } .page-footer .footer-title { color: #fff; font-size: 24px; margin: 0; } .page-footer img { width: 100%; max-width: 100px; filter: brightness(0) invert(1); } .page-footer 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: 10.5%; bottom: 0; left: 0; right: 0; list-style: none; flex-direction: column; z-index: 999999; display: block; height: 84.2%; } .table-of-contents li { display: block; height: 4.7619047619%; } .table-of-contents li a { position: relative; display: block; height: 100%; width: 100%; z-index: 999; } .table-of-contents li ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; height: 100%; width: 100%; } .table-of-contents li ul.custom-1 li:nth-child(1) { width: 29%; } .table-of-contents li ul.custom-1 li:nth-child(2) { width: 71%; } .table-of-contents li ul.custom-2 li:nth-child(1) { width: 53%; } .table-of-contents li ul.custom-2 li:nth-child(2) { width: 47%; } .table-of-contents li ul.custom li { height: 100% !important; } .table-of-contents li ul.custom li 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; } body.page-id-846 #content .page-content { max-width: unset !important; width: 100vw; } }/*# sourceMappingURL=custom.css.map */