.layout { overflow: hidden; }
.str-header { position: absolute; width: 100%; top: 0; left: 0; }
.str-header-wrapper { display: flex; align-items: center; position: absolute; border: 0; background-color: transparent; }
@media (max-width: 767px) {
    .layout .container { padding-left: 2rem; padding-right: 2rem; }
}
.str-karl-hero { background-color: #FAF8F6; overflow: visible; padding-top: 6.1rem; }
.str-karl-hero-row { display: flex; align-items: center; flex-wrap: wrap; margin: 0 -2rem; }
.str-karl-hero-left { padding: 0 2rem; width: 100%; flex: 0 0 100%; max-width: 100%; }
.str-karl-hero-right { padding: 0 2rem; width: 100%; flex: 0 0 100%; max-width: 100%; }
.str-karl-hero-left .text-a { padding: 4rem 0; }
.str-karl-hero-thumb { display: block; aspect-ratio: 728 / 833; position: relative; max-width: 40rem; margin: 0 auto; }
.str-karl-hero-left .h1 { line-height: 1.226; font-size: 3.4rem; margin-bottom: 1.2rem; }
.str-karl-hero-left .text-a :last-child { margin-bottom: 0; }
.str-karl-hero-leap { width: 19.73958333333333%; max-width: 37.9rem; position: absolute; bottom: 8.8rem; left: 0; background-image: url(../gfx/karl-hero-shap-bottom-left.png); background-position: 0 0; 
    background-repeat: no-repeat; background-size: contain; pointer-events: none; display: none; }
.str-karl-hero-leap::before { display: block; content: ''; padding-top: 75.72559366754617%; }
.str-karl-hero-leap-left { width: 19.88388969521045%; max-width: 11.7rem; position: absolute; bottom: 13.8rem; left: 0; background-image: url(../gfx/karl-hero-shap-left.png); background-position: 0 0; 
    background-repeat: no-repeat; background-size: contain; pointer-events: none; display: none; }
.str-karl-hero-leap-left::before { display: block; content: ''; padding-top: 502.9197080291971%; }
.str-karl-hero-leap-top { width: 21.04166666666667%; max-width: 40.4rem; position: absolute; top: 1rem; right: 0; background-image: url(../gfx/karl-hero-shap-top-right.png); background-position: 0 0; background-repeat: no-repeat; background-size: contain; pointer-events: none; display: none; }
.str-karl-hero-leap-top::before { display: block; content: ''; padding-top: 85.3960396039604%; }
.str-karl-hero-leap-right { width: 23.80208333333333%; max-width: 45.7rem; position: absolute; top: 0; right: 0; background-image: url(../gfx/karl-hero-shap-right.png); background-position: 0 0; background-repeat: no-repeat; background-size: contain; pointer-events: none; display: block; }
.str-karl-hero-leap-right::before { display: block; content: ''; padding-top: 75.49234135667396%; }
.str-karl-hero-btn { display: block; border-radius: 50%; border-width: 0.4rem; border-color: #000 !important; aspect-ratio: 1 / 1; width: 8rem; font-size: 3rem; display: flex; align-items: center; justify-content: center; padding: 0; }
.str-karl-hero-btn i { animation: bounce 2s infinite; }
.str-karl-hero-btn:hover,
.str-karl-hero-btn:not(:hover):focus { opacity: 0.8; }
.str-karl-marq { border-top: 0.3rem solid #000; border-bottom: 0.3rem solid #000; background: #FFDC00; padding: 1rem 2rem; display: flex; align-items: center; transform: rotate(1.112deg); margin-top: -1rem; }
.str-karl-marq-row { display: flex; align-items: center; }
.str-karl-marq-item { flex-shrink: 0; padding-right: 2rem; }
.str-karl-marq-row .h3 { margin: 0; color: #000; font-weight: 600; font-size: 1.6rem; }
.str-karl-marq-thumb { margin-left: 2rem; display: block; flex-shrink: 0; width: 4rem; aspect-ratio: 53 / 42; }
.str-karl-marq-thumb > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.str-karl-hero-left .btn-spacer { display: flex; }
.str-karl-hero.theme-b .str-karl-hero-left .btn-spacer { justify-content: flex-end; }
.str-karl-hero.theme-b .str-karl-hero-thumb { aspect-ratio: 1 / 1; }
.str-karl-hero.theme-b .str-karl-hero-row { padding-bottom: 3rem; }
.str-karl-hero.theme-b .str-karl-hero-right { order: -1; align-self: flex-start; }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}


@media (min-width: 576px) { 
    .str-karl-hero-btn { border-width: 0.6rem; width: 12rem; font-size: 5.6rem; }
}

@media (min-width: 768px) {
    .str-karl-hero-left .h1 { font-size: 4.4rem; margin-bottom: 1.8rem; }
    .str-karl-marq-row .h3 { font-size: 2rem; line-height: normal; }
    .str-karl-hero-leap-right { top: -7%; }
    .str-karl-hero { padding-top: 9.1rem; }
}

@media (min-width: 992px) {
    .str-karl-hero-left { width: 47.62%; flex: 0 0 47.62%; max-width: 47.62%; }
    .str-karl-hero-right { width: 52.38%; flex: 0 0 52.38%; max-width: 52.38%; }
    .str-karl-hero-left .h1 { font-size: 5.4rem; }
    .str-karl-marq-item { padding-right: 3.3rem; }
    .str-karl-marq-thumb { margin-left: 3.3rem; width: 5.3rem; }
    .str-karl-hero-thumb { max-width: none; }
    .str-karl-hero.theme-b .str-karl-hero-thumb { margin-left: 0; margin-right: 0; }
    .str-karl-hero-leap { display: block; }
    .str-karl-hero-leap-top { display: block; }
    .str-karl-hero-leap-left { display: block; }
    .str-karl-hero.theme-b .str-karl-hero-left{ order: 1; width: 53%; flex: 0 0 53%; max-width: 53%;  }
    .str-karl-hero.theme-b .str-karl-hero-right { width: 47%; flex: 0 0 47%; max-width: 47%; }
    .str-karl-hero-left .text-a { padding-top: 0; }
}

@media (min-width: 1200px) {
    .str-karl-hero-left .h1 { font-size: 6.4rem; }
    .str-karl-hero-btn { width: 13rem; }
    .str-karl-hero-left .text-a { font-size: 2rem; line-height: 2; }
}

@media (min-width: 1400px) {
    .str-karl-hero-left .h1 { font-size: 8.4rem; margin-bottom: 3.1rem; }
    .str-karl-hero-thumb { margin-right: -3rem; }
    .str-karl-hero-btn { width: 18rem; font-size: 5.6rem; }
    .str-karl-marq-row .h3 { font-size: 2.7rem; }
    .str-karl-marq { padding: 2rem 3.7rem; }
    .str-karl-hero-left .text-a { font-size: 2.2rem; }
}

@media (min-width: 1600px) {
    .str-karl-hero-thumb { margin-right: -12rem; }
    .str-karl-hero.theme-b .str-karl-hero-thumb { margin-left: -20rem; margin-right: 0; }
}

@media (min-width: 1920px) {
    
}


html.cc-mobile .modal-backdrop { background-color: #fff; opacity: 1 !important; }
html.cc-mobile .modal.modal-static .modal-dialog { transform: none !important; }
.modal-a .modal-content { padding: 3rem 1.8rem; border-radius: 2rem; background-color: #FAF8F6; }
.modal-body { padding: 0; }
.str-competition-modal-pattern { width: 100%; height: 18.8rem; top: 0; left: 0; position: absolute; z-index: 0;
background-image: url(../gfx/step1-pattern.png); background-position: 0 0; background-repeat: repeat-x; background-size: auto; pointer-events: none; }
.str-compo-thumb { display: block; max-width: 35rem; margin: 0 auto 2rem auto; aspect-ratio: 1 / 1; }
.str-compo-thumb img { width: 100%; height: 100%; display: block; object-fit: contain; }
.str-compo-form-head { margin: 0 auto 2rem auto; text-align: center; }
.str-compo-form-head .h1 { margin-bottom: 1.6rem; }
.str-compo-form-head > :last-child { margin-bottom: 0; }
.competition-form .form-lbl { text-transform: capitalize; font-size: 1.6rem; line-height: 1.375; font-weight: 500; }
.competition-form .form-lbl i { color: #C40000; }
.competition-form .form-control { padding: 1.8rem 1.6rem; height: 5.8rem; border-color: #CBD5E1; border-radius: 1.8rem !important; font-size: 1.6rem; }
.competition-form textarea.form-control { height: 10.8rem; }
.competition-form .form-control::-webkit-input-placeholder { color: rgba(71, 85, 105, 0.5); opacity: 1; font-weight: 500; font-style: normal; }
.competition-form .form-control:-moz-placeholder { color: rgba(71, 85, 105, 0.5); opacity: 1; font-weight: 500; font-style: normal; }
.competition-form .form-control::-moz-placeholder { color: rgba(71, 85, 105, 0.5); opacity: 1; font-weight: 500; font-style: normal; }
.competition-form .form-control:-ms-input-placeholder { color: rgba(71, 85, 105, 0.5); opacity: 1; font-weight: 500; font-style: normal; }
.str-checkradio { position: relative; user-select: none; display: block; } 

.str-checkradio-ui { width: 2.2rem; height: 2.2rem; display: flex; justify-content: center; align-items: center; flex-direction: column; flex-shrink: 0; margin-right: 1.2rem; font-size: 1.9rem; border: 1px solid #000; border-radius: 0.6rem; background-color: transparent; }

.str-checkradio input:checked ~ .str-checkradio-row .str-checkradio-ui { background-color: #FFDC00; border-color: #000; }
.str-checkradio input:checked ~ .str-checkradio-row .str-checkradio-ui [class*="str-icon-"] { opacity: 1; color: #000; }
.str-checkradio input:not(:checked):focus-visible ~ .str-checkradio-row .str-checkradio-ui { box-shadow: 0 0 0 0.2rem #000; }
.str-checkradio input:checked ~ .str-checkradio-row .str-checkradio-ui { outline: none; }
.str-checkradio-row { display: flex; align-items: flex-start; }
.str-checkradio-ui [class*="str-icon-"] { opacity: 0; transition: 0.2s ease-in-out; }
.str-checkradio-text { display: block; flex: 1 1 auto; width: 1%; line-height: 1.333; font-weight: 500; align-self: center; font-size: 1.6rem; color: #1F1F00; position: relative; top: 2px; }
.str-checkradio-text a { font-weight: 600; text-decoration: underline; }
.competition-form .form-group.mb-24 { margin-bottom: 2.4rem; }
.form-control.is-invalid ~ .str-checkradio-row .str-checkradio-ui, 
.was-validated .form-control:invalid ~ .str-checkradio-row .str-checkradio-ui { border-color: #dc3545; }
.str-win-box { padding: 1.1rem; border-radius: 1rem; border: 1px solid #984C00; background: #FFF1E0; margin-bottom: 2.3rem; }
.str-win-box-row { display: flex; flex-wrap: wrap; flex-direction: column; } 
.str-win-box-thumb { border-radius: 1rem; aspect-ratio: 1 / 1; overflow: hidden; flex-shrink: 0; margin-right: 2.1rem; width: 9rem; background-color: #fff; }
.str-win-box-content { flex: 1 1 auto; width: 100%; }
.str-win-box-content .text-a { color: #984C00; padding: 1rem 0; }
.str-win-box-content .text-a .h4 { margin-bottom: 0; }
.str-win-box-content .text-a :last-child { margin-bottom: 0; }
.str-compo-share-btn { border-radius: 60px !important; border: 1px solid #984C00; background: #FFF1E0; outline: 0; padding: 1.1rem; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; line-height: 1.96; color: #984C00; width: 100%; font-weight: 600; }
.str-compo-share-btn i { font-size: 2.5rem; margin-right: 1.2rem; }
.str-compo-close-btn { margin-top: 1.8rem; text-align: center;}
.str-compo-close-btn > a { font-weight: 600; display: block; color: rgba(0, 0, 0, 0.90); }
.modal-a-close { background-color: transparent; }

@media (min-width: 576px) {
    .str-win-box-row { flex-direction: row; align-items: center;  }
    .str-win-box-content { flex: 1 1 auto; width: 1%; }
    .modal-a.modal-competition .modal-dialog { max-width: 63.5rem; }
}

@media (min-width: 768px) {
    .modal-a .modal-content { padding: 3rem 2.4rem; }
    .str-compo-thumb { margin-bottom: 4rem; }
    .str-compo-share-btn { margin-right: 2.1rem; }
}

@media (min-width: 1200px) {
    .str-compo-form-head { font-size: 2rem; line-height: 1.75; }
    .competition-form .form-group { margin-bottom: 2.7rem; }
}

.str-karl-meet { padding: 6.8rem 0 0.5rem 0; position: relative; }
.str-karl-meet-head { max-width: 81.6rem; width: 100%; margin: 0 auto 3rem auto; }
.str-karl-meet-head h2 { font-size: 2.6rem; margin-bottom: 1.6rem; line-height: 1.216; }
.str-karl-meet-head > :last-child { margin-bottom: 0; }
.str-karl-meet-space { max-width: 81.6rem; margin: auto; }
.str-karl-meet-row-wrap { padding: 3rem 0 3rem 1.6rem; position: relative; margin-left: -1.4rem; }
.str-karl-meet-row-wrap::before { display: block; width: 0.4rem; height: 100%; left: 1.6rem; content: ''; position: absolute; top: 3rem; z-index: 11; background-color: rgba(0, 0, 0, 0.2); }

.str-karl-meet-row { display: flex; flex-direction: column; justify-content: space-between; position: relative; padding-left: 3rem; }
.str-dot-pattern { display: block; width: 3.2rem; height: 3.2rem; left: -1.6rem; content: ''; position: absolute; top: -0.8rem; z-index: 11; border-radius: 50%; pointer-events: none; border: 0 solid transparent; }
.str-dot-pattern::before { width: 100%; height: 100%; left: 50%; transform: translate(-50%, -50%); content: ''; position: absolute; top: 50%; z-index: 11; border-radius: 50%; background-color: #000; }
.str-karl-meet-left { margin-bottom: 3rem; }
.str-dot-pattern::after { width: 55%; height: 55%; left: 50%; transform: translate(-50%, -50%); content: ''; position: absolute; top: 50%; z-index: 11; border-radius: 50%; background-color: #FFDC00; }
.str-karl-meet-left { margin-bottom: 3rem; }
.str-karl-meet-gfx { margin: 0 auto; max-width: 32.6rem; width: 100%; overflow: hidden; position: relative; aspect-ratio: 9 / 16; display: block; }
.str-karl-meet-gfx > video,
.str-karl-meet-gfx > iframe { width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: block; border: 0; }
.str-karl-meet-desc > * { margin-bottom: 1.2rem; }
.str-karl-meet-desc > :last-child { margin-bottom: 0; }
.str-karl-meet-desc h3 { margin-bottom: 1.2rem; font-size: 1.7rem; font-weight: 700; }
.str-karl-yellow-left-pattern { display: block; width: 18.17708333333333%; max-width: 34.9rem; height: 100%; top: 0; left: 0; position: absolute; z-index: 0; background-image:url(../gfx/str-karl-yellow-left-pattern.png); background-position: 0 0; background-repeat: repeat-y; background-size: contain; }
.str-karl-yellow-right-pattern { display: block; width: 17.91666666666667%; max-width: 34.4rem; height: 100%; top: 0; right: 0; position: absolute; z-index: 0; background-image:url(../gfx/str-karl-yellow-right-pattern.png); background-position: 0 0; background-repeat: repeat-y; background-size: contain; }
.str-karl-meet-space .str-karl-meet-row-wrap:last-child:before { display: none; }

@media (min-width: 390px){
    .str-karl-meet-gfx { max-width: 32.6rem; }
}

@media (min-width: 414px) {
    .str-karl-meet-row-wrap { margin-left: 0; }
}

@media (min-width: 576px){
    .str-karl-meet-head h2 { font-size: 3.2rem; }
}



@media (min-width: 768px){
    .str-karl-meet-row { flex-direction: row; padding-left: 0; }
    .str-karl-meet-space .str-karl-meet-row-wrap:nth-child(even) .str-karl-meet-row { flex-direction: row-reverse; justify-content: space-between; }
    .str-karl-meet-row-wrap { padding-left: 0; }
    .str-karl-meet-row-wrap::before { left: 50%; transform: translate(-50%); }
    .str-dot-pattern { width: 5.6rem; height: 5.6rem; left: 50%; transform: translate(-50%); border-width: 0.8rem; }
    .str-karl-yellow-left-pattern { display: block; left: -7.813vw; }
    .str-karl-yellow-right-pattern { display: block; right: -7.813vw; }
    .str-karl-meet-left { width: 32.6rem; max-width: 32.6rem; flex: 0 0 32.6rem; margin-bottom: 0; }
    .str-karl-meet-right { width: 30rem; max-width: 30rem; flex: 0 0 30rem; }
    .str-karl-meet-btn-wrap .btn { width: 100%; }
}

@media (min-width: 992px){
    .str-karl-meet-head { margin-bottom: 6rem; }
    .str-karl-meet-row-wrap { padding: 6rem 0; }
    .str-karl-meet-row-wrap::before { top: 6rem; }
    .str-karl-meet-head { font-size: 1.8rem; }
    .str-karl-meet-head h2 { font-size: 4.8rem; }
    .str-karl-meet-desc { font-size: 1.8rem; line-height: 1.77; }
    .str-karl-yellow-left-pattern { left: 0; }
    .str-karl-yellow-right-pattern { right: 0; }
}

@media (min-width: 1400px){
    .str-karl-meet-head { margin-bottom: 9.5rem; }
    .str-karl-meet-row-wrap { padding: 9.5rem 0; }
    .str-karl-meet-row-wrap::before { top: 9.5rem; }
    .str-karl-meet-head h2 { font-size: 6rem; }
}

.tiktok-embed { margin: 0 !important; }

.str-karl-faq { padding: 3rem 0; }
.str-karl-faq .str-karl-meet-head { margin-bottom: 4rem; }
.str-karl-faq .accordion { padding: 0.3rem 0; }
.str-karl-faq .accordion-button { border: 0; padding: 2rem 5rem 2rem 2rem; font-size: inherit; text-align: left; }
.str-karl-faq .accordion-collapse { border: 0; }
.str-karl-faq .accordion .accordion-item:nth-child(odd) { background-color: rgb(235, 229, 221); }
.str-karl-faq .accordion .accordion-item:nth-child(even) { background-color: #fff; box-shadow: 0 0.3rem 1.5rem 0 rgba(0, 0, 0, 0.08); }
.accordion-handle-icon { width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; }
.accordion-handle-icon > i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.3s ease; }
.accordion-button:not(.collapsed) { background-color: transparent; color: inherit; }
.accordion-handle-icon > i { opacity: 0; }
.str-karl-faq .accordion-button[aria-expanded=false] .str-icon-plus { opacity: 1; }
.str-karl-faq .accordion-button[aria-expanded=true] .str-icon-minus { opacity: 1; }
.str-karl-faq .accordion-button:focus { box-shadow: none; }
.str-karl-faq .accordion-button:focus-visible { box-shadow: 0 0 0 .25rem rgba(253, 210, 9, 1); }
.str-karl-faq .accordion-body { padding: 0 2rem 2rem 2rem; }
.str-karl-faq .accordion-body .text-a > * { margin-bottom: 1.8rem; }
.str-karl-faq .accordion-body .text-a > :last-child { margin-bottom: 0; }

.text-transform-none { text-transform: none !important; }