@font-face {
font-family: 'SomeTimeLater';
src: url('/content/fonts/SomeTimeLater.woff2') format('woff2'),
url('/content/fonts/SomeTimeLater.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PlaypenSans';
src: url('/content/fonts/PlaypenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PlaypenSans';
src: url('/content/fonts/PlaypenSans-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
*
{
box-sizing: border-box;
}
html,
body
{
margin: 0;
padding: 0;
}
body > svg
{
width: 100%;
height: 100%;
}
body > svg:last-of-type
{
display: none;
}
@media (max-width: 1023px)
{
body > svg:first-of-type
{
display: none;
}
body > svg:last-of-type
{
display: block;
}
}
input:not([type="submit"])::placeholder
{
opacity: 0.3;
}
input:not([type="submit"])
{
font-family: SomeTimeLater;
font-size: 20px;
line-height: 1.3;
display: block;
text-align: center;
margin-inline: auto;
background: transparent;
border: none;
height: 34px;
width: 293px;
background: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: bottom center;
outline: none;
}
.button-wrapper
{
position: relative;
display: block;
width: fit-content;
margin-inline: auto;
margin-top: 38px;
}
.button-wrapper input[type="submit"],
.button-wrapper button
{
position: relative;
color: black;
cursor: pointer;
font-family: SomeTimeLater;
font-size: 26px;
border: none;
background: transparent;
padding: 16px 60px 8px;
z-index: 2;
transition: color 0.3s ease;
}
.button-wrapper::before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') center / 100% 100% no-repeat;
z-index: 1;
transition: filter 0.3s ease;
}
.button-wrapper:hover::before
{
filter: brightness(0);
}
.button-wrapper:hover input[type="submit"],
.button-wrapper button
{
color: #eefe6f;
}
button.close
{
position: absolute;
right: 176px;
top: -25px;
width: 64px;
height: 64px;
padding: 0;
background: url('data:image/svg+xml,');
background-size: 100%;
background-repeat: no-repeat;
border: none;
border-radius: 50%;
cursor: pointer;
pointer-events: all;
}
@media (max-width: 1511px)
{
input:not([type="submit"])
{
font-size: 18px;
width: 293px;
height: 31px;
}
.button-wrapper
{
margin-top: 32px;
}
.button-wrapper input[type="submit"],
.button-wrapper button
{
font-size: 20px;
padding: 10px 48px 6px;
}
button.close
{
width: 48px;
height: 48px;
right: 0;
top: 0;
}
}
@media (max-width: 1023px)
{
input:not([type="submit"])
{
font-size: 16px;
width: 220px;
height: 29px;
}
.button-wrapper
{
margin-top: 24px;
}
}
dialog
{
position: fixed;
top: 0;
width: 100%;
height: 100%;
padding: 0;
background-color: #141414b3;
border: transparent;
overflow-y: scroll;
overflow-x: hidden;
padding-block: 64px;
padding-inline: 32px;
}
dialog > div
{
position: relative;
width: 1200px;
max-width: 100%;
padding-block: 32px;
margin: auto;
pointer-events: none;
display: grid;
justify-content: center;
align-items: start;
min-height: 100%;
}
dialog > div > p
{
font-family: PlaypenSans;
font-weight: 300;
color: #ffffff;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
margin-block: 30px 0;
font-size: 12px;
text-align: center;
}
dialog > div > p > a
{
color: #ffffff;
}
dialog > div > form
{
font-family: SomeTimeLater;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-inline: auto;
margin-top: auto;
padding: 0;
background-image: url('data:image/svg+xml,');
background-position: bottom;
background-repeat: no-repeat;
pointer-events: none;
}
dialog > div > form > *
{
pointer-events: all;
}
dialog > div > form > svg.envelope
{
position: absolute;
bottom: 0;
pointer-events: none;
}
dialog > div > form > div
{
height: 585px;
width: 556px;
padding: 44px 40px;
background-image: url('data:image/svg+xml,');
background-position: top center;
background-repeat: no-repeat;
}
dialog > div > form > div > h3
{
font-size: 30px;
text-align: center;
line-height: 115%;
margin: 0 0 24px;
}
dialog > div > form > div > h3:has(+div.inputs)
{
margin: 0 0 60px;
}
dialog > div > form > div > p
{
font-family: PlaypenSans;
font-weight: 500;
font-size: 16px;
text-align: center;
margin: 0 0 60px;
}
dialog div.inputs
{
background: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
padding: 44px;
width: 380px;
height: 260px;
margin-inline: auto;
}
dialog div.inputs input:not([type="submit"])
{
margin-bottom: 12px;
}
@media (max-width: 1511px)
{
dialog
{
padding-block: 20px 8px;
}
dialog > div
{
padding-block: 8px;
}
dialog > div > p
{
font-size: 10px;
margin-block: 24px 0;
}
dialog svg.envelope
{
width: 580px;
height: 368px;
}
dialog > div > form
{
width: 580px;
background-size: contain;
}
dialog > div > form > div
{
width: 539px;
height: 500px;
padding: 32px 36px;
}
dialog > div > form > div > h3
{
font-size: 24px;
margin: 0 0 16px;
}
dialog > div > form > div > p
{
font-size: 14px;
margin: 0 0 44px;
}
dialog > div > form > div > h3:has(+div.inputs)
{
margin: 0 0 44px;
}
dialog div.inputs
{
width: 357px;
padding: 32px;
}
}
@media (max-width: 1023px)
{
dialog > div
{
width: 640px;
padding: 0;
}
dialog > div > p
{
font-size: 8px;
margin-block: 20px 0;
}
dialog > div > form
{
width: 482px;
background-size: contain;
background-position: 0 calc(100% - 10px);
}
dialog > div > form > div
{
width: 428px;
height: 450px;
padding: 32px 24px;
background-size: contain;
}
dialog > div > form > div > h3
{
font-size: 24px;
margin: 0 0 16px;
}
dialog > div > form > div > h3:has(+div.inputs)
{
margin: 0 0 40px;
}
dialog > div > form > div > p
{
font-size: 14px;
margin: 0 0 40px;
}
dialog div.inputs
{
padding: 32px;
width: 284px;
}
dialog svg.envelope
{
width: 483px;
height: 319px;
}
}
@media (max-width: 639px)
{
dialog
{
padding-block: 78px 16px;
}
button.close
{
top: -60px;
}
dialog > div
{
width: 340px;
}
dialog > div > form
{
width: 340px;
background-position: center bottom;
background: transparent;
}
dialog > div > form > div
{
width: 320px;
height: 486px;
background-size: 100% 100%;
}
dialog svg.envelope
{
width: 340px;
height: 319px;
object-fit: cover;
}
dialog svg.envelope > path:first-of-type
{
transform: scaleY(1.2);
}
dialog svg.envelope > *:not(path:first-of-type)
{
transform: translateY(20%);
}
}
@keyframes slideUp
{
0% {
transform: translateY(132px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideDown
{
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(132px);
opacity: 0;
}
}
dialog[open] > div > form > div
{
animation: slideUp 0.6s ease-out 0.1s forwards;
}
dialog.dialog-1 > div > form > div,
dialog.dialog-3 > div > form > div,
dialog.dialog-13 > div > form > div,
dialog.dialog-17 > div > form > div,
dialog.dialog-27 > div > form > div
{
margin-bottom: 202px;
opacity: 0;
}
dialog.dialog-7 > div > form > div,
dialog.dialog-21 > div > form > div,
dialog.dialog-29 > div > form > div
{
margin-bottom: 220px;
opacity: 0;
}
dialog.dialog-9 > div > form > div,
dialog.dialog-23 > div > form > div
{
margin-bottom: 182px;
opacity: 0;
}
dialog.dialog-5 > div > form > div,
dialog.dialog-15 > div > form > div,
dialog.dialog-19 > div > form > div,
dialog.dialog-31 > div > form > div
{
margin-bottom: 158px;
opacity: 0;
}
dialog.dialog-11 > div > form > div
{
margin-bottom: 134px;
}
dialog.dialog-25 > div > form > div
{
margin-bottom: 256px;
}
dialog > div > form > div
{
margin-bottom: 134px;
}
@media (max-width: 1511px)
{
@keyframes slideUp
{
0% {
transform: translateY(52px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideDown
{
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(52px);
opacity: 0;
}
}
dialog.dialog-1 > div > form > div,
dialog.dialog-7 > div > form > div,
dialog.dialog-15 > div > form > div,
dialog.dialog-27 > div > form > div,
dialog.dialog-31 > div > form > div
{
margin-bottom: 100px;
}
dialog.dialog-3 > div > form > div,
dialog.dialog-13 > div > form > div,
dialog.dialog-17 > div > form > div
{
margin-bottom: 130px;
}
dialog.dialog-5 > div > form > div,
dialog.dialog-11 > div > form > div,
dialog.dialog-19 > div > form > div
{
margin-bottom: 64px;
}
dialog.dialog-9 > div > form > div,
dialog.dialog-21 > div > form > div,
dialog.dialog-29 > div > form > div
{
margin-bottom: 116px;
}
dialog.dialog-23 > div > form > div
{
margin-bottom: 98px;
}
dialog.dialog-25 > div > form > div
{
margin-bottom: 145px;
}
dialog > div > form > div
{
margin-bottom: 134px;
}
}
@media (max-width: 1023px)
{
@keyframes slideUp
{
0% {
transform: translateY(82px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideDown
{
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(82px);
opacity: 0;
}
}
dialog.dialog-1 > div > form > div,
dialog.dialog-3 > div > form > div,
dialog.dialog-13 > div > form > div,
dialog.dialog-17 > div > form > div,
dialog.dialog-27 > div > form > div
{
margin-bottom: 132px;
}
dialog.dialog-7 > div > form > div,
dialog.dialog-21 > div > form > div,
dialog.dialog-29 > div > form > div
{
margin-bottom: 144px;
}
dialog.dialog-5 > div > form > div,
dialog.dialog-15 > div > form > div,
dialog.dialog-19 > div > form > div,
dialog.dialog-31 > div > form > div
{
margin-bottom: 94px;
}
dialog.dialog-9 > div > form > div
{
margin-bottom: 116px;
}
dialog.dialog-11 > div > form > div,
dialog.dialog-23 > div > form > div
{
margin-bottom: 98px;
}
dialog.dialog-25 > div > form > div
{
margin-bottom: 174px;
}
dialog > div > form > div
{
margin-bottom: 134px;
}
}
@media (max-width: 639px)
{
@keyframes slideUp
{
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideDown
{
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(40px);
opacity: 0;
}
}
dialog.dialog-1 > div > form > div,
dialog.dialog-3 > div > form > div,
dialog.dialog-13 > div > form > div,
dialog.dialog-21 > div > form > div,
dialog.dialog-27 > div > form > div
{
margin-bottom: 110px;
}
dialog.dialog-7 > div > form > div,
dialog.dialog-9 > div > form > div,
dialog.dialog-29 > div > form > div
{
margin-bottom: 92px;
}
dialog.dialog-5 > div > form > div,
dialog.dialog-15 > div > form > div,
dialog.dialog-17 > div > form > div,
dialog.dialog-19 > div > form > div,
dialog.dialog-23 > div > form > div
{
margin-bottom: 68px;
}
dialog.dialog-11 > div > form > div,
dialog.dialog-31 > div > form > div
{
margin-bottom: 44px;
}
dialog.dialog-25 > div > form > div
{
margin-bottom: 162px;
}
}
dialog[open] > div > form > div
{
animation: slideUp 0.9s cubic-bezier(0.18, -1.25, 0.165, 1.65) forwards;
}
dialog[open].send > div > form > div {
animation: slideDown 0.5s ease forwards;
}
dialog.dialog-success > div > svg
{
margin-block: auto;
max-width: 100%;
}
svg [id^="POP-"]
{
cursor: pointer;
pointer-events: all;
}
svg *
{
pointer-events: none;
}
.cookie-notification-bar.hide
{
display: none;
}
.cookie-notification-bar
{
position: fixed;
z-index: 99999;
bottom: 32px;
left: 32px;
width: 508px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 16px;
padding: 24px 32px 24px 24px;
box-sizing: border-box
}
.cookie-notification-bar > svg
{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
}
.cookie-notification-bar > svg > path
{
vector-effect: non-scaling-stroke;
}
.cookie-notification-bar > p
{
font-family: SomeTimeLater;
font-size: 24px;
line-height: 140%;
margin: 0;
}
.cookie-notification-bar .button-wrapper
{
margin: 0;
}
.cookie-notification-bar .button-wrapper button
{
padding: 6px 28px 6px;
}
.cookie-notification-bar .button-wrapper:not(:hover)::before
{
filter: brightness(0);
}
.cookie-notification-bar .button-wrapper:hover::before
{
filter: brightness(1);
}
.cookie-notification-bar .button-wrapper:hover button
{
color: #000;
}
.button-wrapper:hover input[type="submit"],
.button-wrapper button
{
color: #eefe6f;
}
.cookie-notification-bar label:has(input[type="checkbox"])
{
width: fit-content;
}
.cookie-notification-bar:has(input:checked) > div.info
{
grid-template-rows: 1fr;
}
.cookie-notification-bar > div.info > p
{
font-size: 18px;
line-height: 130%;
opacity: 0.55;
}
.cookie-notification-bar:not(:has(input:checked)) > div.info > p
{
margin-top: 0;
transition: margin-top .3s ease;
}
.cookie-notification-bar input
{
display: none;
}
.cookie-notification-bar label:has(input[type="checkbox"])
{
margin-bottom: 0;
}
.cookie-notification-bar label:has(input[type="checkbox"])::before,
.cookie-notification-bar label:has(input[type="checkbox"])::after
{
display: none;
}
.cookie-notification-bar a
{
text-decoration: underline;
}
.cookie-notification-bar p
{
color: #000;
width: fit-content;
}
.cookie-notification-bar p
{
margin-right: auto;
padding-top: 4px;
}
.cookie-notification-bar label
{
display: flex;
align-items: center;
cursor: pointer;
}
.cookie-notification-bar label svg
{
transition: opacity 0.3s ease-in-out;
width: 38px;
height: 38px;
}
.cookie-notification-bar label:hover svg
{
opacity: 0.8;
}
.cookie-notification-bar div.info
{
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-in-out;
}
.cookie-notification-bar div.info > p
{
font-family: PlaypenSans;
font-weight: 300;
font-size: 18px;
margin-block: 20px 0;
padding: 0;
overflow: hidden;
transition: margin-top 0.3s ease-in-out;
}
.cookie-notification-bar:not(:has(input:checked)) > div.info > p
{
margin-top: 0;
}
.cookie-notification-bar > div.info > p > a
{
color: #000;
}
@media (max-width: 1023px)
{
.cookie-notification-bar
{
width: 340px;
padding: 20px 16px 20px 16px;
columns-gap: 12px;
}
.cookie-notification-bar > p,
.cookie-notification-bar > button
{
font-size: 16px;
}
.cookie-notification-bar > button
{
padding: 9px 24px;
}
.cookie-notification-bar> div.info > p
{
font-size: 14px;
margin-top: 12px;
}
.cookie-notification-bar label svg
{
width: 28px;
height: 28px;
}
}
@media (max-width: 639px)
{
.cookie-notification-bar
{
left: calc((100% - 340px) / 2);
}
}
svg [id^="SNOWFLAKE-"] > g
{
transform-origin: center;
transform-box: fill-box;
will-change: transform;
}
svg [id^="SNOWFLAKE-"]:nth-of-type(2n + 1) > g
{
animation: snowflake-rotate 30s linear infinite;
}
svg [id^="SNOWFLAKE-"]:nth-of-type(2n) > g
{
animation: snowflake-rotate-2 30s linear infinite;
}
@keyframes snowflake-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes snowflake-rotate-2 {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
svg path[id^="THREEBALL-1"],
svg path[id^="THREEBALL-3"],
svg path[id^="THREEBALL-5"],
svg path[id^="THREEBALL-7"],
svg path[id^="THREEBALL-9"],
svg path[id^="THREEBALL-11"],
svg path[id^="THREEBALL-13"]
{
animation: color-change 1s infinite;
will-change: fill;
}
svg path[id^="THREEBALL-2"],
svg path[id^="THREEBALL-4"],
svg path[id^="THREEBALL-6"],
svg path[id^="THREEBALL-8"],
svg path[id^="THREEBALL-10"],
svg path[id^="THREEBALL-12"],
svg path[id^="THREEBALL-14"]{
animation: color-change-2 1s infinite;
will-change: fill;
}
@keyframes color-change {
0% {
fill: #D56662;
}
25% {
fill: #934845;
}
50% {
fill: #934845;
}
100% {
fill: #D56662;
}
}
@keyframes color-change-2 {
0% {
fill: #934845;
}
25% {
fill: #D56662;
}
50% {
fill: #D56662;
}
100% {
fill: #934845;
}
}
svg [id^="WHEEL"]
{
animation: wheel-rock 0.2s ease-in-out infinite alternate;
transform-origin: center;
transform-box: fill-box;
will-change: transform;
}
svg [id^="BEAR"]
{
animation: wheel-rock 1s ease-in-out infinite alternate;
transform-origin: center;
transform-box: fill-box;
will-change: transform;
}
@keyframes wheel-rock
{
0%, 100% {
transform: rotate(-1deg);
}
50% {
transform: rotate(2deg);
}
}
svg [id^="FIREWORK"]{
animation: firework-fade 4s ease-in-out infinite;
transform-origin: center;
transform-box: fill-box;
will-change: transform, opacity, rotate;
}
@keyframes firework-fade {
0%, 100% {
transform: scale(0.7);
rotate: 0;
opacity: 0;
}
50% {
transform: scale(1);
rotate: 5deg;
opacity: 1;
}
}
svg [id^="BENGALFIRE-1"] {
animation: bengal-blaze 0.4s ease-in-out infinite alternate;
transform-origin: center;
transform-box: fill-box;
will-change: transform, opacity;
}
svg [id^="BENGALFIRE-2"] {
animation: bengal-blaze-2 0.3s ease-in-out infinite alternate;
transform-origin: center;
transform-box: fill-box;
will-change: transform, opacity;
}
@keyframes bengal-blaze {
0% {
transform: scale(0.75);
opacity: 0.3;
}
100% {
transform: scale(1.05);
opacity: 1;
}
}
@keyframes bengal-blaze-2 {
0% {
transform: scale(0.75);
opacity: 0.3;
}
100% {
transform: scale(1.05);
opacity: 1;
}
}
svg #DOGTAIL
{
transform-origin: 100% 100%;
transform-box: fill-box;
animation: wag-tail 0.8s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes wag-tail {
0% {
transform: rotate(-2deg);
}
100% {
transform: rotate(18deg);
}
}
svg:has(#POP-1:hover) #POPNUM-1,
svg:has(#POP-3:hover) #POPNUM-3,
svg:has(#POP-5:hover) #POPNUM-5,
svg:has(#POP-7:hover) #POPNUM-7,
svg:has(#POP-21:hover) #POPNUM-21,
svg:has(#POP-29:hover) #POPNUM-29 {
fill: #FFFFFF !important;
}
svg:has(#POP-9:hover) #POPNUM-9 {
fill: #D56662 !important;
}
svg:has(#POP-11:hover) #POPNUM-11,
svg:has(#POP-13:hover) #POPNUM-13,
svg:has(#POP-23:hover) #POPNUM-23,
svg:has(#POP-25:hover) #POPNUM-25 {
fill: #FFFFFF !important;
}
svg:has(#POP-15:hover) #POPNUM-15,
svg:has(#POP-17:hover) #POPNUM-17,
svg:has(#POP-19:hover) #POPNUM-19 {
fill: #EEFE6F !important;
}
svg:has(#POP-11:hover) #POP-11,
svg:has(#POP-13:hover) #POP-13,
svg:has(#POP-23:hover) #POP-23,
svg:has(#POP-25:hover) #POP-25 {
fill: #D56662 !important;
}
svg:has(#POP-27:hover) #POP-27,
svg:has(#POP-31:hover) #POP-31 {
fill: #EEFE6F !important;
}
#POPSNOW-11,
#SANTA,
#POPFRAME-27 {
transform-origin: center !important;
transform-box: fill-box !important;
transition: transform 0.5s ease !important;
will-change: transform;
}
svg:has(#POP-11:hover) #POPSNOW-11 {
transform: rotate(40deg) !important;
}
svg:has(#POP-13:hover) #SANTA {
transform: rotate(5deg) !important;
}
svg:has(#POP-27:hover) #POPFRAME-27 {
transform: rotate(2deg) !important;
}
svg [id^="POP"]
{
transition: all 0.3s ease !important;
}
[id^="THREESTAR"] {
animation: threestar-blink 2s ease-in-out infinite;
will-change: fill;
}
@keyframes threestar-blink {
0%, 100% {
fill: #EEFE6F;
}
50% {
fill: #FDFFE9;
}
}
/* Первая цифра */
#YEARNUM-1
{
fill: black;
animation: num1 .01s ease-in-out forwards 1s;
will-change: fill;
}
@keyframes num1
{
0% {
fill: black;
}
100% {
fill: white;
}
}
svg.desktop-svg #YEARCIR-1
{
filter: none;
animation: num1filterdesk .01s ease-in-out forwards 1s;
will-change: filter;
}
@keyframes num1filterdesk {
100% {
filter: url(#filter0_d_2061_106186);
}
}
svg.mobile-svg #YEARCIR-1
{
filter: none;
animation: num1filtermobile .01s ease-in-out forwards 1s;
will-change: filter;
}
@keyframes num1filtermobile {
100% {
filter: url(#filter0_d_2061_106186_m);
}
}
#YEARCIR-1 > path:first-child
{
fill: black;
animation: num1background .01s ease-in-out forwards 1s;
will-change: fill;
}
@keyframes num1background
{
0% {
fill: black;
}
100% {
fill: #D56662;
}
}
/* Третья цифра */
#YEARNUM-3 {
fill: black;
animation: num3text .01s ease-in-out forwards 1.25s;
will-change: fill;
}
@keyframes num3text
{
100% {
fill: white;
}
}
svg.desktop-svg #YEARCIR-3
{
filter: none;
animation: num3filterdesk .01s ease-in-out forwards 1.25s;
will-change: filter;
}
@keyframes num3filterdesk
{
100% {
filter: url(#filter1_d_2061_106186);
}
}
svg.mobile-svg #YEARCIR-3
{
filter: none;
animation: num3filtermobile .01s ease-in-out forwards 1.25s;
will-change: filter;
}
@keyframes num3filtermobile
{
100% {
filter: url(#filter1_d_2061_106186_m);
}
}
#YEARCIR-3 > path:first-child
{
fill: black;
animation: num3background .01s ease-in-out forwards 1.25s;
will-change: fill;
}
@keyframes num3background
{
100% {
fill: #D56662;
}
}
/* Вторая цифра */
#YEARNUM-2 {
fill: black;
animation: num2text .01s ease-in-out forwards 1.9s;
will-change: fill;
}
@keyframes num2text
{
100% {
fill: white;
}
}
svg.desktop-svg #YEARCIR-2
{
filter: none;
animation: num2filterdesk .01s ease-in-out forwards 1.9s;
will-change: filter;
}
@keyframes num2filterdesk
{
100% {
filter: url(#filter3_d_2061_106186);
}
}
svg.mobile-svg #YEARCIR-2
{
filter: none;
animation: num2filtermobile .01s ease-in-out forwards 1.9s;
will-change: filter;
}
@keyframes num2filtermobile
{
100% {
filter: url(#filter3_d_2061_106186_m);
}
}
#YEARCIR-2 > path:first-child
{
fill: black;
animation: num2background .21s ease-in-out forwards 1.7s;
will-change: fill;
}
@keyframes num2background
{
0% {
fill: black;
}
5% {
fill: #934845;
}
95% {
fill: #934845;
}
100% {
fill: #D56662;
}
}
/* Четвертая цифра */
#YEARNUM-4 {
fill: black;
animation: num4text .01s ease-in-out forwards 2.1s;
will-change: fill;
}
@keyframes num4text
{
100% {
fill: white;
}
}
svg.desktop-svg #YEARCIR-4
{
filter: none;
animation: num4filterdesc .01s ease-in-out forwards 2.1s;
will-change: filter;
}
@keyframes num4filterdesc
{
100% {
filter: url(#filter2_d_2061_106186);
}
}
svg.mobile-svg #YEARCIR-4
{
filter: none;
animation: num4filtermobile .01s ease-in-out forwards 2.1s;
will-change: filter;
}
@keyframes num4filtermobile
{
100% {
filter: url(#filter2_d_2061_106186_m);
}
}
#YEARCIR-4 > path:first-child
{
fill: black;
animation: num4background .42s ease-in-out forwards 1.7s;
will-change: fill;
}
@keyframes num4background
{
0% {
fill: black;
}
3% {
fill: #934845;
}
98% {
fill: #934845;
}
100% {
fill: #D56662;
}
}
[id^="LIGHTSSECOND"]
{
animation: flickerRed 0.8s infinite alternate;
will-change: fill;
}
[id^="LIGHTSFIRST"]
{
animation: flickerGreen 0.8s infinite alternate;
will-change: fill;
}
@keyframes flickerRed
{
0%, 100% {
fill: #AAFF00;
}
50% {
fill: #D28A88;
}
}
@keyframes flickerGreen
{
0%, 100% {
fill: #D28A88;
}
50% {
fill: #AAFF00;
}
}
svg.desktop-svg [id^="PONY"]
{
transform-origin: 910px 960px;
animation: rotatePony 2s infinite alternate ease-in-out;
}
svg.mobile-svg [id^="PONY"]
{
transform-origin: 480px 620px;
animation: rotatePony 2s infinite alternate ease-in-out;
}
@keyframes rotatePony {
0% {
transform: rotate(-4deg);
}
100% {
transform: rotate(4deg);
}
}
svg a,
svg a *
{
pointer-events: all !important;
}
svg.desktop-svg [id="LEG-1"]
{
transform-origin: 1298px 7790px;
animation: rotateLeg 2s infinite alternate ease-in-out;
}
svg.desktop-svg [id="LEG-2"]
{
transform-origin: 1298px 7790px;
animation: rotateLeg2 2s infinite alternate ease-in-out;
}
svg.mobile-svg [id="LEG-1"]
{
transform-origin: 698px 4890px;
animation: rotateLeg 2s infinite alternate ease-in-out;
}
svg.mobile-svg [id="LEG-2"]
{
transform-origin: 698px 4890px;
animation: rotateLeg2 2s infinite alternate ease-in-out;
}
@keyframes rotateLeg {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
@keyframes rotateLeg2 {
0% {
transform: rotate(20deg);
}
100% {
transform: rotate(0deg);
}
}
g[id="FIVE"] > circle
{
pointer-events:all;
cursor: pointer;
}