body {
    background: url(/sites/default/files/background-web.jpg);
    background-size: 50%;
}

body:not(.path-frontpage) {
    padding-top: 80px;
}

@media screen and (min-width: 992px) {
    body:not(.path-frontpage) {
        padding-top: 128px;
    }

    body.user-logged-in:not(.path-frontpage) {
        padding-top: 169px !important;
    }

    body.user-logged-in.toolbar-tray-open:not(.path-frontpage) {
        padding-top: 209px !important;
    }
}

.region-content {
    padding: 0;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}

.toolbar-fixed header {
    top: 39px;
}

.toolbar-fixed.toolbar-tray-open header {
    top: 79px;
}

header .navbar {
    padding: 0;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27%23FFFFFF%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e");
}

header.header-solid .navbar .navbar-toggler.collapsed {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27%23000000%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e");
}

header .region-header-logo {
    display: none;
}

header.header-solid .region-header-logo {
    display: block;
}

.navbar-toggler {
    border-color: transparent;
    z-index: 1;
}

.navbar-toggler:active, .navbar-toggler:focus {
    box-shadow: none;
    border-color: transparent;
}

@media screen and (max-width: 991.98px) {
    header .navbar .navbar-collapse {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.9);
        padding: 80px 40px 40px;
        transition: opacity 0.25s ease-in;
    }

    header .navbar .navbar-collapse.show, header .navbar .navbar-collapse.collapsing {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
    }

    header .navbar .navbar-collapse.collapsing {
        opacity: 0;
    }

    header .navbar .navbar-collapse.show {
        opacity: 1;
    }

    .menu--main a.nav-link {
        font-family: 'Bangers', sans-serif;
        font-size: 24px;
        color: #fff;
        text-decoration: none;
        padding-left: 0;
        padding-right: 0;
    }
}

.header-solid {
    background-color: #fff;
    border-bottom: 3px solid #000;
}

.header-solid .nav-icons a {
    color: #000;
}

.navbar > .container-fluid {
    display: block;
}

header .container-header {
    padding-top: 8px;
    padding-bottom: 8px;
}

.navbar-brand img {
    height: 52px;
}

@media screen and (min-width: 992px) {
    header .container-header {
        padding: 20px 64px;
    }

    .navbar-brand img {
        height: 76px;
    }
}

.nav-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-decoration: none;
    margin-left: 40px;
}

.nav-icons img {
    max-width: 70px;
    height: auto;
}

.nav-icons .nav-icon-title {
    font-family: 'Bangers', sans-serif;
    font-size: 20px;
    text-align: center;
}

.navbar-nav .nav-link.active {
    color: #CE0E2D;
}

/* Lang switcher */

.lang-switcher .lang-toggle {
    font-family: 'Bangers', sans-serif;
    background-color: #CE0E2D;
    border-radius: 0;
    text-transform: uppercase;
    border: none;
    font-size: 20px;
    padding: 8px 16px;
    margin: 0;
}

.lang-switcher .language-link {
    display: inline-block;
    font-family: 'Bangers', sans-serif;
    color: #000;
    font-size: 20px;
    text-decoration: none;
    width: 100%;
}

.lang-switcher .dropdown-menu {
    border-radius: 0;
    border: 3px solid #000;
}

/* Home */

.home-video {
    position: relative;
}

.path-frontpage .region {
    padding: 0;
}

.home-video-container {
    height: 40vh;
}

@media screen and (min-width: 992px) {
    .home-video-container {
        height: 100vh;
    }
}

.home-video-overlay {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center     ;
    width: 100%;
    height: 100%;
}

.home-video-overlay img {
    max-width: 50%;
    height: auto;
}

@media screen and (min-width: 992px) {
    .home-video-overlay img {
        max-width: 460px;
    }
}

.fullwidth-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.region-home-watchme {
    position: fixed;
    left: 12px;
    bottom: 12px;
    width: unset;
}

.btn-watchme {
    border: none;
    background-color: transparent;
}

.btn-watchme img {
    max-width: 140px;
    height: auto;
}

@media screen and (min-width: 992px) {
    .region-home-watchme {
        left: 24px;
        bottom: 24px;
    }

    .btn-watchme img {
        max-width: 200px;
    }
}

#block-heroes-modulowatchme .modal-body {
    background: url("/sites/default/files/background-watchme-modal.jpg") center top no-repeat;
    background-size: cover;
    padding-top: 180px;
}

.emisora img {
    max-width: 150px;
    height: auto;
}

.emisora p {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

h2.emisora-title {
    font-family: 'Bangers', sans-serif;
    font-size: 56px;
    color: #fff;
    text-shadow: 3px 3px #0047BA;
}

/* Video */

.video-js {
    padding-top: 56.25%;
}

.video-js .vjs-big-play-button {
    background-color: #CE0E2D !important;
    font-size: 42px;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    margin-left: -32px;
    border: none;
    border-radius: 50%;
}

/* Home slider */

@media screen and (min-width: 992px) {
    #block-heroes-modulowatchme .modal-body {
        padding: 160px 240px 30px;
        min-height: 600px;
    }

    .carousel-indicators {
        margin-bottom: 3rem;
    }
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-color: transparent;
    opacity: 1;
    margin-right: 6px;
    margin-left: 6px;
}

.carousel-indicators .active {
    background-color: #fff;
}

@media screen and (max-width: 991.98px) {
    .carousel-item img {
        height: 40vh;
        width: 100%;
        object-fit: cover;
    }
}

/* Home modal */

.modal-backdrop {
    z-index: 10;
}

.modal, .region-home-watchme {
    z-index: 12;
}

/* Home sections */

.home-title-big {
    font-family: 'Bangers', sans-serif;
    font-size: 64px;
    text-align: center;
    margin-bottom: 0;
}

@media screen and (min-width: 992px) {
    .home-title-big {
        font-size: 100px;
    }
}

.section-home-versatil {
    padding: 10vh 0;
}

.section-home-social {
    padding: 10vh 0;
}

.section-home-versatil img {
    max-width: 40vh;
    margin-top: -40px;
    transition: transform 0.1s ease-out;
}

.image-zoom:hover img {
    transform: scale(125%);
}

.cta-button-home {
    display: inline-block;
    background-color: #0047BA;
    clip-path: polygon(0 5%, 95% 14%, 92% 78%, 12% 100%);
    padding: 20px 60px;
    margin-top: -45px;
    font-family: 'Bangers', sans-serif;
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    transform: rotate(-4deg);
}

@media screen and (min-width: 992px) {
    .section-home-social {
        padding: 20vh 0;
    }

    .section-home-versatil img {
        margin-top: -60px;
    }

    .cta-button-home {
        font-size: 36px;
    }
}

.flash-hover {
    position: relative;
}

.img-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.075s ease-in;
}

.flash-hover:hover .img-flash {
    opacity: 1;
}

.vignette-social-links {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    padding: 16px 0;
    margin: 0;
}

.vignette-social-links li {
    list-style-type: none;
}

.section-home-social {
    background: url("/sites/default/files/background-comic-blue.jpg");
    overflow-x: hidden;
}

.social-vignette-content h2 {
    font-size: 58px;
    font-family: 'Bangers', sans-serif;
    transform: rotate(-4deg);
    color: #fff;
}

.social-vignette {
    position: absolute;
    top: 28%;
    right: 40%;
    width: 113%;
    height: 76%;
    background-size: contain;
}

.social-vignette svg {
    height: 100%;
    min-width: 100%;
}

.path-frontpage .social-vignette-content {
    padding: 0 5%;
}

.social-vignette-content h2 {
    color: #000;
}

@media screen and (min-width: 768px) {
    .path-frontpage .social-vignette-content {
        padding: 0 10%;
    }

    .social-vignette {
        top: 42%;
        right: 0%;
        height: 64%;
    }
}

@media screen and (min-width: 992px) {
    .social-vignette {
        top: -20%;
        width: 70%;
        height: 130%;
    }
}

/* Who is who */

#block-moduloheros, .whos-who-intro {
    position: relative;
}

#block-moduloheros::after, #block-moduloreaders::after, .whos-who-intro::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #fff;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    z-index: 1;
}

#block-descubreelheroees .row {
    min-height: calc(100vh - 81px);
}

@media screen and (min-width: 992px) {
    #block-descubreelheroees .row {
        min-height: calc(100vh - 128px);
    }
}

.who-is-who-background {
    position: absolute;
    top: -25vw;
    left: 0;
    width: 100%;
    height: 70vw;
    background: url("data:image/svg+xml,%3csvg width='834' height='578' viewBox='0 0 834 578' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M818.65 176.858C816.693 178.066 814.557 179.397 812.27 180.841C800.355 188.366 784.292 198.998 767.724 211.414C751.17 223.819 734.027 238.067 720.001 252.832C706.052 267.515 694.822 283.081 690.637 298.148C682.457 327.603 690.28 362.277 699.751 389.069C704.521 402.561 709.782 414.254 713.851 422.575C714.332 423.56 714.797 424.497 715.242 425.385C713.581 424.659 711.755 423.873 709.783 423.044C699.8 418.845 686.041 413.501 670.974 408.943C655.931 404.393 639.444 400.584 624.04 399.531C608.728 398.484 593.92 400.118 582.697 407.042C571.479 413.963 561.768 428.502 553.504 445.469C545.15 462.625 537.93 483.009 532.025 502.479C526.113 521.971 521.485 540.657 518.336 554.462C517.262 559.169 516.36 563.313 515.636 566.731C513.817 563.589 511.573 559.77 508.977 555.455C501.57 543.141 491.271 526.751 479.726 510.488C468.204 494.257 455.339 478.008 442.791 466.069C436.519 460.102 430.207 455.097 424.073 451.72C417.973 448.362 411.693 446.42 405.638 447.143C394.776 448.439 384.279 454.337 374.829 461.97C365.33 469.641 356.553 479.339 349.105 488.77C341.645 498.218 335.441 507.501 331.104 514.414C330.018 516.146 329.048 517.73 328.204 519.134C327.376 517.384 326.399 515.369 325.281 513.148C321.335 505.309 315.612 494.859 308.523 484.481C301.454 474.132 292.915 463.687 283.293 455.995C273.688 448.317 262.616 443.082 250.636 443.974C239.121 444.831 224.654 450.997 209.824 459.253C194.852 467.588 178.98 478.361 164.515 488.978C150.091 499.564 136.997 510.044 127.491 517.894C131.815 509.126 137.037 497.918 141.798 486.026C147.131 472.703 151.951 458.364 154.233 445.564C155.375 439.162 155.907 433.01 155.496 427.488C155.086 421.984 153.717 416.842 150.82 412.721L150.815 412.713C147.93 408.631 143.218 405.212 137.679 402.289C132.073 399.331 125.261 396.696 117.784 394.344C102.826 389.639 84.7835 385.936 67.4653 383.089C50.1224 380.239 33.387 378.227 20.9959 376.929C18.8574 376.705 16.8475 376.502 14.9854 376.32C15.9691 375.825 16.9979 375.304 18.0683 374.757C27.9067 369.729 41.2795 362.528 55.4037 353.842C69.5166 345.162 84.45 334.956 97.3749 323.908C110.248 312.904 121.393 300.843 127.619 288.401C140.13 263.4 134.56 231.485 126.485 206.655C122.402 194.1 117.579 183.057 113.781 175.158C113.33 174.221 112.894 173.327 112.474 172.48C113.663 172.964 114.939 173.478 116.294 174.015C125.057 177.492 137.163 181.984 150.521 186.035C163.863 190.081 178.548 193.716 192.448 195.437C206.257 197.147 219.736 197.027 230.413 193.176C251.782 185.467 264.078 163.565 271.005 144.778C274.521 135.243 276.774 126.184 278.148 119.52C278.294 118.814 278.429 118.135 278.556 117.485C278.785 117.752 279.019 118.025 279.261 118.303C283.319 122.987 289.147 129.169 296.207 135.117C310.1 146.822 329.809 158.499 350.553 154.186C356.282 152.995 361.497 149.561 366.179 144.953C370.878 140.329 375.264 134.302 379.328 127.491C387.457 113.872 394.601 96.6066 400.5 79.7749C406.411 62.9085 411.129 46.311 414.367 33.9434C415.231 30.6441 415.99 27.6431 416.639 25.0154C417.46 26.7912 418.377 28.7419 419.382 30.8364C424.193 40.8554 431.066 54.2113 439.293 67.4935C447.499 80.7407 457.16 94.0935 467.584 103.981C477.895 113.76 489.653 120.81 501.959 119.894C508.011 119.443 514.613 117.076 521.382 113.572C528.193 110.047 535.419 105.24 542.77 99.649C557.472 88.4676 572.965 73.9243 587.043 59.5715C601.136 45.2027 613.888 30.9443 623.113 20.2844C625.029 18.0701 626.794 16.0103 628.387 14.136C628.227 15.1572 628.063 16.2215 627.898 17.326C626.243 28.3835 624.412 43.5113 623.717 59.7514C623.024 75.9661 623.456 93.436 626.396 109.126C629.319 124.729 634.822 139.119 644.715 148.585C654.585 158.029 671.719 164.177 690.982 168.308C710.444 172.483 732.864 174.751 754.025 175.932C775.209 177.115 795.244 177.213 809.975 177.017C813.121 176.975 816.026 176.92 818.65 176.858Z' fill='white' stroke='black' stroke-width='8'/%3e%3c/svg%3e") right no-repeat;
    background-size: contain;
}

.who-is-who-content {
    padding: 0 40px;
}

.who-is-who-content h1 {
    font-family: 'Bangers', sans-serif;
    font-size: 32px;
    line-height: 1;
    transform: rotate(-8deg);
    padding-top: 3vw;
    text-align: center;
}

.column-heros-emblem {
    z-index: 1;
}

@media screen and (min-width: 768px) {
    .who-is-who-background {
        top: -15vw;
        left: 13vw;
        width: 70%;
        height: 45vw;
    }

    .who-is-who-content {
        padding: 0 20vw;
    }

    .who-is-who-content h1 {
        font-size: 42px;
    }
}

@media screen and (min-width: 992px) {
    .who-is-who-background {
        top: -70px;
        left: -140px;
        width: 725px;
        height: 470px;
    }

    .who-is-who-content h1 {
        font-size: 64px;
        text-align: left;
        padding-top: 1vw;
    }
}

@media screen and (min-width: 1200px) {
    .who-is-who-background {
        top: -60px;
        left: -140px;
        width: 800px;
        height: 520px;
    }

    .who-is-who-content {
        padding: 0 64px;
    }
}

@media screen and (min-width: 1400px) {
    .who-is-who-background {
        top: -40px;
        left: -140px;
        width: 840px;
        height: 560px;
    }

    .who-is-who-content {
        padding: 0 32px;
    }

    .who-is-who-content h1 {
        font-size: 76px;
    }
}

#block-modulovideosobreheroinside {
    background: url("/sites/default/files/about-hero-inside-background.jpg");
}

#block-moduloreaders {
    position: relative;
    background: url("/sites/default/files/background-comic-blue.jpg");
    min-height: calc(100vh - 128px);
    padding-bottom: 64px;
}

.reader-toggle-btn, .hero-toggle-btn {
    border: none;
    background-color: transparent;
}

.reader-toggle-btn img, .hero-toggle-btn img {
    max-width: 100%;
    transition: all 0.125s ease-out;
}

.reader-toggle-btn:hover img, .hero-toggle-btn:hover img {
    transform: translateY(-10px) scale(115%);
}

#block-modulootros {
    background: url("/sites/default/files/readers-superheros-background.png") center no-repeat;
    background-size: cover;
    padding: 25vh 0;
}

#block-moduloheros {
    background: url("/sites/default/files/background-comic-yellow.jpg");
    padding: 0 0 40px;
}

.whos-who-title {
    max-height: 280px;
    width: auto;
}

.whos-who-intro .whos-who-title {
    position: absolute;
    top: -8px;
    right: 40px;
    max-width: 270px;
    z-index: 1;
}

@media screen and (min-width: 992px) {
    .whos-who-intro .social-vignette {
        top: 3%;
        width: 71%;
        height: 97%;
    }

    .whos-who-intro .social-vignette-content {
        transform: rotate(357deg);
    }
}

.hero-toggle-btn img {
    max-width: 100%;
}

@media screen and (min-width: 992px) {
    #block-moduloheros {
        padding: 64px 0 100px;
    }

    #block-moduloreaders .readers-grid {
        background: url("/sites/default/files/background-readers-2.png") center no-repeat;
        background-size: contain;
    }

    .reader-toggle-btn img {
        max-width: 210px;
    }

    .hero-toggle-btn img {
        max-width: 240px;
    }
}

/* Modals */

.modal-content {
    border-radius: 0;
    border: 3px solid #000;
}

.modal-header {
    position: relative;
    border: none;
    padding: 0;
    z-index: 1;
}

.modal-header .btn-close {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center no-repeat;
    background-size: 50%;
    background-color: #CE0E2D;
    opacity: 1;
    border-radius: 0;
    margin-bottom: -40px;
    width: 2em;
    height: 2em;
}

@media screen and (min-width: 992px) {
    .modal-lg {
        width: 900px !important;
        max-width: 900px !important;
    }

    .modal-header .btn-close {
        position: absolute;
        top: -10px;
        right: -10px;
        margin-bottom: 0;
        width: 1em;
        height: 1em;
    }
}

@media screen and (min-width: 1200px) {
    .modal-lg {
        width: 1000px !important;
        max-width: 1000px !important;
    }
}

h3.modal-title {
    font-family: 'Bangers', sans-serif;
    font-size: 64px;
    line-height: 1;
    margin-top: 40px;
    margin-bottom: 8px;
}

.modal-content p {
    font-family: 'Comic Neue', sans-serif;
}

.emisora .btn-primary {
    background-color: #CE0E2D;
    border-color: #CE0E2D;
    font-family: 'Bangers', sans-serif;
    font-size: 20px;
}

/* Legal texts */

.textpage {
    padding: 40px;
    background-color: #fff;
    box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.7);
}

.textpage h1 {
    font-family: 'Bangers', sans-serif;
    font-size: 48px;
}

@media screen and (min-width: 992px) {
    .textpage {
        margin-top: 100px;
        margin-bottom: 100px;
        padding: 64px 128px;
    }
}

/* Footer */

footer {
    background-color: #002664;
}

.footer-logo img {
    max-width: 180px;
    height: auto;
}

.footer-social-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 180px;
    padding: 0;
    margin: 24px auto 0;
}

@media screen and (min-width: 992px) {
    .footer-social-links {
        margin: 24px 0 0;
    }
}

.footer-social-links li {
    list-style-type: none;
}

.region-footer-right-1 {
    margin-bottom: 40px;
}

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

.text-smaller {
    font-size: 12px;
}

.logo-cj-enm, .logo-million-volt, .logo-ygg-global, .logo-tencent-video, .logo-deaplaneta {
    height: auto;
}

.logo-cj-enm {
    max-width: 87px;
}

.logo-million-volt {
    max-width: 150px;
}

.logo-ygg-global {
    max-width: 57px;
}

.logo-tencent-video {
    max-width: 185px;
}

.logo-deaplaneta {
    max-width: 100px;
}

/* --- Who's who with page turn ----------------*/

.arrow-prev {
    left: 10px;
    background: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.928 21C10.5339 21.001 10.1436 20.9238 9.77948 20.773C9.41541 20.6221 9.08489 20.4005 8.80704 20.121L1.68604 13L8.80704 5.879C9.94004 4.745 11.916 4.745 13.049 5.879C13.615 6.443 13.928 7.196 13.928 7.998C13.928 8.744 13.658 9.449 13.164 10H18C19.654 10 21 11.346 21 13C21 14.654 19.654 16 18 16H13.164C13.657 16.549 13.928 17.252 13.928 17.998C13.9294 18.3926 13.8525 18.7836 13.7016 19.1482C13.5507 19.5128 13.3289 19.8438 13.049 20.122C12.7711 20.4013 12.4405 20.6227 12.0765 20.7734C11.7124 20.9241 11.3221 21.0011 10.928 21ZM4.51404 13L10.221 18.707C10.4114 18.889 10.6646 18.9906 10.928 18.9906C11.1914 18.9906 11.4447 18.889 11.635 18.707C11.824 18.518 11.928 18.266 11.928 17.999C11.928 17.732 11.824 17.482 11.637 17.294L8.34204 14H18C18.2575 13.9885 18.5006 13.8781 18.6788 13.6918C18.8569 13.5055 18.9563 13.2577 18.9563 13C18.9563 12.7423 18.8569 12.4945 18.6788 12.3082C18.5006 12.1219 18.2575 12.0115 18 12H8.34204L11.635 8.707C11.7283 8.6145 11.8023 8.50448 11.8528 8.38326C11.9033 8.26205 11.9294 8.13204 11.9295 8.00071C11.9296 7.86938 11.9037 7.73934 11.8533 7.61805C11.803 7.49677 11.7291 7.38664 11.636 7.294C11.4457 7.11154 11.1924 7.00959 10.9287 7.0094C10.6651 7.00922 10.4116 7.11081 10.221 7.293L4.51404 13Z' fill='white'/%3e%3c/svg%3e") center no-repeat;
}

.arrow-next {
    right: 10px;
    background: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.0002 21C11.1992 21 10.4452 20.688 9.87922 20.121C9.31322 19.554 8.99922 18.8 9.00022 17.998C9.00022 17.252 9.27122 17 9.76422 16H4.92822C3.27422 16 1.92822 14.653 1.92822 13C1.92822 11.347 3.27422 10 4.92822 10H9.76422C9.27022 9 9.00022 8.745 9.00022 7.999C8.99934 7.60483 9.07667 7.21441 9.22772 6.85033C9.37878 6.48626 9.60056 6.15577 9.88022 5.878C11.0122 4.746 12.9882 4.745 14.1212 5.879L21.2422 13L14.1212 20.121C13.8434 20.4005 13.5128 20.6221 13.1488 20.773C12.7847 20.9238 12.3943 21.001 12.0002 21ZM4.92822 12C4.67074 12.0115 4.42763 12.1219 4.2495 12.3082C4.07137 12.4945 3.97196 12.7423 3.97196 13C3.97196 13.2577 4.07137 13.5055 4.2495 13.6918C4.42763 13.8781 4.67074 13.9885 4.92822 14H14.5862L11.2932 17.293C11.1059 17.4802 11.0005 17.7341 11.0002 17.999C11.0002 18.268 11.1042 18.518 11.2932 18.707C11.4836 18.889 11.7368 18.9906 12.0002 18.9906C12.2636 18.9906 12.5169 18.889 12.7072 18.707L18.4142 13L12.7072 7.293C12.5169 7.11097 12.2636 7.00938 12.0002 7.00938C11.7368 7.00938 11.4836 7.11097 11.2932 7.293C11.1059 7.48025 11.0005 7.73415 11.0002 7.999C11.0002 8.267 11.1042 8.518 11.2932 8.707L14.5862 12H4.92822Z' fill='white'/%3e%3c/svg%3e") center no-repeat;
}

.arrow-prev, .arrow-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #CE0E2D;
    top: calc(50% - 27px);
    background-size: 70%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    z-index: 12;
}

@media screen and (min-width: 992px) {
    .arrow-prev, .arrow-next {
        width: 54px;
        height: 54px;
    }

    .arrow-prev {
        left: 32px;
    }

    .arrow-next {
        right: 32px;
    }
}

.spread {
    display: flex;
    width: 100%;
    height: calc(100vh - 127px);
    max-height: 500px;
    transition: opacity 0.2s ease-in;
}

@media screen and (min-width: 768px) {
    .spread {
        max-height: unset;
    }
}

.cover-animation {
    background: url('/sites/default/files/inline-images/whos-who-animation-bg.webp') center top no-repeat;
    background-size: cover;
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

.cover-animation img {
    margin-top: 18vh;
    animation: rotateImage 2s infinite;
}

@keyframes rotateImage {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

.page-layout {
    display: grid;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.strip-container {
    position: relative;
    padding: 3px;
}

.strip-container::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.strip-container .character-overlay {
    position: absolute;
    width: auto;
    z-index: 1;
    cursor: pointer;
}

.comic-strip {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Style 1 */

.page-layout.style-1 {
    grid-template-columns: 35% 15% 15% 35%;
    grid-template-rows: 25% 37.5% 37.5%;
    grid-template-areas: 
        "strip-1 strip-2 strip-2 strip-3"
        "strip-4 strip-4 strip-5 strip-5"
        "strip-6 strip-6 strip-7 strip-7";
}

.style-1 .strip-container:nth-child(1) {
    grid-area: strip-1;
    margin-right: -15%;
}

.style-1 .strip-container:nth-child(1)::before, .style-1 .strip-container:nth-child(1) .comic-strip {
    clip-path: polygon(0 0, 73% 0, 98% 92%, 0 92%);
}

.style-1 .strip-container:nth-child(2) {
    grid-area: strip-2;
    margin-right: -10%;
    margin-left: -10%;
}

.style-1 .strip-container:nth-child(2)::before, .style-1 .strip-container:nth-child(2) .comic-strip {
    clip-path: polygon(0 0, 100% 0, 72% 92%, 28% 92%);
}

.style-1 .strip-container:nth-child(3) {
    grid-area: strip-3;
    margin-left: -15%;
}

.style-1 .strip-container:nth-child(3)::before, .style-1 .strip-container:nth-child(3) .comic-strip {
    clip-path: polygon(27% 0, 100% 0, 100% 92%, 2% 92%);
}

.style-1 .strip-container:nth-child(4) {
    grid-area: strip-4;
    margin-right: -14%;
}

.style-1 .strip-container:nth-child(4)::before, .style-1 .strip-container:nth-child(4) .comic-strip {
    clip-path: polygon(0 0, 100% 0, 74% 87%, 0 79%);
}

.style-1 .strip-container:nth-child(5) {
    grid-area: strip-5;
    margin-left: -10%;
}

.style-1 .strip-container:nth-child(5)::before, .style-1 .strip-container:nth-child(5) .comic-strip {
    clip-path: polygon(27% 0, 100% 0, 100% 100%, 0 88%);
}

.style-1 .strip-container:nth-child(6) {
    grid-area: strip-6;
    margin-top: -4vh;
    margin-right: -25%;
}

.style-1 .strip-container:nth-child(6)::before, .style-1 .strip-container:nth-child(6) .comic-strip {
    clip-path: polygon(0 0, 88% 9%, 95% 100%, 0 100%);
}

.style-1 .strip-container:nth-child(7) {
    grid-area: strip-7;
    margin-top: -4vh;
}

.style-1 .strip-container:nth-child(7)::before, .style-1 .strip-container:nth-child(7) .comic-strip {
    clip-path: polygon(16% 10%, 100% 18%, 100% 100%, 25% 100%);
}

/* Style 2 */

.page-layout.style-2 {
    grid-template-columns: 35% 15% 15% 35%;
    grid-template-rows: 30% 40% 30%;
    grid-template-areas: 
        "strip-1 strip-2 strip-2 strip-3"
        "strip-4 strip-4 strip-5 strip-5"
        "strip-6 strip-7 strip-7 strip-8";
}

.style-2 .strip-container:nth-child(1) {
    grid-area: strip-1;
}

.style-2 .strip-container:nth-child(1)::before, .style-2 .strip-container:nth-child(1) .comic-strip {
    clip-path: polygon(0 0, 100% 0, 75% 94%, 0 94%);
}

.style-2 .strip-container:nth-child(2) {
    grid-area: strip-2;
    margin-right: -20%;
    margin-left: -20%;
}

.style-2 .strip-container:nth-child(2)::before, .style-2 .strip-container:nth-child(2) .comic-strip {
    clip-path: polygon(21% 0, 100% 0, 79% 94%, 0 94%);
}

.style-2 .strip-container:nth-child(3) {
    grid-area: strip-3;
}

.style-2 .strip-container:nth-child(3)::before, .style-2 .strip-container:nth-child(3) .comic-strip {
    clip-path: polygon(25% 0, 100% 0, 100% 94%, 0 94%);
}

.style-2 .strip-container:nth-child(4) {
    grid-area: strip-4;
    margin-right: -40%;
}

.style-2 .strip-container:nth-child(4)::before, .style-2 .strip-container:nth-child(4) .comic-strip {
    clip-path: polygon(0 0, 75% 0, 100% 94%, 0 94%);
}

.style-2 .strip-container:nth-child(5) {
    grid-area: strip-5;
}

.style-2 .strip-container:nth-child(5)::before, .style-2 .strip-container:nth-child(5) .comic-strip {
    clip-path: polygon(12% 0, 100% 0, 100% 94%, 46% 94%);
}

.style-2 .strip-container:nth-child(6) {
    grid-area: strip-6;
    margin-right: -7%;
}

.style-2 .strip-container:nth-child(6)::before, .style-2 .strip-container:nth-child(6) .comic-strip {
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}

.style-2 .strip-container:nth-child(7) {
    grid-area: strip-7;
    margin-left: -10%;
    margin-right: -10%;
}

.style-2 .strip-container:nth-child(7)::before, .style-2 .strip-container:nth-child(7) .comic-strip {
    clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
}

.style-2 .strip-container:nth-child(8) {
    grid-area: strip-8;
    margin-left: -7%;
}

.style-2 .strip-container:nth-child(8)::before, .style-2 .strip-container:nth-child(8) .comic-strip {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
}

/* Style 3 */

.page-layout.style-3 {
    grid-template-columns: 35% 15% 15% 35%;
    grid-template-rows: 33.3333% 33.3333% 33.3333%;
    grid-template-areas: 
        "strip-1 strip-2 strip-2 strip-5"
        "strip-3 strip-4 strip-4 strip-5"
        "strip-6 strip-6 strip-7 strip-7";
}

.style-3 .strip-container:nth-child(1) {
    grid-area: strip-1;
}

.style-3 .strip-container:nth-child(1)::before, .style-3 .strip-container:nth-child(1) .comic-strip {
    clip-path: polygon(0 0, 83% 0, 91% 100%, 0 87%);
}

.style-3 .strip-container:nth-child(2) {
    grid-area: strip-2;
    margin-right: -7%;
    margin-left: -8%;
}

.style-3 .strip-container:nth-child(2)::before, .style-3 .strip-container:nth-child(2) .comic-strip {
    clip-path: polygon(0 0, 100% 0, 93% 90%, 6% 82%);
}

.style-3 .strip-container:nth-child(3) {
    grid-area: strip-3;
    margin-bottom: -10%;
    margin-top: -10%;
}

.style-3 .strip-container:nth-child(3)::before, .style-3 .strip-container:nth-child(3) .comic-strip {
    clip-path: polygon(0 2%, 92% 13%, 100% 90%, 0 97%);
}

.style-3 .strip-container:nth-child(4) {
    grid-area: strip-4;
    margin-top: -15%;
}

.style-3 .strip-container:nth-child(4)::before, .style-3 .strip-container:nth-child(4) .comic-strip {
    clip-path: polygon(0 0, 99% 7%, 91% 91%, 11% 96%);
}

.style-3 .strip-container:nth-child(5) {
    grid-area: strip-5;
}

.style-3 .strip-container:nth-child(5)::before, .style-3 .strip-container:nth-child(5) .comic-strip {
    clip-path: polygon(17% 0, 100% 0, 100% 91%, 2% 95%);
}

.style-3 .strip-container:nth-child(6) {
    grid-area: strip-6;
}

.style-3 .strip-container:nth-child(6)::before, .style-3 .strip-container:nth-child(6) .comic-strip {
    clip-path: polygon(0 11%, 100% 0%, 76% 100%, 0 100%);
}

.style-3 .strip-container:nth-child(7) {
    grid-area: strip-7;
    margin-top: -3vh;
    margin-left: -18%;
}

.style-3 .strip-container:nth-child(7)::before, .style-3 .strip-container:nth-child(7) .comic-strip {
    clip-path: polygon(21% 9%, 100% 0, 100% 100%, 0 100%);
}

/* ---- Static backgrounds ---------------------------------------- */

/* Page 1 */
.page-1 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-1-bg1.webp');
}

.page-1 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-1-bg2.webp');
}

.page-1 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-1-bg3.webp');
}

.page-1 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-1-bg4.webp');
}

.page-1 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-1-bg5.webp');
}

.page-1 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-1-bg6.webp');
}

.page-1 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-1-bg7.webp');
}

/* Page 2 */

.page-2 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-2-bg1.webp');
}

.page-2 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-2-bg3.webp');
}

.page-2 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-2-bg4.webp');
}

.page-2 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-2-bg5.webp');
}

.page-2 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-2-bg6.webp');
}

.page-2 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-2-bg7.webp');
}

.page-2 .strip-container:nth-child(8) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-1-page-2-bg8.webp');
}

/* Page 3 */

.page-3 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-1-bg1.webp');
}

.page-3 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-1-bg2.webp');
}

.page-3 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-1-bg3.webp');
}

.page-3 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-1-bg4.webp');
}

.page-3 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-1-bg5.webp');
}

.page-3 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-1-bg6.webp');
}

.page-3 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-1-bg7.webp');
}

/* Page 4 */

.page-4 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-2-bg1.webp');
}

.page-4 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-2-bg2.webp');
}

.page-4 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-2-bg3.webp');
}

.page-4 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-2-bg4.webp');
}

.page-4 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-2-bg5.webp');
}

.page-4 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-2-bg6.webp');
}

.page-4 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-2-bg7.webp');
}

.page-4 .strip-container:nth-child(8) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-2-page-2-bg8.webp');
}

/* Page 5 */

.page-5 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-1-bg1.webp');
}

.page-5 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-1-bg2.webp');
}

.page-5 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-1-bg3.webp');
}

.page-5 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-1-bg4.webp');
}

.page-5 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-1-bg5.webp');
}

.page-5 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-1-bg6.webp');
}

.page-5 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-1-bg7.webp');
}

/* Page 6 */

.page-6 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-2-bg1.webp');
}

.page-6 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-2-bg2.webp');
}

.page-6 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-2-bg3.webp');
}

.page-6 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-2-bg4.webp');
}

.page-6 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-2-bg5.webp');
}

.page-6 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-2-bg6.webp');
}

.page-6 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-3-page-2-bg7.webp');
}

/* Page 7 */

.page-7 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-1-bg1.webp');
}

.page-7 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-1-bg2.webp');
}

.page-7 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-1-bg3.webp');
}

.page-7 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-1-bg4.webp');
}

.page-7 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-1-bg5.webp');
}

.page-7 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-1-bg6.webp');
}

.page-7 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-1-bg7.webp');
}

/* Page 8 */

.page-8 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-2-bg1.webp');
}

.page-8 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-2-bg2.webp');
}

.page-8 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-2-bg3.webp');
}

.page-8 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-2-bg4.webp');
}

.page-8 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-2-bg5.webp');
}

.page-8 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-2-bg6.webp');
}

.page-8 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-2-bg7.webp');
}

.page-8 .strip-container:nth-child(8) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-4-page-2-bg8.webp');
}

/* Page 9 */

.page-9 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-1-bg1.webp');
}

.page-9 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-1-bg2.webp');
}

.page-9 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-1-bg3.webp');
}

.page-9 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-1-bg4.webp');
}

.page-9 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-1-bg5.webp');
}

.page-9 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-1-bg6.webp');
}

.page-9 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-1-bg7.webp');
}

/* Page 10 */

.page-10 .strip-container:nth-child(1) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-2-bg1.webp');
}

.page-10 .strip-container:nth-child(2) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-2-bg2.webp');
}

.page-10 .strip-container:nth-child(3) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-2-bg3.webp');
}

.page-10 .strip-container:nth-child(4) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-2-bg4.webp');
}

.page-10 .strip-container:nth-child(5) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-2-bg5.webp');
}

.page-10 .strip-container:nth-child(6) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-2-bg6.webp');
}

.page-10 .strip-container:nth-child(7) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-2-bg7.webp');
}

.page-10 .strip-container:nth-child(8) .comic-strip {
    background-image: url('/sites/default/files/inline-images/spread-5-page-2-bg8.webp');
}

/* ---- Image overlays -------------------------------------------- */

.page-1 .strip-container:nth-child(1) .character-overlay {
    height: 75%;
    left: 5%;
    bottom: 9%;
}

.page-1 .strip-container:nth-child(5) .character-overlay {
    height: 90%;
    left: 10%;
    bottom: 2%;
}

.page-1 .strip-container:nth-child(6) .character-overlay {
    height: 105%;
    left: 10%;
    bottom: 0;
}

.page-2 .strip-container:nth-child(2) .character-overlay {
    height: 80%;
    bottom: 5%;
}

.page-2 .strip-container:nth-child(5) .character-overlay {
    height: 90%;
    right: 0;
    bottom: 6%;
}

.page-2 .strip-container:nth-child(7) .character-overlay {
    height: 120%;
    left: 5%;
    bottom: 0;
}

.page-3 .strip-container:nth-child(1) .character-overlay {
    height: 95%;
    bottom: 3%;
}

.page-3 .strip-container:nth-child(5) .character-overlay {
    height: 66%;
    bottom: 5%;
}

.page-3 .strip-container:nth-child(6) .character-overlay {
    height: 110%;
    left: -5%;
    bottom: 0;
}

.page-4 .strip-container:nth-child(2) .character-overlay {
    height: 105%;
    left: 20%;
    bottom: 6%;
}

.page-4 .strip-container:nth-child(5) .character-overlay {
    height: 100%;
    right: 10%;
    bottom: 6%;
}

.page-4 .strip-container:nth-child(7) .character-overlay {
    height: 105%;
    left: 0;
    bottom: 0;
}

.page-5 .strip-container:nth-child(1) .character-overlay {
    height: 105%;
    left: 10%;
    bottom: 8%;
}

.page-5 .strip-container:nth-child(5) .character-overlay {
    height: 120%;
    right: 5%;
    bottom: 0;
}

.page-5 .strip-container:nth-child(6) .character-overlay {
    height: 120%;
    bottom: 0;
}

.page-6 .strip-container:nth-child(1) .character-overlay {
    height: 100%;
    bottom: 3%;
}

.page-6 .strip-container:nth-child(5) .character-overlay {
    height: 70%;
    right: -10%;
    bottom: 5%;
}

.page-6 .strip-container:nth-child(6) .character-overlay {
    height: 120%;
    left: -15%;
    bottom: 0;
}

.page-7 .strip-container:nth-child(1) .character-overlay {
    height: 105%;
    bottom: 8%;
}

.page-7 .strip-container:nth-child(5) .character-overlay {
    height: 125%;
    bottom: 0;
}

.page-7 .strip-container:nth-child(6) .character-overlay {
    height: 140%;
    left: 10%;
    bottom: 0;
}

.page-8 .strip-container:nth-child(4) .character-overlay {
    height: 105%;
    right: 20%;
    bottom: 6%;
}

.page-8 .strip-container:nth-child(8) .character-overlay {
    height: 160%;
    right: 0;
    bottom: 0;
}

.page-9 .strip-container:nth-child(5) .character-overlay {
    height: 95%;
    bottom: 2%;
    right: 15%;
}

.page-9 .strip-container:nth-child(6) .character-overlay {
    height: 115%;
    bottom: 0;
}

.page-10 .strip-container:nth-child(5) .character-overlay {
    height: 85%;
    bottom: 6%;
}

/* Dialog bubbles */

.dialog-bubble {
    position: absolute;
    z-index: 2;
    font-family: "Bangers", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.dialog-bubble img {
    max-width: 80px;
    height: auto;
}

@media screen and (min-width: 768px) {
    .dialog-bubble {
        font-size: 18px;
    }

    .dialog-bubble img {
        max-width: 140px;
    }
}

.top-left-pointing-bubble, .bottom-left-pointing-bubble, .top-right-pointing-bubble, .bottom-right-pointing-bubble {
    background-size: 100% auto;
}

.page-1 .strip-container:nth-child(1) .dialog-bubble {
    width: 72%;
    top: 45%;
    left: 70%;
    background: url("data:image/svg+xml,%3csvg width='233' height='298' viewBox='0 0 233 298' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M116.5 15.59C94.94 15.59 74.77 22.82 57.52 35.39L7.5 4.59L37.76 53.57C15.44 79.11 1.5 115.37 1.5 155.59C1.5 232.91 52.99 295.59 116.5 295.59C180.01 295.59 231.5 232.91 231.5 155.59C231.5 78.27 180.01 15.59 116.5 15.59Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 13% 8% 12% 7%;
}

.page-1 .strip-container:nth-child(1) .dialog-bubble img {
    max-width: 60px;
}

@media screen and (min-width: 768px) {
    .page-1 .strip-container:nth-child(1) .dialog-bubble img {
        max-width: 100px;
    }
}

@media screen and (min-width: 992px) {
    .page-1 .strip-container:nth-child(1) .dialog-bubble {
        top: 25%;
        width: 184px;
        padding: 36px 20px 33px;
    }
}

.page-1 .strip-container:nth-child(5) .dialog-bubble {
    width: 80%;
    left: 27%;
    top: -43%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 229.91C60.5 210.91 72.2 192.53 81.5 175.91C81.5 175.91 1.5 176.91 1.5 84.91C1.5 -7.09 137.5 1.73 164 1.73C190.5 1.73 332.5 -3.08 332.5 90.92C332.5 190.92 231.48 186.21 177.5 184.92C93.5 182.92 105.5 191.92 61.5 229.92V229.91Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 8% 5% 20%;
}

@media screen and (min-width: 992px) {
    .page-1 .strip-container:nth-child(5) .dialog-bubble {
        left: 35%;
        width: 266px;
        padding: 19px 19px 65px;
    }
}

.page-1 .strip-container:nth-child(6) .dialog-bubble {
    width: 50%;
    left: 47%;
    top: -22%;
    background: url("data:image/svg+xml,%3csvg width='242' height='211' viewBox='0 0 242 211' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M42.5 208.5C42.5 208.5 58.5 189.5 59.5 178.5C42.5 173.5 1.5 172.5 1.5 90.5C1.5 8.5 111.5 1.5 161.5 1.5C221.5 1.5 240.5 28.5 240.5 75.5C240.5 104.5 239.5 194.5 102.5 182.5C79.5 205.5 42.5 208.5 42.5 208.5Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 8% 5% 12% 5%;
}

@media screen and (min-width: 992px) {
    .page-1 .strip-container:nth-child(6) .dialog-bubble {
        width: 216px;
        padding: 35px 22px 52px;
    }
}

.page-2 .strip-container:nth-child(2) .dialog-bubble {
    width: 100%;
    right: 65%;
    top: -2%;
    background: url("data:image/svg+xml,%3csvg width='242' height='211' viewBox='0 0 242 211' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M199.5 208.5C199.5 208.5 183.5 189.5 182.5 178.5C199.5 173.5 240.5 172.5 240.5 90.5C240.5 8.5 130.5 1.5 80.5 1.5C20.5 1.5 1.5 28.5 1.5 75.5C1.5 104.5 2.5 194.5 139.5 182.5C162.5 205.5 199.5 208.5 199.5 208.5Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 10% 7% 18%;
}

.page-2 .strip-container:nth-child(2) .dialog-bubble img {
    max-width: 70px;
}

@media screen and (min-width: 768px) {
    .page-2 .strip-container:nth-child(2) .dialog-bubble img {
        max-width: 90px;
    }
}

@media screen and (min-width: 992px) {
    .page-2 .strip-container:nth-child(2) .dialog-bubble {
        width: 218px;
        padding: 17px 20px 46px;
    }
}

.page-2 .strip-container:nth-child(5) .dialog-bubble {
    width: 80%;
    right: 70%;
    top: 33%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M272.5 3.14C273.5 22.14 261.8 40.52 252.5 57.14C252.5 57.14 332.5 56.14 332.5 148.14C332.5 240.14 196.5 231.33 170 231.33C143.5 231.33 1.5 236.14 1.5 142.14C1.5 42.14 102.52 46.85 156.5 48.14C240.5 50.14 228.5 41.14 272.5 3.14Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 18% 5% 8% 5%;
}

@media screen and (min-width: 992px) {
    .page-2 .strip-container:nth-child(5) .dialog-bubble {
        right: 50%;
        top: 27%;
        width: 277px;
        padding: 62px 20px 28px;
    }
}

.page-2 .strip-container:nth-child(7) .dialog-bubble {
    width: 85%;
    top: 15%;
    left: 62%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 3.14C60.5 22.14 72.2 40.52 81.5 57.14C81.5 57.14 1.5 56.14 1.5 148.14C1.5 240.14 137.5 231.33 164 231.33C190.5 231.33 332.5 236.14 332.5 142.14C332.5 42.14 231.48 46.85 177.5 48.14C93.5 50.14 105.5 41.14 61.5 3.14Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 22% 5% 12% 5%;
}

@media screen and (min-width: 992px) {
    .page-2 .strip-container:nth-child(7) .dialog-bubble {
        width: 212px;
        padding: 55px 12px 30px;
    }
}

.page-3 .strip-container:nth-child(1) .dialog-bubble {
    width: 100%;
    top: 45%;
    left: 85%;
    background: url("data:image/svg+xml,%3csvg width='242' height='211' viewBox='0 0 242 211' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M42.5 1.78999C42.5 1.78999 58.5 20.79 59.5 31.79C42.5 36.79 1.5 37.79 1.5 119.79C1.5 201.79 111.5 208.79 161.5 208.79C221.5 208.79 240.5 181.79 240.5 134.79C240.5 105.79 239.5 15.79 102.5 27.79C79.5 4.78999 42.5 1.78999 42.5 1.78999Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 20% 5% 13%;
}

.page-3 .strip-container:nth-child(1) .dialog-bubble img {
    max-width: 70px;
}

@media screen and (min-width: 768px) {
    .page-3 .strip-container:nth-child(1) .dialog-bubble img {
        max-width: 110px;
    }
}

@media screen and (min-width: 992px) {
    .page-3 .strip-container:nth-child(1) .dialog-bubble {
        width: 218px;
        padding: 48px 24px 29px;
    }
}

.page-3 .strip-container:nth-child(5) .dialog-bubble {
    width: 100%;
    top: 2%;
    right: -8%;
    background: url("data:image/svg+xml,%3csvg width='251' height='197' viewBox='0 0 251 197' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M23.5 193.5C29.45 181.94 34.87 165.98 39.5 143.5C39.5 143.5 1.5 124.5 1.5 74.5C1.5 24.5 30.5 1.5 121.5 1.5C212.5 1.5 250.56 18.53 248.5 88.5C246.5 156.5 145.5 166.5 112.5 166.5C79.5 166.5 70.5 160.5 70.5 160.5C55.3 176.17 39.56 186.41 23.5 193.5Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 13% 5% 28%;
}

@media screen and (min-width: 992px) {
    .page-3 .strip-container:nth-child(5) .dialog-bubble {
        width: 225px;
        padding: 29px 12px 41px;
    }
}

.page-3 .strip-container:nth-child(6) .dialog-bubble {
    width: 75%;
    left: 2%;
    top: -35%;
    background: url("data:image/svg+xml,%3csvg width='251' height='197' viewBox='0 0 251 197' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M226.59 193.5C220.64 181.94 215.22 165.98 210.59 143.5C210.59 143.5 248.59 124.5 248.59 74.5C248.59 24.5 219.59 1.5 128.59 1.5C33.5905 1.5 -0.469523 18.53 1.59048 88.5C3.59048 156.5 104.59 166.5 137.59 166.5C170.59 166.5 179.59 160.5 179.59 160.5C194.79 176.17 210.53 186.41 226.59 193.5Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 11% 5% 20% 5%;
}

.page-3 .strip-container:nth-child(6) .dialog-bubble img {
    max-width: 70px;
}

@media screen and (min-width: 768px) {
    .page-3 .strip-container:nth-child(6) .dialog-bubble img {
        max-width: 100px;
    }
}

@media screen and (min-width: 992px) {
    .page-3 .strip-container:nth-child(6) .dialog-bubble {
        width: 214px;
        padding: 38px 17px 69px;
    }
}

.page-4 .strip-container:nth-child(2) .dialog-bubble {
    width: 80%;
    top: 25%;
    right: 50%;
    background: url("data:image/svg+xml,%3csvg width='242' height='211' viewBox='0 0 242 211' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M199.5 1.78999C199.5 1.78999 183.5 20.79 182.5 31.79C199.5 36.79 240.5 37.79 240.5 119.79C240.5 201.79 130.5 208.79 80.5 208.79C20.5 208.79 1.5 181.79 1.5 134.79C1.5 105.79 2.5 15.79 139.5 27.79C162.5 4.78999 199.5 1.78999 199.5 1.78999Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 20% 5% 10% 5%;
}

@media screen and (min-width: 992px) {
    .page-4 .strip-container:nth-child(2) .dialog-bubble {
        width: 195px;
        padding: 58px 14px 29px;
    }
}

.page-4 .strip-container:nth-child(5) .dialog-bubble {
    width: 85%;
    right: 64%;
    top: -8%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M272.5 229.91C273.5 210.91 261.8 192.53 252.5 175.91C252.5 175.91 332.5 176.91 332.5 84.91C332.5 -7.08999 196.5 1.72 170 1.72C143.5 1.72 1.5 -3.08999 1.5 90.91C1.5 190.91 102.52 186.2 156.5 184.91C240.5 182.91 228.5 191.91 272.5 229.91Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 10% 5% 18% 5%;
}

@media screen and (min-width: 992px) {
    .page-4 .strip-container:nth-child(5) .dialog-bubble {
        right: 46%;
        top: -14%;
        width: 225px;
        padding: 35px 17px 62px;
    }
}

.page-4 .strip-container:nth-child(7) .dialog-bubble {
    width: 80%;
    top: -42%;
    right: 59%;
    background: url("data:image/svg+xml,%3csvg width='233' height='298' viewBox='0 0 233 298' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M116.5 281.5C138.06 281.5 158.23 274.27 175.48 261.7L225.5 292.5L195.24 243.52C217.56 217.98 231.5 181.73 231.5 141.5C231.5 64.18 180.01 1.5 116.5 1.5C52.99 1.5 1.5 64.18 1.5 141.5C1.5 218.82 52.99 281.5 116.5 281.5Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 10% 5% 15% 5%;
}

.page-4 .strip-container:nth-child(7) .dialog-bubble img {
    max-width: 74px;
}

@media screen and (min-width: 992px) {
    .page-4 .strip-container:nth-child(7) .dialog-bubble {
        width: 160px;
        padding: 34px 12px 37px;
    }

    .page-4 .strip-container:nth-child(7) .dialog-bubble img {
        max-width: 94px;
    }
}

.page-5 .strip-container:nth-child(1) .dialog-bubble {
    width: 90%;
    top: 19%;
    left: 36%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 3.14C60.5 22.14 72.2 40.52 81.5 57.14C81.5 57.14 1.5 56.14 1.5 148.14C1.5 240.14 137.5 231.33 164 231.33C190.5 231.33 332.5 236.14 332.5 142.14C332.5 42.14 231.48 46.85 177.5 48.14C93.5 50.14 105.5 41.14 61.5 3.14Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 25% 5% 8%;
}

@media screen and (min-width: 992px) {
    .page-5 .strip-container:nth-child(1) .dialog-bubble {
        width: 230px;
        padding: 45px 14px 17px;
    }
}

.page-5 .strip-container:nth-child(5) .dialog-bubble {
    width: 66%;
    right: 80%;
    top: -6%;
    background: url("data:image/svg+xml,%3csvg width='251' height='197' viewBox='0 0 251 197' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M226.59 193.5C220.64 181.94 215.22 165.98 210.59 143.5C210.59 143.5 248.59 124.5 248.59 74.5C248.59 24.5 219.59 1.5 128.59 1.5C33.5905 1.5 -0.469523 18.53 1.59048 88.5C3.59048 156.5 104.59 166.5 137.59 166.5C170.59 166.5 179.59 160.5 179.59 160.5C194.79 176.17 210.53 186.41 226.59 193.5Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 10% 5% 17% 5%;
}

@media screen and (min-width: 992px) {
    .page-5 .strip-container:nth-child(5) .dialog-bubble {
        width: 228px;
        padding: 38px 19px 65px;
    }
}

.page-5 .strip-container:nth-child(6) .dialog-bubble {
    width: 60%;
    top: 18%;
    left: 60%;
    background: url("data:image/svg+xml,%3csvg width='242' height='211' viewBox='0 0 242 211' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M42.5 1.78999C42.5 1.78999 58.5 20.79 59.5 31.79C42.5 36.79 1.5 37.79 1.5 119.79C1.5 201.79 111.5 208.79 161.5 208.79C221.5 208.79 240.5 181.79 240.5 134.79C240.5 105.79 239.5 15.79 102.5 27.79C79.5 4.78999 42.5 1.78999 42.5 1.78999Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 17% 3% 9% 3%;
}

@media screen and (min-width: 992px) {
    .page-5 .strip-container:nth-child(6) .dialog-bubble {
        width: 230px;
        padding: 73px 13px 39px;
    }
}

.page-6 .strip-container:nth-child(1) .dialog-bubble {
    width: 85%;
    top: 60%;
    left: 60%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 3.14C60.5 22.14 72.2 40.52 81.5 57.14C81.5 57.14 1.5 56.14 1.5 148.14C1.5 240.14 137.5 231.33 164 231.33C190.5 231.33 332.5 236.14 332.5 142.14C332.5 42.14 231.48 46.85 177.5 48.14C93.5 50.14 105.5 41.14 61.5 3.14Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 16% 5% 10% 5%;
}

@media screen and (min-width: 992px) {
    .page-6 .strip-container:nth-child(1) .dialog-bubble {
        width: 194px;
        padding: 39px 12px 24px;
    }
}

.page-6 .strip-container:nth-child(5) .dialog-bubble {
    width: 90%;
    right: -10%;
    top: 2%;
    background: url("data:image/svg+xml,%3csvg width='233' height='298' viewBox='0 0 233 298' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M116.5 281.5C94.94 281.5 74.77 274.27 57.52 261.7L7.5 292.5L37.76 243.52C15.44 217.98 1.5 181.73 1.5 141.5C1.5 64.18 52.99 1.5 116.5 1.5C180.01 1.5 231.5 64.18 231.5 141.5C231.5 218.82 180.01 281.5 116.5 281.5Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 10% 7% 16% 7%;
}

@media screen and (min-width: 992px) {
    .page-6 .strip-container:nth-child(5) .dialog-bubble {
        width: 194px;
        padding: 24px 17px 39px;
    }

    .page-6 .strip-container:nth-child(5) .dialog-bubble img {
        max-width: 110px;
    }
}

.page-6 .strip-container:nth-child(6) .dialog-bubble {
    width: 78%;
    left: 90%;
    top: -40%;
    background: url("data:image/svg+xml,%3csvg width='251' height='197' viewBox='0 0 251 197' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M23.5 193.5C29.45 181.94 34.87 165.98 39.5 143.5C39.5 143.5 1.5 124.5 1.5 74.5C1.5 24.5 30.5 1.5 121.5 1.5C212.5 1.5 250.56 18.53 248.5 88.5C246.5 156.5 145.5 166.5 112.5 166.5C79.5 166.5 70.5 160.5 70.5 160.5C55.3 176.17 39.56 186.41 23.5 193.5Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 6% 5% 14% 5%;
}

@media screen and (min-width: 992px) {
    .page-6 .strip-container:nth-child(6) .dialog-bubble {
        left: 56%;
        width: 242px;
        padding: 21px 17px 48px;
    }
}

.page-7 .strip-container:nth-child(1) .dialog-bubble {
    width: 85%;
    left: 60%;
    top: 18%;
    background: url("data:image/svg+xml,%3csvg width='242' height='211' viewBox='0 0 242 211' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M42.5 1.78999C42.5 1.78999 58.5 20.79 59.5 31.79C42.5 36.79 1.5 37.79 1.5 119.79C1.5 201.79 111.5 208.79 161.5 208.79C221.5 208.79 240.5 181.79 240.5 134.79C240.5 105.79 239.5 15.79 102.5 27.79C79.5 4.78999 42.5 1.78999 42.5 1.78999Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 18% 5% 10% 5%;
}

.page-7 .strip-container:nth-child(1) .dialog-bubble img {
    max-width: 70px;
}

@media screen and (min-width: 768px) {
    .page-7 .strip-container:nth-child(1) .dialog-bubble img {
        max-width: 80px;
    }
}

@media screen and (min-width: 992px) {
    .page-7 .strip-container:nth-child(1) .dialog-bubble {
        width: 195px;
        padding: 50px 14px 28px;
    }
}

.page-7 .strip-container:nth-child(5) .dialog-bubble {
    width: 80%;
    top: 50%;
    left: 25%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 3.14C60.5 22.14 72.2 40.52 81.5 57.14C81.5 57.14 1.5 56.14 1.5 148.14C1.5 240.14 137.5 231.33 164 231.33C190.5 231.33 332.5 236.14 332.5 142.14C332.5 42.14 231.48 46.85 177.5 48.14C93.5 50.14 105.5 41.14 61.5 3.14Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 17% 5% 8% 5%;
}

@media screen and (min-width: 992px) {
    .page-7 .strip-container:nth-child(5) .dialog-bubble {
        left: 33%;
        width: 270px;
        padding: 65px 19px 30px;
    }
}

.page-7 .strip-container:nth-child(6) .dialog-bubble {
    width: 74%;
    top: 36%;
    left: 50%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 3.14C60.5 22.14 72.2 40.52 81.5 57.14C81.5 57.14 1.5 56.14 1.5 148.14C1.5 240.14 137.5 231.33 164 231.33C190.5 231.33 332.5 236.14 332.5 142.14C332.5 42.14 231.48 46.85 177.5 48.14C93.5 50.14 105.5 41.14 61.5 3.14Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 16% 5% 8% 5%;
}

@media screen and (min-width: 992px) {
    .page-7 .strip-container:nth-child(6) .dialog-bubble {
        width: 260px;
        padding: 69px 22px 35px;
    }
}

.page-8 .strip-container:nth-child(4) .dialog-bubble {
    width: 64%;
    top: -30%;
    left: 60%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 229.91C60.5 210.91 72.2 192.53 81.5 175.91C81.5 175.91 1.5 176.91 1.5 84.91C1.5 -7.09 137.5 1.73 164 1.73C190.5 1.73 332.5 -3.08 332.5 90.92C332.5 190.92 231.48 186.21 177.5 184.92C93.5 182.92 105.5 191.92 61.5 229.92V229.91Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 8% 5% 16% 5%;
}

@media screen and (min-width: 992px) {
    .page-8 .strip-container:nth-child(4) .dialog-bubble {
        width: 271px;
        padding: 39px 24px 77px;
    }
}

.page-8 .strip-container:nth-child(8) .dialog-bubble {
    width: 130%;
    right: 70%;
    top: -35%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M272.5 229.91C273.5 210.91 261.8 192.53 252.5 175.91C252.5 175.91 332.5 176.91 332.5 84.91C332.5 -7.08999 196.5 1.72 170 1.72C143.5 1.72 1.5 -3.08999 1.5 90.91C1.5 190.91 102.52 186.2 156.5 184.91C240.5 182.91 228.5 191.91 272.5 229.91Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 9% 7% 24%;
}

@media screen and (min-width: 992px) {
    .page-8 .strip-container:nth-child(8) .dialog-bubble {
        width: 260px;
        padding: 23px 13px 62px;
    }
}

.page-9 .strip-container:nth-child(5) .dialog-bubble {
    width: 82%;
    top: -33%;
    right: 0;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 229.91C60.5 210.91 72.2 192.53 81.5 175.91C81.5 175.91 1.5 176.91 1.5 84.91C1.5 -7.09 137.5 1.73 164 1.73C190.5 1.73 332.5 -3.08 332.5 90.92C332.5 190.92 231.48 186.21 177.5 184.92C93.5 182.92 105.5 191.92 61.5 229.92V229.91Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 7% 5% 16% 5%;
}

.page-9 .strip-container:nth-child(5) .dialog-bubble img {
    max-width: 70px;
}

@media screen and (min-width: 768px) {
    .page-9 .strip-container:nth-child(5) .dialog-bubble img {
        max-width: 100px;
    }
}

@media screen and (min-width: 992px) {
    .page-9 .strip-container:nth-child(5) .dialog-bubble {
        width: 236px;
        padding: 27px 19px 61px;
    }
}

.page-9 .strip-container:nth-child(6) .dialog-bubble {
    width: 60%;
    left: 50%;
    top: -23%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M61.5 229.91C60.5 210.91 72.2 192.53 81.5 175.91C81.5 175.91 1.5 176.91 1.5 84.91C1.5 -7.09 137.5 1.73 164 1.73C190.5 1.73 332.5 -3.08 332.5 90.92C332.5 190.92 231.48 186.21 177.5 184.92C93.5 182.92 105.5 191.92 61.5 229.92V229.91Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 8% 5% 16% 5%;
}

@media screen and (min-width: 992px) {
    .page-9 .strip-container:nth-child(6) .dialog-bubble {
        width: 260px;
        padding: 35px 22px 69px;
    }
}

.page-10 .strip-container:nth-child(5) .dialog-bubble {
    width: 80%;
    top: 60%;
    right: 55%;
    background: url("data:image/svg+xml,%3csvg width='334' height='234' viewBox='0 0 334 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M272.5 3.14C273.5 22.14 261.8 40.52 252.5 57.14C252.5 57.14 332.5 56.14 332.5 148.14C332.5 240.14 196.5 231.33 170 231.33C143.5 231.33 1.5 236.14 1.5 142.14C1.5 42.14 102.52 46.85 156.5 48.14C240.5 50.14 228.5 41.14 272.5 3.14Z' fill='white' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3e%3c/svg%3e") center no-repeat;
    background-size: contain;
    padding: 18% 5% 8% 5%;
}

@media screen and (min-width: 992px) {
    .page-10 .strip-container:nth-child(5) .dialog-bubble {
        width: 277px;
        padding: 62px 17px 28px;
    }
}

/* Mobile language adjustments */

html[lang="fr"] .page-1 .strip-container:nth-child(6) .dialog-bubble {
    width: 56%;
}

html[lang="fr"] .page-2 .strip-container:nth-child(5) .dialog-bubble {
    width: 82%;
    padding: 18% 5% 10%;
} 

html[lang="fr"] .page-2 .strip-container:nth-child(7) .dialog-bubble {
    width: 90%;
    padding: 24% 6% 6%;
}

html[lang="fr"] .page-3 .strip-container:nth-child(1) .dialog-bubble {
    width: 110%;
    padding: 26% 5% 16%;
}

html[lang="fr"] .page-6 .strip-container:nth-child(5) .dialog-bubble {
    width: 95%;
    padding: 10% 12% 16%;
}

html[lang="fr"] .page-6 .strip-container:nth-child(6) .dialog-bubble {
    width: 80%;
    padding: 10% 5% 19%;
}

html[lang="it"] .page-1 .strip-container:nth-child(1) .dialog-bubble {
    padding: 14% 9% 11%;
}

html[lang="it"] .page-5 .strip-container:nth-child(5) .dialog-bubble {
    padding: 10% 8% 17%;
}

html[lang="it"] .page-7 .strip-container:nth-child(1) .dialog-bubble {
    padding: 18% 8% 10%;
}

html[lang="it"] .page-8 .strip-container:nth-child(8) .dialog-bubble {
    padding: 8% 10% 25%;
}

html[lang="de"] .page-2 .strip-container:nth-child(2) .dialog-bubble {
    width: 105%;
    padding: 10% 7% 17%;
}

html[lang="de"] .page-2 .strip-container:nth-child(7) .dialog-bubble {
    width: 95%;
    padding: 22% 5% 7%;
}

html[lang="de"] .page-4 .strip-container:nth-child(2) .dialog-bubble {
    top: 15%;
    width: 84%;
}

html[lang="de"] .page-9 .strip-container:nth-child(5) .dialog-bubble {
    width: 84%;
    padding: 5% 5% 18%;
}

html[lang="de"] .page-9 .strip-container:nth-child(6) .dialog-bubble {
    width: 62%;
}

html[lang="pl"] .page-1 .strip-container:nth-child(1) .dialog-bubble {
    padding: 13% 10% 12%;
}

html[lang="pl"] .page-1 .strip-container:nth-child(6) .dialog-bubble {
    padding: 6% 6% 9%;
}

html[lang="pl"] .page-2 .strip-container:nth-child(7) .dialog-bubble {
    width: 98%;
}

html[lang="pl"] .page-3 .strip-container:nth-child(1) .dialog-bubble {
    width: 110%;
    padding: 28% 5% 13%;
}

html[lang="pl"] .page-4 .strip-container:nth-child(5) .dialog-bubble {
    width: 90%;
    padding: 13% 5% 18%;
}

html[lang="pl"] .page-4 .strip-container:nth-child(7) .dialog-bubble {
    padding: 10% 7% 15%;
}

html[lang="pl"] .page-6 .strip-container:nth-child(1) .dialog-bubble {
    padding: 16% 5% 4%;
}

html[lang="pl"] .page-9 .strip-container:nth-child(6) .dialog-bubble {
    padding: 8% 3% 16%;
}

/* Video hover */

.comic-strip .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.comic-strip:hover .video-js {
    opacity: 1;
}

.comic-strip .video-js .vjs-tech {
    width: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Modal video */

.modal .video-js {
    width: 100%;
    height: 100%;
}

/* Onomatopoeias */

.onomatopoeia {
    position: absolute;
    width: auto;
    z-index: 2;
}

.page-1 .strip-container:nth-child(7) .onomatopoeia {
    height: 40%;
    left: 54%;
    top: -10%;
}

.page-2 .strip-container:nth-child(3) .onomatopoeia {
    height: 50%;
    top: 70%;
    left: 45%;
}

.page-2 .strip-container:nth-child(6) .onomatopoeia {
    height: 50%;
    top: -30%;
    left: 50%;
}

.page-3 .strip-container:nth-child(7) .onomatopoeia {
    height: 50%;
    left: 60%;
    top: -25%;
}

.page-4 .strip-container:nth-child(3) .onomatopoeia {
    height: 50%;
    left: -5%;
    top: -2%;
}

.page-5 .strip-container:nth-child(7) .onomatopoeia {
    height: 50%;
    top: -15%;
    left: 23%;
}

.page-6 .strip-container:nth-child(3) .onomatopoeia {
    height: 50%;
    top: -12%;
    left: -5%;
}

.page-7 .strip-container:nth-child(4) .onomatopoeia {
    height: 55%;
    left: 70%;
    top: 8%;
}

.page-8 .strip-container:nth-child(1) .onomatopoeia {
    height: 50%;
    left: 68%;
}

.page-9 .strip-container:nth-child(1) .onomatopoeia {
    height: 70%;
    top: 60%;
    left: 40%;
}

.page-9 .strip-container:nth-child(7) .onomatopoeia {
    height: 45%;
    top: 25%;
    left: 60%;
}

.page-10 .strip-container:nth-child(2) .onomatopoeia {
    height: 60%;
    left: 35%;
    top: 65%;
}

/* Mouseover animations */

.mouseover {
    transform: scale(1);
    transition: transform 0.2s;
}

.mouseover:hover {
    transform: scale(1.125);
}

.mouseover.expand-right {
    transform-origin: bottom left;
}

.mouseover.expand-left {
    transform-origin: bottom right;
}

/* Language specific styles */

@media screen and (min-width: 992px) {
    html[lang="es"] .page-1 .strip-container:nth-child(5) .dialog-bubble {
        padding: 20px 12px 54px;
    }

    html[lang="es"] .page-1 .strip-container:nth-child(6) .dialog-bubble {
        padding: 35px 20px 52px;
    }

    html[lang="es"] .page-2 .strip-container:nth-child(2) .dialog-bubble {
        width: 230px;
        padding: 20px 20px 32px;
    }

    html[lang="es"] .page-3 .strip-container:nth-child(5) .dialog-bubble {
        padding: 20px 20px 60px;
    }

    html[lang="es"] .page-3 .strip-container:nth-child(6) .dialog-bubble {
        width: 230px;
        padding: 20px 12px 54px;
    }

    html[lang="es"] .page-4 .strip-container:nth-child(5) .dialog-bubble {
        width: 240px;
        padding: 32px 12px 44px;
    }

    html[lang="es"] .page-5 .strip-container:nth-child(1) .dialog-bubble {
        top: 17%;
        padding: 60px 12px 18px;
    }

    html[lang="es"] .page-6 .strip-container:nth-child(5) .dialog-bubble img {
        max-width: 84px;
    }

    html[lang="es"] .page-7 .strip-container:nth-child(6) .dialog-bubble {
        padding: 54px 13px 8px;
    }

    html[lang="es"] .page-8 .strip-container:nth-child(8) .dialog-bubble {
        right: 60%;
        width: 296px;
        padding: 10px 13px 62px;
    }

    html[lang="fr"] .page-1 .strip-container:nth-child(1) .dialog-bubble {
        padding: 45px 16px 32px;
    }

    html[lang="fr"] .page-2 .strip-container:nth-child(2) .dialog-bubble {
        width: 230px;
        padding: 22px 20px 54px;
    }

    html[lang="fr"] .page-3 .strip-container:nth-child(5) .dialog-bubble {
        padding: 32px 21px 52px;
    }

    html[lang="fr"] .page-3 .strip-container:nth-child(6) .dialog-bubble {
        padding: 24px 10px 50px;
    }

    html[lang="fr"] .page-4 .strip-container:nth-child(5) .dialog-bubble {
        width: 245px;
        padding: 35px 8px 62px;
    }

    html[lang="fr"] .page-4 .strip-container:nth-child(7) .dialog-bubble {
        padding: 14px 12px 46px;
    }

    html[lang="fr"] .page-5 .strip-container:nth-child(1) .dialog-bubble {
        padding: 60px 10px 17px;
    }

    html[lang="fr"] .page-6 .strip-container:nth-child(5) .dialog-bubble {
        padding: 14px 21px 39px;
    }

    html[lang="fr"] .page-7 .strip-container:nth-child(6) .dialog-bubble {
        padding: 61px 10px 26px;
    }

    html[lang="fr"] .page-8 .strip-container:nth-child(8) .dialog-bubble {
        right: 62%;
        width: 296px;
        padding: 15px 13px 62px;
    }

    html[lang="fr"] .page-9 .strip-container:nth-child(5) .dialog-bubble {
        padding: 11px 12px 50px;
    }

    html[lang="it"] .page-1 .strip-container:nth-child(1) .dialog-bubble {
        width: 170px;
        padding: 20px;
    }

    html[lang="it"] .page-2 .strip-container:nth-child(2) .dialog-bubble {
        width: 240px;
        padding: 17px 20px 43px;
    }

    html[lang="it"] .page-3 .strip-container:nth-child(5) .dialog-bubble {
        right: -6%;
    }

    html[lang="it"] .page-4 .strip-container:nth-child(2) .dialog-bubble {
        width: 215px;
    }

    html[lang="it"] .page-4 .strip-container:nth-child(5) .dialog-bubble {
        width: 254px;
        padding: 36px 17px 57px;
    }

    html[lang="it"] .page-4 .strip-container:nth-child(7) .dialog-bubble {
        width: 184px;
    }

    html[lang="it"] .page-6 .strip-container:nth-child(5) .dialog-bubble {
        width: 200px;
        padding: 40px 20px 50px;
    }

    html[lang="it"] .page-6 .strip-container:nth-child(5) .dialog-bubble img {
        max-width: 84px;
    }

    html[lang="it"] .page-7 .strip-container:nth-child(6) .dialog-bubble {
        padding: 54px 12px 24px;
    }

    html[lang="it"] .page-8 .strip-container:nth-child(8) .dialog-bubble {
        width: 290px;
        padding: 8px 16px 48px;
    }

    html[lang="de"] .page-1 .strip-container:nth-child(5) .dialog-bubble {
        padding: 12px 19px 43px;
    }

    html[lang="de"] .page-2 .strip-container:nth-child(2) .dialog-bubble {
        width: 240px;
        padding: 28px 14px 42px;
    }

    html[lang="de"] .page-3 .strip-container:nth-child(5) .dialog-bubble {
        right: -7%;
    }

    html[lang="de"] .page-4 .strip-container:nth-child(2) .dialog-bubble {
        width: 230px;
        padding: 54px 18px 28px;
    }

    html[lang="de"] .page-6 .strip-container:nth-child(5) .dialog-bubble {
        width: 200px;
        padding: 40px 17px 39px;
    }

    html[lang="de"] .page-6 .strip-container:nth-child(5) .dialog-bubble img {
        max-width: 84px;
    }

    html[lang="de"] .page-7 .strip-container:nth-child(6) .dialog-bubble {
        width: 270px;
        padding: 53px 22px 11px;
    }

    html[lang="de"] .page-8 .strip-container:nth-child(8) .dialog-bubble {
        width: 290px;
        padding: 13px 13px 65px;
    }

    html[lang="de"] .page-9 .strip-container:nth-child(5) .dialog-bubble {
        width: 260px;
        padding: 16px 16px 64px;
    }

    html[lang="pl"] .page-1 .strip-container:nth-child(1) .dialog-bubble {
        padding: 36px 30px 33px;
    }

    html[lang="pl"] .page-1 .strip-container:nth-child(5) .dialog-bubble {
        width: 265px;
        padding: 16px 11px 62px;
    }

    html[lang="pl"] .page-2 .strip-container:nth-child(7) .dialog-bubble {
        width: 212px;
        padding: 47px 8px 13px;
    }

    html[lang="pl"] .page-3 .strip-container:nth-child(5) .dialog-bubble {
        padding: 32px 12px 54px;
    }

    html[lang="pl"] .page-4 .strip-container:nth-child(2) .dialog-bubble {
        width: 214px;
        padding: 54px 8px 28px;
    }

    html[lang="pl"] .page-4 .strip-container:nth-child(7) .dialog-bubble {
        width: 167px;
        padding: 22px 14px 37px;
    }

    html[lang="pl"] .page-6 .strip-container:nth-child(1) .dialog-bubble {
        padding: 39px 12px 12px;
    }

    html[lang="pl"] .page-6 .strip-container:nth-child(5) .dialog-bubble img {
        max-width: 84px;
    }

    html[lang="pl"] .page-6 .strip-container:nth-child(5) .dialog-bubble {
        width: 200px;
        padding: 40px 31px 50px;
    }

    html[lang="pl"] .page-7 .strip-container:nth-child(5) .dialog-bubble {
        padding: 50px 19px 30px;
    }

    html[lang="pl"] .page-7 .strip-container:nth-child(6) .dialog-bubble {
        padding: 54px 13px 8px;
    }

    html[lang="pl"] .page-9 .strip-container:nth-child(5) .dialog-bubble {
        padding: 12px 14px 45px;
    }
}