:root {
    --text-color: #393D44;
    --accent-color: #E47E3D;
    --border-radius: 32px;
    --background-color: #FCF2EB;
    --border-radius-more: 45px;
    --text-color-lighter: #6A717D;
}

::selection {
    background: var(--accent-color);
    color: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    outline: none;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

body {
    font: 14px/1.57 "Montserrat", sans-serif;
    overflow-x: hidden;
    color: var(--text-color);
    background: var(--background-color);
}

body.overflow { overflow: hidden; }

a {
    color: inherit;
    text-decoration: inherit;
}

a:hover {
    color: var(--accent-color);
}

a:disabled {
    pointer-events: none;
}

a,
svg,
path,
circle,
button {
    transition: all .3s;
}

a>svg {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}

iframe {
    width: 100%;
    height: 100%;
}

input,
button,
textarea {
    font: inherit;
}

input {
    width: 100%;
    border: 1px solid #E8DBD1;
    line-height: 46px;
    padding: 0 17px;
    border-radius: 8px;
    background: #FDF9F5;
    cursor: pointer;
}

input[type="submit"] {
    border-color: var(--accent-color);
    border-radius: 40px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    background: var(--accent-color) url(../images/envelope.svg) no-repeat 30% center;
    padding-left: 50px;
    margin-top: 14px;
    transition: all .3s;
}

input[type="submit"]:hover {
    background: var(--text-color) url(../images/envelope.svg) no-repeat 30% center;
    border-color: var(--text-color);
}

input[type="checkbox"],
input[type="radio"] {
    position: absolute;
    visibility: hidden;
    z-index: -1;
}

label {
    color: #959EAC;
    font-size: 12px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

.wpcf7 fieldset {
    display: none;
    border: none;
}

legend {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 26px;
}

.st137 {
    fill: #202b43 !important;
}

.success-show {
    opacity: 0.5 !important;
}

.wpcf7 p {
    margin-bottom: 14px;
}

.wpcf7-list-item {
    margin: 0;
    display: block;
}

.wpcf7-list-item-label {
    color: var(--text-color);
    font-size: initial;
    font-weight: normal;
    display: flex;
    gap: 16px;
    position: relative;
    margin-bottom: 18px;
}

.wpcf7-list-item-label:before {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    border: 1px solid #E8DBD1;
    background: #FDF9F5;
    border-radius: 50%;
}

.wpcf7-list-item-label:after {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

input[type="radio"]:checked+.wpcf7-list-item-label:after {
    background: var(--accent-color);
}

label.checkbox-wrap {
    padding-left: 32px;
    position: relative;
    color: #6A717D;
    clear: both;
}

label.checkbox-wrap a {
    color: #A0AABA;
}

label.checkbox-wrap:before {
    content: '';
    width: 16px;
    height: 16px;
    border: 1px solid #E8DBD1;
    border-radius: 4px;
    background: #FDF9F5;
    position: absolute;
    left: 0;
    top: 4px;
}

label.checkbox-wrap:after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 4px;
    position: absolute;
    left: 4px;
    top: 8px;
}

label.checkbox-wrap.checked:after {
    background: var(--accent-color);
}

.wpcf7 .button-wrap {
    display: flex;
    gap: 19px;
    margin: 36px 0 0;
}

.wpcf7 .button-wrap .button {
    width: 100%;
    line-height: 48px;
}

.wpcf7 .button-wrap .button.prev-set {
    padding: 0 14px;
    background: #646464;
    color: #fff;
    white-space: nowrap;
}

.wpcf7 .button-wrap .button.prev-set:hover {
    background: var(--text-color);
    outline: 1px solid #9D9A97;
}

.wpcf7 .button-wrap input[type="submit"] {
    margin: 0;
    background-position-x: 17%;
}

.wpcf7 form.sent .wpcf7-response-output {
    border: none;
    padding: 0;
    font-weight: 700;
    text-align: center;
    margin: 32px 0 0;
    font-size: 24px;
    line-height: 36px;
    color: var(--accent-color);
}

.wpcf7-not-valid,
.wpcf7 form.invalid .wpcf7-response-output {
    border-color: #dc3232;
}

.wpcf7-not-valid-tip {
    display: none;
}

.wpcf7 .intl-tel-input {
    width: 100%;
}

.wpcf7 .intl-tel-input.allow-dropdown .selected-flag,
.wpcf7 .intl-tel-input.separate-dial-code .selected-flag {
    background: #F3E9DD;
    width: 65px;
    padding: 0 18px;
}

.wpcf7 .intl-tel-input.allow-dropdown input,
.wpcf7 .intl-tel-input.allow-dropdown input[type=tel],
.wpcf7 .intl-tel-input.allow-dropdown input[type=text],
.wpcf7 .intl-tel-input.separate-dial-code input,
.wpcf7 .intl-tel-input.separate-dial-code input[type=tel],
.wpcf7 .intl-tel-input.separate-dial-code input[type=text] {
    padding-left: 82px;
}

.wpcf7-spinner {
    position: absolute;
    bottom: 44px;
    right: 30px;
}

.accent-color {
    color: var(--accent-color);
}

.accent-underline {
    position: relative;
    white-space: nowrap;
}

.accent-underline:after {
    content: url(../images/orange-underline.svg);
    position: absolute;
    left: 0;
    bottom: -20px;
    right: 0;
}

.accent-color.accent-underline:after {
    content: url(../images/underline-black.svg);
}

a.button {
    display: inline-block;
}

.button {
    width: 230px;
    line-height: 48px;
    border-radius: var(--border-radius);
    text-align: center;
    background: var(--text-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: none;
}

.button:hover {
    background: var(--accent-color);
    color: #fff;
    cursor: pointer;
}

.button.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
}

.button-accent {
    background: var(--accent-color);
}

.button-accent:hover {
    background: var(--text-color);
    color: #fff;
}

.button svg {
    vertical-align: middle;
    margin-left: 5px;
}

.button:hover svg {
    transform: translateX(5px);
}

.popup { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,.73); z-index: 10000; display: none; }
.popup .form-wrap { position: relative; }
.popup .close { background: none; padding: 0; border: none; position: absolute; right: 28px; top: 25px; cursor: pointer; }
.popup .close svg { margin: 0; }
.popup h2 span { color: var(--accent-color); }
.popup .wpcf7 form.sent .wpcf7-response-output { font-size: 18px; line-height: 24px; }

.site-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 15px 13px;
    border-bottom: 1px solid #E7DDD6;
    background: var(--background-color);
}

.site-header>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-header>div .social-link:hover svg {
    fill: var(--text-color);
}

.social-link {
    border: 1px solid #E7DDD6;
    border-radius: 50%;
}

.social-link:hover {
    background: #f37724;
}

.site-header>div .social-link:hover circle {
    stroke: var(--text-color);
}

.site-header>div .social-link:hover path {
    fill: #fff;
}

.logo svg:hover path[fill="white"]:not(:first-of-type),
.logo svg:hover path[fill="#393D44"]:not(:first-of-type) {
    fill: var(--accent-color);
}

.logo svg:hover path:first-of-type {
    transform: translateX(15px);
}

.logo svg:hover path:nth-of-type(2) {
    transform: translateX(-10px);
}

.site-footer {
    color: var(--text-color-lighter);
    background: #32353C;
    padding: 89px 30px 36px;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer a:hover svg .animate {
    fill: #fff;
}

.site-footer .socials {
    display: flex;
    gap: 17px;
    justify-content: center;
}

.site-footer .socials a:hover svg {
    transform: scale(1.2);
}

#menu-footer {
    list-style: none;
}

.footer-text {
    font-weight: 500;
}

#menu-footer,
.copyright {
    font-weight: 600;
    font-size: 12px;
}

.banner {
    padding: 123px 16px 0;
    position: relative;
}

.banner h1 {
    font-size: 28px;
    margin: 20px 0;
}

.banner .text {
    font-weight: 500;
}

.banner .button-wrap {
    background: #FAE5D8;
    border-radius: var(--border-radius);
}

.banner-text .button-wrap span {
    line-height: 48px;
    color: #DB7332;
    font-size: 12px;
    font-weight: 700;
    display: block;
}

.banner .event-link {
    border-radius: 0;
}

.banner .scroll-next-link {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/scroll-down-mob.svg) no-repeat center;
    background-size: contain;
    width: 126px;
    height: 23px;
    text-align: center;
}

.banner .scroll-next-link {
    margin: auto;
}

.banner .scroll-next-link:before {
    content: url(../images/dobble-down-arrow-mob.svg);
}

.text-section article {
    padding: 56px 45px;
    text-align: center;
}

.text-section article:first-of-type {
    background: url(../images/text-bg-1.svg) no-repeat left bottom;
}

.text-section article:last-of-type {
    background: #fff url(../images/text-bg-2.svg) no-repeat left bottom;
}

.text-section article h2 {
    font-size: 22px;
    line-height: 28px;
    margin: 22px 0;
}

.text-section article .button {
    margin-top: 24px;
}

#game {
    height: 100vh;
    background: var(--text-color) url(../images/city-mob.svg) no-repeat bottom center /100%;
    overflow: hidden;
}

#game .modal:not(.start) {
    display: none;
}

#game .modal {
    background: var(--background-color);
    border-radius: var(--border-radius);
    position: relative;
    margin: 50px 10px;
}

.modalIndex {
    z-index: 111;
}

#game .modal-inner {
    padding: 62px 32px 0;
}

#game .img-wrap {
    width: 100%;
    padding: 14px 0 12px;
    background: #F4E6DC;
    text-align: center;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

#game .start .img-wrap {
    background: #F4E6DC url(../images/bg-pattern.svg) no-repeat center;
}

.game-pretitle {
    position: absolute;
    background: #FDE4D5;
    border: 1px solid #EEC9B2;
    border-radius: 24px;
    color: var(--accent-color);
    font-size: 10px;
    text-transform: uppercase;
    padding: 7px 16px;
    font-weight: bold;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

#game h2 {
    font-size: 20px;
    line-height: 27px;
    margin-bottom: 23px;
}

#game .fail h2,
#game .win h2 {
    font-size: 24px;
    line-height: 32px;
}

#game .fail h2 {
    color: var(--accent-color);
}

.game-instruction {
    margin: 0 auto 20px;
    max-width: 196px;
    color: #6A717D;
    font-weight: 500;
}

.game-notice {
    background: #F4E6DC;
    border-radius: 6px;
    color: #9A9490;
    font-weight: 500;
    font-size: 12px;
    padding: 14px 22px 14px 16px;
    display: flex;
    margin: 22px 0 32px;
    gap: 12px;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    animation: pulse 2s infinite;
    line-height: 22px;
    text-align: left;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #daa483;
    }

    70% {
        box-shadow: 0 0 0 1px #de996e;
    }

    100% {
        box-shadow: 0 0 0 0 #e47e3d;
    }
}

.game-notice-text-2 {
    display: none;
}

.game-notice-text-3 {
    display: none;
}

/* @keyframes pulse {
    0% {
        background-color: rgb(216 131 102 / 1%);
    }

    20% {
        background-color: rgb(216 131 102 / 3%);
    }

    40% {
        background-color: rgb(216 131 102 / 7%);
    }

    60% {
        background-color: rgb(216 131 102 / 9%);
    }

    80% {
        background-color: rgb(216 131 102 / 3%);
    }

    100% {
        background-color: rgb(216 131 102 / 1%);
    }
} */


.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

.pulsating-circle:before {
    content: "";
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.pulsating-circle:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@-webkit-keyframes pulse-ring {
    0% {
        transform: scale(0.33);
    }

    80%,
    100% {
        opacity: 0;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.33);
    }

    80%,
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes pulse-dot {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.8);
    }
}

@keyframes pulse-dot {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.8);
    }
}


.game-notice svg {
    min-width: 22px;
}

.button.play-game:hover svg path {
    fill: #fff;
}

#game .fail .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#game .fail button.button {
    background: #FAE5D8;
    color: var(--accent-color);
    margin-top: 16px;
}

#game .fail button.button:hover {
    background: var(--accent-color);
    color: #fff;
}

#game .fail .button,
#game .win .button {
    max-width: 270px;
    width: 100%;
    text-align: center;
}

.game-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 11100;
    background: linear-gradient(0deg, #0A0928 0.44%, #516785 97.59%);
    overflow: hidden;
    display: none;
}

.game-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 11100;
    background: #fcf2ebb8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-overlay span {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
    display: none;
    margin: 0px 3px;
}

.hBlock {
    display: none;
}

.dBlock {
    display: block !important;
}

.game-overlay span:last-of-type {
    color: var(--accent-color);
}

.game-wrap.active .game-overlay span {}

audio {
    display: none;
}

.count-answers {
    color: #9e4811;
    font-size: 15px;
    text-align: center;
    margin-top: 22px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.count-answers span {
    display: block;
    margin-left: 5px;
    font-weight: 700;
}

.close-game {
    position: absolute;
    z-index: 10;
    right: 26px;
    top: 36px;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    cursor: pointer;
}

.close-game:before,
.close-game:after {
    content: '';
    height: 2px;
    width: 30px;
    background: #fff;
    position: absolute;
    left: 0;
    border-radius: 2px;
    transition: all .3s;
}

.close-game:before {
    transform: rotate(-45deg);
}

.close-game:after {
    transform: rotate(45deg);
}

.close-game:hover:before,
.close-game:hover:after {
    background: var(--accent-color);
}

.timer {
    background: var(--background-color);
    width: 140px;
    border-radius: 36px;
    height: 56px;
    position: absolute;
    top: 24px;
    right: 70px;
    padding: 0 26px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
}

.timer svg {
    animation: rotate 2s 5 forwards;
    margin-right: 12px;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.sound-box {
    position: absolute;
    top: 23px;
    right: 230px;
    z-index: 1;
}

.sound-pause {}

.sound-play {
    display: none;
}

.sound-pause:hover img {
    background: #2f3f56;
    border-radius: 50%;
}

.sound-play:hover img {
    background: #2f3f56;
    border-radius: 50%;
}


.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.clouds {
    position: absolute;
    left: 0;
    top: 10vh;
    z-index: 2;
    animation: scroll-clouds 15s linear forwards;
}

@keyframes scroll-clouds {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(calc(-100% + 200vw));
    }
}

.carousel-items {
    position: relative;
    z-index: 3;
    animation: scroll 15s forwards linear;
}

.scene-second {
    display: none;
}

.scene-third {
    display: none;
}

/* .carousel-items .success {
    fill: #DB7332;
} */

@keyframes scroll {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(calc(-100% + 100vw));
    }
}

.carousel-items svg {
    height: 75vh;
    width: auto;
    display: block;
    position: relative;
    z-index: 3;
}

.test {
    position: absolute;
    left: 1810px;
    top: 476px;
    z-index: 11;
}

.timer svg,
.clouds,
.carousel-items {
    animation-delay: 3s;
}

.mike {
    position: absolute;
    left: -18vw;
    bottom: 0;
    z-index: 4
}

.mike svg {
    height: 46vh;
    width: auto;
    display: block;
}

.mike .text {
    position: absolute;
    top: -70px;
    left: 70px;
    width: 158px;
    height: 68px;
    border-radius: 50%;
    background: var(--background-color);
    font-size: 14px;
    line-height: 19px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mike .text.error {
    background: var(--accent-color);
    color: #fff;
}

.mike .text:after {
    content: url(../images/mike-text-after-mob.svg);
    position: absolute;
    bottom: -12px;
    right: 80%;
}

.mike .text.error:after {
    content: url(../images/mike-text-after-error-mob.svg);
}

.mike .text,
.mike .text span {
    display: none;
}

.photo {
    border: 7px solid rgb(115, 14, 14) !important;
}

.photo:hover {
    cursor: pointer;
}

.back-link {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #9D9A97;
    margin-bottom: 16px;
}

.secondary-page .attachment-post-thumbnail {
    display: block;
}

.secondary-page .content,
.default-page .content {
    margin: 101px 15px 48px;
}

.secondary-page h1,
.default-page h1 {
    margin-bottom: 18px;
    line-height: 1.29em;
}

.secondary-page .content h1+p {
    font-weight: 500;
    margin-bottom: 26px;
}

.secondary-page.event {
    /*overflow: hidden;*/
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin-bottom: -27px;
    position: relative;
    z-index: 1;
    background: var(--background-color);
}

.event-schedule th {
    color: var(--accent-color);
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
}

.event-schedule th,
.event-schedule td {
    border-bottom: 1px solid #E7DDD6;
    vertical-align: top;
}

.event-schedule th {
    padding-bottom: 10px;
}

.event-schedule td {
    padding: 20px 0;
}

.event-schedule th:last-of-type,
.event-schedule td:last-of-type {
    padding-left: 26px;
}

.event-schedule time,
.event-schedule .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.44em;
}

.event-schedule time {
    display: block;
    margin-bottom: 6px;
}

.event-schedule .title {
    margin-bottom: 10px;
}

.form-wrap {
    background: var(--text-color);
    color: #fff;
    margin: 40px 15px 56px;
    padding: 36px 28px 32px;
    border-radius: 28px;
}

.form-wrap svg {
    max-width: 100%;
    height: auto;
    margin: 30px auto 0;
    display: block;
}

.form-wrap h2 {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 10px;
}

.form-trigger {
    margin-top: 24px;
    width: 100%;
}

.form-wrap.success h2,
.form-wrap.success .form-trigger,
.form-wrap.success .form-text {
    display: none;
}

.form-wrap.success svg {
    margin: 0 auto;
}

.form-wrap .button:hover {
    background: var(--text-color);
    outline: 1px solid var(--accent-color);
}

.form-wrap .wpcf7-list-item-label {
    color: #fff;
    cursor: pointer;
    transition: all .3s;
}

.form-wrap .wpcf7-list-item-label:hover {
    color: var(--accent-color);
}

.form-wrap input[type="submit"]:hover {
    border-color: var(--accent-color);
}

.form-wrap fieldset {
    margin-top: 30px;
}

.form-wrap #wpcf7-f78-o1 { margin-top: 32px; }

.dot-wrap {
    display: none;
    justify-content: space-between;
    align-items: center;
}

.dot {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E8DBD1;
    position: relative;
    color: transparent;
}

.dot:not(:last-of-type):after {
    content: '';
    width: 15vw;
    height: 2px;
    background: #E8DBD1;
    position: absolute;
    left: 100%;
    top: calc(50% - 1px);
}

.dot.current {
    background: var(--accent-color);
    text-align: center;
    width: 42px;
    line-height: 42px;
    height: 42px;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.dot.prev {
    background: var(--accent-color);
}

.dot.prev:not(:last-of-type):after {
    background: var(--accent-color);
}

.dot.prev:before {
    content: url(../images/check.svg);
    display: block;
    text-align: center;
}

.default-page h2 {
    margin: 18px 0 10px;
}

.default-page p {
    margin-bottom: 10px;
}

@media (max-width: 374px) {
    .site-header .logo svg {
        width: 110px;
    }

    .site-header .button {
        width: 80px;
    }

    #game .modal-inner {
        padding-right: 23px;
        padding-left: 23px;
    }
}

@media (min-width: 375px) {
    .game-notice {
        min-width: 290px;
    }
}

@media (min-width: 375px) and (max-width: 767px) {
    .site-header .logo svg {
        width: 147px;
    }

    .site-header .button {
        width: 91px;
    }
}

@media (max-width: 425px) {
    .wpcf7 .button-wrap {
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    #game .modal-inner {
        margin-bottom: 40px;
        text-align: center;
    }

    .game-notice {
        text-align: center;
        align-items: center;
    }

    #game .start .img-wrap svg {
        width: 160px;
        height: auto;
    }

    .dot.prev:before {
        margin-top: 3px;
    }
}

@media (max-width: 767px) {
    .site-header>div svg {
        width: 34px;
        height: auto;
    }

    .site-header .button {
        line-height: 40px;
        background: var(--accent-color);
        font-size: 10px;
    }

    .site-footer {
        text-align: center;
    }

    .site-footer .logo svg {
        margin: 0 auto 24px;
    }

    #menu-footer li {
        margin-top: 10px;
    }

    .site-footer .socials {
        margin: 36px 0 48px;
    }

    .banner { display: flex; flex-direction: column; justify-content: center; padding-top: 72px; height: calc(100vh - 23px); }

    .banner .button-wrap {
        margin: 22px auto 0;
        width: 238px;
        z-index: 1;
        position: relative;
    }

    .banner .button {
        width: 100%;
    }

    .banner .event-link {
        margin: -24px auto 80px; padding-top: 24px;
        width: 238px;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        background: #FAE5D8;
        color: var(--accent-color);
    }

    .banner .scroll-next-link,
    .banner-text .button-wrap span { display: none; }

    .text-section article:last-of-type {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        margin-bottom: -27px;
        position: relative;
        z-index: 1;
    }

    #game { height: auto; }
    #game .modal:not(.start) { flex-direction: column; }
    #game .modal:not(.start) .img-wrap svg { height: 170px; width: auto; }

    #game .fail .button, 
    #game .win .button { margin: auto; }
}

@media (min-width: 768px) {
    .accent-underline:after {
        bottom: -30px;
    }

    .accent-color.accent-underline:after {
        bottom: -20px;
    }

    input[type="submit"] {
        background-position-x: 42%;
    }

    #wpcf7-f78-o1 input[type="submit"],
    #wpcf7-f139-o1 input[type="submit"]  { background-position-x: 30%; }

    .input-wrap {
        width: calc(50% - 10px);
        float: left;
    }

    .input-wrap:nth-of-type(odd) {
        margin-right: 20px;
    }

    .popup .form-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0; }

    .site-header>div {
        gap: 20px;
    }

    .site-footer {
        display: grid;
        grid-template: auto auto / 1fr 1fr 1fr;
        gap: 84px;
        background: #32353C url(../images/footer-bg.svg) no-repeat left bottom;
        background-size: 50%;
    }

    .site-footer .socials {
        justify-content: flex-end;
    }

    .footer-text {
        text-align: center;
        max-width: 300px;
        margin: auto;
    }

    #menu-footer {
        grid-column-start: 2;
        grid-column-end: 4;
        display: flex;
        justify-content: space-between;
    }

    #menu-footer li:first-of-type {
        width: 43%;
        text-align: center;
    }

    .banner {
        padding-top: 190px;
    }

    .banner h1,
    .game-wrap .overlay span {
        font-size: 42px;
    }

    .banner-text p {
        font-size: 18px;
        max-width: 430px;
    }

    .banner .button-wrap {
        display: inline-flex;
        margin-top: 40px;
    }

    .banner-text .button-wrap span {
        padding: 0 32px 0 16px;
    }

    .banner .event-link {
        position: absolute;
        right: 0;
        bottom: 0;
        border-top-left-radius: 32px;
        line-height: 60px;
        width: 205px;
    }

    .banner .scroll-next-link {
        bottom: -62px;
        background: url(../images/scroll-down.svg) no-repeat center;
        background-size: contain;
        width: 377px;
        height: 64px;
        z-index: 1;
    }

    .banner .scroll-next-link:before {
        content: url(../images/dobble-down-arrow.svg);
        margin-top: 3px;
        display: block;
    }

    .text-section {
        display: flex;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        margin-bottom: -27px;
        position: relative;
        z-index: 1;
        overflow: hidden;
        background: var(--background-color);
    }

    .text-section article {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .text-section article h2 {
        font-size: 28px;
        line-height: 1.28em;
        margin: 28px 0 18px;
    }

    .text-section article .button {
        margin-top: 32px;
    }

    #game {
        position: relative;
    }

    #game .modal {
        display: flex;
        flex-direction: row-reverse;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        margin: auto;
    }

    #game .modal.start {
        width: 720px;
    }

    #game .modal-inner {
        width: calc(100% - 336px);
    }

    .game-pretitle {
        font-size: 12px;
        padding: 8px 24px;
        top: -18px;
    }

    #game h2 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 26px;
    }

    #game .fail h2,
    #game .win h2 {
        font-size: 28px;
    }

    .game-instruction {
        font-size: 16px;
        line-height: 28px;
        max-width: 281px;
    }

    .game-notice {
        font-size: 14px;
        margin: 35px 0 24px;
    }

    .game-notice svg {
        margin-top: 10px;
    }

    .game-notice-next {
        font-size: 14px;
        margin: 28px 0 24px;
        line-height: 22px;
    }

    #game .img-wrap {
        border-radius: var(--border-radius) 0 0 var(--border-radius);
        width: 336px;
        padding: 47px 23px 47px 33px;
        width: 50%;
    }

    #game .start .img-wrap {
        padding: 79px 23px 73px 33px;
    }

    #game .img-wrap svg {
        width: 280px;
        height: auto;
        max-width: 100%;
    }

    .secondary-page .content h1,
    .default-page .content h1 {
        font-size: 36px;
        line-height: 1.33em;
    }

    .secondary-page .content h1+p {
        margin-bottom: 32px;
    }

    .event-schedule {
        margin-top: 40px;
    }

    .event-schedule th {
        font-size: 20px;
        line-height: 36px;
        padding-bottom: 24px;
    }

    .event-schedule td {
        padding-top: 32px;
        padding-bottom: 28px;
    }

    .event-schedule th:last-of-type,
    .event-schedule td:last-of-type {
        padding-left: 13px;
    }

    .event-schedule th:last-of-type,
    .event-schedule td:last-of-type {
        padding-left: 70px;
        padding-right: 13px;
    }

    .event-schedule td:first-of-type,
    .event-schedule time,
    .event-schedule .title {
        font-size: 22px;
    }

    .event-schedule time {
        margin-bottom: 10px;
    }

    .event-schedule .title {
        margin-bottom: 14px;
    }

    .form-wrap h2 {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .form-wrap fieldset {
        margin-top: 40px;
    }

    .dot:not(:last-of-type):after {
        width: 20vw;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .register-form-start {
        display: flex;
        gap: 30px;
        align-items: center;
    }

    .register-form-start #wpcf7-f78-o1 + svg { display: none; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .banner-text p {
        margin: auto;
    }

    .banner .button-wrap {
        margin: 40px auto 150px;
    }

    .banner img {
        display: block;
        margin: auto;
    }
}

@media (max-width: 1023px) {
    .e-book.secondary-page .attachment-post-thumbnail {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    legend {
        font-size: 22px;
    }

    input[type="submit"] {
        background-position-x: 38%;
    }

    .banner .event-link {
        width: 275px;
    }

    .secondary-page .content,
    .form-wrap {
        margin-top: 145px;
    }

    .secondary-page {
        display: flex;
        justify-content: space-between;
    }

    .e-book.secondary-page .attachment-post-thumbnail {
        margin-top: 74px;
    }

    .secondary-page.event {
        align-items: flex-start;
    }

    .secondary-page.event .content {
        padding-bottom: 100px;
    }

    .form-wrap {
        min-width: 345px;
        margin-left: 0;
        position: sticky;
        top: 85px;
    }

    .default-page .content {
        max-width: 800px;
        margin: 145px auto 100px;
    }

    .default-page h2 {
        margin: 32px 0 18px;
    }

    .default-page p {
        margin-bottom: 18px;
    }

    .dot:not(:last-of-type):after {
        width: 6vw;
    }

    .wpcf7-spinner {
        right: 90px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .secondary-page.event .content {
        margin-right: 50px;
    }

    .wpcf7 .button-wrap input[type="submit"] {
        background: none;
        padding-left: 13px;
    }
}

@media (max-width: 1199px) {

    .banner h1,
    .banner-text {
        text-align: center;
    }

    .banner h1 br {
        display: none;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 16px;
        line-height: 1.75em;
    }

    .button,
    input[type="submit"] {
        line-height: 56px;
        font-size: 14px;
    }

    .accent-underline:after {
        content: url(../images/orange-underline-desktop.svg);
        bottom: -15px;
    }

    .checkbox-wrap label:before {
        top: 4px;
    }

    .site-header {
        padding-left: 30px;
        padding-right: 30px;
    }

    .site-header .button {
        line-height: 48px;
    }

    .site-footer {
        padding-left: 80px;
        padding-right: 80px;
    }

    .footer-text {
        font-size: 14px;
    }

    .copyright { white-space: nowrap; }

    .banner {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        padding: 120px 50px 145px;
    }

    .banner img {
        width: 50%;
    }

    .banner h1 {
        font-size: 56px;
        line-height: 64px;
        margin-bottom: 24px;
    }

    .banner-text .button-wrap span {
        line-height: 56px;
    }

    .banner .event-link {
        line-height: 80px;
        width: 325px;
    }

    .text-section article {
        padding: 136px 10%;
    }

    .text-section article:first-of-type {
        background: url(../images/text-bg-1-desktop.svg) no-repeat left bottom;
    }

    .text-section article:last-of-type {
        background: #fff url(../images/text-bg-2-desktop.svg) no-repeat left bottom;
    }

    .text-section article h2 {
        font-size: 36px;
    }

    #game {
        background: var(--text-color) url(../images/city.svg) no-repeat bottom center /100%;
        background-size: cover;
    }

    #game .modal.start {
        width: 920px;
    }

    #game .modal-inner {
        padding-top: 91px;
        width: 50%;
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .button.play-game svg {
        height: 25px;
        width: auto;
    }

    #game .start .img-wrap {
        background: #F4E6DC url(../images/bg-pattern-big.svg) no-repeat center;
    }

    .game-wrap .overlay span {
        font-size: 56px;
    }

    .mike {
        left: 5%;
    }

    .mike svg {
        height: 55vh;
    }

    .mike .text {
        width: 180px;
        height: 98px;
        font-size: 14px;
        line-height: 19px;
        left: -1%;
        top: -90px;
    }

    .mike .text:after {
        content: url(../images/mike-text-after.svg);
        position: absolute;
        bottom: -9px;
        right: 10%;
    }

    .mike .text.error:after {
        content: url(../images/mike-text-after-error.svg);
    }

    .event-schedule th:last-of-type,
    .event-schedule td:last-of-type {
        padding-left: 110px;
    }

    .secondary-page.event .content {
        max-width: 726px;
    }

    .wpcf7-spinner {
        right: 145px;
        bottom: 48px;
    }
}

@media (min-width: 1290px) {
    .dot:not(:last-of-type):after {
        width: 8vw;
    }
}

@media (min-width: 1360px) {
    input[type="submit"] {
        background-position-x: 40%;
    }

    .secondary-page .content {
        margin: 159px auto 0;
    }

    .e-book.secondary-page .content {
        max-width: 660px;
    }

    .default-page .content {
        margin-top: 159px;
    }

    .form-wrap {
        padding: 63px 47px;
        max-width: 461px;
        margin-right: 30px;
        margin-top: 159px;
    }

    .dot:not(:last-of-type):after {
        width: 5vw;
    }

    .wpcf7-spinner {
        right: 159px;
        bottom: 80px;
    }
}

@media (min-width: 1440px) {
    .back-link {
        margin-bottom: 32px;
    }

    .banner {
        padding-right: 4%;
        padding-left: 8%;
    }

    .secondary-page.event .content {
        padding-bottom: 148px;
    }

    .form-wrap {
        margin-right: 50px;
    }
}

@media (min-width: 1580px) {
    .banner {
        padding-right: 8%;
        padding-left: 12%;
    }

    .secondary-page {
        justify-content: center;
    }

    .secondary-page .content {
        margin-left: 0;
        margin-right: 100px;
    }
}

@media (min-width: 1680px) {
    .dot:not(:last-of-type):after {
        width: 4vw;
    }
}

@media (min-width: 1920px) {
    .banner img {
        width: 60%;
    }
}

@media (min-width: 2560px) {
    body {
        font-size: 18px;
    }

    .button {
        line-height: 80px;
        font-size: 16px;
        border-radius: var(--border-radius-more);
        width: 300px;
    }

    .button.flex {
        padding-left: 32px;
        padding-right: 32px;
    }

    .site-header .button {
        width: 230px;
        line-height: 56px;
    }

    .footer-text {
        font-size: 16px;
    }

    #menu-footer,
    .copyright {
        font-size: 14px;
    }

    .banner h1 {
        font-size: 72px;
        line-height: 1.2em;
        margin-bottom: 40px;
    }

    .banner-text p {
        font-size: 24px;
        max-width: 530px;
    }

    .banner-text .button-wrap span {
        line-height: 80px;
        font-size: 16px;
        padding: 0 48px 0 32px;
    }

    .banner .button-wrap {
        border-radius: var(--border-radius-more);
        margin-top: 60px;
    }

    .game-wrap .overlay span {
        font-size: 72px;
    }
}