@charset "UTF-8";

@font-face {
    font-family: Gilroy-Regular;
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/Gilroy-U-Regular.woff2") format("woff2")
}

@font-face {
    font-family: Gilroy-Medium;
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/Gilroy-U-Medium.woff2") format("woff2")
}

@font-face {
    font-family: Gilroy-Semibold;
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/Gilroy-Semibold.woff2") format("woff2")
}

@font-face {
    font-family: Gilroy-Bold;
    font-style: normal;
    font-weight: 400;
    src: url("../assets/fonts/Gilroy-U-Bold.woff2") format("woff2")
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    stroke: #0a0a0a
}

ul {
    list-style: none;
    padding-left: 1rem
}

ul.list-check li::marker {
    color: #4caf50 !important;
    content: "✔";
    font-size: clamp(1.5rem, .5rem + var(--vw) * .8, 4rem)
}

ul li {
    list-style-position: outside;
    padding-left: 1rem;
    text-indent: 0
}

ul li::before {
    content: none
}

ul li::marker {
    background: 0 0;
    color: #ff9d23;
    content: "⬥";
    display: inline;
    font-size: 1.4rem;
    font-size: clamp(1.4rem, .5rem + var(--vw) * .7, 4rem);
    margin-right: 5px;
    text-align: start !important;
    text-align-last: start !important;
    text-indent: 0 !important;
    text-transform: none
}

.text-xs {
    font-size: 1.2rem;
    line-height: 1.6rem
}

.text-sm {
    font-size: 1.4rem;
    line-height: 2rem
}

.text-base {
    font-size: 1.6rem;
    line-height: 2.4rem
}

.text-lg {
    font-size: 1.8rem;
    line-height: 2.8rem
}

.text-xl {
    font-size: 2rem;
    line-height: 2.8rem
}

.font-bold {
    font-weight: 700
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

@media (max-width:480px) {
    h2 {
        margin: 3rem 0 1.5rem
    }

    ul li::before {
        margin-right: .5rem
    }
}

*,
::after,
::before {
    border: 0 solid #e5e7eb;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --rem: 10px !important
}

html {
    font-size: 10px !important;
    line-height: 1.5 !important;
    scroll-behavior: smooth !important
}

body,
html {
    height: calc(var(--vh) * 100) !important;
    overflow: hidden !important;
    width: calc(var(--vw) * 100) !important
}

a {
    color: #0a0a0a;
    text-decoration: none
}

button,
input,
textarea {
    background: 0 0;
    border: none;
    font: inherit;
    outline: 0
}

body {
    align-items: center;
    background-color: #fff;
    color: #0a0a0a;
    display: block;
    font-family: Gilroy-Regular, Roboto, sans-serif;
    font-optical-sizing: auto;
    font-size: 1.6rem;
    font-size: clamp(1.4rem, 1rem + var(--vw) * .5, 4.5rem);
    font-style: normal;
    font-weight: 400
}

:root {
    --ai-trainer: #1ac5c8;
    --audiovisual-translator: #f9844f;
    --conference-interpreter: #004225;
    --content-manager: #ff7700;
    --copy-editor: #FF4081;
    --copywriter: #ff4f5b;
    --sworn-translator: #b74e50;
    --course-developer: #410544;
    --digital-linguist: #a2076c;
    --language-teacher: #ff0055;
    --guide-interpreter: #DDA0DD;
    --web-marketer: #a543ab;
    --linguist: #ff676c;
    --interpreter: #76047c;
    --language-coach: #2d5afd;
    --language-consultant: #32CD32;
    --language-professional: #049704;
    --literary-editor: #8ea6ff;
    --literary-translator: #86d871;
    --machine-post-editor: #0930bc;
    --media-translator: #c94932;
    --notary-translator: #483D8B;
    --pedagogical-designer: #4682B4;
    --seo-specialist: #e48a0e;
    --technical-writer: #aa2121;
    --terminologist: #800000;
    --tour-manager: #ffa600;
    --transcreator: #c46363;
    --translation-editor: #70a309;
    --project-manager: #556B2F;
    --translator: #005fbc;
    --translator-assistant: #dd0490;
    --content-producer: #f59f00;
    --industrial-translator: #485b8a;
    --subtitler: #e42632;
    --tutor: #00A86B;
    --video-game-localizer: #120377
}

.flex {
    display: flex
}

.flex-1 {
    flex: 1 1 0%
}

.flex-col {
    flex-direction: column
}

.gap-8 {
    gap: .8rem
}

.gap-20 {
    gap: 2rem
}

.h-60 {
    height: 6rem
}

.h-screen {
    height: calc(var(--vh) * 100);
    height: calc(var(--vh, calc(var(--vh) * 1)) * 100)
}

.height-full {
    height: 100%
}

.hidden {
    display: none !important
}

.inline-flex {
    display: inline-flex
}

.items-center {
    align-items: center
}

.items-end {
    align-items: end
}

.justify-between {
    justify-content: space-between
}

.m-8 {
    margin: .8rem
}

.mb-8 {
    margin: .8rem
}

.mb-16 {
    margin: 1.6rem
}

.overflow-hidden {
    overflow: hidden
}

.overflow-y-auto {
    overflow-y: auto
}

.p-16 {
    padding: 1.6rem
}

.relative {
    position: relative
}

.rounded-md {
    border-radius: calc(10px - 2px)
}

.scrollbar-none {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.scrollbar-none::-webkit-scrollbar {
    display: none
}

.self-center {
    align-self: center
}

.self-end {
    align-self: flex-end
}

.z-10 {
    z-index: 10
}

.whitespace-nowrap {
    white-space: nowrap
}

.width-full {
    width: 100%
}

.width-4_8 {
    width: 4.8rem
}

@media (min-width:768px) {
    .width-28 {
        width: 28rem
    }
}

@media (min-width:1024px) {
    .width-32 {
        width: 32rem
    }
}

.border-b,
.border-y {
    border-bottom-width: 1px
}

.border-r {
    border-right-width: 1px
}

.bg-background {
    background-color: #fff
}

.bg-gray-lt {
    background-color: #fbfbfb
}

.transition-all {
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.duration-300 {
    transition-duration: .3s
}

.transition-width {
    transition: width .25s ease-out
}

.header {
    border-bottom: 1px solid #f0f0f0;
    z-index: 100
}

.header-container {
    align-items: center;
    display: flex;
    height: 6rem;
    justify-content: space-between;
    margin: auto;
    padding: 0 1rem;
    width: 100%
}

.header-title {
    color: #38387f;
    font-family: Gilroy-Bold, Roboto, sans-serif;
    font-size: 2rem;
    font-size: clamp(1.5rem, 1.5rem + var(--vw) * 1, 6rem);
    font-style: normal;
    line-height: 2.8rem
}

.header picture {
    align-self: center;
    display: flex;
    justify-self: center
}

@media (max-width:480px) {
    .header-container {
        padding: 0 calc(var(--vw) * 3)
    }
}

@media (min-width:1800px) {
    .header-container {
        height: 9rem
    }
}

.footer {
    align-items: center;
    border-top: 1px solid #f0f0f0;
    display: flex;
    height: 3rem;
    justify-content: center;
    width: 100%;
    z-index: 99
}

.footer p {
    color: #38387f;
    font-size: clamp(.8rem, .5rem + var(--vw) * .5, 3rem);
    margin: calc(var(--vh) * .5) auto;
    padding: 0 calc(var(--vw) * 7);
    text-align: center
}

.footer p a {
    color: #38387f;
    cursor: pointer;
    text-decoration: none
}

.footer p a:hover {
    color: #d95300;
    font-family: Gilroy-Medium, Roboto, sans-serif;
    font-weight: 500
}

@media (max-width:486px) {
    .footer {
        height: 4rem
    }

    .footer p span:nth-of-type(2) {
        display: block
    }
}

@media (min-width:1800px) {
    .footer {
        height: 5rem
    }
}

.page-body {
    display: flex;
    flex-direction: column;
    height: calc(var(--vh) * 100) !important;
    height: -webkit-fill-available;
    overflow: hidden !important;
    position: relative
}

.city {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    z-index: 0
}

.city-container {
    background: linear-gradient(to top, #96d1ec 40%, #d0e5f7);
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden !important;
    position: relative;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scrollbar-color: #fbfbfb #e5dccf;
    scrollbar-width: thin;
    width: 100%;
    z-index: 1
}

.city-container::before {
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    content: "";
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2
}

.city-container::-webkit-scrollbar {
    background-color: #e5dccf;
    width: 12px
}

.city-container::-webkit-scrollbar-track {
    background-color: #e5dccf;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.city-container::-webkit-scrollbar-thumb {
    background-color: #fbfbfb;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.city-container .spacer-l,
.city-container .spacer-r {
    flex-shrink: 0;
    height: 100%
}

.city-container .spacer-l {
    width: calc(var(--vw) * 10)
}

.city-container .spacer-r {
    width: calc(var(--vw) * 5)
}

.city-wrapper {
    display: flex;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%
}

.city-content {
    align-items: flex-end;
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden !important;
    width: 100%
}

.complex {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    position: relative;
    scroll-snap-align: start;
    width: 100%;
    z-index: 12
}

.complex-container {
    align-items: end;
    background-image: url(../assets/graphics/bg/skyline-russia-long.svg);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: auto 100%;
    display: flex;
    flex-grow: 1;
    gap: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0 calc(var(--vw) * 1.5);
    padding-left: 4rem;
    position: relative;
    scroll-behavior: smooth;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%
}

.complex-container #hidden-mg {
    height: 100%;
    width: 100%
}

.complex-container .road {
    height: 100%;
    width: 100%
}

.building-container {
    display: flex;
    height: calc(var(--vh) * 47.5) !important;
    margin-bottom: 0;
    padding-bottom: calc(var(--vh) * 10);
    position: relative;
    width: auto;
    z-index: 12
}

.building-container img,
.building-container source {
    -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, .45));
    height: 100%;
    object-fit: contain;
    width: auto
}

@media (max-width:480px) {
    .city-content {
        padding: 0
    }

    .complex-container {
        -webkit-scroll-snap-type: x mandatory;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory
    }

    .complex {
        scroll-snap-align: start
    }
}

@media (min-width:481px) {
    .complex-container .spacer-l {
        width: calc(var(--vw) * 3)
    }

    .complex-container .spacer-r {
        width: calc(var(--vw) * 1.5)
    }
}

.main-container {
    background-image: url("../assets/graphics/bg/paper-texture-2.webp");
    background-repeat: repeat
}

.city-bg {
    height: 100%;
    left: 0;
    position: absolute;
    -webkit-scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    top: 0;
    width: 100%;
    z-index: 2
}

.city-bg::after {
    background-color: rgba(255, 255, 255, .2);
    border-radius: 50%;
    content: "";
    height: calc(var(--vw) * 98);
    left: 50%;
    margin-left: 2.4rem;
    overflow: hidden;
    position: fixed;
    top: calc(var(--vh) * 15);
    transform: translateX(-50%);
    width: calc(var(--vw) * 98);
    z-index: 1
}

.sky {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3
}

.bushes {
    background-image: url("../assets/graphics/bg/fence.svg");
    background-repeat: repeat-x;
    background-size: auto;
    bottom: calc(var(--vh) * 9.7);
    height: calc(var(--vh) * 12.7);
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2
}

.lamp-v4 {
    align-self: end;
    height: calc(var(--vh) * 15);
    margin: 0 calc(var(--vh) * .5);
    z-index: 12
}

.lamp-v4.h20 {
    height: calc(var(--vh) * 20) !important
}

.lamp-v4.invisible {
    visibility: none
}

.lamp-v4 img.flipped {
    transform: scaleX(-1)
}

.birds {
    height: 100%;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 4
}

.bird {
    fill: #485b8a;
    height: 40px;
    opacity: .3;
    position: absolute;
    width: 100px
}

.bird-1 {
    left: 40%;
    top: 20%;
    transform: translate(-36%, -40%) scale(.3)
}

.bird-1 .wing {
    animation-duration: .9s !important
}

.bird-2 {
    left: 60%;
    top: 40%;
    transform: translate(-40%, -30%) scale(.5)
}

.bird-2 .wing {
    animation-duration: 1.1s !important
}

.bird-3 {
    left: 75%;
    top: 30%;
    transform: translate(-30%, -60%) scale(.4)
}

.bird-3 .wing {
    animation-duration: .8s !important
}

.bird-4 {
    left: 32%;
    top: 8%;
    transform: translate(-64%, -24%) scale(.4)
}

.bird-4 .wing {
    animation-duration: 1.2s !important
}

.bird .wing {
    transform-origin: 50% 50%
}

.bird .left-wing {
    animation: 1s flap-left linear infinite alternate
}

.bird .right-wing {
    animation: 1s flap-right linear infinite alternate
}

@keyframes flap-left {
    0% {
        transform: rotate(5deg)
    }

    50% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-15deg)
    }
}

@keyframes flap-right {
    0% {
        transform: rotate(-5deg)
    }

    50% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(15deg)
    }
}

@keyframes birdfloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

.clouds {
    height: 100%;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.cloud {
    animation: moveClouds 60s linear infinite;
    aspect-ratio: 1;
    background-size: contain;
    height: calc(var(--vh) * 34);
    opacity: .55;
    position: absolute
}

.cloud1 {
    animation: moveClouds1 50s linear infinite;
    background: url("../assets/graphics/bg/cloud-1.svg") no-repeat center center;
    left: 10%;
    top: 0
}

.cloud1r {
    left: auto;
    right: 10%;
    top: 3%
}

.cloud2 {
    animation: moveClouds2 60s linear infinite;
    background: url("../assets/graphics/bg/cloud-2.svg") no-repeat center center;
    left: 20%;
    top: 6%
}

.cloud2r {
    left: auto;
    right: 20%;
    top: 9%
}

.cloud3 {
    animation: moveClouds3 55s linear infinite;
    background: url("../assets/graphics/bg/cloud-3.svg") no-repeat center center;
    height: calc(var(--vh) * 36);
    left: 30%;
    top: 12%
}

.cloud3r {
    left: auto;
    right: 30%;
    top: 15%
}

.cloud4 {
    animation: moveClouds4 60s linear infinite;
    background: url("../assets/graphics/bg/cloud-4.svg") no-repeat center center;
    left: 50%;
    top: 18%
}

.cloud4r {
    left: auto;
    right: 50%;
    top: 21%
}

.cloud5 {
    animation: moveClouds5 65s linear infinite;
    background: url("../assets/graphics/bg/cloud-5.svg") no-repeat center center;
    left: 60%;
    top: 24%
}

.cloud5r {
    left: auto;
    right: 60%;
    top: 27%
}

.cloud6 {
    animation: moveClouds6 75s linear infinite;
    background: url("../assets/graphics/bg/cloud-6.svg") no-repeat center center;
    left: 80%;
    top: 30%
}

.cloud6r {
    left: auto;
    right: 80%;
    top: 33%
}

@keyframes flying {
    0% {
        d: path("M 5 5 Q 25 0 50 15 L 50 25 Q 25 5 5 5 M 95 5 Q 75 0 50 15 L 50 25 Q 75 5 95 5")
    }

    50% {
        d: path("M 5 10 Q 25 5 50 15 L 50 25 Q 25 10 5 10 M 95 10 Q 75 5 50 15 L 50 25 Q 75 10 95 10")
    }

    100% {
        d: path("M 7 30 Q 25 25 50 15 L 50 25 Q 25 30 7 30 M 93 30 Q 75 25 50 15 L 50 25 Q 75 30 93 30")
    }
}

@keyframes moveClouds {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--vw) * 100))
    }
}

@keyframes moveClouds1 {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--vw) * -100))
    }
}

@keyframes moveClouds2 {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--vw) * 100))
    }
}

@keyframes moveClouds3 {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--vw) * -100))
    }
}

@keyframes moveClouds4 {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--vw) * 100))
    }
}

@keyframes moveClouds5 {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--vw) * -100))
    }
}

@keyframes moveClouds6 {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--vw) * 100))
    }
}

@media (min-width:601px) and (max-width:768px) {
    .city-bg::after {
        top: calc(var(--vh) * 20)
    }
}

@media (min-width:469px) and (max-width:600px) {
    .city-bg::after {
        top: calc(var(--vh) * 29)
    }
}

@media (max-width:468px) {
    .city-bg::after {
        top: calc(var(--vh) * 42)
    }
}

@media (orientation:portrait) {
    .city-bg::after {
        bottom: calc(var(--vh) * 9);
        top: auto
    }
}

@supports (-webkit-touch-callout:none) {
    .lamp-v4 {
        margin-bottom: calc(var(--vh) * -.5)
    }

    #building-administration .lamp-v4 {
        margin-bottom: calc(var(--vh) * 1.6)
    }
}

.modal-container {
    align-items: center;
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    height: calc(var(--vh) * 100);
    height: calc(var(--vh, calc(var(--vh) * 1)) * 100);
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity .3s ease-in-out;
    visibility: hidden;
    width: calc(var(--vw) * 100);
    z-index: 1000
}

.modal-container.show {
    opacity: 1;
    visibility: visible
}

.modal-container h2 {
    font-family: Gilroy-Medium, Roboto, sans-serif;
    font-size: 2.4rem;
    font-size: clamp(2rem, 1rem + var(--vw) * 1.2, 5rem);
    font-weight: 500;
    margin: 2.5rem 0 1.5rem
}

.modal-container h3 {
    font-family: Gilroy-Semibold, Roboto, sans-serif;
    font-size: 2rem;
    font-size: clamp(1.7rem, 1rem + var(--vw) * .9, 4rem);
    margin: 2rem 0 .5rem
}

.modal-content {
    align-items: end;
    animation-duration: .15s;
    animation-name: enter;
    background-color: #fff;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    height: calc(var(--vh) * 90);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    position: relative;
    width: calc(var(--vw) * 75)
}

.modal-body {
    height: 100%;
    line-height: 1.7;
    margin: 0 auto;
    -ms-overflow-style: none;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: calc(var(--vw) * 2) calc(var(--vw) * 5) calc(var(--vw) * 5);
    scrollbar-width: none;
    width: 100%
}

.modal-body::-webkit-scrollbar {
    display: none
}

.modal-img {
    display: flex;
    justify-content: center;
    width: 100%
}

.modal-img picture,
.modal-img picture img,
.modal-img picture source {
    align-items: center;
    border-radius: .4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: calc(var(--vh) * 35);
    object-fit: contain;
    width: 100%
}

.modal-close-btn {
    align-items: center;
    border: none;
    color: #000;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    opacity: .5;
    padding: calc(var(--vw) * .25);
    padding: calc(var(--vw) * 1) calc(var(--vw) * 1) 0 0;
    right: calc(var(--vw) * 1.5);
    top: calc(var(--vw) * 1.5);
    width: 100%
}

.modal-close-btn svg {
    aspect-ratio: 1;
    width: 1.6rem;
    width: clamp(1.6rem, 1.4rem + var(--vw) * 1, 3rem)
}

.modal-close-btn:focus {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    opacity: 1
}

.modal-close-btn:hover {
    opacity: .75
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
    }
}

@media (max-width:480px) {

    picture,
    picture img,
    picture source {
        max-height: calc(var(--vh) * 25)
    }
}

@media (max-width:768px) {
    .modal-content {
        height: calc(var(--vh) * 90);
        width: calc(var(--vw) * 90)
    }
}

@media (min-width:768px) {
    .modal-content {
        height: calc(var(--vh) * 90);
        width: calc(var(--vw) * 55)
    }
}

@media (min-width:481px) and (max-width:768px) {
    .modal-img {
        height: calc(var(--vh) * 35)
    }
}

.sidebar-shadow {
    background-color: transparent;
    flex-shrink: 0;
    width: clamp(4.8rem, 1rem + var(--vw) * 1.5, 8rem)
}

.sidebar {
    background-color: #fbfbfb;
    border-right-width: 1px;
    bottom: 3rem;
    color: #0a0a0a;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-style: normal;
    left: 0;
    line-height: 1.7;
    position: fixed;
    top: 6rem;
    width: clamp(4.8rem, 1rem + var(--vw) * 1.5, 8rem);
    z-index: 99
}

.sidebar-header {
    color: #0a0a0a;
    font-family: Gilroy-Semibold, Roboto, sans-serif;
    font-size: 1.7rem;
    font-size: clamp(1.7rem, .2rem + var(--vw) * 1, 3rem);
    line-height: 2.8rem;
    margin: 1.6rem;
    opacity: .75
}

.sidebar-label {
    align-items: center;
    color: #0a0a0a;
    display: flex;
    flex-grow: 1;
    font-family: Gilroy-Medium, Roboto, sans-serif;
    font-size: clamp(1.9rem, .5rem + var(--vw) * 1, 4rem);
    justify-content: center;
    opacity: 1;
    padding: 1rem;
    text-align: center;
    transform: rotate(180deg);
    transition: opacity .3s ease;
    white-space: nowrap;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl
}

@supports (scrollbar-color:red blue) {
    .sidebar {
        scrollbar-color: #ffffff #fbfbfb;
        scrollbar-width: thin
    }
}

.sidebar.expanded {
    width: calc(var(--vw) * 100)
}

.sidebar.expanded .sidebar-label {
    display: none;
    opacity: 0;
    pointer-events: none
}

.sidebar.expanded .filter-header {
    flex-direction: row
}

.sidebar::-webkit-scrollbar {
    background-color: #fff;
    width: 12px
}

.sidebar::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #fbfbfb;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #c1c1c1
}

.sidebar .checkmark {
    background-color: #eee;
    border-radius: .5rem;
    height: 2.2rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 2.2rem
}

.sidebar .checkmark:hover {
    background-color: #ccc
}

.sidebar .checkmark::after {
    border: solid #fff;
    border-width: 0 3px 3px 0;
    content: "";
    display: none;
    height: 10px;
    left: 8px;
    position: absolute;
    top: 4.5px;
    transform: rotate(45deg);
    width: 6px
}

.sidebar .filter-buttons {
    background: #fbfbfb;
    bottom: 0;
    display: flex;
    flex-direction: row;
    font-family: Gilroy-Bold, Roboto, sans-serif;
    font-style: normal;
    gap: 0;
    justify-content: center;
    position: -webkit-sticky;
    position: sticky;
    width: 100%
}

.sidebar .filter-buttons button {
    width: 100%
}

.sidebar .filter-buttons .reset-button {
    border-radius: 10rem;
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: .15rem;
    margin: 1.5rem;
    overflow: hidden;
    padding: .75rem 1.25rem;
    position: relative;
    text-transform: uppercase;
    transition: all .3s;
    z-index: 1
}

.sidebar .filter-buttons .reset-button:after {
    background-color: #e52020;
    border-radius: 10rem;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -2
}

.sidebar .filter-buttons .reset-button:before {
    background-color: #a51313;
    border-radius: 10rem;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    transition: all .3s;
    width: 0%;
    z-index: -1
}

.sidebar .filter-buttons .reset-button:hover {
    color: #fff
}

.sidebar .filter-buttons .reset-button:hover:before {
    width: 100%
}

.sidebar .filter-buttons .apply-button {
    border-radius: 10rem;
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: .15rem;
    margin: 1.5rem;
    overflow: hidden;
    padding: .75rem 1.25rem;
    position: relative;
    text-transform: uppercase;
    transition: all .3s;
    z-index: 1
}

.sidebar .filter-buttons .apply-button:after {
    background-color: #4caf50;
    border-radius: 10rem;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -2
}

.sidebar .filter-buttons .apply-button:before {
    background-color: #357a38;
    border-radius: 10rem;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    transition: all .3s;
    width: 0%;
    z-index: -1
}

.sidebar .filter-buttons .apply-button:hover {
    color: #fff
}

.sidebar .filter-buttons .apply-button:hover:before {
    width: 100%
}

.sidebar .filter-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: clamp(1.3rem, 1rem + var(--vw) * .3, 2.5rem);
    height: 100%;
    justify-content: space-between;
    overflow-y: auto;
    overflow-y: scroll;
    padding: 0 1.6rem;
    scrollbar-color: #e5e5e5 #fbfbfb;
    scrollbar-gutter: stable;
    scrollbar-width: thin
}

.sidebar .filter-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.sidebar .filter-items {
    width: 100%
}

.sidebar .filter-label {
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
    padding-left: 35px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.sidebar .filter-label:hover input~.checkmark {
    background-color: #ccc
}

.sidebar .filter-label input {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

.sidebar .filter-label input:checked~.checkmark {
    background-color: #2196f3
}

.sidebar .filter-label input:checked~.checkmark::after {
    display: block
}

.sidebar .filter h3,
.sidebar .filter-title {
    color: #0a0a0a;
    font-size: 1.5rem;
    font-size: clamp(1.4rem, 1rem + var(--vw) * .36, 3rem);
    line-height: 1.2;
    margin: 0;
    text-align: left
}

.sidebar .filter-group-content {
    height: 0;
    margin-top: 1rem;
    opacity: 0;
    overflow: hidden;
    transition: height .3s ease, opacity .3s ease;
    visibility: hidden
}

.sidebar .filter-group-content.open {
    height: auto;
    opacity: 1;
    visibility: visible
}

.sidebar .filter-group-title {
    align-items: center;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
    display: flex;
    font-family: Gilroy-Semibold, Roboto, sans-serif;
    justify-content: space-between;
    padding: 10px;
    width: 100%
}

.sidebar .toggle-btn {
    align-items: center;
    color: #0a0a0a;
    display: flex;
    font-size: clamp(2rem, 1rem + var(--vw) * 1, 6rem);
    font-weight: 500;
    justify-content: center;
    text-align: center;
    white-space: nowrap
}

.sidebar .toggle-btn svg {
    aspect-ratio: 1;
    cursor: pointer;
    pointer-events: all;
    width: 1.9rem;
    width: clamp(1.9rem, .4rem + var(--vw) * 1, 3rem)
}

.sidebar .toggle-btn svg.menu {
    width: clamp(2rem, 1.1rem + var(--vw) * 1, 3.5rem)
}

.sidebar .toggle-btn svg.menu:focus {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25)
}

.sidebar .toggle-btn svg.close {
    opacity: .5
}

.sidebar .toggle-btn svg.close:focus {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    opacity: 1
}

.sidebar .toggle-btn svg.close:hover {
    opacity: .75
}

.sidebar .toggle-btn-open {
    margin: auto;
    width: 5rem !important
}

.sidebar .toggle-btn,
.sidebar .toggle-btn-close {
    margin: .8rem auto;
    width: 100%
}

#sidebar-header {
    display: none;
    transition-duration: .3;
    width: 100%
}

@media (max-width:486px) {
    .sidebar {
        bottom: 4rem
    }
}

@media (min-width:486px) {
    .apply-button {
        display: none !important
    }
}

@media (min-width:768px) {

    .sidebar-shadow.expanded,
    .sidebar.expanded {
        width: clamp(26rem, 10rem + var(--vw) * 10, 40rem)
    }
}

@media (min-width:1800px) {
    .sidebar {
        bottom: 5rem;
        top: 9rem
    }
}

#loading-spinner {
    align-items: center;
    -webkit-backdrop-filter: sepia(90%);
    backdrop-filter: sepia(90%);
    background-color: rgba(255, 255, 255, .96);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    transition: opacity .5s ease-out;
    width: 100%;
    z-index: 9999
}

.spinner {
    --c1: #673b14;
    --c2: #f8b13b;
    animation: l5-0 2s infinite linear;
    background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px, var(--c1) 0) 50%/7px 8px no-repeat;
    border-bottom: 4px solid var(--c1);
    border-top: 4px solid var(--c1);
    display: grid;
    height: 80px;
    overflow: hidden;
    width: 40px
}

.spinner::after,
.spinner::before {
    animation: inherit;
    animation-name: l5-1;
    background: linear-gradient(var(--d, 0deg), var(--c2) 50%, rgba(0, 0, 0, 0) 0) bottom/100% 205%, linear-gradient(var(--c2) 0 0) center/0 100%;
    background-repeat: no-repeat;
    border: 2px solid var(--c1);
    border-radius: 0 0 40% 40%;
    border-top: 0;
    box-sizing: content-box;
    content: "";
    grid-area: 1/1;
    height: calc(50% - 4px);
    margin: 0 auto;
    -webkit-mask: linear-gradient(#000 0 0) bottom/4px 2px no-repeat, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) bottom/4px 2px no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    width: 75%
}

.spinner::after {
    transform: scaleY(-1);
    transform-origin: 50% calc(100% + 2px);
    --s: 3px;
    --d: 180deg
}

@keyframes l5-0 {
    80% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(.5turn)
    }
}

@keyframes l5-1 {

    10%,
    70% {
        background-size: 100% 205%, var(--s, 0) 100%
    }

    100%,
    70% {
        background-position: top, center
    }
}

#loading-spinner.hidden {
    opacity: 0;
    pointer-events: none
}

.tooltip {
    background-color: rgba(240, 240, 240, .9);
    border-left: .6rem solid transparent;
    border-radius: .3rem;
    border-right: .6rem solid transparent;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    color: #000;
    font-size: 1.5rem;
    font-size: clamp(1.3rem, var(--vw) * 1, 2.2rem);
    opacity: 0;
    padding: .5rem;
    pointer-events: none;
    position: absolute;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out, transform .3s ease-in-out;
    visibility: hidden;
    width: auto;
    z-index: 1000
}

.tooltip.show {
    animation: roll-ltr .3s ease-in-out forwards;
    opacity: 1;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out, transform .3s ease-in-out;
    visibility: visible
}

.tooltip.roll-rtl-hide {
    animation: roll-rtl-hide .1s ease-in-out backwards
}

@keyframes roll-ltr {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
        opacity: 0
    }

    100% {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1
    }
}

@keyframes roll-rtl-hide {
    0% {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1
    }

    100% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
        opacity: 0
    }
}

.pins-container {
    flex-grow: 1;
    height: auto;
    margin-bottom: calc(var(--vh) * 3);
    margin-left: calc(var(--vw) * -3);
    margin-top: calc(var(--vh) * 3);
    max-height: calc(var(--vh) * 35);
    position: relative;
    width: 90%
}

.pins-container .pin {
    aspect-ratio: 1;
    cursor: cursor;
    -webkit-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, .5));
    opacity: 1;
    position: absolute;
    transform-origin: 50% 50%;
    transition: opacity .3s ease, visibility 0s .3s;
    visibility: visible;
    width: calc(var(--vh) * 4.9);
    z-index: 199
}

.pins-container .pin .hidden {
    opacity: 0;
    visibility: hidden
}

.pins-container .pin:hover {
    animation-play-state: paused;
    scale: 1.3;
    transition: scale .3s ease-in-out
}

.pins-container .pin:hover .tooltip {
    opacity: 1;
    visibility: visible
}

.pins-container .pin:nth-child(2n) {
    animation: float1 2s ease-in-out infinite alternate
}

.pins-container .pin:nth-child(odd) {
    animation: float2 3s ease-in-out infinite alternate
}

.pins-container .pin:nth-child(3n) {
    animation: float3 3s ease-in-out infinite alternate
}

@keyframes float1 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-10px)
    }
}

@keyframes float2 {
    0% {
        transform: translateX(0) translateY(0)
    }

    100% {
        transform: translateX(2px) translateY(-6px)
    }
}

@keyframes float3 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(8px)
    }
}

#building-administration {
    height: calc(var(--vh) * 53) !important;
    margin-bottom: calc(var(--vh) * -2.1)
}

#building-administration .lamp-v4 {
    margin-bottom: calc(var(--vh) * 2.1)
}

#building-apartment {
    height: calc(var(--vh) * 50) !important
}

#building-factory {
    height: calc(var(--vh) * 63) !important
}

#building-factory::after {
    aspect-ratio: 1.2;
    background-image: url(../assets/graphics/people/engineers.svg);
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    bottom: calc(var(--vh) * 8);
    content: "";
    -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, .45));
    height: calc(var(--vh) * 11);
    left: calc(var(--vw) * 11);
    min-height: 18%;
    opacity: 1;
    position: absolute;
    z-index: 13
}

#building-media {
    height: calc(var(--vh) * 53) !important
}

#building-media::after {
    aspect-ratio: 1.65;
    background-image: url(../assets/graphics/people/interview.svg);
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    bottom: calc(var(--vh) * 8.5);
    content: "";
    -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, .45));
    height: calc(var(--vh) * 11);
    min-height: 18%;
    opacity: 1;
    position: absolute;
    right: calc(var(--vw) * 1);
    z-index: 13
}

#building-monument {
    height: calc(var(--vh) * 62) !important
}

#building-monument::after {
    aspect-ratio: 1;
    background-image: url(../assets/graphics/people/tour-guiding.svg);
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    bottom: calc(var(--vh) * 8);
    content: "";
    -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, .45));
    height: calc(var(--vh) * 11);
    left: calc(var(--vw) * -5);
    min-height: 18%;
    opacity: 1;
    position: absolute;
    z-index: 13
}

#building-office {
    height: calc(var(--vh) * 47) !important
}

#building-office::after {
    aspect-ratio: 0.8;
    background-image: url(../assets/graphics/people/business_people.svg);
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    bottom: calc(var(--vh) * 9);
    content: "";
    -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, .45));
    height: calc(var(--vh) * 11);
    left: calc(var(--vw) * 1);
    min-height: 18%;
    opacity: 1;
    position: absolute;
    z-index: 13
}

#building-publisher::after {
    aspect-ratio: 0.8;
    background-image: url(../assets/graphics/people/sitting-on-bench.svg);
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    bottom: calc(var(--vh) * 8);
    content: "";
    -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, .45));
    height: calc(var(--vh) * 9.3);
    left: calc(var(--vw) * 2);
    min-height: 18%;
    opacity: 1;
    position: absolute;
    z-index: 13
}

#building-tragency {
    height: calc(var(--vh) * 43) !important
}

#building-university {
    height: calc(var(--vh) * 53) !important
}

#building-university::after {
    aspect-ratio: 1.8;
    background-image: url(../assets/graphics/people/students.svg);
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
    bottom: calc(var(--vh) * 8);
    content: "";
    -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.45));
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, .45));
    height: calc(var(--vh) * 11);
    left: calc(var(--vw) * 2);
    min-height: 18%;
    opacity: 1;
    position: absolute;
    z-index: 13
}

a {
    color: #007bff;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.roadway {
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: calc(var(--vh) * 10);
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 11
}

.roadway .street {
    align-items: center;
    background: #e5dccf;
    border-image: repeating-linear-gradient(to right, #3d3d4c 0px, #3d3d4c 30px, #ffffff 30px, #ffffff 60px) 30;
    border-top: 5px solid;
    height: 65%;
    justify-content: center;
    position: relative;
    width: 100%;
    z-index: 3
}

.roadway .street .curb {
    background: repeating-linear-gradient(to right, #fff 0, #fff 40px, transparent 40px, transparent 72px);
    height: 5px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%
}

.sidewalk {
    background-color: #efebe6;
    height: 35%;
    width: 100%;
    z-index: 20
}

.sidewalk-in {
    background-color: #efebe6;
    bottom: 7rem;
    height: 3rem;
    left: 0;
    position: absolute;
    right: 0;
    width: var(--complex-container-width, 0);
    z-index: 3
}

.cars {
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    width: 100%
}

.cars .car {
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: calc(var(--vh) * -12);
    height: calc(var(--vh) * 24);
    position: absolute
}

.cars .car1 {
    animation: moveRight 35s linear infinite 20s;
    background-image: url("../assets/graphics/objects/car-1.svg");
    left: -200px;
    will-change: left;
    z-index: 19
}

.cars .car2 {
    animation: moveLeft 25s linear infinite 25s;
    background-image: url("../assets/graphics/objects/car-2.svg");
    bottom: calc(var(--vh) * -15);
    right: -200px;
    transform: scaleX(-1);
    will-change: right;
    z-index: 20
}

.cars .car3 {
    background-image: url("../assets/graphics/objects/car-3.svg");
    bottom: calc(var(--vh) * -12);
    height: calc(var(--vh) * 25);
    left: 29%;
    z-index: 18
}

.cars .parked {
    animation: none !important
}

@keyframes moveRight {
    0% {
        left: -200px
    }

    80% {
        left: 120%
    }

    100% {
        left: 120%
    }
}

@keyframes moveLeft {
    0% {
        right: -200px
    }

    80% {
        right: 120%
    }

    100% {
        right: 120%
    }
}

.roadway-characters {
    bottom: calc(var(--vh) * 6.5);
    height: calc(var(--vh) * 3.5);
    left: 0;
    position: absolute;
    right: 0;
    width: 100%
}

.walking-dog-1,
.walking-man-1,
.walking-woman-1 {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute
}

.walking-man-1 {
    animation: walkBackForthLTR1 360s linear infinite;
    bottom: calc(var(--vh) * -.9);
    left: 0;
    z-index: 16
}

.man-1 {
    animation: walkMan 1s steps(6) infinite;
    aspect-ratio: 0.5;
    background-image: url("../assets/graphics/people/walking-man-1.svg");
    background-repeat: no-repeat;
    background-size: calc(var(--vh) * 37.7);
    height: calc(var(--vh) * 13)
}

.walking-woman-1 {
    animation: walkBackForthRTL1 380s linear infinite;
    animation-delay: 3s;
    bottom: calc(var(--vh) * -.5);
    right: 0;
    z-index: 15
}

.woman-1 {
    animation: walkWoman 1s steps(6) infinite;
    aspect-ratio: 0.5;
    background-image: url(../assets/graphics/people/walking-woman-1.svg);
    background-repeat: no-repeat;
    background-size: calc(var(--vh) * 41.4);
    height: calc(var(--vh) * 14)
}

.walking-dog-1 {
    animation: walkBackForthLTR2 560s linear infinite;
    bottom: calc(var(--vh) * -2.5);
    right: 0;
    z-index: 17
}

.dog-1 {
    animation: walkDog 1s steps(6) infinite;
    aspect-ratio: 0.5;
    background-image: url("../assets/graphics/people/walking-dog-1.svg");
    background-repeat: no-repeat;
    background-size: calc(var(--vh) * 8 * 3) auto;
    height: calc(var(--vh) * 8)
}

@keyframes walkMan {
    from {
        background-position: 0
    }

    to {
        background-position: calc(var(--vh) * -37.7)
    }
}

@keyframes walkWoman {
    from {
        background-position: 0
    }

    to {
        background-position: calc(var(--vh) * -42)
    }
}

@keyframes walkDog {
    from {
        background-position: 0
    }

    to {
        background-position: calc(var(--vh) * -8 * 3)
    }
}

@keyframes walkAcrossStreet {
    from {
        left: -100px
    }

    to {
        left: 100%
    }
}

@keyframes walkAcrossStreetRTL {
    from {
        right: 500px
    }

    to {
        right: 100%
    }
}

@keyframes walkBackForthRTL1 {
    0% {
        right: -100px;
        transform: scaleX(1)
    }

    50% {
        right: 99%;
        transform: scaleX(1)
    }

    51% {
        right: 99%;
        transform: scaleX(-1)
    }

    100% {
        right: -100px;
        transform: scaleX(-1)
    }
}

@keyframes walkBackForthLTR1 {
    0% {
        left: -100px;
        transform: scaleX(1)
    }

    50% {
        left: 99%;
        transform: scaleX(1)
    }

    51% {
        left: 99%;
        transform: scaleX(-1)
    }

    100% {
        left: -100px;
        transform: scaleX(-1)
    }
}

@keyframes walkBackForthLTR2 {
    0% {
        left: 2%;
        transform: scaleX(1)
    }

    50% {
        left: 80%;
        transform: scaleX(1)
    }

    51% {
        left: 80%;
        transform: scaleX(-1)
    }

    100% {
        left: 2%;
        transform: scaleX(-1)
    }
}