@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap");

/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
:root {
    --h1FontFamily: "geom-graphic";
    --h1FontWeight: 600;
    --h1FontSize: 25px;
    --h1LineHeight: 25px;
    --h1Letterspacing: 0.04em;
    --h2FontFamily: "geom-graphic";
    --h2FontWeight: 600;
    --h2FontSize: 24px;
    --h2LineHeight: 24px;
    --h2Letterspacing: 0.05em;
    --h3FontFamily: "geom-graphic";
    --h3FontWeight: bold;
    --h3FontSize: 21px;
    --h3LineHeight: 59px;
    --h3Letterspacing: 0.025em;
    --h4FontFamily: "geom-graphic";
    --h4FontWeight: 600;
    --h4FontSize: 25px;
    --h4LineHeight: 25px;
    --h4Letterspacing: 0.025em;
    --h5FontFamily: "geom-graphic";
    --h5FontWeight: normal;
    --h5FontSize: 50px;
    --h5LineHeight: 60px;
    --h5Letterspacing: 0.075em;
    --h6FontFamily: "geom-graphic";
    --h6FontWeight: 600;
    --h6FontSize: 17px;
    --h6LineHeight: 20px;
    --h6Letterspacing: 0.075em;
    --h7FontFamily: "geom-graphic";
    --h7FontWeight: 300;
    --h7FontSize: 17px;
    --h7LineHeight: 20px;
    --h7Letterspacing: 0.075em;
    --h8FontFamily: "geom-graphic";
    --h8FontWeight: normal;
    --h8FontSize: 10px;
    --h8LineHeight: 25px;
    --h8Letterspacing: 0.075em;
    --h9FontFamily: "geom-graphic";
    --h9FontWeight: 400;
    --h9FontSize: 18px;
    --h9LineHeight: 18px;
    --h9Letterspacing: 0.025em;
    --h10FontFamily: "geom-graphic";
    --h10FontWeight: bold;
    --h10FontSize: 16px;
    --h10LineHeight: 16px;
    --h10Letterspacing: 0.05em;
    --h11FontFamily: "geom-graphic";
    --h11FontWeight: 600;
    --h11FontSize: 13px;
    --h11LineHeight: 16px;
    --h11Letterspacing: 0.05em;
    --h12FontFamily: "Rajdhani", sans-serif;
    --h12FontWeight: normal;
    --h12FontSize: 18px;
    --h12LineHeight: 18px;
    --h12Letterspacing: 0.025em;
    --h13NewItemDateFontFamily: "geom-graphic";
    --h13NewItemDateFontWeight: normal;
    --h13NewItemDateFontSize: 10px;
    --h13NewItemDateLineHeight: 25px;
    --h13NewItemDateLetterspacing: 0.075em;
    --h14FontFamily: "Rajdhani", sans-serif;
    --h14FontWeight: 500;
    --h14FontSize: 24px;
    --h14LineHeight: 48px;
    --h14Letterspacing: 0.025em;
    --h15FontFamily: "Rajdhani", sans-serif;
    --h15FontWeight: 500;
    --h15FontSize: 14px;
    --h15LineHeight: 48px;
    --h15Letterspacing: 0.05em;
    --paragraphFontFamily: "Rajdhani", sans-serif;
    --paragraphFontWeight: normal;
    --paragraphFontSize: 17px;
    --paragraphLineHeight: 22px;
    --paragraphLetterspacing: 0.025em;
    --paragraphFAQFontFamily: "Rajdhani", sans-serif;
    --paragraphFAQFontWeight: 400;
    --paragraphFAQFontSize: 17px;
    --paragraphFAQLineHeight: 21px;
    --paragraphFAQLetterspacing: 0.025em;
    --paragraphMedFontFamily: "Rajdhani", sans-serif;
    --paragraphMedFontWeight: 500;
    --paragraphMedFontSize: 15px;
    --paragraphMedLineHeight: 19px;
    --paragraphMedLetterspacing: 0.02em;
    --mobileMenuFontFamily: "geom-graphic";
    --mobileMenuFontWeight: 400;
    --mobileMenuSelectedFontWeight: 600;
    --mobileMenuFontSize: 0.9rem;
    --mobileMenuLineHeight: unset;
    --mobileMenuLetterspacing: 0.02em
}

@media (min-width:768px) {
    :root {
        --h1FontSize: 43px;
        --h1LineHeight: 43px;
        --h1Letterspacing: 0.06em;
        --h2FontSize: 33px;
        --h2LineHeight: 35px;
        --h2Letterspacing: 0.015em;
        --h3FontSize: 32px;
        --h3LineHeight: 60px;
        --h4FontSize: 28px;
        --h4LineHeight: 28px;
        --h4Letterspacing: 0.05em;
        --h6FontSize: 21px;
        --h6LineHeight: 25px;
        --h7FontSize: 21px;
        --h7LineHeight: 60px;
        --h8FontSize: 12px;
        --h8LineHeight: 14px;
        --h9FontSize: 12px;
        --h9LineHeight: 12px;
        --h10LineHeight: 60px;
        --h11FontSize: 15px;
        --h11LineHeight: 18px;
        --h12LineHeight: 48px;
        --h13NewItemDateFontSize: 12px;
        --h13NewItemDateLineHeight: 14px;
        --h13NewItemDateLetterspacing: 0.05em;
        --h19NewNewsTitleFontFamily: "geom-graphic";
        --h19NewNewsTitleFontWeight: 600;
        --h19NewNewsTitleFontSize: 20px;
        --h19NewNewsTitleLineHeight: 21px;
        --h19NewNewsTitleLetterspacing: 0.05em;
        --paragraphMedLineHeight: 46px;
        --paragraphMedLetterspacing: 0.025em
    }
}

body {
    --padTextLineV: 10px;
    --padTextLineH: 20px;
    --padTextBox: 5px;
    --textSmall: 0.8rem;
    --textRegular: 1rem;
    --textRegularBump: 1.25rem;
    --textMedium: 1.75rem;
    --textLarge: 2.1rem;
    --textExtraLarge: 3rem;
    --textCTA: 1rem;
    --textNotchedTitle: 1.25rem;
    --textCustomSelect: var(--textRegular);
    --clHighlight: #fff;
    --clGrey: #5c5c5c;
    --clDarkGrey: #292929;
    --clTextLight: #fff;
    --bgTransparent: rgba(0, 0, 0, 0.35);
    --siteMaxWidth: 1600px;
    --siteMinWidth: 320px;
    --sectionHeight: 800px;
    --headerHeight: 100px;
    --menuDropdownItemHeight: 50px;
    --carouselThumbnailHeight: 50px;
    --carouselThumbnailPadding: 25px;
    --notchedTitleHeight: 65px;
    --previewHeight: 50px;
    --otherArticlesMargin: 50px;
    --standardComponentMargin: 22px;
    --KJPLogoWidth: 176px;
    --KJPLogoMarginLeft: 28px;
    --KJPLogoMarginRight: 28px;
    --paddedSectionPaddingMidAndNarrow: 15px;
    --maxPaddedSectionWidth: calc(100% - var(--indentLeft) * 2);
    --maxWidthCustomSelectFilterBlock: 220px;
    --minWidthCustomSelectFilterBlock: 220px;
    --zIndTopSection: 20;
    --zIndLowLow: 10;
    --zIndLowMid: 13;
    --zIndLowHigh: 15;
    --zIndMidLow: 20;
    --zIndMidMid: 23;
    --zIndMidHigh: 25;
    --zIndHighLow: 30;
    --zIndHighMid: 33;
    --zIndHighHigh: 35;
    --zIndCarouselTop: 35;
    --indentTop: 30px;
    --indentBottom: 40px;
    --indentBottomWhenVideoControls: 60px;
    --indentLeft: 10%;
    --indentRight: 10%;
    --indentLeftFramingFactor: 0px;
    --cornerButtonMargins: 18px;
    --mobileMenuIndent: 20px;
    --mediaFramePadding: 40px;
    --standardTransitionTime: 0.5s;
    --fastTransitionTime: 0.35s;
    --superFastTransitionTime: 0.25s;
    --ultraFastTransitionTime: 0.175s;
    --menuTransitionTime: 0.25s;
    --slowTransitionTime: 1s;
    --imageTransitionTime: 2s;
    --carouselAnimationTime: 0.5s;
    --carouselAnimationWait: 0s;
    --carouselArrowWidth: 35px;
    --parallaxImageDistance: 60px;
    --youtube-pause-time: 3000;
    --standardBoxShadow: 0 10px 10px rgba(0 0 0 / 10%)
}

@media (max-width:1100px) and (min-width:768px) {
    body {
        --textRegular: 1rem;
        --textRegularBump: 1.25rem;
        --textMedium: 1.75rem;
        --textLarge: 1.85rem;
        --textExtraLarge: 2.4rem;
        --textCTA: 0.9rem;
        --maxPaddedSectionWidth: calc(100% - var(--paddedSectionPaddingMidAndNarrow) * 2);
        --indentTop: 25px;
        --indentBottom: 40px;
        --indentLeft: 80px;
        --indentRight: 80px;
        --mediaFramePadding: 32px
    }
}

@media (max-width:767px) {
    body {
        --textRegular: 0.9rem;
        --textRegularBump: 1.1rem;
        --textMedium: 1.2rem;
        --textLarge: 1.2rem;
        --textExtraLarge: 1.8rem;
        --textCTA: 0.9rem;
        --textCustomSelect: 0.9rem;
        --sectionHeight: 300px;
        --notchedTitleHeight: 50px;
        --maxPaddedSectionWidth: calc(100% - var(--paddedSectionPaddingMidAndNarrow) * 2);
        --indentTop: 20px;
        --indentBottom: 20px;
        --indentLeft: 14px;
        --indentRight: 14px;
        --mediaFramePadding: 22px;
        --carouselArrowWidth: 30px;
        --carouselThumbnailHeight: 44px;
        --carouselThumbnailPadding: 25px;
        --maxWidthCustomSelectFilterBlock: 50%;
        --minWidthCustomSelectFilterBlock: none
    }
}

html[lang="en"] {
    font-family: "geom-graphic", serif;
    font-style: normal;
    font-weight: 400
}

html[lang="en"] a:not(.call-to-action),
html[lang="en"] button:not(.call-to-action) {
    font-family: "geom-graphic", serif;
    font-style: normal;
    font-weight: 400
}

@media (max-width:1100px) and (min-width:768px) {
    html[lang="en"] {
        --h1FontSize: 36px
    }
}

html[lang="ja"] {
    --h1FontFamily: "NitalagoRuika";
    --h1LineHeight: 28px;
    --h1FontWeight: 500;
    --h1Letterspacing: 0.025em;
    --h2FontFamily: "NitalagoRuika";
    --h2FontWeight: 500;
    --h2Letterspacing: 0.015em;
    --h4FontFamily: "NitalagoRuika";
    --h4FontWeight: 500;
    --h4FontSize: 22px;
    --h4LineHeight: 28px;
    --h4Letterspacing: 0.025em;
    --h7FontFamily: "IBM Plex Sans JP";
    --h7LineHeight: 34px;
    --h9FontFamily: "IBM Plex Sans JP";
    --h9FontWeight: 500;
    --h10FontFamily: "NitalagoRuika";
    --h12FontFamily: "IBM Plex Sans JP";
    --h12FontWeight: 300;
    --h12FontSize: 18px;
    --h12LineHeight: 24px;
    --paragraphFontFamily: "IBM Plex Sans JP";
    --paragraphFontWeight: 300;
    --paragraphFontSize: 15px;
    --paragraphLineHeight: 24px;
    --paragraphLetterspacing: 0.035em;
    --paragraphMedFontFamily: "IBM Plex Sans JP";
    font-family: "NitalagoRuika", serif
}

@media (max-width:1100px) and (min-width:768px) {
    html[lang="ja"] {
        --h1FontSize: 36px
    }
}

@media (min-width:768px) {
    html[lang="ja"] {
        --h1LineHeight: 50px;
        --h1Letterspacing: 1.5px;
        --h4LineHeight: 26px;
        --h4Letterspacing: 0.015em;
        --h7FontWeight: 600;
        --h9FontSize: 13px;
        --h12FontSize: 14px;
        --h12LineHeight: 60px;
        --h19NewNewsTitleFontFamily: "NitalagoRuika";
        --h19NewNewsTitleFontWeight: 500;
        --paragraphFontSize: 14px;
        --paragraphLineHeight: 23px;
        --paragraphLetterspacing: 0.065em;
        --paragraphMedLineHeight: 18px;
        --paragraphMedLetterspacing: 0.025em
    }
}

html[lang="ja"] a:not(.call-to-action),
html[lang="ja"] button:not(.call-to-action) {
    font-family: "NitalagoRuika", serif
}

html[lang="ja"] .component.sharing-options div.label {
    --h16SubHeadingFooterFontFamily: "IBM Plex Sans JP";
    --h16SubHeadingFontWeight: 300;
    --h16SubHeadingFontSize: 15px;
    --h16SubHeadingLineHeight: 24px;
    --h16SubHeadingLetterspacing: 0.035em;
    font-family: var(--h16SubHeadingFooterFontFamily);
    font-size: var(--h16SubHeadingFontSize);
    font-style: normal;
    font-weight: var(--h16SubHeadingFontWeight);
    line-height: var(--h16SubHeadingLineHeight);
    letter-spacing: var(--h16SubHeadingLetterspacing)
}

@media (min-width:768px) {
    html[lang="ja"] .component.sharing-options div.label {
        --h16SubHeadingFooterFontFamily: "Rajdhani";
        --h16SubHeadingFontWeight: 500;
        --h16SubHeadingFontSize: 15px;
        --h16SubHeadingLineHeight: 19px;
        --h16SubHeadingLetterspacing: 0.025em
    }
}

html[lang="ja"] section.timeline .timeline-container .timeline-item .date-label {
    font-weight: 600
}

html[lang="ja"] section.animating-components .component {
    margin-bottom: 50px
}

html[lang="zh-hans"] {
    --h1FontFamily: "Source Han Sans SC";
    --h1LineHeight: 28px;
    --h1FontWeight: 500;
    --h1Letterspacing: 0.02em;
    --h2FontFamily: "Source Han Sans SC";
    --h2FontWeight: 500;
    --h2LineHeight: 30px;
    --h2Letterspacing: 0.05em;
    --h4FontFamily: "Source Han Sans SC";
    --h4FontWeight: 500;
    --h4FontSize: 25px;
    --h4LineHeight: 35px;
    --h4Letterspacing: 0.02em;
    --h7FontFamily: "Source Han Sans SC";
    --h7FontWeight: 600;
    --h8FontSize: 13px;
    --h9FontFamily: "IBM Plex Sans JP";
    --h9FontWeight: 500;
    --paragraphFontFamily: "Source Han Sans SC";
    --paragraphLineHeight: 30px;
    --paragraphLetterspacing: 0.025em;
    --paragraphMedFontFamily: "Source Han Sans SC";
    --paragraphMedLineHeight: 22px;
    font-family: "Source Han Sans SC", serif
}

@media (max-width:1100px) and (min-width:768px) {
    html[lang="zh-hans"] {
        --h1FontSize: 36px
    }
}

@media (min-width:768px) {
    html[lang="zh-hans"] {
        --h1FontSize: 41px;
        --h1LineHeight: 55px;
        --h2Letterspacing: 0.02em;
        --h2LineHeight: 35px;
        --h4FontSize: 28px;
        --h7LineHeight: 25px;
        --h9FontSize: 13px;
        --h19NewNewsTitleFontFamily: "Source Han Sans SC";
        --h19NewNewsTitleFontWeight: 500;
        --h19NewNewsTitleFontSize: 18px;
        --h19NewNewsTitleLineHeight: 24px;
        --paragraphFontSize: 14px;
        --paragraphLineHeight: 24px;
        --paragraphMedLineHeight: 18px;
        --paragraphMedLetterspacing: 0.025em
    }
}

html[lang="zh-hans"] a,
html[lang="zh-hans"] button {
    font-family: "Source Han Sans SC", serif
}

html[lang="zh-hans"] section.notched-content[data-intersected][data-notchalignment="left"] .content-overlay .title {
    font-weight: bold
}

html[lang="zh-hans"] section.multipurpose .content-overlay .title-copy+.components .small-copy p {
    font-size: 15px
}

html[lang="zh-hans"] header[role="banner"] nav ul li a {
    font-weight: 600 !important
}

html[lang="zh-hans"] section.animating-components .component.small-copy {
    line-height: 30px;
    letter-spacing: 0.065em
}

@font-face {
    font-family: "Snasm";
    src: url(../fonts/snasm.w00.light.ttf) format("truetype");
    font-weight: 200
}

@font-face {
    font-family: "Snasm";
    src: url(../fonts/snasm.w00.regular.ttf) format("truetype");
    font-weight: 400
}

@font-face {
    font-family: "Source Han Sans SC";
    src: url(../fonts/SimplifiedChinese/SourceHanSansSC-Light.otf) format("truetype");
    font-weight: 200
}

@font-face {
    font-family: "Source Han Sans SC";
    src: url(../fonts/SimplifiedChinese/SourceHanSansSC-Regular.otf) format("truetype");
    font-weight: 400
}

@font-face {
    font-family: "Source Han Sans SC";
    src: url(../fonts/SimplifiedChinese/SourceHanSansSC-Medium.otf) format("truetype");
    font-weight: 500
}

@font-face {
    font-family: "Source Han Sans SC";
    src: url(../fonts/SimplifiedChinese/SourceHanSansSC-Bold.otf) format("truetype");
    font-weight: 600
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url(../fonts/IBM-Plex-Sans-JP/IBMPlexSansJP-Light.ttf) format("truetype");
    font-weight: 300
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url(../fonts/IBM-Plex-Sans-JP/IBMPlexSansJP-Regular.ttf) format("truetype");
    font-weight: 400
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url(../fonts/IBM-Plex-Sans-JP/IBMPlexSansJP-Medium.ttf) format("truetype");
    font-weight: 500
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url(../fonts/IBM-Plex-Sans-JP/IBMPlexSansJP-SemiBold.ttf) format("truetype");
    font-weight: 600
}

@font-face {
    font-family: "IBM Plex Sans JP";
    src: url(../fonts/IBM-Plex-Sans-JP/IBMPlexSansJP-Bold.ttf) format("truetype");
    font-weight: 700
}

@font-face {
    font-family: "geom-graphic";
    src: url(../fonts/GeomGraphicLight/font.woff2) format("woff2"), url(../fonts/GeomGraphicLight/font.woff) format("woff");
    font-style: normal;
    font-weight: 300
}

@font-face {
    font-family: "geom-graphic";
    src: url(../fonts/GeomGraphicLightItalic/font.woff2) format("woff2"), url(../fonts/GeomGraphicLightItalic/font.woff) format("woff");
    font-style: italic;
    font-weight: 300
}

@font-face {
    font-family: "geom-graphic";
    src: url(../fonts/GeomGraphicRegular/font.woff2) format("woff2"), url(../fonts/GeomGraphicRegular/font.woff) format("woff");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: "geom-graphic";
    src: url(../fonts/GeomGraphicRegularItalic/font.woff2) format("woff2"), url(../fonts/GeomGraphicRegularItalic/font.woff) format("woff");
    font-style: italic;
    font-weight: 400
}

@font-face {
    font-family: "geom-graphic";
    src: url(../fonts/GeomGraphicSemiBold/font.woff2) format("woff2"), url(../fonts/GeomGraphicSemiBold/font.woff) format("woff");
    font-style: normal;
    font-weight: 600
}

@font-face {
    font-family: "geom-graphic";
    src: url(../fonts/GeomGraphicSemiBoldItalic/font.woff2) format("woff2"), url(../fonts/GeomGraphicSemiBoldItalic/font.woff) format("woff");
    font-style: italic;
    font-weight: 600
}

@font-face {
    font-family: "geom-graphic";
    src: url(../fonts/GeomGraphicBold/font.woff2) format("woff2"), url(../fonts/GeomGraphicBold/font.woff) format("woff");
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: "geom-graphic";
    src: url(../fonts/GeomGraphicBoldItalic/font.woff2) format("woff2"), url(../fonts/GeomGraphicBoldItalic/font.woff) format("woff");
    font-style: italic;
    font-weight: 700
}

@font-face {
    font-family: "NitalagoRuika";
    src: url(../fonts/NitalagoRuika/NitalagoRuika-06M.TTF) format("truetype");
    font-weight: 500
}

body,
html {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: transparent;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased
}

body {
    background-color: #000;
    -webkit-text-size-adjust: 100%
}

body.age-gated {
    position: fixed;
    overflow-y: hidden
}

p:first-child {
    margin-top: 0
}

p:last-child {
    margin-bottom: 0
}

p:empty {
    display: none
}

.call-to-action-extendable,
a.call-to-action,
button.call-to-action {
    position: relative;
    display: inline-block;
    height: 32px;
    padding: 0 35px 0 var(--padTextLineH);
    color: var(--clHighlight);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    overflow: hidden;
    user-select: none;
    font-family: var(--h9FontFamily);
    font-size: var(--h9FontSize);
    font-style: normal;
    font-weight: var(--h9FontWeight);
    line-height: var(--h9LineHeight);
    letter-spacing: var(--h9Letterspacing);
    text-transform: uppercase;
    --h9LineHeight: 30px;
    --h9FontWeight: 600;
    position: relative;
    z-index: 2;
    padding-left: 32px;
    padding-right: 32px;
    position: relative;
    z-index: 2;
    padding-left: 36px;
    padding-right: 36px;
    overflow-x: hidden;
    padding-left: 18px;
    padding-right: 36px;
    overflow-x: hidden;
    padding-left: 18px;
    padding-right: 36px;
    color: #000;
    transition: all var(--fastTransitionTime)
}

@media (min-width:768px) {

    .call-to-action-extendable,
    a.call-to-action,
    button.call-to-action {
        --h9LineHeight: 30px
    }
}

.call-to-action-extendable:before,
a.call-to-action:before,
button.call-to-action:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

.call-to-action-extendable:before,
a.call-to-action:before,
button.call-to-action:before {
    background-color: transparent;
    background-image: linear-gradient(#d9d9d9, #8e8e8e);
    border-bottom: 2px solid black;
    border-left: 2px solid black
}

.call-to-action-extendable:after,
a.call-to-action:after,
button.call-to-action:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 0;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

.call-to-action-extendable:before,
a.call-to-action:before,
button.call-to-action:before {
    left: calc(-1 * 9px)
}

.call-to-action-extendable:after,
a.call-to-action:after,
button.call-to-action:after {
    left: calc(-1 * 9px)
}

.call-to-action-extendable:before,
a.call-to-action:before,
button.call-to-action:before,
.call-to-action-extendable:after,
a.call-to-action:after,
button.call-to-action:after {
    transition: opacity var(--fastTransitionTime)
}

.call-to-action-extendable:hover,
a.call-to-action:hover,
button.call-to-action:hover {
    color: #fff
}

.call-to-action-extendable:hover:before,
a.call-to-action:hover:before,
button.call-to-action:hover:before {
    opacity: 0
}

.call-to-action-extendable:hover:after,
a.call-to-action:hover:after,
button.call-to-action:hover:after {
    opacity: 1
}

a,
button.call-to-action {
    text-decoration: none
}

a:hover:not(.call-to-action),
button.call-to-action:hover:not(.call-to-action) {
    text-decoration: underline
}

a.call-to-action:active,
button.call-to-action.call-to-action:active {
    transform: scale(0.9)
}

a.disabled-display,
button.call-to-action.disabled-display {
    display: none
}

section a:not(.call-to-action) {
    text-decoration: underline
}

section a:not(.call-to-action):hover {
    text-decoration: none
}

.align-tr a.call-to-action,
.align-mr a.call-to-action,
.align-br a.call-to-action,
[data-notchalignment="left"] a.call-to-action {
    overflow-x: hidden;
    padding-right: 16px;
    padding-left: 32px;
    overflow-x: hidden;
    padding-right: 16px;
    padding-left: 32px
}

.align-tr a.call-to-action:before,
.align-mr a.call-to-action:before,
.align-br a.call-to-action:before,
[data-notchalignment="left"] a.call-to-action:before {
    width: 100%;
    left: 8px;
    transform: scale(1, 1) skew(22deg)
}

.align-tr a.call-to-action:after,
.align-mr a.call-to-action:after,
.align-br a.call-to-action:after,
[data-notchalignment="left"] a.call-to-action:after {
    width: 100%;
    left: 8px;
    transform: scale(1, 1) skew(22deg)
}

img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none
}

.notched-black-semi-bg {
    position: relative;
    z-index: 2;
    padding-left: 32px;
    padding-right: 32px;
    overflow-x: hidden;
    padding-left: 16px;
    padding-right: 32px;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    padding: 1px 24px 1px 10px
}

.notched-black-semi-bg:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 0.5;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

.notched-black-semi-bg:before {
    left: calc(-1 * 8px)
}

.notched-black-semi-bg+.large-text {
    margin-top: 16px
}

.content-overlay.align-tr .notched-black-semi-bg,
.content-overlay.align-mr .notched-black-semi-bg,
.content-overlay.align-br .notched-black-semi-bg {
    overflow-x: hidden;
    padding-right: 16px;
    padding-left: 32px
}

.content-overlay.align-tr .notched-black-semi-bg:before,
.content-overlay.align-mr .notched-black-semi-bg:before,
.content-overlay.align-br .notched-black-semi-bg:before {
    width: 100%;
    left: 8px;
    transform: scale(1, 1) skew(22deg)
}

.notched-white-bg {
    position: relative;
    z-index: 2;
    padding-left: 39px;
    padding-right: 39px;
    overflow-x: hidden;
    padding-left: 19.5px;
    padding-right: 39px;
    display: inline-block;
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    font-family: "geom-graphic";
    font-size: 33px;
    padding-top: 14px;
    padding-bottom: 14px;
    margin-bottom: 6px;
    overflow: hidden
}

.notched-white-bg:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

.notched-white-bg:before {
    background-color: white
}

.notched-white-bg:before {
    left: calc(-1 * 9.75px)
}

.notched-white-bg+.large-text {
    margin-top: 12px
}

.large-text {
    font-family: var(--h2FontFamily);
    font-size: var(--h2FontSize);
    font-style: normal;
    font-weight: var(--h2FontWeight);
    line-height: var(--h2LineHeight);
    letter-spacing: var(--h2Letterspacing);
    text-transform: uppercase
}

img[data-align="left"],
img.align-left {
    margin-right: 16px;
    margin-bottom: 16px
}

img[data-align="right"],
img.align-right {
    margin-left: 16px;
    margin-bottom: 16px
}

[data-animatable="fade"] {
    opacity: 0
}

[data-animatable="fade"]:nth-child(0) {
    transition-delay: calc(1 * 0.12s)
}

[data-animatable="fade"]:nth-child(1) {
    transition-delay: calc(2 * 0.12s)
}

[data-animatable="fade"]:nth-child(2) {
    transition-delay: calc(3 * 0.12s)
}

[data-animatable="fade"]:nth-child(3) {
    transition-delay: calc(4 * 0.12s)
}

[data-animatable="fade"]:nth-child(4) {
    transition-delay: calc(5 * 0.12s)
}

[data-animatable="fade"]:nth-child(5) {
    transition-delay: calc(6 * 0.12s)
}

[data-animatable="fade"]:nth-child(6) {
    transition-delay: calc(7 * 0.12s)
}

[data-animatable="fade"]:nth-child(7) {
    transition-delay: calc(8 * 0.12s)
}

[data-animatable="fade"]:nth-child(8) {
    transition-delay: calc(9 * 0.12s)
}

[data-animatable="fade"]:nth-child(9) {
    transition-delay: calc(10 * 0.12s)
}

[data-animatable="fade"]:nth-child(10) {
    transition-delay: calc(11 * 0.12s)
}

[data-animatable="fade"]:nth-child(11) {
    transition-delay: calc(12 * 0.12s)
}

[data-animatable="fade"]:nth-child(12) {
    transition-delay: calc(13 * 0.12s)
}

[data-animatable="fade"]:nth-child(13) {
    transition-delay: calc(14 * 0.12s)
}

[data-animatable="fade"]:nth-child(14) {
    transition-delay: calc(15 * 0.12s)
}

[data-animatable="fade"]:nth-child(15) {
    transition-delay: calc(16 * 0.12s)
}

[data-intersected] [data-animatable="fade"],
[data-intersected] [data-carouseldisabled="true"] [data-animatable="fade"] {
    opacity: 1
}

.component:empty {
    display: none !important
}

.component.multiple-call-to-action {
    display: inline-block;
    box-sizing: border-box;
    height: auto;
    line-height: 50px;
    position: relative;
    z-index: var(--zIndLowHigh);
    padding-left: 36px;
    padding-right: 36px;
    overflow-x: hidden;
    padding-left: 18px;
    padding-right: 36px
}

.component.multiple-call-to-action:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 0.75;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

.component.multiple-call-to-action:before {
    left: calc(-1 * 9px)
}

.component.multiple-call-to-action:before {
    width: calc(100% - 12px)
}

@media (max-width:767px) {
    .component.multiple-call-to-action {
        width: 100%
    }
}

.component.multiple-call-to-action label,
.component.multiple-call-to-action .ctas {
    display: inline-block
}

.component.multiple-call-to-action label {
    min-width: 125px;
    padding-right: 15px;
    vertical-align: bottom;
    font-family: var(--h6FontFamily);
    font-size: var(--h6FontSize);
    font-style: normal;
    font-weight: var(--h6FontWeight);
    line-height: var(--h6LineHeight);
    letter-spacing: var(--h6Letterspacing);
    text-transform: uppercase;
    line-height: unset
}

@media (max-width:767px) {
    .component.multiple-call-to-action label {
        vertical-align: top;
        display: block;
        max-width: 68%
    }
}

.component.multiple-call-to-action .ctas {
    position: relative;
    z-index: var(--zIndLowMid);
    height: 50px;
    margin-left: -5px
}

.component.multiple-call-to-action .ctas .call-to-action {
    height: 50px;
    vertical-align: middle;
    font-family: var(--h11FontFamily);
    font-size: var(--h11FontSize);
    font-style: normal;
    font-weight: var(--h11FontWeight);
    line-height: var(--h11LineHeight);
    letter-spacing: var(--h11Letterspacing);
    text-transform: uppercase;
    padding-right: 40px;
    line-height: unset
}

.component.multiple-call-to-action .ctas .call-to-action:hover {
    text-decoration: underline
}

@media (max-width:767px) {
    .component.multiple-call-to-action .ctas .call-to-action {
        display: block
    }
}

.component.multiple-call-to-action .ctas .call-to-action {
    color: var(--clTextLight);
    transition: color var(--standardTransitionTime);
    padding: 0 25px
}

.component.multiple-call-to-action .ctas .call-to-action:before,
.component.multiple-call-to-action .ctas .call-to-action:after {
    display: none
}

.component.multiple-call-to-action .ctas .call-to-action:hover {
    color: var(--clHighlight)
}

.component.multiple-call-to-action .ctas .call-to-action:not(:first-of-type):before {
    display: none
}

.component.multiple-call-to-action .animatable-background {
    right: calc(100% + 50px);
    top: 0;
    width: 100%;
    height: 50px;
    transition: transform var(--ultraFastTransitionTime) ease-out 0.15s;
    position: absolute;
    z-index: var(--zIndLowLow);
    padding-left: 13px;
    padding-right: 13px
}

.component.multiple-call-to-action .animatable-background:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

.component.multiple-call-to-action .animatable-background:before {
    background-color: transparent;
    border-bottom: 2px solid var(--clHighlight);
    border-left: 2px solid var(--clHighlight)
}

@media (max-width:767px) {
    .component.multiple-call-to-action {
        text-align: right
    }

    .component.multiple-call-to-action .animatable-background {
        transform: translateY(50px) translateX(-54px)
    }

    .component.multiple-call-to-action label {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        padding-bottom: 22px;
        max-width: calc(100% - 30px)
    }
}

.component.advanced-video,
.component.standard-video,
.component.standard-video-url {
    --muteDisplay: block;
    --btBigPlaySize: 120px;
    position: relative;
    width: 100%;
    height: 100%
}

@media (max-width:767px) {

    .component.advanced-video,
    .component.standard-video,
    .component.standard-video-url {
        --muteDisplay: none;
        --btBigPlaySize: 70px
    }
}

.component.advanced-video .video-js,
.component.standard-video .video-js,
.component.standard-video-url .video-js {
    width: 100%;
    height: 100%
}

.component.advanced-video video,
.component.standard-video video,
.component.standard-video-url video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none
}

.component.advanced-video .video-controls,
.component.standard-video .video-controls,
.component.standard-video-url .video-controls {
    position: absolute;
    z-index: var(--zIndMidHigh);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.component.advanced-video .video-controls .overlay,
.component.standard-video .video-controls .overlay,
.component.standard-video-url .video-controls .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: all
}

.component.advanced-video .video-controls button,
.component.standard-video .video-controls button,
.component.standard-video-url .video-controls button {
    display: inline-block;
    vertical-align: middle;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin-left: 12px
}

.component.advanced-video .video-controls .bt-big-play,
.component.advanced-video .video-controls .shelf,
.component.standard-video .video-controls .bt-big-play,
.component.standard-video .video-controls .shelf,
.component.standard-video-url .video-controls .bt-big-play,
.component.standard-video-url .video-controls .shelf {
    position: absolute
}

.component.advanced-video .video-controls .bt-big-play,
.component.standard-video .video-controls .bt-big-play,
.component.standard-video-url .video-controls .bt-big-play {
    left: 50%;
    top: 50%;
    width: var(--btBigPlaySize);
    height: var(--btBigPlaySize);
    transform: translate(-50%, -50%);
    transition: opacity 0.5s
}

.component.advanced-video .video-controls .bt-big-play:before,
.component.standard-video .video-controls .bt-big-play:before,
.component.standard-video-url .video-controls .bt-big-play:before {
    content: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.bigplay.svg")
}

.component.advanced-video .video-controls .bt-play:before,
.component.standard-video .video-controls .bt-play:before,
.component.standard-video-url .video-controls .bt-play:before {
    content: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.play.white.svg")
}

.component.advanced-video .video-controls .bt-mute,
.component.standard-video .video-controls .bt-mute,
.component.standard-video-url .video-controls .bt-mute {
    display: var(--muteDisplay)
}

.component.advanced-video .video-controls .bt-mute:before,
.component.standard-video .video-controls .bt-mute:before,
.component.standard-video-url .video-controls .bt-mute:before {
    content: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.mute.white.svg")
}

.component.advanced-video .video-controls .shelf,
.component.standard-video .video-controls .shelf,
.component.standard-video-url .video-controls .shelf {
    display: flex;
    align-items: center;
    right: var(--cornerButtonMargins);
    bottom: var(--cornerButtonMargins)
}

.component.advanced-video .video-controls .shelf .bt-play,
.component.standard-video .video-controls .shelf .bt-play,
.component.standard-video-url .video-controls .shelf .bt-play {
    width: 21px;
    height: 25px
}

.component.advanced-video .video-controls .shelf .bt-mute,
.component.standard-video .video-controls .shelf .bt-mute,
.component.standard-video-url .video-controls .shelf .bt-mute {
    width: 35px;
    height: 35px
}

.component.advanced-video .video-controls button,
.component.standard-video .video-controls button,
.component.standard-video-url .video-controls button {
    pointer-events: all
}

[data-videostate="playing"] .component.advanced-video .video-controls .bt-big-play,
[data-videostate="playing"] .component.standard-video .video-controls .bt-big-play,
[data-videostate="playing"] .component.standard-video-url .video-controls .bt-big-play {
    opacity: 0;
    pointer-events: none
}

[data-videostate="playing"] .component.advanced-video .video-controls .bt-play:before,
[data-videostate="playing"] .component.standard-video .video-controls .bt-play:before,
[data-videostate="playing"] .component.standard-video-url .video-controls .bt-play:before {
    content: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.pause.white.svg")
}

@media (min-width:768px) {
    section:not([data-mediaplayerframe="1"]) [data-videostate="playing"] .content-overlay {
        opacity: 0
    }
}

section[data-forceoverlaynarrow="1"]:not([data-mediaplayerframe="1"]) [data-videostate="playing"] .content-overlay {
    opacity: 0
}

[data-audiostate="muted"] .component.advanced-video .bt-mute:before,
[data-audiostate="muted"] .component.standard-video .bt-mute:before,
[data-audiostate="muted"] .component.standard-video-url .bt-mute:before {
    content: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.unmute.white.svg")
}

.component.youtube-video {
    position: relative;
    z-index: var(--zIndLowHigh);
    height: 100%;
    width: 100%
}

.component.youtube-video .youtube-video {
    position: relative;
    width: 100%;
    height: 100%
}

.component.youtube-video .youtube-video iframe {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 180px
}

.component.youtube-video .thumbnailable-image {
    display: none
}

.component.download-multiple {
    display: flex
}

@media (max-width:767px) {
    .component.download-multiple {
        flex-direction: column;
        align-items: flex-start
    }
}

.component.download-multiple .custom-select-container {
    cursor: pointer
}

.component.download-multiple .custom-select-container div {
    line-height: 40px
}

.component.download-multiple .custom-select-container .selected-option {
    height: 40px;
    min-width: 100px;
    line-height: 40px;
    color: #000;
    padding: 0 20px;
    background-color: #fff
}

.component.download-multiple .custom-select-container .selected-option .secondary,
.component.download-multiple .custom-select-container .options .secondary {
    color: #777
}

.component.download-multiple a.call-to-action {
    height: 42px;
    line-height: 42px
}

.download-options {
    z-index: var(--zIndLowMid);
    margin-top: -5px;
    background-color: #fff
}

.download-options div.option {
    padding: 8px 15px;
    color: #000
}

.component.copy-and-image-row {
    display: flex;
    align-items: center
}

.component.copy-and-image-row[data-style="_30_70_left"] {
    flex-direction: row-reverse
}

.component.copy-and-image-row[data-style="_30_70_left"] .copy {
    flex: 7
}

.component.copy-and-image-row[data-style="_30_70_left"] .image {
    flex: 2;
    padding-right: 40px
}

.component.copy-and-image-row[data-style="_50_50_left"] {
    flex-direction: row-reverse
}

.component.copy-and-image-row[data-style="_50_50_left"] .copy {
    flex: 5
}

.component.copy-and-image-row[data-style="_50_50_left"] .image {
    flex: 5;
    padding-right: 40px
}

.component.copy-and-image-row[data-style="_70_30_left"] {
    flex-direction: row-reverse
}

.component.copy-and-image-row[data-style="_70_30_left"] .copy {
    flex: 2
}

.component.copy-and-image-row[data-style="_70_30_left"] .image {
    flex: 7;
    padding-right: 40px
}

.component.copy-and-image-row[data-style="_30_70_right"] .copy {
    flex: 2
}

.component.copy-and-image-row[data-style="_30_70_right"] .image {
    flex: 7;
    padding-left: 40px
}

.component.copy-and-image-row[data-style="_50_50_right"] .copy {
    flex: 5
}

.component.copy-and-image-row[data-style="_50_50_right"] .image {
    flex: 5;
    padding-left: 40px
}

.component.copy-and-image-row[data-style="_70_30_right"] .copy {
    flex: 7
}

.component.copy-and-image-row[data-style="_70_30_right"] .image {
    flex: 2;
    padding-left: 40px
}

.component.copy-and-image-row .large-text {
    font-family: var(--h2FontFamily);
    font-size: var(--h2FontSize);
    font-style: normal;
    font-weight: var(--h2FontWeight);
    line-height: var(--h2LineHeight);
    letter-spacing: var(--h2Letterspacing);
    text-transform: uppercase
}

.component.copy-and-image-row .copy {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

.component.copy-and-image-row .copy .wysiwyg-large-text {
    font-family: var(--h6FontFamily);
    font-size: var(--h6FontSize);
    font-style: normal;
    font-weight: var(--h6FontWeight);
    line-height: var(--h6LineHeight);
    letter-spacing: var(--h6Letterspacing);
    text-transform: uppercase
}

.component.copy-and-image-row .image img {
    width: 100%;
    height: auto;
    object-fit: contain
}

@media (max-width:767px) {
    .component.copy-and-image-row {
        flex-direction: column;
        align-items: flex-start
    }

    .component.copy-and-image-row .copy {
        max-width: 80%;
        margin-left: 0
    }

    .component.copy-and-image-row .image {
        position: relative;
        left: 50%;
        max-width: 55%;
        padding-top: 30px;
        padding-left: 0 !important;
        transform: translateX(-50%)
    }
}

.component.sharing-options div.label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    margin-bottom: 12px;
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

.component.sharing-options .option-buttons {
    display: inline-flex
}

.component.sharing-options .option-buttons .sharing-option:not(:last-child) {
    margin-right: 16px
}

.component.sharing-options .option-buttons .sharing-option:hover {
    transition: transform 0.2s;
    transform: translateY(-3px)
}

.component.sharing-options .option-buttons .sharing-option img {
    height: 27px
}

.component.sharing-options .option-Off {
    display: none
}

.component.image-link {
    display: inline-block
}

.component.image-link img {
    max-width: 100%
}

.component.death-stranding-logo-block {
    --logoWidth: 45%;
    --marginLeft: -5%;
    --marginTop: -5%;
    --logoMaxWidth: 520px;
    --padLogoBottom: 23%;
    --componentsMarginBottom: 0;
    --platformLogoHeight: 32px;
    --componentsFlexDirection: row;
    --componentsFlexAlign: flex-start;
    width: 100%;
    overflow: visible !important;
    margin-left: var(--marginLeft);
    margin-top: var(--marginTop) !important
}

@media (max-width:1100px) and (min-width:768px) {
    .component.death-stranding-logo-block {
        --logoWidth: 50%;
        --marginLeft: -6%;
        --padLogoBottom: 26%
    }
}

@media (max-width:767px) {
    .component.death-stranding-logo-block {
        --logoWidth: 270px;
        --marginLeft: 0;
        --marginTop: 0;
        --logoMaxWidth: 320px;
        --padLogoBottom: 150px;
        --componentsMarginBottom: 20px;
        --platformLogoHeight: 30px;
        --componentsFlexDirection: column;
        --componentsFlexAlign: flex-start
    }
}

.component.death-stranding-logo-block .logo {
    position: relative;
    width: var(--logoWidth);
    max-width: var(--logoMaxWidth);
    height: 0;
    padding-bottom: var(--padLogoBottom);
    transform: translateY(30%)
}

@media (max-width:767px) {
    .component.death-stranding-logo-block .logo {
        transform: translateY(10%)
    }
}

@media (max-width:500px) {
    .component.death-stranding-logo-block .logo {
        left: 50%;
        transform: translate(-50%, 20%)
    }
}

.component.death-stranding-logo-block .logo img {
    width: 100%;
    height: auto
}

.component.death-stranding-logo-block .components {
    display: flex;
    position: relative;
    z-index: calc(var(--zIndTopSection) + 1);
    flex-direction: var(--componentsFlexDirection);
    align-items: var(--componentsFlexAlign);
    flex-wrap: wrap;
    margin-bottom: var(--componentsMarginBottom)
}

.component.death-stranding-logo-block .components .component {
    flex-shrink: 0;
    height: 32px;
    overflow: hidden;
    margin-right: 20px
}

.component.death-stranding-logo-block .components .component.small-image {
    height: var(--platformLogoHeight)
}

.component.small-image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.component.small-copy {
    font-family: var(--paragraphMedFontFamily);
    font-size: var(--paragraphMedFontSize);
    font-style: normal;
    font-weight: var(--paragraphMedFontWeight);
    line-height: var(--paragraphMedLineHeight);
    letter-spacing: var(--paragraphMedLetterspacing);
    line-height: unset
}

.component.gallery-and-copy {
    word-break: break-word
}

.component.gallery-and-copy .carousel-item,
.component.gallery-and-copy .carousel-item a {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

@media (max-width:767px) {
    .component.gallery-and-copy {
        display: flex;
        flex-direction: column-reverse
    }
}

.custom-select-container {
    --arrowWidth: 20px;
    --arrowMargin: 14px;
    cursor: pointer;
    font-size: var(--textCustomSelect)
}

@media (max-width:767px) {
    .custom-select-container {
        --arrowWidth: 15px;
        --arrowMargin: 10px
    }
}

.custom-select-container .selected-option:after {
    content: "";
    display: inline-block;
    width: var(--arrowWidth);
    height: calc(var(--arrowWidth) * 0.53);
    vertical-align: middle;
    margin-left: var(--arrowMargin);
    margin-top: -2px;
    background-image: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.dropdown.arrow.black.svg");
    background-repeat: no-repeat;
    background-position: 50%
}

.custom-select-container .selected-option span {
    font-family: var(--h11FontFamily);
    font-size: var(--h11FontSize);
    font-style: normal;
    font-weight: var(--h11FontWeight);
    line-height: var(--h11LineHeight);
    letter-spacing: var(--h11Letterspacing);
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - var(--arrowWidth) - var(--arrowMargin));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.custom-select-container[data-optionsstate="open"] .selected-option:after {
    transform: scale(1, -1)
}

.custom-select-container .custom-select-options {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.25s
}

.custom-select-options {
    position: fixed;
    z-index: 9999;
    font-family: var(--h12FontFamily);
    font-size: var(--h12FontSize);
    font-style: normal;
    font-weight: var(--h12FontWeight);
    line-height: var(--h12LineHeight);
    letter-spacing: var(--h12Letterspacing);
    --h12LineHeight: 28px;
    text-transform: unset
}

.custom-select-options .option {
    padding: 8px;
    background-color: #fff
}

.custom-select-options .option.selected,
.custom-select-options .option:hover {
    cursor: pointer;
    background-color: #ddd
}

.custom-select-clickcapture {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page-attached-select-container {
    position: absolute;
    z-index: var(--zIndHighHigh)
}

.filter-block {
    --filterHeight: 50px
}

.filter-block .center {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: var(--zIndMidLow);
    width: 100%;
    height: var(--filterHeight);
    line-height: var(--filterHeight);
    background-color: #000;
    box-shadow: var(--standardBoxShadow)
}

@media (max-width:767px) {
    .filter-block .center {
        height: calc(var(--filterHeight) * 2);
        justify-content: center;
        flex-wrap: wrap
    }
}

.filter-block .label {
    --thisPadRight: 35px;
    --thisPadLeft: 20px;
    position: relative;
    z-index: 2;
    flex: none;
    font-family: var(--h6FontFamily);
    font-size: var(--h6FontSize);
    font-style: normal;
    font-weight: var(--h6FontWeight);
    line-height: var(--h6LineHeight);
    letter-spacing: var(--h6Letterspacing);
    text-transform: uppercase;
    line-height: var(--filterHeight);
    color: var(--clTextLight);
    padding-right: var(--thisPadRight);
    text-align: right;
    background: var(--clDarkGrey);
    white-space: nowrap
}

.filter-block .label:before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0;
    width: 1250px;
    height: 100%;
    background-color: var(--clDarkGrey)
}

.filter-block .label label {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: var(--thisPadLeft)
}

@media (max-width:767px) {
    .filter-block .label {
        width: 100%;
        text-align: center;
        --thisPadRight: 0px
    }

    .filter-block .label label {
        min-width: 100%;
        text-align: center;
        padding-left: 0
    }
}

.filter-block .view-selects {
    display: flex
}

@media (max-width:767px) {
    .filter-block .view-selects {
        width: 100%;
        justify-content: center
    }
}

.filter-block .view-selects .select-container {
    position: relative;
    z-index: var(--zIndLowHigh);
    height: var(--filterHeight);
    max-width: 50%;
    min-width: 150px;
    padding: 0 5px;
    margin-right: 5px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    padding-left: 32px;
    padding-right: 32px
}

.filter-block .view-selects .select-container:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

.filter-block .view-selects .select-container:before {
    background-color: white
}

.filter-block .view-selects .select-container:last-child {
    margin-right: 0
}

@media (min-width:768px) {
    .filter-block .view-selects .select-container:nth-of-type(1) {
        margin-left: -12px
    }
}

@media (max-width:767px) {
    .filter-block .view-selects .select-container {
        flex: 1;
        padding-left: 10px;
        padding-right: 10px
    }

    .filter-block .view-selects .select-container:first-child:before {
        width: calc(100% + 100px);
        right: 0;
        left: auto
    }

    .filter-block .view-selects .select-container:last-child:before {
        width: calc(100% + 100px);
        left: 0;
        right: auto
    }
}

.filter-block .view-selects .select-container .options {
    min-width: 100%;
    text-align: left;
    background-color: #fff
}

.filter-block .view-selects .select-container .options .option {
    white-space: nowrap
}

.notched-section-label {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: -50px
}

.notched-section-label .notch {
    position: absolute;
    z-index: var(--zIndMidLow);
    right: 50%;
    width: 50%;
    height: 100%;
    background-color: var(--clDarkGrey)
}

.notched-section-label .label {
    display: block;
    position: absolute;
    right: 0;
    text-align: right;
    text-transform: uppercase;
    font-size: var(--textNotchedTitle);
    color: #fff;
    white-space: nowrap;
    transform: translateX(50%);
    position: absolute;
    z-index: var(--zIndMidHigh);
    padding-left: 32px;
    padding-right: 32px;
    font-family: var(--h6FontFamily);
    font-size: var(--h6FontSize);
    font-style: normal;
    font-weight: var(--h6FontWeight);
    line-height: var(--h6LineHeight);
    letter-spacing: var(--h6Letterspacing);
    text-transform: uppercase;
    --h6FontWeight: 300;
    line-height: 50px
}

.notched-section-label .label:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

.notched-section-label .label:before {
    background-color: var(--clDarkGrey)
}

.notched-section-label .label:before {
    transform: scale(1, 1) skew(22deg)
}

.views-container .view-content h1,
.views-container .view-content h2,
.views-container .view-content h3,
.views-container .view-content h4,
.views-container .view-content #pagination-heading,
.views-container .views-element-container h1,
.views-container .views-element-container h2,
.views-container .views-element-container h3,
.views-container .views-element-container h4,
.views-container .views-element-container #pagination-heading {
    display: none
}

.views-container .view-content nav ul,
.views-container .views-element-container nav ul {
    position: relative;
    display: flex;
    padding: 0;
    margin: 0
}

.views-container .view-content nav ul li,
.views-container .views-element-container nav ul li {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 8px;
    background-color: var(--clGrey);
    box-sizing: border-box
}

.views-container .view-content nav ul li a,
.views-container .views-element-container nav ul li a {
    display: block;
    width: 40px;
    text-decoration: none
}

.views-container .view-content nav ul li a,
.views-container .view-content nav ul li a:visited,
.views-container .views-element-container nav ul li a,
.views-container .views-element-container nav ul li a:visited {
    color: #fff
}

.views-container .view-content nav ul li a:hover,
.views-container .views-element-container nav ul li a:hover {
    color: #fff;
    background-color: #000
}

.views-container .view-content nav ul .pager__item--first,
.views-container .view-content nav ul .pager__item--previous,
.views-container .view-content nav ul .pager__item--next,
.views-container .view-content nav ul .pager__item--last,
.views-container .views-element-container nav ul .pager__item--first,
.views-container .views-element-container nav ul .pager__item--previous,
.views-container .views-element-container nav ul .pager__item--next,
.views-container .views-element-container nav ul .pager__item--last {
    display: none
}

.views-container[data-viewstatepage="0"] nav.pager ul li:nth-child(1) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="1"] nav.pager ul li:nth-child(2) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="2"] nav.pager ul li:nth-child(3) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="3"] nav.pager ul li:nth-child(4) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="4"] nav.pager ul li:nth-child(5) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="5"] nav.pager ul li:nth-child(6) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="6"] nav.pager ul li:nth-child(7) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="7"] nav.pager ul li:nth-child(8) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="8"] nav.pager ul li:nth-child(9) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="9"] nav.pager ul li:nth-child(10) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.views-container[data-viewstatepage="10"] nav.pager ul li:nth-child(11) {
    opacity: 0.5;
    pointer-events: none;
    user-select: none
}

.view-loading {
    display: none !important;
    position: fixed;
    z-index: 99999;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background-color: #000;
    transform: translate(-50%, calc(-50% + 30px)) perspective(100px) rotateX(-90deg) scale(0.5);
    opacity: 0;
    transition: all var(--fastTransitionTime) ease-in-out 1.2s
}

.view-loading:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border-radius: 100%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%)
}

.view-loading[data-viewstate="loading"] {
    transform: translate(-50%, calc(-50%)) perspective(100px) rotateX(0deg) scale(1);
    opacity: 0.75;
    transition-delay: 0s
}

.view-loading[data-viewstate="loading"] .loading-nub,
.view-loading[data-viewstate="added"] .loading-nub,
.view-loading[data-viewstate="complete"] .loading-nub {
    animation-name: rotate
}

.view-loading .loading-nub {
    position: absolute;
    left: 15px;
    top: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

.view-loading .loading-nub:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #fff;
    transform: translate(calc(-50% - 15px), -50%)
}

span.grey-text {
    color: var(--clGrey)
}

span.black-text {
    color: var(--clBlack)
}

span.white-text {
    color: #fff
}

header[role="banner"] {
    position: absolute;
    z-index: var(--zIndMidHigh);
    width: 100%;
    height: var(--headerHeight);
    font-size: var(--textRegular);
    content: "Desktop Rendered"
}

header[role="banner"] .scroller {
    display: flex;
    justify-content: space-between
}

header[role="banner"] .overflow-scroller {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

header[role="banner"] nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-size: var(--textRegular);
    white-space: nowrap
}

header[role="banner"] ul.menu [data-drupal-link-system-path="<front>"] {
    width: var(--KJPLogoWidth);
    margin-right: 10px;
    margin-bottom: 20px;
    background-image: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/lg.kjp.white.png");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
    text-indent: -9999px
}

header[role="banner"] ul.menu li a {
    line-height: unset
}

@media (min-width:1100px) {
    header[role="banner"] ul.menu li a {
        font-family: var(--h8FontFamily);
        font-size: var(--h8FontSize);
        font-style: normal;
        font-weight: var(--h8FontWeight);
        line-height: var(--h8LineHeight);
        letter-spacing: var(--h8Letterspacing);
        text-transform: uppercase;
        font-variant: small-caps;
        line-height: var(--headerHeight)
    }
}

@media (max-width:1099px) {
    header[role="banner"] ul.menu li a {
        font-family: var(--mobileMenuFontFamily);
        font-size: var(--mobileMenuFontSize);
        font-style: normal;
        font-weight: var(--mobileMenuFontWeight);
        line-height: var(--mobileMenuLineHeight);
        letter-spacing: var(--mobileMenuLetterspacing)
    }
}

@media (min-width:1100px) {
    header[role="banner"] ul.menu li.parent ul a {
        line-height: var(--menuDropdownItemHeight)
    }
}

header[role="banner"] ul.links.languages {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    flex: none
}

header[role="banner"] ul.links.languages li {
    min-width: 100%;
    text-align: center;
    margin-left: 0;
    box-sizing: border-box
}

header[role="banner"] ul.links.languages li:nth-child(1) {
    display: flex;
    top: 0
}

header[role="banner"] ul.links.languages li:nth-child(1) a:before {
    display: inline-block;
    padding-left: 32px;
    background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.globe.squash.white.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: left center
}

@media (max-width:767px) {
    header[role="banner"] ul.links.languages li:nth-child(1) {
        justify-content: center
    }

    header[role="banner"] ul.links.languages li:nth-child(1) a:before {
        background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.globe.squash.svg)
    }
}

header[role="banner"] ul.links.languages li a {
    position: relative;
    display: block;
    min-width: 50px;
    color: transparent;
    font-size: 0em;
    padding: 0
}

header[role="banner"] ul.links.languages li a:before {
    content: attr(data-display);
    position: relative;
    text-transform: uppercase;
    color: #fff
}

@media (max-width:1099px) {
    header[role="banner"] ul.links.languages li a:before {
        font-family: var(--mobileMenuFontFamily);
        font-size: var(--mobileMenuFontSize);
        font-style: normal;
        font-weight: var(--mobileMenuFontWeight);
        line-height: var(--mobileMenuLineHeight);
        letter-spacing: var(--mobileMenuLetterspacing)
    }
}

@media (min-width:1100px) {
    header[role="banner"] ul.links.languages li a {
        line-height: var(--headerHeight)
    }

    header[role="banner"] ul.links.languages li a:before {
        font-family: var(--h8FontFamily);
        font-size: var(--h8FontSize);
        font-style: normal;
        font-weight: var(--h8FontWeight);
        line-height: var(--h8LineHeight);
        letter-spacing: var(--h8Letterspacing);
        text-transform: uppercase
    }
}

header[role="banner"] ul.links.languages li:first-child,
header[role="banner"] ul.top-level li.parent {
    box-sizing: border-box
}

header[role="banner"] ul.links.languages li:first-child>a:after,
header[role="banner"] ul.top-level li.parent>a:after {
    content: "";
    display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 13px;
    width: 18px;
    height: 9px;
    background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.dropdown.arrow.white.svg);
    background-repeat: no-repeat
}

.mobile-logo {
    position: fixed;
    z-index: var(--zIndHighMid);
    left: 0;
    top: 0;
    width: 100%;
    height: 55px;
    padding-left: var(--mobileMenuIndent);
    padding-top: var(--mobileMenuIndent);
    padding-bottom: var(--mobileMenuIndent)
}

.mobile-logo .shader {
    position: absolute;
    z-index: var(--zIndLowLow);
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    transition: opacity var(--standardTransitionTime)
}

.mobile-logo .link-front {
    display: block;
    height: 55px
}

.mobile-logo img {
    width: 200px;
    height: auto;
    line-height: 55px
}

.mobile-logo img:nth-child(1) {
    position: relative;
    z-index: var(--zIndLowMid)
}

.mobile-logo img:nth-child(2) {
    position: absolute;
    top: var(--mobileMenuIndent);
    left: var(--mobileMenuIndent);
    opacity: 0;
    transition: opacity 0.25s ease-in-out 0s
}

@media (min-width:1100px) {
    header[role="banner"] {
        position: fixed;
        top: 0;
        max-width: var(--siteMaxWidth);
        min-width: var(--siteMinWidth);
        margin: auto
    }

    header[role="banner"] .animatable-background {
        left: 1950px;
        top: -500px;
        opacity: 0;
        transition: opacity var(--standardTransitionTime) ease-in-out 1.1s, transform 0s linear 0s, top 0s linear 1s;
        background-color: rgba(0, 0, 0, 0.25)
    }

    header[role="banner"] .blurrable-background {
        backdrop-filter: blur(7px);
        background-color: rgba(0, 0, 0, 0.35)
    }

    header[role="banner"] .animatable-background,
    header[role="banner"] .blurrable-background {
        display: block;
        position: absolute;
        left: 28px;
        top: 0;
        width: 1920px;
        height: 100%;
        transform: skew(28deg, 0)
    }

    header[role="banner"] .animatable-background.on,
    header[role="banner"] .blurrable-background.on {
        top: 0;
        opacity: 1;
        transition: opacity var(--standardTransitionTime) ease-in-out 1.1s, transform var(--standardTransitionTime) ease-in-out 0.15s, top 0s linear 1s
    }

    header[role="banner"] nav {
        position: relative;
        z-index: var(--zIndLowMid);
        width: 100%
    }

    header[role="banner"] ul.menu.top-level,
    header[role="banner"] ul.links.languages {
        display: flex;
        margin: 0;
        padding: 0
    }

    header[role="banner"] ul.menu.top-level:not(.links.languages),
    header[role="banner"] ul.links.languages:not(.links.languages) {
        padding-left: 50px
    }

    header[role="banner"] ul.menu.top-level:not(.links.languages) ul,
    header[role="banner"] ul.links.languages:not(.links.languages) ul {
        padding-left: 16px;
        pointer-events: none
    }

    header[role="banner"] ul.menu.top-level:not(.links.languages) ul li,
    header[role="banner"] ul.links.languages:not(.links.languages) ul li {
        position: relative;
        pointer-events: none
    }

    header[role="banner"] ul.menu.top-level.links.languages,
    header[role="banner"] ul.links.languages.links.languages {
        position: relative;
        z-index: var(--zIndLowMid)
    }

    header[role="banner"] ul.menu.top-level.links.languages>li:not(:first-of-type),
    header[role="banner"] ul.links.languages.links.languages>li:not(:first-of-type) {
        position: absolute;
        height: auto;
        margin-top: calc(-1 * var(--headerHeight))
    }

    header[role="banner"] ul.menu.top-level.links.languages>li:not(:first-of-type) a,
    header[role="banner"] ul.links.languages.links.languages>li:not(:first-of-type) a {
        height: var(--menuDropdownItemHeight);
        line-height: var(--menuDropdownItemHeight)
    }

    header[role="banner"] ul.menu.top-level>li,
    header[role="banner"] ul.links.languages>li {
        display: inline-block;
        height: var(--headerHeight)
    }

    header[role="banner"] ul.menu.top-level>li>a,
    header[role="banner"] ul.links.languages>li>a {
        height: var(--headerHeight);
        line-height: var(--headerHeight);
        padding-left: 24px;
        padding-right: 24px
    }

    header[role="banner"] ul.menu.top-level>li a.in_active_trail,
    header[role="banner"] ul.menu.top-level>li a.is-active,
    header[role="banner"] ul.links.languages>li a.in_active_trail,
    header[role="banner"] ul.links.languages>li a.is-active {
        color: var(--clHighlight);
        text-decoration: underline
    }

    header[role="banner"] ul.menu.top-level>li ul,
    header[role="banner"] ul.links.languages>li ul {
        position: absolute
    }

    header[role="banner"] ul.menu.top-level>li ul li,
    header[role="banner"] ul.links.languages>li ul li {
        display: block;
        position: relative
    }

    header[role="banner"] ul.menu.top-level>li ul li a,
    header[role="banner"] ul.links.languages>li ul li a {
        padding: 0 20px
    }

    header[role="banner"] ul.menu.top-level.menu.top-level ul li,
    header[role="banner"] ul.menu.top-level.links.languages li:not(:first-of-type),
    header[role="banner"] ul.links.languages.menu.top-level ul li,
    header[role="banner"] ul.links.languages.links.languages li:not(:first-of-type) {
        top: -1000px;
        height: var(--menuDropdownItemHeight);
        box-sizing: border-box;
        background-color: var(--bgTransparent)
    }

    header[role="banner"] ul.menu.top-level.menu.top-level ul li a,
    header[role="banner"] ul.menu.top-level.links.languages li:not(:first-of-type) a,
    header[role="banner"] ul.links.languages.menu.top-level ul li a,
    header[role="banner"] ul.links.languages.links.languages li:not(:first-of-type) a {
        height: var(--menuDropdownItemHeight);
        line-height: var(--menuDropdownItemHeight)
    }

    header[role="banner"] ul.menu.top-level a[data-drupal-link-system-path="<front>"] {
        margin-left: var(--KJPLogoMarginLeft);
        margin-right: var(--KJPLogoMarginRight);
        padding: 0 12px
    }

    header[role="banner"] ul.links.languages a[data-drupal-link-system-path="<front>"] {
        margin-left: 10px;
        margin-right: 10px;
        padding-right: 20px
    }

    ul.links.languages li:not(:first-child),
    ul.links.languages ul li,
    ul.menu li li:not(:first-child),
    ul.menu li ul li {
        opacity: 0
    }

    ul.links.languages:hover li:not(:first-child),
    ul.links.languages:hover ul li,
    ul.menu li:hover li:not(:first-child),
    ul.menu li:hover ul li {
        opacity: 1;
        pointer-events: all;
        backdrop-filter: blur(3px);
        transition: opacity var(--menuTransitionTime)
    }

    ul.links.languages:hover li:not(:first-child):nth-child(0),
    ul.links.languages:hover ul li:nth-child(0),
    ul.menu li:hover li:not(:first-child):nth-child(0),
    ul.menu li:hover ul li:nth-child(0) {
        transition-delay: 0s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(1),
    ul.links.languages:hover ul li:nth-child(1),
    ul.menu li:hover li:not(:first-child):nth-child(1),
    ul.menu li:hover ul li:nth-child(1) {
        transition-delay: 0.15s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(2),
    ul.links.languages:hover ul li:nth-child(2),
    ul.menu li:hover li:not(:first-child):nth-child(2),
    ul.menu li:hover ul li:nth-child(2) {
        transition-delay: 0.3s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(3),
    ul.links.languages:hover ul li:nth-child(3),
    ul.menu li:hover li:not(:first-child):nth-child(3),
    ul.menu li:hover ul li:nth-child(3) {
        transition-delay: 0.45s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(4),
    ul.links.languages:hover ul li:nth-child(4),
    ul.menu li:hover li:not(:first-child):nth-child(4),
    ul.menu li:hover ul li:nth-child(4) {
        transition-delay: 0.6s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(5),
    ul.links.languages:hover ul li:nth-child(5),
    ul.menu li:hover li:not(:first-child):nth-child(5),
    ul.menu li:hover ul li:nth-child(5) {
        transition-delay: 0.75s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(6),
    ul.links.languages:hover ul li:nth-child(6),
    ul.menu li:hover li:not(:first-child):nth-child(6),
    ul.menu li:hover ul li:nth-child(6) {
        transition-delay: 0.9s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(7),
    ul.links.languages:hover ul li:nth-child(7),
    ul.menu li:hover li:not(:first-child):nth-child(7),
    ul.menu li:hover ul li:nth-child(7) {
        transition-delay: 1.05s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(8),
    ul.links.languages:hover ul li:nth-child(8),
    ul.menu li:hover li:not(:first-child):nth-child(8),
    ul.menu li:hover ul li:nth-child(8) {
        transition-delay: 1.2s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(9),
    ul.links.languages:hover ul li:nth-child(9),
    ul.menu li:hover li:not(:first-child):nth-child(9),
    ul.menu li:hover ul li:nth-child(9) {
        transition-delay: 1.35s
    }

    ul.links.languages:hover li:not(:first-child):nth-child(1),
    ul.links.languages:hover ul li:nth-child(1),
    ul.menu li:hover li:not(:first-child):nth-child(1),
    ul.menu li:hover ul li:nth-child(1) {
        top: calc(100% + var(--menuDropdownItemHeight) * 1) !important
    }

    ul.links.languages:hover li:not(:first-child):nth-child(2),
    ul.links.languages:hover ul li:nth-child(2),
    ul.menu li:hover li:not(:first-child):nth-child(2),
    ul.menu li:hover ul li:nth-child(2) {
        top: calc(100% + var(--menuDropdownItemHeight) * 2) !important
    }

    ul.links.languages:hover li:not(:first-child):nth-child(3),
    ul.links.languages:hover ul li:nth-child(3),
    ul.menu li:hover li:not(:first-child):nth-child(3),
    ul.menu li:hover ul li:nth-child(3) {
        top: calc(100% + var(--menuDropdownItemHeight) * 3) !important
    }

    ul.links.languages:hover li:not(:first-child):nth-child(4),
    ul.links.languages:hover ul li:nth-child(4),
    ul.menu li:hover li:not(:first-child):nth-child(4),
    ul.menu li:hover ul li:nth-child(4) {
        top: calc(100% + var(--menuDropdownItemHeight) * 4) !important
    }

    ul.links.languages:hover li:not(:first-child):nth-child(5),
    ul.links.languages:hover ul li:nth-child(5),
    ul.menu li:hover li:not(:first-child):nth-child(5),
    ul.menu li:hover ul li:nth-child(5) {
        top: calc(100% + var(--menuDropdownItemHeight) * 5) !important
    }

    ul.links.languages:hover li:not(:first-child):nth-child(6),
    ul.links.languages:hover ul li:nth-child(6),
    ul.menu li:hover li:not(:first-child):nth-child(6),
    ul.menu li:hover ul li:nth-child(6) {
        top: calc(100% + var(--menuDropdownItemHeight) * 6) !important
    }

    ul.links.languages:hover li:not(:first-child):nth-child(7),
    ul.links.languages:hover ul li:nth-child(7),
    ul.menu li:hover li:not(:first-child):nth-child(7),
    ul.menu li:hover ul li:nth-child(7) {
        top: calc(100% + var(--menuDropdownItemHeight) * 7) !important
    }

    ul.links.languages:hover li:not(:first-child):nth-child(8),
    ul.links.languages:hover ul li:nth-child(8),
    ul.menu li:hover li:not(:first-child):nth-child(8),
    ul.menu li:hover ul li:nth-child(8) {
        top: calc(100% + var(--menuDropdownItemHeight) * 8) !important
    }

    ul.links.languages:hover li:not(:first-child):hover a:before,
    ul.links.languages:hover ul li:hover a:before,
    ul.menu li:hover li:not(:first-child):hover a:before,
    ul.menu li:hover ul li:hover a:before {
        text-decoration: underline !important
    }

    ul.links.languages:hover ul,
    ul.links.languages:hover li,
    ul.menu li:hover ul,
    ul.menu li:hover li {
        pointer-events: all !important
    }

    .mobile-logo {
        display: none
    }

    ul.links.languages li:first-child:hover>a:after,
    ul.top-level li.parent:hover>a:after {
        opacity: 0.7;
        transform: scaleY(-1);
        animation-name: vertical-bounce-menu-dropdown;
        animation-duration: 0.35s;
        animation-iteration-count: 1;
        animation-fill-mode: backwards
    }
}

@media (min-width:1100px) and (max-width:1300px) {

    header[role="banner"] ul.menu.top-level>li>a,
    header[role="banner"] ul.links.languages>li>a {
        padding-left: 14px;
        padding-right: 14px;
        --KJPLogoMarginLeft: 16px;
        --KJPLogoMarginRight: 24px
    }
}

button.bt-mobile-hamburger {
    display: none;
    z-index: var(--zIndHighHigh);
    right: 0;
    top: 20px;
    height: 50px;
    width: 50px;
    background-color: transparent;
    outline: none;
    border: none;
    cursor: pointer;
    position: fixed;
    z-index: var(--zIndHighHigh);
    padding-left: 50px;
    padding-right: 50px;
    overflow-x: hidden;
    padding-right: 25px;
    padding-left: 50px
}

button.bt-mobile-hamburger:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 0.4;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

button.bt-mobile-hamburger:before {
    transform: scale(1, 1) skew(22deg)
}

button.bt-mobile-hamburger:before {
    width: 100%;
    left: 12.5px;
    transform: scale(1, 1) skew(22deg)
}

button.bt-mobile-hamburger:after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 55px;
    height: 100%;
    background-image: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/bt.hamburger.white.svg");
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: 50%
}

@media (max-width:1099px) {
    button.bt-mobile-hamburger {
        display: block
    }
}

@media (max-width:1099px) {
    header[role="banner"] {
        position: fixed;
        display: block;
        z-index: var(--zIndMidHigh);
        left: 100%;
        top: 0;
        width: 100%;
        height: 100%;
        padding-top: 85px;
        box-sizing: border-box;
        background: #fff;
        transition: transform 0.5s;
        content: "Mobile Rendered"
    }

    header[role="banner"] div.scroller {
        flex-direction: column;
        height: 100%;
        overflow-y: scroll;
        scroll-behavior: smooth
    }

    header[role="banner"] .animatable-background {
        display: none
    }

    header[role="banner"] nav>ul {
        display: block;
        margin: 0 0 var(--mobileMenuIndent) 0
    }

    header[role="banner"] nav>ul li {
        display: block;
        padding: 0;
        margin: 0;
        padding: 0 var(--mobileMenuIndent)
    }

    header[role="banner"] nav>ul li a {
        color: #000;
        text-overflow: ellipsis;
        overflow: hidden
    }

    header[role="banner"] nav>ul li a[data-drupal-link-system-path="<front>"] {
        display: none
    }

    header[role="banner"] nav>ul li a.is-active {
        font-family: var(--mobileMenuFontFamily);
        font-size: var(--mobileMenuFontSize);
        font-style: normal;
        font-weight: var(--mobileMenuFontWeight);
        line-height: var(--mobileMenuLineHeight);
        letter-spacing: var(--mobileMenuLetterspacing);
        font-weight: var(--mobileMenuSelectedFontWeight);
        text-decoration: underline;
        border-bottom: 2px solid #bbb
    }

    header[role="banner"] nav>ul>li>a {
        padding: 20px 0;
        border-bottom: 1px solid #ccc
    }

    header[role="banner"] nav ul {
        padding: 0
    }

    header[role="banner"] li.parent li {
        display: none
    }

    header[role="banner"] li.parent a.is-active+ul li {
        display: block
    }

    header[role="banner"] .copyright {
        color: #000
    }

    header[role="banner"] ul.menu li.parent,
    header[role="banner"] ul.links.languages {
        height: 60px;
        transition: all var(--standardTransitionTime)
    }

    header[role="banner"] ul.menu li.parent.manual-mobile-open a:after,
    header[role="banner"] ul.links.languages.manual-mobile-open a:after {
        transform: scaleY(-1) !important
    }

    header[role="banner"] ul.menu li.parent li,
    header[role="banner"] ul.links.languages li {
        height: 50px;
        line-height: 50px;
        transition: all 0s linear 0.25s
    }

    header[role="banner"] ul.menu li.parent.manual-mobile-open li {
        visibility: visible;
        transition: all 0s linear 0s
    }

    header[role="banner"] ul.menu li.parent li {
        display: block;
        visibility: hidden
    }

    header[role="banner"] ul.links.languages {
        --thisTransition: 1s;
        height: auto;
        max-height: 50px;
        margin-top: 25px;
        transition: all var(--thisTransition)
    }

    header[role="banner"] ul.links.languages li:not(:first-child) {
        opacity: 0;
        pointer-events: none;
        transition: all var(--thisTransition)
    }

    header[role="banner"] ul.links.languages li a:before {
        color: #000
    }

    header[role="banner"] ul.links.languages.manual-mobile-open {
        max-height: 250px
    }

    header[role="banner"] ul.links.languages.manual-mobile-open li {
        opacity: 1;
        pointer-events: all;
        transition: all var(--thisTransition)
    }

    header[role="banner"] ul.links.languages li:first-child a:after,
    header[role="banner"] ul.top-level li.parent a:after {
        background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.dropdown.arrow.black.svg)
    }

    header[role="banner"] li {
        overflow: hidden
    }
}

div.layout-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    scroll-behavior: smooth
}

div.layout-container.arrow-on .site-arrow {
    display: block
}

div.layout-container.arrow-on footer .positioner {
    margin-top: 0
}

div.layout-container.mobile-nav-open {
    position: fixed
}

div.layout-container.mobile-nav-open header {
    transform: translateX(-100%)
}

div.layout-container.mobile-nav-open .shader {
    opacity: 0
}

div.layout-container.mobile-nav-open .mobile-logo img:nth-child(1) {
    opacity: 0;
    transition: opacity 0.25s ease-in-out 0.25s
}

div.layout-container.mobile-nav-open .mobile-logo img:nth-child(2) {
    opacity: 1;
    transition: opacity 0.25s ease-in-out 0.25s
}

div.layout-container.mobile-nav-open .bt-mobile-hamburger:after {
    background-image: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/bt.cross.white.svg")
}

div.layout-container .bounds {
    position: relative;
    height: 100%;
    max-width: var(--siteMaxWidth);
    min-width: var(--siteMinWidth);
    margin: auto
}

div.layout-container .bounds main {
    width: 100%;
    overflow-x: hidden
}

div.layout-container .site-arrow {
    position: relative;
    display: none;
    width: 100%;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-family: var(--h11FontFamily);
    font-size: var(--h11FontSize);
    font-style: normal;
    font-weight: var(--h11FontWeight);
    line-height: var(--h11LineHeight);
    letter-spacing: var(--h11Letterspacing);
    text-transform: uppercase
}

@media (max-width:767px) {
    div.layout-container .site-arrow {
        padding: 25px 0
    }
}

div.layout-container .site-arrow .content {
    position: relative;
    z-index: 10;
    width: 80%;
    padding: 40px 10% 40px 10%;
    transition: all 0.2s
}

div.layout-container .site-arrow .content:hover {
    transform: scale(1.05)
}

div.layout-container .site-arrow img {
    display: block;
    height: 26px;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom: 8px
}

div.layout-container .site-arrow.off {
    opacity: 0;
    pointer-events: none
}

div.layout-container .rich-content-frame,
div.layout-container .rich-content {
    position: relative;
    width: 100%;
    height: 100%
}

div.layout-container .anchored-image {
    width: 100%;
    height: 100%
}

div.layout-container .anchored-image .desktop,
div.layout-container .anchored-image .mobile {
    height: 100%
}

div.layout-container .anchored-image .mobile {
    display: none
}

@media (max-width:500px) {
    div.layout-container .anchored-image[data-hasmobile="true"] .desktop {
        display: none
    }

    div.layout-container .anchored-image[data-hasmobile="true"] .mobile {
        display: block
    }
}

div.layout-container .anchored-image .tl img {
    object-position: top left
}

div.layout-container .anchored-image .tc img {
    object-position: top center
}

div.layout-container .anchored-image .tr img {
    object-position: top right
}

div.layout-container .anchored-image .ml img {
    object-position: center left
}

div.layout-container .anchored-image .mc img {
    object-position: center center
}

div.layout-container .anchored-image .mr img {
    object-position: center right
}

div.layout-container .anchored-image .bl img {
    object-position: bottom left
}

div.layout-container .anchored-image .bc img {
    object-position: bottom center
}

div.layout-container .anchored-image .br img {
    object-position: bottom right
}

div.layout-container .anchored-image img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%
}

div.layout-container .custom-select-options {
    font-family: var(--h11FontFamily);
    font-size: var(--h11FontSize);
    font-style: normal;
    font-weight: var(--h11FontWeight);
    line-height: var(--h11LineHeight);
    letter-spacing: var(--h11Letterspacing);
    text-transform: uppercase
}

.layout-container {
    height: 100%
}

.layout-container main {
    display: inline
}

.layout-container.sharojima .links.inline {
    display: none
}

.age-gate {
    --sectionPad: 18px;
    position: fixed;
    z-index: var(--zIndHighHigh);
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: var(--textRegular);
    background-color: #000;
    overflow-y: auto
}

.age-gate.on .content {
    opacity: 1;
    transition: all var(--standardTransitionTime)
}

.age-gate.off {
    pointer-events: none;
    opacity: 0;
    transition: all var(--standardTransitionTime)
}

.age-gate.null {
    pointer-events: none;
    opacity: 0
}

.age-gate .content {
    position: absolute;
    top: 50%;
    left: var(--indentLeft);
    width: 84%;
    max-width: 500px;
    max-height: 100%;
    opacity: 0;
    transform: translateY(-50%)
}

.age-gate .logo {
    width: 220px;
    margin-bottom: var(--sectionPad)
}

.age-gate .logo img {
    width: 100%;
    height: auto
}

.age-gate .main {
    font-weight: 400;
    margin-bottom: var(--sectionPad);
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

.age-gate .main .large-text {
    font-family: var(--h2FontFamily);
    font-size: var(--h2FontSize);
    font-style: normal;
    font-weight: var(--h2FontWeight);
    line-height: var(--h2LineHeight);
    letter-spacing: var(--h2Letterspacing);
    text-transform: uppercase
}

.age-gate .date {
    margin-bottom: var(--sectionPad)
}

.age-gate .date .select {
    position: relative;
    display: inline-block;
    width: 27%
}

.age-gate .date .select:before {
    content: "";
    position: absolute;
    z-index: 100000;
    right: 2px;
    top: 10%;
    height: 80%;
    width: 20px;
    background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.dropdown.arrow.black.svg);
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 13px;
    background-position: 50%;
    pointer-events: none
}

.age-gate .date .select select {
    position: relative;
    padding: 6px 10px;
    border-radius: 0px;
    border: 0;
    outline: 0;
    color: #000;
    background-color: #fff;
    -webkit-appearance: none;
    font-family: var(--h12FontFamily);
    font-size: var(--h12FontSize);
    font-style: normal;
    font-weight: var(--h12FontWeight);
    line-height: var(--h12LineHeight);
    letter-spacing: var(--h12Letterspacing);
    line-height: unset;
    width: 100%
}

.age-gate .date .select select option {
    color: #000
}

.age-gate .date .select:nth-child(2) {
    width: 40.9999%
}

.age-gate .confirmation {
    display: flex;
    align-items: center;
    margin-bottom: var(--sectionPad);
    font-size: var(--textSmall)
}

.age-gate .confirmation .visual-checkbox {
    flex: none;
    position: relative;
    width: 30px;
    height: 30px;
    margin-right: calc(var(--sectionPad) / 2)
}

.age-gate .confirmation .fake-checkbox {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    background-color: #000;
    background-size: 65%;
    background-position: 50%;
    background-repeat: no-repeat;
    transition: all 0.25s;
    pointer-events: none
}

.age-gate .confirmation .visual-checkbox input[type="checkbox"]:checked~.fake-checkbox {
    background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.tick.white.svg)
}

.age-gate .confirmation input {
    width: 100%;
    height: 100%;
    opacity: 0
}

.age-gate .confirmation .confirmation-copy p,
.age-gate .confirmation .confirmation-copy a {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

.age-gate .options {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.age-gate a.call-to-action {
    margin-bottom: var(--sectionPad)
}

.age-gate a:not(.call-to-action) {
    text-decoration: underline
}

.age-gate a:not(.call-to-action),
.age-gate a:not(.call-to-action):visited {
    color: #fff
}

.age-gate .error-field {
    border: 1px solid red !important
}

.age-gate .age-gate-error {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing);
    display: none;
    color: red
}

.age-gate .age-gate-error.on {
    display: block
}

.age-gate ul.links.languages {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    flex: none;
    --h9LineHeight: 30px
}

.age-gate ul.links.languages li {
    min-width: 100%;
    text-align: center;
    margin-left: 0;
    box-sizing: border-box
}

.age-gate ul.links.languages li:nth-child(1) {
    display: flex;
    top: 0
}

.age-gate ul.links.languages li:nth-child(1) a:before {
    display: inline-block;
    padding-left: 32px;
    background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.globe.squash.white.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: left center
}

@media (max-width:767px) {
    .age-gate ul.links.languages li:nth-child(1) {
        justify-content: center
    }

    .age-gate ul.links.languages li:nth-child(1) a:before {
        background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.globe.squash.svg)
    }
}

.age-gate ul.links.languages li a {
    position: relative;
    display: block;
    min-width: 50px;
    color: transparent;
    font-size: 0em;
    padding: 0
}

.age-gate ul.links.languages li a:before {
    content: attr(data-display);
    position: relative;
    text-transform: uppercase;
    color: #fff
}

@media (max-width:1099px) {
    .age-gate ul.links.languages li a:before {
        font-family: var(--mobileMenuFontFamily);
        font-size: var(--mobileMenuFontSize);
        font-style: normal;
        font-weight: var(--mobileMenuFontWeight);
        line-height: var(--mobileMenuLineHeight);
        letter-spacing: var(--mobileMenuLetterspacing)
    }
}

@media (min-width:1100px) {
    .age-gate ul.links.languages li a {
        line-height: var(--headerHeight)
    }

    .age-gate ul.links.languages li a:before {
        font-family: var(--h8FontFamily);
        font-size: var(--h8FontSize);
        font-style: normal;
        font-weight: var(--h8FontWeight);
        line-height: var(--h8LineHeight);
        letter-spacing: var(--h8Letterspacing);
        text-transform: uppercase
    }
}

.age-gate ul.links.languages li,
.age-gate ul.links.languages li:nth-child(1) {
    display: inline-block;
    height: var(--h9LineHeight);
    line-height: var(--h9LineHeight);
    min-width: 70px;
    padding: 0 15px;
    opacity: 1;
    border-right: 1px solid white
}

.age-gate ul.links.languages li:last-child,
.age-gate ul.links.languages li:nth-child(1):last-child {
    border-right: none
}

.age-gate ul.links.languages li a,
.age-gate ul.links.languages li:nth-child(1) a {
    line-height: var(--h9LineHeight)
}

.age-gate ul.links.languages li:nth-child(1) a:before {
    background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.globe.squash.white.svg)
}

section {
    position: relative;
    max-width: 100%;
    height: var(--sectionHeight);
    overflow: hidden;
    box-shadow: var(--standardBoxShadow)
}

section:nth-child(1) {
    z-index: calc(var(--zIndTopSection) - 1)
}

section:nth-child(2) {
    z-index: calc(var(--zIndTopSection) - 2)
}

section:nth-child(3) {
    z-index: calc(var(--zIndTopSection) - 3)
}

section:nth-child(4) {
    z-index: calc(var(--zIndTopSection) - 4)
}

section:nth-child(5) {
    z-index: calc(var(--zIndTopSection) - 5)
}

section:nth-child(6) {
    z-index: calc(var(--zIndTopSection) - 6)
}

section:nth-child(7) {
    z-index: calc(var(--zIndTopSection) - 7)
}

section:nth-child(8) {
    z-index: calc(var(--zIndTopSection) - 8)
}

section:nth-child(9) {
    z-index: calc(var(--zIndTopSection) - 9)
}

section:nth-child(10) {
    z-index: calc(var(--zIndTopSection) - 10)
}

section:nth-child(11) {
    z-index: calc(var(--zIndTopSection) - 11)
}

section:nth-child(12) {
    z-index: calc(var(--zIndTopSection) - 12)
}

section:nth-child(13) {
    z-index: calc(var(--zIndTopSection) - 13)
}

section:nth-child(14) {
    z-index: calc(var(--zIndTopSection) - 14)
}

section:nth-child(15) {
    z-index: calc(var(--zIndTopSection) - 15)
}

section:nth-child(16) {
    z-index: calc(var(--zIndTopSection) - 16)
}

section:nth-child(17) {
    z-index: calc(var(--zIndTopSection) - 17)
}

section:nth-child(18) {
    z-index: calc(var(--zIndTopSection) - 18)
}

section:nth-child(19) {
    z-index: calc(var(--zIndTopSection) - 19)
}

section:nth-child(20) {
    z-index: calc(var(--zIndTopSection) - 20)
}

.sharing-options+.call-to-action {
    margin-top: 0 !important
}

.carousel[data-carousel="square-inline"] .carousel-items {
    width: 100%;
    height: 100%
}

.carousel[data-carousel="square-inline"] .carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.25s linear
}

.carousel[data-carousel="square-inline"] .carousel-arrows .arrow-prev,
.carousel[data-carousel="square-inline"] .carousel-arrows .arrow-next {
    width: var(--carouselArrowWidth);
    height: var(--carouselArrowWidth)
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(0) {
    z-index: calc(var(--zIndTopSection) - 0)
}

.carousel[data-carousel="square-inline"][data-carouselindex="-1"] [data-carouselindex="-1"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="-1"] [data-carouselindex="-1"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(1) {
    z-index: calc(var(--zIndTopSection) - 1)
}

.carousel[data-carousel="square-inline"][data-carouselindex="0"] [data-carouselindex="0"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="0"] [data-carouselindex="0"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(2) {
    z-index: calc(var(--zIndTopSection) - 2)
}

.carousel[data-carousel="square-inline"][data-carouselindex="1"] [data-carouselindex="1"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="1"] [data-carouselindex="1"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(3) {
    z-index: calc(var(--zIndTopSection) - 3)
}

.carousel[data-carousel="square-inline"][data-carouselindex="2"] [data-carouselindex="2"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="2"] [data-carouselindex="2"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(4) {
    z-index: calc(var(--zIndTopSection) - 4)
}

.carousel[data-carousel="square-inline"][data-carouselindex="3"] [data-carouselindex="3"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="3"] [data-carouselindex="3"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(5) {
    z-index: calc(var(--zIndTopSection) - 5)
}

.carousel[data-carousel="square-inline"][data-carouselindex="4"] [data-carouselindex="4"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="4"] [data-carouselindex="4"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(6) {
    z-index: calc(var(--zIndTopSection) - 6)
}

.carousel[data-carousel="square-inline"][data-carouselindex="5"] [data-carouselindex="5"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="5"] [data-carouselindex="5"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(7) {
    z-index: calc(var(--zIndTopSection) - 7)
}

.carousel[data-carousel="square-inline"][data-carouselindex="6"] [data-carouselindex="6"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="6"] [data-carouselindex="6"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(8) {
    z-index: calc(var(--zIndTopSection) - 8)
}

.carousel[data-carousel="square-inline"][data-carouselindex="7"] [data-carouselindex="7"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="7"] [data-carouselindex="7"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(9) {
    z-index: calc(var(--zIndTopSection) - 9)
}

.carousel[data-carousel="square-inline"][data-carouselindex="8"] [data-carouselindex="8"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="8"] [data-carouselindex="8"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(10) {
    z-index: calc(var(--zIndTopSection) - 10)
}

.carousel[data-carousel="square-inline"][data-carouselindex="9"] [data-carouselindex="9"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="9"] [data-carouselindex="9"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(11) {
    z-index: calc(var(--zIndTopSection) - 11)
}

.carousel[data-carousel="square-inline"][data-carouselindex="10"] [data-carouselindex="10"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="10"] [data-carouselindex="10"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(12) {
    z-index: calc(var(--zIndTopSection) - 12)
}

.carousel[data-carousel="square-inline"][data-carouselindex="11"] [data-carouselindex="11"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="11"] [data-carouselindex="11"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(13) {
    z-index: calc(var(--zIndTopSection) - 13)
}

.carousel[data-carousel="square-inline"][data-carouselindex="12"] [data-carouselindex="12"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="12"] [data-carouselindex="12"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(14) {
    z-index: calc(var(--zIndTopSection) - 14)
}

.carousel[data-carousel="square-inline"][data-carouselindex="13"] [data-carouselindex="13"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="13"] [data-carouselindex="13"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(15) {
    z-index: calc(var(--zIndTopSection) - 15)
}

.carousel[data-carousel="square-inline"][data-carouselindex="14"] [data-carouselindex="14"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="14"] [data-carouselindex="14"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(16) {
    z-index: calc(var(--zIndTopSection) - 16)
}

.carousel[data-carousel="square-inline"][data-carouselindex="15"] [data-carouselindex="15"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="15"] [data-carouselindex="15"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(17) {
    z-index: calc(var(--zIndTopSection) - 17)
}

.carousel[data-carousel="square-inline"][data-carouselindex="16"] [data-carouselindex="16"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="16"] [data-carouselindex="16"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(18) {
    z-index: calc(var(--zIndTopSection) - 18)
}

.carousel[data-carousel="square-inline"][data-carouselindex="17"] [data-carouselindex="17"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="17"] [data-carouselindex="17"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(19) {
    z-index: calc(var(--zIndTopSection) - 19)
}

.carousel[data-carousel="square-inline"][data-carouselindex="18"] [data-carouselindex="18"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="18"] [data-carouselindex="18"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(20) {
    z-index: calc(var(--zIndTopSection) - 20)
}

.carousel[data-carousel="square-inline"][data-carouselindex="19"] [data-carouselindex="19"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="19"] [data-carouselindex="19"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(21) {
    z-index: calc(var(--zIndTopSection) - 21)
}

.carousel[data-carousel="square-inline"][data-carouselindex="20"] [data-carouselindex="20"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="20"] [data-carouselindex="20"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(22) {
    z-index: calc(var(--zIndTopSection) - 22)
}

.carousel[data-carousel="square-inline"][data-carouselindex="21"] [data-carouselindex="21"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="21"] [data-carouselindex="21"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(23) {
    z-index: calc(var(--zIndTopSection) - 23)
}

.carousel[data-carousel="square-inline"][data-carouselindex="22"] [data-carouselindex="22"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="22"] [data-carouselindex="22"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(24) {
    z-index: calc(var(--zIndTopSection) - 24)
}

.carousel[data-carousel="square-inline"][data-carouselindex="23"] [data-carouselindex="23"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="23"] [data-carouselindex="23"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(25) {
    z-index: calc(var(--zIndTopSection) - 25)
}

.carousel[data-carousel="square-inline"][data-carouselindex="24"] [data-carouselindex="24"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="24"] [data-carouselindex="24"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(26) {
    z-index: calc(var(--zIndTopSection) - 26)
}

.carousel[data-carousel="square-inline"][data-carouselindex="25"] [data-carouselindex="25"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="25"] [data-carouselindex="25"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(27) {
    z-index: calc(var(--zIndTopSection) - 27)
}

.carousel[data-carousel="square-inline"][data-carouselindex="26"] [data-carouselindex="26"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="26"] [data-carouselindex="26"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(28) {
    z-index: calc(var(--zIndTopSection) - 28)
}

.carousel[data-carousel="square-inline"][data-carouselindex="27"] [data-carouselindex="27"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="27"] [data-carouselindex="27"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(29) {
    z-index: calc(var(--zIndTopSection) - 29)
}

.carousel[data-carousel="square-inline"][data-carouselindex="28"] [data-carouselindex="28"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="28"] [data-carouselindex="28"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="square-inline"] .carousel-item:nth-child(30) {
    z-index: calc(var(--zIndTopSection) - 30)
}

.carousel[data-carousel="square-inline"][data-carouselindex="29"] [data-carouselindex="29"] {
    z-index: var(--zIndTopSection);
    opacity: 1
}

.carousel[data-carousel="square-inline"][data-carouselpreviousindex="29"] [data-carouselindex="29"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"] {
    width: 100%;
    height: 100%
}

.carousel[data-carousel="hero"] .carousel-items {
    width: 100%;
    height: 100%
}

.carousel[data-carousel="hero"] .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s linear;
    box-sizing: border-box
}

.carousel[data-carousel="hero"][data-carouselindex="-1"] [data-carouselindex="-1"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="-1"] [data-carouselindex="-1"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="0"] [data-carouselindex="0"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="0"] [data-carouselindex="0"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="1"] [data-carouselindex="1"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="1"] [data-carouselindex="1"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="2"] [data-carouselindex="2"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="2"] [data-carouselindex="2"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="3"] [data-carouselindex="3"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="3"] [data-carouselindex="3"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="4"] [data-carouselindex="4"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="4"] [data-carouselindex="4"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="5"] [data-carouselindex="5"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="5"] [data-carouselindex="5"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="6"] [data-carouselindex="6"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="6"] [data-carouselindex="6"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="7"] [data-carouselindex="7"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="7"] [data-carouselindex="7"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="8"] [data-carouselindex="8"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="8"] [data-carouselindex="8"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="9"] [data-carouselindex="9"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="9"] [data-carouselindex="9"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="10"] [data-carouselindex="10"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="10"] [data-carouselindex="10"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="11"] [data-carouselindex="11"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="11"] [data-carouselindex="11"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="12"] [data-carouselindex="12"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="12"] [data-carouselindex="12"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="13"] [data-carouselindex="13"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="13"] [data-carouselindex="13"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="14"] [data-carouselindex="14"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="14"] [data-carouselindex="14"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="15"] [data-carouselindex="15"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="15"] [data-carouselindex="15"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="16"] [data-carouselindex="16"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="16"] [data-carouselindex="16"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="17"] [data-carouselindex="17"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="17"] [data-carouselindex="17"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="18"] [data-carouselindex="18"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="18"] [data-carouselindex="18"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="19"] [data-carouselindex="19"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="19"] [data-carouselindex="19"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="20"] [data-carouselindex="20"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="20"] [data-carouselindex="20"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="21"] [data-carouselindex="21"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="21"] [data-carouselindex="21"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="22"] [data-carouselindex="22"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="22"] [data-carouselindex="22"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="23"] [data-carouselindex="23"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="23"] [data-carouselindex="23"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="24"] [data-carouselindex="24"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="24"] [data-carouselindex="24"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="25"] [data-carouselindex="25"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="25"] [data-carouselindex="25"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="26"] [data-carouselindex="26"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="26"] [data-carouselindex="26"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="27"] [data-carouselindex="27"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="27"] [data-carouselindex="27"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="28"] [data-carouselindex="28"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="28"] [data-carouselindex="28"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"][data-carouselindex="29"] [data-carouselindex="29"] {
    position: relative;
    z-index: var(--zIndTopSection);
    opacity: 1;
    pointer-events: all
}

.carousel[data-carousel="hero"][data-carouselpreviousindex="29"] [data-carouselindex="29"] {
    z-index: calc(var(--zIndTopSection) - 1);
    opacity: 1
}

.carousel[data-carousel="hero"] .thumbnailable-image.replication-basis {
    display: none
}

.carousel[data-carousel="hero"][data-videostate="playing"] {}

.carousel[data-carousel="hero"][data-videostate="playing"] .carousel-thumbnails .thumbnailable-image .thumbnail-timer-track {
    opacity: 0
}

.carousel[data-carousel="hero"][data-slidecontent="youtube-video"] button.carousel-fullscreen {
    display: none
}

.carousel[data-fullscreenstate="fullscreen"] .carousel-item,
.carousel[data-fullscreenstate="fullscreen"] .rich-content {
    height: 100% !important
}

.carousel[data-fullscreenstate="fullscreen"] video,
.carousel[data-fullscreenstate="fullscreen"] .component.anchored-image img {
    object-fit: contain
}

[data-carouselarrows="false"] .carousel-arrows {
    display: none
}

[data-metaposition="first"] .arrow-prev,
[data-metaposition="last"] .arrow-next {
    opacity: 0.55;
    border: none;
    pointer-events: none;
    border: none !important
}

[data-tabactive="false"] .carousel-arrows {
    display: none
}

.carousel-arrows {
    --arrowInset: 40px;
    position: absolute;
    z-index: var(--zIndHighMid);
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: opacity 0.25s
}

@media (max-width:767px) {
    .carousel-arrows {
        display: none
    }
}

.carousel-arrows.transition-hide {
    opacity: 0
}

.carousel-arrows .arrow-prev,
.carousel-arrows .arrow-next {
    position: absolute;
    width: var(--carouselArrowWidth);
    height: var(--carouselArrowWidth);
    border-radius: 100%;
    border: 1px solid #fff;
    box-shadow: 0 0 20px var(--bgTransparent);
    background-color: var(--bgTransparent);
    background-image: url(https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.arrow.white.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: 50% 45%;
    pointer-events: all;
    transition: all 0.35s
}

.carousel-arrows .arrow-prev {
    left: var(--arrowInset);
    transform: rotate(-90deg) translate(0%, -50%)
}

.carousel-arrows .arrow-prev:hover {
    transform: scale(1.06) rotate(-90deg) translate(0%, -50%);
    border: 1px solid var(--clHighlight);
    box-shadow: 0 0 12px var(--bgTransparent)
}

.carousel-arrows .arrow-next {
    right: var(--arrowInset);
    transform: rotate(90deg) translate(0%, -50%)
}

.carousel-arrows .arrow-next:hover {
    transform: scale(1.06) rotate(90deg) translate(0%, -50%);
    border: 1px solid var(--clHighlight);
    box-shadow: 0 0 12px var(--bgTransparent)
}

.carousel-fullscreen {
    position: absolute;
    z-index: var(--zIndMidHigh);
    right: var(--cornerButtonMargins);
    top: var(--cornerButtonMargins);
    width: 28px;
    height: 28px;
    background-color: transparent;
    outline: none;
    border: none;
    background-image: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/bt.fullscreen.white.svg");
    background-repeat: no-repeat
}

[data-mediaplayerframe="1"] .carousel-fullscreen {
    right: calc(var(--cornerButtonMargins) + var(--mediaFramePadding));
    top: calc(var(--cornerButtonMargins) + var(--mediaFramePadding))
}

.carousel-fullscreen:hover {
    transform: scale(1.06) translateZ(0px)
}

@media (max-width:1099px) {
    .carousel-fullscreen {
        background-size: 75%;
        background-position: 100% 0
    }
}

.carousel-shader,
.spotlight-shader {
    display: block;
    position: absolute;
    z-index: var(--zIndLowMid);
    left: 0;
    bottom: 0;
    height: 40%;
    width: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)
}

[data-carouselindex="0"] .carousel-thumbnails [data-carouselindex="0"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="0"] .carousel-thumbnails [data-carouselindex="0"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="1"] .carousel-thumbnails [data-carouselindex="1"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="1"] .carousel-thumbnails [data-carouselindex="1"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="2"] .carousel-thumbnails [data-carouselindex="2"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="2"] .carousel-thumbnails [data-carouselindex="2"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="3"] .carousel-thumbnails [data-carouselindex="3"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="3"] .carousel-thumbnails [data-carouselindex="3"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="4"] .carousel-thumbnails [data-carouselindex="4"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="4"] .carousel-thumbnails [data-carouselindex="4"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="5"] .carousel-thumbnails [data-carouselindex="5"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="5"] .carousel-thumbnails [data-carouselindex="5"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="6"] .carousel-thumbnails [data-carouselindex="6"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="6"] .carousel-thumbnails [data-carouselindex="6"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="7"] .carousel-thumbnails [data-carouselindex="7"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="7"] .carousel-thumbnails [data-carouselindex="7"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="8"] .carousel-thumbnails [data-carouselindex="8"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="8"] .carousel-thumbnails [data-carouselindex="8"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="9"] .carousel-thumbnails [data-carouselindex="9"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="9"] .carousel-thumbnails [data-carouselindex="9"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="10"] .carousel-thumbnails [data-carouselindex="10"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="10"] .carousel-thumbnails [data-carouselindex="10"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="11"] .carousel-thumbnails [data-carouselindex="11"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="11"] .carousel-thumbnails [data-carouselindex="11"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="12"] .carousel-thumbnails [data-carouselindex="12"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="12"] .carousel-thumbnails [data-carouselindex="12"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="13"] .carousel-thumbnails [data-carouselindex="13"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="13"] .carousel-thumbnails [data-carouselindex="13"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="14"] .carousel-thumbnails [data-carouselindex="14"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="14"] .carousel-thumbnails [data-carouselindex="14"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="15"] .carousel-thumbnails [data-carouselindex="15"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="15"] .carousel-thumbnails [data-carouselindex="15"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="16"] .carousel-thumbnails [data-carouselindex="16"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="16"] .carousel-thumbnails [data-carouselindex="16"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="17"] .carousel-thumbnails [data-carouselindex="17"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="17"] .carousel-thumbnails [data-carouselindex="17"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="18"] .carousel-thumbnails [data-carouselindex="18"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="18"] .carousel-thumbnails [data-carouselindex="18"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="19"] .carousel-thumbnails [data-carouselindex="19"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="19"] .carousel-thumbnails [data-carouselindex="19"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="20"] .carousel-thumbnails [data-carouselindex="20"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="20"] .carousel-thumbnails [data-carouselindex="20"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="21"] .carousel-thumbnails [data-carouselindex="21"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="21"] .carousel-thumbnails [data-carouselindex="21"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="22"] .carousel-thumbnails [data-carouselindex="22"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="22"] .carousel-thumbnails [data-carouselindex="22"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="23"] .carousel-thumbnails [data-carouselindex="23"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="23"] .carousel-thumbnails [data-carouselindex="23"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="24"] .carousel-thumbnails [data-carouselindex="24"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="24"] .carousel-thumbnails [data-carouselindex="24"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="25"] .carousel-thumbnails [data-carouselindex="25"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="25"] .carousel-thumbnails [data-carouselindex="25"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="26"] .carousel-thumbnails [data-carouselindex="26"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="26"] .carousel-thumbnails [data-carouselindex="26"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="27"] .carousel-thumbnails [data-carouselindex="27"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="27"] .carousel-thumbnails [data-carouselindex="27"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="28"] .carousel-thumbnails [data-carouselindex="28"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="28"] .carousel-thumbnails [data-carouselindex="28"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="29"] .carousel-thumbnails [data-carouselindex="29"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="29"] .carousel-thumbnails [data-carouselindex="29"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-carouselindex="30"] .carousel-thumbnails [data-carouselindex="30"] {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

[data-carouselindex="30"] .carousel-thumbnails [data-carouselindex="30"] .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

[data-thumbnailsrendered="true"][data-thumbnails="Underneath"],
[data-thumbnailsrendered="true"][data-thumbnails="Framing-Forced-Underneath"] {
    --totalThumbnailHeight: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding) * 2)
}

[data-thumbnailsrendered="true"][data-thumbnails="Underneath"][data-mediaplayerframe="1"],
[data-thumbnailsrendered="true"][data-thumbnails="Framing-Forced-Underneath"][data-mediaplayerframe="1"] {
    --totalThumbnailHeight: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding))
}

[data-thumbnailsrendered="true"][data-thumbnails="Underneath"][data-mediaplayerframe="1"] [data-visibleslidehascontentoverlay="false"] .carousel-thumbnails,
[data-thumbnailsrendered="true"][data-thumbnails="Framing-Forced-Underneath"][data-mediaplayerframe="1"] [data-visibleslidehascontentoverlay="false"] .carousel-thumbnails {
    margin-top: calc(var(--mediaFramePadding) * -1)
}

[data-thumbnailsrendered="true"][data-thumbnails="Underneath"] .carousel-thumbnails,
[data-thumbnailsrendered="true"][data-thumbnails="Framing-Forced-Underneath"] .carousel-thumbnails {
    position: relative;
    left: 0;
    right: 0;
    background-color: #000
}

@media (max-width:767px) {
    [data-thumbnailsrendered="true"][data-thumbnailsmobile="Overlay-Forced-Underneath"] {
        padding-bottom: var(--totalThumbnailHeight);
        --coBottom: var(--indentBottom);
        --totalThumbnailHeight: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding) * 2)
    }

    [data-thumbnailsrendered="true"][data-thumbnailsmobile="Overlay-Forced-Underneath"][data-mediaplayerframe="1"] {
        --totalThumbnailHeight: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding))
    }

    [data-thumbnailsrendered="true"][data-thumbnailsmobile="Overlay-Forced-Underneath"][data-mediaplayerframe="1"] [data-visibleslidehascontentoverlay="false"] .carousel-thumbnails {
        margin-top: calc(var(--mediaFramePadding) * -1)
    }

    [data-thumbnailsrendered="true"][data-thumbnailsmobile="Overlay-Forced-Underneath"] .carousel-thumbnails {
        position: relative;
        left: 0;
        right: 0;
        background-color: #000
    }

    section[data-thumbnailsrendered="true"] {
        --totalThumbnailHeight: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding) * 2)
    }

    section[data-thumbnailsrendered="true"][data-mediaplayerframe="1"] {
        --totalThumbnailHeight: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding))
    }

    section[data-thumbnailsrendered="true"][data-mediaplayerframe="1"] [data-visibleslidehascontentoverlay="false"] .carousel-thumbnails {
        margin-top: calc(var(--mediaFramePadding) * -1)
    }

    section[data-thumbnailsrendered="true"] .carousel-thumbnails {
        position: relative;
        left: 0;
        right: 0;
        background-color: #000
    }
}

.carousel-thumbnails {
    --thumbnailSize: 50px;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: var(--zIndHighLow);
    bottom: 0;
    right: 0;
    height: var(--carouselThumbnailHeight);
    padding: var(--carouselThumbnailPadding);
    overflow-x: auto;
    overflow-y: hidden
}

@media (max-width:767px) {
    .carousel-thumbnails {
        --thumbnailSize: 44px;
        left: 0;
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: var(--carouselThumbnailPadding) 0
    }

    .carousel-thumbnails[data-thumbnailcount="high"] {
        justify-content: flex-start;
        overflow-x: auto
    }

    .carousel-thumbnails .thumbnailable-image {
        min-width: var(--thumbnailSize)
    }
}

.carousel-thumbnails div.thumbnailable-image {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: var(--thumbnailSize);
    height: var(--thumbnailSize);
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: all 0.35s;
    opacity: 0.8
}

.carousel-thumbnails div.thumbnailable-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.carousel-thumbnails div.thumbnailable-image:hover {
    opacity: 1;
    border: 2px solid var(--clHighlight)
}

.carousel-thumbnails div.thumbnailable-image:hover .thumbnail-timer-track {
    opacity: 1;
    transition-duration: 0.25s
}

@media (max-width:767px) {
    .carousel-thumbnails div.thumbnailable-image:first-child {
        margin-left: var(--indentLeft)
    }

    .carousel-thumbnails div.thumbnailable-image:last-child {
        margin-right: var(--indentLeft)
    }
}

.carousel-thumbnails div.thumbnailable-image .thumbnail-timer-track {
    position: relative;
    left: -1px;
    width: calc(var(--thumbnailSize) - 2px);
    height: 3px;
    overflow: hidden;
    background-color: var(--clGrey);
    pointer-events: none;
    opacity: 0
}

.carousel-thumbnails div.thumbnailable-image .thumbnail-timer-track .thumbnail-timer {
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: all 0.31s linear;
    transform: translateX(-100%)
}

section.multipurpose {
    --tabbedButtonsHeight: 50px;
    --tabsDisplay: none;
    --height: auto;
    --coPosition: absolute;
    --coWidth: calc(100% - var(--indentLeft) - var(--indentRight));
    --coMaxWidth: 90%;
    --coPaddingTop: 0;
    --coPaddingBottom: 0;
    --coPaddingSides: 0;
    --coTitleCopyAlign: flex-start;
    --coBottomFactorIndent: var(--indentBottom);
    --coBottomFactorThumbnails: 0px;
    --coBottomFactorFraming: 0px;
    width: 100%;
    height: var(--height);
    color: #fff;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    --coBottom: calc(var(--coBottomFactorIndent) + var(--coBottomFactorThumbnails) + var(--coBottomFactorFraming))
}

@media (max-width:767px) {
    section.multipurpose {
        --coMaxWidth: calc(100% - var(--indentLeft) - var(--indentRight));
        --coPaddingSides: 0
    }

    section.multipurpose:not([data-forceoverlaynarrow="1"]) {
        --coPaddingTop: 20px;
        --coPaddingBottom: 20px;
        --coPosition: relative;
        --coBottom: 0 !important
    }

    section.multipurpose:not([data-forceoverlaynarrow="1"])[data-mediaplayerframe="1"] {
        --coPaddingTop: 0
    }

    section.multipurpose:not([data-forceoverlaynarrow="1"]):not([data-thumbnailsrendered="true"]) .content-overlay {
        padding-bottom: var(--mediaFramePadding)
    }

    section.multipurpose[data-mediaplayerframe="1"] {
        --coPaddingBottom: 0
    }
}

@media (max-width:767px) and (min-width:768px) {
    section.multipurpose:not([data-forceoverlaynarrow="1"]) .carousel[data-visibleslidehascontentoverlay="true"] .carousel-thumbnails {
        padding-top: 0
    }
}

@media (max-width:767px) and (max-width:767px) {
    section.multipurpose:not([data-forceoverlaynarrow="1"]):not([data-forceoverlaynarrow="1"]) .carousel[data-visibleslidehascontentoverlay="true"] .carousel-thumbnails {
        padding-top: 0
    }

    section.multipurpose:not([data-forceoverlaynarrow="1"])[data-forceoverlaynarrow="1"] {
        --indentLeftFramingFactor: var(--mediaFramePadding);
        --coBottomFactorThumbnails: 0px;
        --coBottomFactorIndent: var(--indentBottom);
        padding-bottom: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding) * 2)
    }
}

@media (max-width:1066.6666666667px) {
    section.multipurpose[data-forceoverlaynarrow="1"] {
        height: 600px
    }

    section.multipurpose[data-forceoverlaynarrow="1"] .carousel-item {
        height: 100%
    }
}

@media (max-width:915.5555555556px) {
    section.multipurpose[data-forceoverlaynarrow="1"] {
        height: 515px
    }

    section.multipurpose[data-forceoverlaynarrow="1"] .carousel-item {
        height: 100%
    }
}

section.multipurpose[data-thumbnailsrendered="true"][data-thumbnails="Overlay"] {
    --coBottomFactorIndent: 0px;
    --coBottomFactorThumbnails: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding) * 2)
}

section.multipurpose[data-thumbnailsrendered="true"][data-thumbnails="Underneath"],
section.multipurpose[data-thumbnailsrendered="true"][data-thumbnails="Framing-Forced-Underneath"] {
    --coBottomFactorThumbnails: 0px
}

@media (min-width:768px) {

    section.multipurpose[data-thumbnailsrendered="true"][data-thumbnails="Underneath"] .rich-content,
    section.multipurpose[data-thumbnailsrendered="true"][data-thumbnails="Framing-Forced-Underneath"] .rich-content {
        height: calc(100% - calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding) * 2))
    }
}

@media (max-width:767px) {

    section.multipurpose[data-thumbnailsrendered="true"][data-thumbnails="Underneath"][data-forceoverlaynarrow="1"],
    section.multipurpose[data-thumbnailsrendered="true"][data-thumbnails="Framing-Forced-Underneath"][data-forceoverlaynarrow="1"] {
        padding-bottom: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding) * 2)
    }
}

section.multipurpose[data-mediaplayerframe="1"] {
    --coBottomFactorFraming: var(--mediaFramePadding);
    --coPaddingTop: 20px;
    --coPaddingBottom: 20px;
    --coPosition: relative;
    --coBottom: 0 !important
}

section.multipurpose[data-mediaplayerframe="1"][data-mediaplayerframe="1"] {
    --coPaddingTop: 0
}

@media (min-width:768px) {
    section.multipurpose[data-mediaplayerframe="1"] .carousel[data-visibleslidehascontentoverlay="true"] .carousel-thumbnails {
        padding-top: 0
    }
}

@media (max-width:767px) {
    section.multipurpose[data-mediaplayerframe="1"]:not([data-forceoverlaynarrow="1"]) .carousel[data-visibleslidehascontentoverlay="true"] .carousel-thumbnails {
        padding-top: 0
    }

    section.multipurpose[data-mediaplayerframe="1"][data-forceoverlaynarrow="1"] {
        --indentLeftFramingFactor: var(--mediaFramePadding);
        --coBottomFactorThumbnails: 0px;
        --coBottomFactorIndent: var(--indentBottom);
        padding-bottom: calc(var(--carouselThumbnailHeight) + var(--carouselThumbnailPadding) * 2)
    }
}

section.multipurpose[data-mediaplayerframe="1"]:not([data-thumbnailsrendered="true"]) .content-overlay {
    padding-bottom: var(--mediaFramePadding)
}

section.multipurpose .content-overlay {
    position: var(--coPosition);
    z-index: var(--zIndMidMid);
    width: var(--coWidth);
    max-width: var(--coMaxWidth);
    padding: var(--coPaddingTop) var(--coPaddingSides) var(--coPaddingBottom) var(--coPaddingSides);
    box-sizing: border-box;
    transition: opacity var(--standardTransitionTime)
}

section.multipurpose .content-overlay:empty {
    display: none
}

section.multipurpose .content-overlay .anchor-target {
    position: absolute;
    transform: translateY(-140px)
}

section.multipurpose .content-overlay>*:last-child {
    margin-bottom: 0;
    padding-bottom: 0
}

section.multipurpose .content-overlay.align-tl {
    top: var(--indentTop);
    left: calc(var(--indentLeft) + var(--indentLeftFramingFactor))
}

section.multipurpose .content-overlay.align-tr {
    top: var(--indentTop);
    right: var(--indentRight);
    text-align: right;
    --coTitleCopyAlign: flex-end
}

section.multipurpose .content-overlay.align-ml {
    top: 50%;
    left: calc(var(--indentLeft) + var(--indentLeftFramingFactor));
    transform: translateY(-50%)
}

section.multipurpose .content-overlay.align-mr {
    top: 50%;
    right: var(--indentRight);
    transform: translateY(-50%);
    text-align: right;
    --coTitleCopyAlign: flex-end
}

section.multipurpose .content-overlay.align-bl {
    bottom: var(--coBottom);
    left: calc(var(--indentLeft) + var(--indentLeftFramingFactor))
}

section.multipurpose .content-overlay.align-br {
    bottom: var(--coBottom);
    right: var(--indentRight);
    text-align: right;
    --coTitleCopyAlign: flex-end
}

section.multipurpose .content-overlay .title-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.multipurpose .content-overlay .title-copy .notched-black-semi-bg {
    font-family: var(--h8FontFamily);
    font-size: var(--h8FontSize);
    font-style: normal;
    font-weight: var(--h8FontWeight);
    line-height: var(--h8LineHeight);
    letter-spacing: var(--h8Letterspacing);
    text-transform: uppercase;
    line-height: unset;
    width: 175px;
    white-space: nowrap;
    text-overflow: ellipsis
}

section.multipurpose .content-overlay .title-copy .large-text {
    font-family: var(--h1FontFamily);
    font-size: var(--h1FontSize);
    font-style: normal;
    font-weight: var(--h1FontWeight);
    line-height: var(--h1LineHeight);
    letter-spacing: var(--h1Letterspacing);
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.25)
}

@media (max-width:767px) {
    section.multipurpose .content-overlay.alignmob-tl {
        top: var(--indentTop);
        bottom: auto;
        left: calc(var(--indentLeft) + var(--indentLeftFramingFactor));
        right: auto;
        transform: none
    }

    section.multipurpose .content-overlay.alignmob-tr {
        top: var(--indentTop);
        bottom: auto;
        left: auto;
        right: var(--indentRight);
        text-align: right;
        transform: none;
        --coTitleCopyAlign: flex-end
    }

    section.multipurpose .content-overlay.alignmob-ml {
        top: 50%;
        bottom: auto;
        left: calc(var(--indentLeft) + var(--indentLeftFramingFactor));
        right: auto;
        transform: translateY(-50%)
    }

    section.multipurpose .content-overlay.alignmob-mr {
        top: 50%;
        bottom: auto;
        left: auto;
        right: var(--indentRight);
        transform: translateY(-50%);
        text-align: right;
        --coTitleCopyAlign: flex-end
    }

    section.multipurpose .content-overlay.alignmob-bl {
        top: auto;
        bottom: var(--coBottom);
        left: calc(var(--indentLeft) + var(--indentLeftFramingFactor));
        right: auto;
        transform: none
    }

    section.multipurpose .content-overlay.alignmob-br {
        top: auto;
        bottom: var(--coBottom);
        left: auto;
        right: var(--indentRight);
        text-align: right;
        transform: none;
        --coTitleCopyAlign: flex-end
    }
}

@media (max-width:1100px) and (min-width:768px) {
    section.multipurpose .content-overlay.align-ml {
        left: calc(var(--indentLeft) + var(--indentLeftFramingFactor) + 15px)
    }
}

section.multipurpose:first-of-type .align-tl,
section.multipurpose:first-of-type .align-tr {
    padding-top: var(--headerHeight)
}

@media (max-width:767px) {
    section.multipurpose {
        word-break: break-word
    }
}

@media (min-width:768px) {
    section.multipurpose[data-hasborder="wide"] {
        border-bottom: 25px solid black
    }
}

@media (max-width:767px) {
    section.multipurpose[data-hasborder="narrow"] {
        border-bottom: 25px solid black
    }
}

section.multipurpose[data-hasborder="both"] {
    border-bottom: 25px solid black
}

section.multipurpose.tab-set .tab-item {
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0s ease-out
}

section.multipurpose.tab-set .tab-item .components:empty {
    display: none
}

section.multipurpose.tab-set .tab-item .components>* {
    margin-top: var(--standardComponentMargin);
    overflow: hidden
}

section.multipurpose.tab-set[data-tabsenabled="true"] {
    --tabsDisplay: block
}

section.multipurpose.tab-set[data-tabsenabled="true"] .tab-item {
    opacity: 0
}

section.multipurpose.tab-set[data-tabsenabled="false"] .custom-select {
    display: none
}

section.multipurpose.tab-set[data-tabindex="0"] .tab-item[data-tabindex="0"] {
    position: relative;
    z-index: 2;
    opacity: 1
}

section.multipurpose.tab-set[data-tabindex="0"] .tab-item:not([data-tabindex="0"]) {
    position: absolute
}

section.multipurpose.tab-set[data-tabindex="1"] .tab-item[data-tabindex="1"] {
    position: relative;
    z-index: 2;
    opacity: 1
}

section.multipurpose.tab-set[data-tabindex="1"] .tab-item:not([data-tabindex="1"]) {
    position: absolute
}

section.multipurpose.tab-set[data-tabindex="2"] .tab-item[data-tabindex="2"] {
    position: relative;
    z-index: 2;
    opacity: 1
}

section.multipurpose.tab-set[data-tabindex="2"] .tab-item:not([data-tabindex="2"]) {
    position: absolute
}

section.multipurpose.tab-set[data-tabindex="3"] .tab-item[data-tabindex="3"] {
    position: relative;
    z-index: 2;
    opacity: 1
}

section.multipurpose.tab-set[data-tabindex="3"] .tab-item:not([data-tabindex="3"]) {
    position: absolute
}

section.multipurpose.tab-set[data-tabindex="4"] .tab-item[data-tabindex="4"] {
    position: relative;
    z-index: 2;
    opacity: 1
}

section.multipurpose.tab-set[data-tabindex="4"] .tab-item:not([data-tabindex="4"]) {
    position: absolute
}

section.multipurpose.tab-set[data-tabindex="5"] .tab-item[data-tabindex="5"] {
    position: relative;
    z-index: 2;
    opacity: 1
}

section.multipurpose.tab-set[data-tabindex="5"] .tab-item:not([data-tabindex="5"]) {
    position: absolute
}

section.multipurpose.tab-set[data-tabindex="6"] .tab-item[data-tabindex="6"] {
    position: relative;
    z-index: 2;
    opacity: 1
}

section.multipurpose.tab-set[data-tabindex="6"] .tab-item:not([data-tabindex="6"]) {
    position: absolute
}

section.multipurpose.tab-set .tab-navigator {
    display: var(--tabsDisplay);
    position: relative;
    z-index: var(--zIndHighHigh);
    left: 0;
    top: 0;
    width: 100%;
    height: var(--tabbedButtonsHeight);
    line-height: var(--tabbedButtonsHeight);
    overflow: hidden;
    background-color: black
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-label {
    position: relative;
    min-width: 90px;
    padding-right: 30px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: right
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-label span {
    font-family: var(--h6FontFamily);
    font-size: var(--h6FontSize);
    font-style: normal;
    font-weight: var(--h6FontWeight);
    line-height: var(--h6LineHeight);
    letter-spacing: var(--h6Letterspacing);
    text-transform: uppercase;
    line-height: unset;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-label:before {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: var(--clDarkGrey);
    left: -1000px;
    top: 0;
    width: calc(100% + 1000px + 20px);
    height: 100%
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons {
    min-width: 200px
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button {
    height: var(--tabbedButtonsHeight);
    line-height: var(--tabbedButtonsHeight);
    width: 185px;
    color: #fff;
    padding: 0 15px;
    margin-right: 5px;
    background: transparent;
    outline: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 10;
    padding-left: 20px;
    padding-right: 20px;
    font-family: var(--h11FontFamily);
    font-size: var(--h11FontSize);
    font-style: normal;
    font-weight: var(--h11FontWeight);
    line-height: var(--h11LineHeight);
    letter-spacing: var(--h11Letterspacing);
    text-transform: uppercase
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button:before {
    background-color: var(--clGrey)
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button:hover {
    position: relative;
    z-index: 10;
    padding-left: 20px;
    padding-right: 20px;
    color: #000
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button:hover:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button:hover:before {
    background-color: white
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button.active {
    position: relative;
    z-index: 10;
    padding-left: 20px;
    padding-right: 20px;
    color: #000
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button.active:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button.active:before {
    background-color: white
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .custom-select {
    position: relative;
    min-width: 180px;
    max-width: calc(100% - 40px)
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .custom-select .selected-option {
    color: #000;
    text-align: center;
    position: relative;
    z-index: 10;
    padding-left: 16px;
    padding-right: 16px
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .custom-select .selected-option:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .custom-select .selected-option:before {
    background-color: white
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .custom-select .custom-select-options {
    left: 0;
    width: 100%;
    margin-top: -10px;
    background-color: #fff
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .custom-select .custom-select-options .option {
    color: #000
}

section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .tab-switchers .selected-option span {
    font-family: var(--h11FontFamily);
    font-size: var(--h11FontSize);
    font-style: normal;
    font-weight: var(--h11FontWeight);
    line-height: var(--h11LineHeight);
    letter-spacing: var(--h11Letterspacing);
    text-transform: uppercase
}

@media (min-width:1100px) {
    section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button.tab-switcher-button {
        display: inline-block
    }

    section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .custom-select {
        display: none
    }
}

@media (max-width:1099px) {
    section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons button.tab-switcher-button {
        display: none
    }

    section.multipurpose.tab-set .tab-navigator .tab-navigator-content .tab-navigator-buttons .custom-select {
        display: inline-block
    }
}

section.multipurpose.tab-set:not([data-mediaplayerframe="1"]) .rich-content .anchored-image {
    width: calc(100% + var(--parallaxImageDistance));
    transform: translate(calc(-1 * var(--parallaxImageDistance)));
    transition: all 0s ease-in-out 0s
}

section.multipurpose.tab-set:not([data-mediaplayerframe="1"])[data-intersected] .rich-content .anchored-image {
    transform: translate(calc(-0.5 * var(--parallaxImageDistance)));
    transition: all var(--imageTransitionTime) ease-in-out 0s
}

@media (max-width:767px) {
    section.multipurpose:not([data-forceoverlaynarrow="1"]) div.multipurpose-tab {
        display: flex;
        flex-direction: column;
        height: auto
    }
}

section.multipurpose a:not(.call-to-action),
section.multipurpose a:not(.call-to-action):visited {
    color: #fff
}

section.multipurpose[data-mediaplayerframe="1"] .tab-item {
    height: calc(100% - var(--mediaFramePadding))
}

section.multipurpose[data-mediaplayerframe="1"] .tab-item .carousel-item .rich-content-frame {
    width: calc(100% - var(--mediaFramePadding) * 2);
    padding: var(--mediaFramePadding)
}

section.multipurpose[data-mediaplayerframe="1"] .tab-item .carousel-item .rich-content-frame .rich-content {
    overflow: hidden
}

section.multipurpose[data-mediaplayerframe="1"] .tab-item .carousel-arrows .arrow-prev {
    left: var(--mediaFramePadding)
}

section.multipurpose[data-mediaplayerframe="1"] .tab-item .carousel-arrows .arrow-next {
    right: var(--mediaFramePadding)
}

section.multipurpose:not([data-forceoverlaynarrow="1"]) .component.youtube-video .youtube-video {
    height: 0;
    padding-bottom: 56.25%
}

section.multipurpose:not([data-forceoverlaynarrow="1"]) .component.youtube-video .youtube-video iframe {
    position: absolute
}

@media (min-width:768px) {
    section.multipurpose .component.youtube-video .youtube-video {
        height: 0;
        padding-bottom: 56.25%
    }

    section.multipurpose .component.youtube-video .youtube-video iframe {
        position: absolute
    }
}

section.notched-content {
    --notchMargin: var(--indentLeft);
    --midPointRight: 275px;
    --midPointLeft: 275px;
    --copyMargin: 25px;
    box-shadow: none;
    overflow: visible;
    z-index: inherit
}

@media (max-width:767px) {
    section.notched-content {
        --padTextLineH: 10px;
        --copyMargin: 15px
    }
}

section.notched-content .notch {
    position: relative;
    z-index: 2;
    height: calc(100% - 30px);
    overflow: hidden
}

section.notched-content .notch picture img {
    object-fit: cover;
    object-position: 50%;
    width: 100%;
    height: 100%
}

section.notched-content .notch .content-overlay {
    position: absolute;
    padding: 0
}

section.notched-content .notch .content-overlay .title {
    display: inline-block;
    height: var(--notchedTitleHeight);
    line-height: var(--notchedTitleHeight);
    padding: 0 var(--padTextLineH);
    color: #fff
}

section.notched-content .notch .content-overlay .components {
    color: #fff;
    margin: var(--copyMargin)
}

section.notched-content .notch .content-overlay .components>*:not(:last-child) {
    margin-bottom: var(--copyMargin)
}

section.notched-content .notch .content-overlay .call-to-action {
    margin-top: 20px
}

section.notched-content:last-child .notch {
    height: 100%
}

section.notched-content[data-notchalignment="right"] {
    height: 530px;
    background: linear-gradient(180deg, black calc(var(--midPointRight) - var(--notchedTitleHeight)), white calc(var(--midPointRight) - var(--notchedTitleHeight)))
}

section.notched-content[data-notchalignment="right"] .notch {
    margin-left: var(--notchMargin)
}

section.notched-content[data-notchalignment="right"] .content-overlay {
    left: 0;
    top: calc(var(--midPointRight) - var(--notchedTitleHeight))
}

section.notched-content[data-notchalignment="right"] .content-overlay .title {
    transform: translateX(-25%);
    overflow-x: visible
}

@media (min-width:768px) {
    section.notched-content[data-notchalignment="right"] .content-overlay .title {
        position: relative;
        z-index: 2;
        padding-left: 50px;
        padding-right: 50px;
        overflow-x: hidden;
        padding-left: 25px;
        padding-right: 50px;
        overflow-x: visible
    }

    section.notched-content[data-notchalignment="right"] .content-overlay .title:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-size: auto 100%;
        background-repeat: no-repeat;
        opacity: 1;
        box-sizing: border-box;
        transform: scale(-1, 1) skew(22deg)
    }

    section.notched-content[data-notchalignment="right"] .content-overlay .title:before {
        background-color: white;
        border-bottom: 2px solid var(--clHighlight);
        border-left: 2px solid var(--clHighlight)
    }

    section.notched-content[data-notchalignment="right"] .content-overlay .title:before {
        left: calc(-1 * 12.5px)
    }
}

@media (max-width:767px) {
    section.notched-content[data-notchalignment="right"] .content-overlay .title {
        position: relative;
        z-index: 2;
        padding-left: 38px;
        padding-right: 38px;
        overflow-x: hidden;
        padding-left: 19px;
        padding-right: 38px;
        overflow-x: visible
    }

    section.notched-content[data-notchalignment="right"] .content-overlay .title:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-size: auto 100%;
        background-repeat: no-repeat;
        opacity: 1;
        box-sizing: border-box;
        transform: scale(-1, 1) skew(22deg)
    }

    section.notched-content[data-notchalignment="right"] .content-overlay .title:before {
        background-color: white;
        border-bottom: 2px solid var(--clHighlight);
        border-left: 2px solid var(--clHighlight)
    }

    section.notched-content[data-notchalignment="right"] .content-overlay .title:before {
        left: calc(-1 * 9.5px)
    }
}

section.notched-content[data-notchalignment="left"] {
    height: 530px;
    text-align: right;
    background: linear-gradient(180deg, white var(--midPointLeft), black var(--midPointLeft))
}

section.notched-content[data-notchalignment="left"] .notch {
    margin-right: var(--notchMargin)
}

section.notched-content[data-notchalignment="left"] .content-overlay {
    right: 0;
    left: auto;
    top: calc(var(--midPointLeft) - var(--notchedTitleHeight))
}

section.notched-content[data-notchalignment="left"] .content-overlay .title {
    transform: translateX(25%)
}

@media (min-width:768px) {
    section.notched-content[data-notchalignment="left"] .content-overlay .title {
        position: relative;
        z-index: 2;
        padding-left: 50px;
        padding-right: 50px;
        overflow-x: hidden;
        padding-right: 25px;
        padding-left: 50px;
        overflow-x: visible
    }

    section.notched-content[data-notchalignment="left"] .content-overlay .title:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-size: auto 100%;
        background-repeat: no-repeat;
        opacity: 1;
        box-sizing: border-box;
        transform: scale(-1, 1) skew(22deg)
    }

    section.notched-content[data-notchalignment="left"] .content-overlay .title:before {
        background-color: white;
        border-bottom: 2px solid var(--clHighlight);
        border-left: 2px solid var(--clHighlight)
    }

    section.notched-content[data-notchalignment="left"] .content-overlay .title:before {
        width: 100%;
        left: 12.5px;
        transform: scale(1, 1) skew(22deg)
    }
}

@media (max-width:767px) {
    section.notched-content[data-notchalignment="left"] .content-overlay .title {
        position: relative;
        z-index: 2;
        padding-left: 38px;
        padding-right: 38px;
        overflow-x: hidden;
        padding-right: 19px;
        padding-left: 38px;
        overflow-x: visible
    }

    section.notched-content[data-notchalignment="left"] .content-overlay .title:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-size: auto 100%;
        background-repeat: no-repeat;
        opacity: 1;
        box-sizing: border-box;
        transform: scale(-1, 1) skew(22deg)
    }

    section.notched-content[data-notchalignment="left"] .content-overlay .title:before {
        background-color: white;
        border-bottom: 2px solid var(--clHighlight);
        border-left: 2px solid var(--clHighlight)
    }

    section.notched-content[data-notchalignment="left"] .content-overlay .title:before {
        width: 100%;
        left: 9.5px;
        transform: scale(1, 1) skew(22deg)
    }
}

section.notched-content .notch picture img {
    width: calc(100% + var(--parallaxImageDistance));
    transform: translate(calc(-1 * var(--parallaxImageDistance)));
    transition: all 0s ease-in-out 0s
}

section.notched-content .content-overlay .title {
    color: #fff;
    opacity: 0;
    transition: transform 0.65s, color 0.5s linear 0.5s, opacity 0.5s
}

section.notched-content .content-overlay .call-to-action {
    opacity: 0;
    transition: opacity var(--standardTransitionTime)
}

section.notched-content[data-intersected] .notch picture img {
    transform: translate(calc(-0.5 * var(--parallaxImageDistance)));
    transition: all var(--imageTransitionTime) ease-in-out 0s
}

section.notched-content[data-intersected] .content-overlay .title {
    color: #000;
    opacity: 1;
    font-family: var(--h3FontFamily);
    font-size: var(--h3FontSize);
    font-style: normal;
    font-weight: var(--h3FontWeight);
    line-height: var(--h3LineHeight);
    letter-spacing: var(--h3Letterspacing);
    text-transform: uppercase;
    line-height: var(--notchedTitleHeight)
}

section.notched-content[data-intersected] .content-overlay .copy {
    font-family: var(--h2FontFamily);
    font-size: var(--h2FontSize);
    font-style: normal;
    font-weight: var(--h2FontWeight);
    line-height: var(--h2LineHeight);
    letter-spacing: var(--h2Letterspacing);
    text-transform: uppercase
}

section.notched-content[data-intersected] .content-overlay .call-to-action {
    opacity: 1;
    margin-top: 0;
    transition-delay: 1s
}

section.notched-content[data-intersected][data-notchalignment="left"] .content-overlay .title {
    transform: translateX(1px)
}

section.notched-content[data-intersected][data-notchalignment="right"] .content-overlay .title {
    transform: translateX(-1px)
}

section.news-digest {
    height: auto;
    background: #fff
}

section.news-digest .views-container {
    position: relative;
    z-index: var(--zIndLowMid);
    padding-top: 20px;
    height: 750px;
    min-height: 750px;
    transition: all 1.25s
}

section.news-digest .views-container:before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    pointer-events: none;
    transition: opacity var(--standardTransitionTime)
}

section.news-digest .views-container:not(.greyed):before {
    opacity: 0
}

section.news-digest .views-container .views-exposed-form {
    display: none
}

section.news-digest .views-container .views-row,
section.news-digest .views-container nav.pager {
    display: flex;
    max-width: var(--maxPaddedSectionWidth);
    margin: 0 auto;
    padding: 30px 0 30px 0;
    clear: both
}

section.news-digest .views-container nav.pager {
    transition: all var(--fastTransitionTime) linear 1.25s
}

section.news-digest .views-container[data-viewstate="loading"] nav.pager,
section.news-digest .views-container[data-viewstate="added"] nav.pager {
    opacity: 0;
    transition: all var(--fastTransitionTime) linear 0.2s
}

section.news-digest .views-container[data-viewstate="added"] .views-row,
section.news-digest .views-container[data-viewstate="complete"] .views-row {
    opacity: 1;
    transform: none
}

section.news-digest .views-container .views-row {
    border-bottom: 2px solid #ddd;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--standardTransitionTime) ease-out
}

section.news-digest .views-container .views-row:nth-child(1) {
    transition-delay: 0.12s
}

section.news-digest .views-container .views-row:nth-child(2) {
    transition-delay: 0.24s
}

section.news-digest .views-container .views-row:nth-child(3) {
    transition-delay: 0.36s
}

section.news-digest .views-container .views-row:nth-child(4) {
    transition-delay: 0.48s
}

section.news-digest .views-container .views-row:nth-child(5) {
    transition-delay: 0.6s
}

section.news-digest .views-container .views-row:nth-child(6) {
    transition-delay: 0.72s
}

section.news-digest .views-container .views-row:nth-child(7) {
    transition-delay: 0.84s
}

section.news-digest .views-container .views-row:nth-child(8) {
    transition-delay: 0.96s
}

section.news-digest .views-container .views-row:nth-child(9) {
    transition-delay: 1.08s
}

section.news-digest .views-container .views-row:nth-child(10) {
    transition-delay: 1.2s
}

section.news-digest .views-container .views-row:nth-child(11) {
    transition-delay: 1.32s
}

section.news-digest .views-container .views-row:nth-child(12) {
    transition-delay: 1.44s
}

section.news-digest .views-container .views-row:nth-child(13) {
    transition-delay: 1.56s
}

section.news-digest .views-container .views-row:nth-child(14) {
    transition-delay: 1.68s
}

section.news-digest .views-container .views-row:nth-child(15) {
    transition-delay: 1.8s
}

section.news-digest .views-container .views-row:nth-child(16) {
    transition-delay: 1.92s
}

section.news-digest .views-container .views-row:nth-child(17) {
    transition-delay: 2.04s
}

section.news-digest .views-container .views-row:nth-child(18) {
    transition-delay: 2.16s
}

section.news-digest .views-container .views-row:nth-child(19) {
    transition-delay: 2.28s
}

section.news-digest .views-container .views-row:nth-child(20) {
    transition-delay: 2.4s
}

section.news-digest .views-container .views-row:nth-child(21) {
    transition-delay: 2.52s
}

section.news-digest .views-container .views-row:nth-child(22) {
    transition-delay: 2.64s
}

section.news-digest .views-container .views-row:nth-child(23) {
    transition-delay: 2.76s
}

section.news-digest .views-container .views-row:nth-child(24) {
    transition-delay: 2.88s
}

section.news-digest .views-container .views-row:nth-child(25) {
    transition-delay: 3s
}

section.news-digest .views-container .views-row:nth-child(26) {
    transition-delay: 3.12s
}

section.news-digest .views-container .views-row:nth-child(27) {
    transition-delay: 3.24s
}

section.news-digest .views-container .views-row:nth-child(28) {
    transition-delay: 3.36s
}

section.news-digest .views-container .views-row:nth-child(29) {
    transition-delay: 3.48s
}

section.news-digest .views-container .views-row:nth-child(30) {
    transition-delay: 3.6s
}

section.news-digest .views-container .views-row:nth-child(31) {
    transition-delay: 3.72s
}

section.news-digest .views-container .views-row:nth-child(32) {
    transition-delay: 3.84s
}

section.news-digest .views-container .views-row:nth-child(33) {
    transition-delay: 3.96s
}

section.news-digest .views-container .views-row:nth-child(34) {
    transition-delay: 4.08s
}

section.news-digest .views-container .views-row:nth-child(35) {
    transition-delay: 4.2s
}

section.news-digest .views-container .views-row:nth-child(36) {
    transition-delay: 4.32s
}

section.news-digest .views-container .views-row:nth-child(37) {
    transition-delay: 4.44s
}

section.news-digest .views-container .views-row:nth-child(38) {
    transition-delay: 4.56s
}

section.news-digest .views-container .views-row:nth-child(39) {
    transition-delay: 4.68s
}

section.news-digest .views-container .views-row:nth-child(40) {
    transition-delay: 4.8s
}

section.news-digest .views-container .views-row:nth-child(41) {
    transition-delay: 4.92s
}

section.news-digest .views-container .views-row:nth-child(42) {
    transition-delay: 5.04s
}

section.news-digest .views-container .views-row:nth-child(43) {
    transition-delay: 5.16s
}

section.news-digest .views-container .views-row:nth-child(44) {
    transition-delay: 5.28s
}

section.news-digest .views-container .views-row:nth-child(45) {
    transition-delay: 5.4s
}

section.news-digest .views-container .views-row:nth-child(46) {
    transition-delay: 5.52s
}

section.news-digest .views-container .views-row:nth-child(47) {
    transition-delay: 5.64s
}

section.news-digest .views-container .views-row:nth-child(48) {
    transition-delay: 5.76s
}

section.news-digest .views-container .views-row:nth-child(49) {
    transition-delay: 5.88s
}

@media (min-width:1100px) {
    section.news-digest .views-container .views-row {
        align-items: center
    }
}

@media (max-width:767px) {
    section.news-digest .views-container .views-row {
        max-width: 100%
    }
}

section.news-digest .views-container .views-row:last-child {
    padding-bottom: 40px;
    border-bottom: none
}

section.news-digest .views-container .views-row .changed-date {
    position: relative;
    z-index: 2;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
    padding-left: 10px;
    padding-right: 20px;
    height: 24px;
    width: 200px;
    color: #fff;
    text-transform: uppercase;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis
}

section.news-digest .views-container .views-row .changed-date:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.news-digest .views-container .views-row .changed-date:before {
    left: calc(-1 * 5px)
}

@media (max-width:767px) {
    section.news-digest .views-container .views-row .changed-date {
        font-family: var(--h8FontFamily);
        font-size: var(--h8FontSize);
        font-style: normal;
        font-weight: var(--h8FontWeight);
        line-height: var(--h8LineHeight);
        letter-spacing: var(--h8Letterspacing);
        text-transform: uppercase;
        --h8LineHeight: 24px;
        margin-top: 15px;
        margin-left: 15px
    }
}

@media (min-width:768px) {
    section.news-digest .views-container .views-row .changed-date {
        font-family: var(--h13NewItemDateFontFamily);
        font-size: var(--h13NewItemDateFontSize);
        font-style: normal;
        font-weight: var(--h13NewItemDateFontWeight);
        line-height: var(--h13NewItemDateLineHeight);
        letter-spacing: var(--h13NewItemDateLetterspacing);
        text-transform: uppercase;
        --h13NewItemDateLineHeight: 24px
    }
}

section.news-digest .views-container .views-row .views-field {
    transition: transform var(--fastTransitionTime)
}

@media (max-width:767px) {
    section.news-digest .views-container .views-row .views-field {
        max-width: 100%
    }
}

@media (min-width:1100px) {
    section.news-digest .views-container .views-row .views-field:hover {
        transform: scale(1.03);
        border-color: #fff
    }
}

section.news-digest .views-container .views-row .views-field .field-content {
    display: flex
}

section.news-digest .views-container .views-row .views-field .field-content .image-block {
    position: relative;
    flex: 1;
    max-width: 40%;
    min-width: calc(max(40%, 225px));
    margin-right: 4%;
    overflow: hidden
}

@media (min-width:768px) {
    section.news-digest .views-container .views-row .views-field .field-content .image-block {
        padding: 2px;
        margin-left: -2px
    }
}

@media (max-width:767px) {
    section.news-digest .views-container .views-row .views-field .field-content .image-block {
        max-width: 100%;
        margin-right: 0
    }
}

section.news-digest .views-container .views-row .views-field .field-content .image-block img {
    width: 100%;
    box-shadow: 0px 3px 3px var(--bgTransparent)
}

section.news-digest .views-container .views-row .views-field .field-content .summary-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

section.news-digest .views-container .views-row .views-field .field-content .summary-block>* {
    margin-bottom: 20px
}

section.news-digest .views-container .views-row .views-field .field-content .summary-block>*:last-child {
    margin-bottom: 0
}

section.news-digest .views-container .views-row .views-field .field-content .image-block:before,
section.news-digest .views-container .views-row .views-field .field-content .image-block:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: rotate(25deg);
    transition: all var(--fastTransitionTime)
}

section.news-digest .views-container .views-row .views-field .field-content .image-block:before {
    left: calc(-100% - 50px);
    top: -50%
}

section.news-digest .views-container .views-row .views-field .field-content .image-block:after {
    right: calc(-100% - 50px);
    bottom: -50%
}

section.news-digest .views-container .views-row .views-field:hover .field-content .image-block:before {
    left: calc(-100% + 35px)
}

section.news-digest .views-container .views-row .views-field:hover .field-content .image-block:after {
    right: calc(-100% + 35px)
}

section.news-digest .views-container .views-row .title {
    font-family: var(--h4FontFamily);
    font-size: var(--h4FontSize);
    font-style: normal;
    font-weight: var(--h4FontWeight);
    line-height: var(--h4LineHeight);
    letter-spacing: var(--h4Letterspacing);
    text-transform: uppercase
}

section.news-digest .views-container .views-row .field-content span {
    display: block;
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.news-digest .views-container .views-row .field-content .cta span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px
}

section.news-digest .views-container .views-row .field-content .cta a {
    vertical-align: middle
}

@media (max-width:767px) {
    section.news-digest .views-container .views-row .field-content {
        flex-direction: column
    }

    section.news-digest .views-container .views-row .field-content .title,
    section.news-digest .views-container .views-row .field-content span,
    section.news-digest .views-container .views-row .field-content a {
        margin: 15px 15px 5px 15px
    }
}

section.news-digest .views-container .views-row .new-flag {
    display: none;
    position: absolute;
    bottom: 20px;
    left: -10px;
    width: 50px;
    height: 25px;
    padding-left: 10px;
    position: relative;
    z-index: 10;
    padding-left: 24px;
    padding-right: 24px
}

section.news-digest .views-container .views-row .new-flag:after {
    content: "";
    display: block;
    position: relative;
    top: 10%;
    left: 10%;
    height: 80%;
    width: 80%;
    background-image: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.star.yellow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%
}

section.news-digest .views-container .views-row .new-flag:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.news-digest .views-container .views-row .new-flag:before {
    background-color: white
}

section.news-digest .views-container .views-row[data-new] .new-flag {
    display: block
}

section.news-digest .news-digest-filter label {
    max-width: 235px
}

section.news-digest .news-digest-filter .custom-select-container {
    --minWidthCustomSelectFilterBlock: 280px;
    min-width: var(--minWidthCustomSelectFilterBlock);
    width: 45%
}

@media (max-width:1100px) and (min-width:768px) {
    section.news-digest .news-digest-filter .custom-select-container {
        --minWidthCustomSelectFilterBlock: 260px
    }
}

@media (max-width:767px) {
    section.news-digest .news-digest-filter .custom-select-container {
        --minWidthCustomSelectFilterBlock: 45%
    }
}

section.news-digest .news-digest-filter .custom-select-container .custom-select-options {
    width: 100%
}

@media (max-width:767px) {
    section.news-digest .news-digest-filter .custom-select-container .custom-select-options {
        min-width: 150%
    }
}

section.news-digest .news-digest-filter .custom-select-container .selected-option {
    white-space: nowrap;
    overflow: hidden
}

section.news-digest .no-results {
    margin-top: 25px;
    text-align: center
}

div.layout-container.news-article time {
    display: none
}

section.news-content {
    --strandOpacity: 1;
    height: auto;
    padding-top: 10px;
    background-color: #fff;
    overflow-x: hidden
}

@media (max-width:767px) {
    section.news-content {
        --strandOpacity: 0.35
    }
}

section.news-content .content {
    position: relative;
    z-index: var(--zIndLowMid);
    max-width: var(--maxPaddedSectionWidth);
    margin: auto;
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.news-content .content>.component,
section.news-content .content>.article-date {
    margin: 40px 0
}

section.news-content .content>.component+.component,
section.news-content .content>.article-date+.component {
    margin-top: 0
}

section.news-content .content>.component .gallery-container,
section.news-content .content>.article-date .gallery-container {
    width: 50%;
    max-width: 500px;
    float: left;
    margin: 0 40px 40px 0
}

section.news-content .content>.component .gallery-container[data-right="Yes"],
section.news-content .content>.article-date .gallery-container[data-right="Yes"] {
    float: right;
    margin: 0 0 40px 40px
}

@media (max-width:767px) {

    section.news-content .content>.component .gallery-container[data-right="Yes"],
    section.news-content .content>.component .gallery-container[data-right="No"],
    section.news-content .content>.article-date .gallery-container[data-right="Yes"],
    section.news-content .content>.article-date .gallery-container[data-right="No"] {
        float: none;
        width: calc(100% + var(--paddedSectionPaddingMidAndNarrow) * 2);
        max-width: calc(100% + var(--paddedSectionPaddingMidAndNarrow) * 2);
        margin-left: calc(-1 * var(--paddedSectionPaddingMidAndNarrow));
        margin-right: 0;
        margin-top: 40px
    }
}

section.news-content .content>.component .gallery-container .gallery,
section.news-content .content>.article-date .gallery-container .gallery {
    height: 0;
    overflow: hidden;
    padding-top: 100%;
    background: white;
    position: relative
}

section.news-content .content>.component .gallery-container .gallery .carousel-items,
section.news-content .content>.article-date .gallery-container .gallery .carousel-items {
    position: absolute;
    left: 0;
    top: 0
}

section.news-content .content>.component .gallery-container .gallery .carousel-items .thumbnailable-image,
section.news-content .content>.article-date .gallery-container .gallery .carousel-items .thumbnailable-image {
    width: 100%;
    height: 100%
}

section.news-content .content>.component .youtube-video,
section.news-content .content>.article-date .youtube-video {
    aspect-ratio: 1.7777777778
}

section.news-content .content .article-date {
    font-size: var(--textSmall)
}

section.news-content .content div.large-text {
    font-family: var(--h2FontFamily);
    font-size: var(--h2FontSize);
    font-style: normal;
    font-weight: var(--h2FontWeight);
    line-height: var(--h2LineHeight);
    letter-spacing: var(--h2Letterspacing);
    text-transform: uppercase;
    color: #000
}

section.news-content .content a:not(.call-to-action) {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing);
    color: #000
}

section.news-content .news-subsection,
section.news-content .text-and-image-carousel {
    clear: both
}

section.news-content .call-to-action.back-button {
    font-family: "geom-graphic", serif
}

section.two-column-left {
    --columnWidth: 50%;
    --leftColPad: 65px 30px 65px 40px;
    --rightColPad: 20px 20px 20px 0;
    height: auto;
    display: flex;
    background-color: #fff
}

@media (max-width:1100px) and (min-width:768px) {
    section.two-column-left {
        --columnWidth: 100%;
        --leftColPad: 0;
        --rightColPad: 20px
    }
}

@media (max-width:767px) {
    section.two-column-left {
        --columnWidth: 100%;
        --leftColPad: 0;
        --rightColPad: 20px
    }
}

section.two-column-left .column {
    position: relative;
    flex: none;
    width: var(--columnWidth);
    box-sizing: border-box;
    background-color: #fff
}

section.two-column-left .column .content {
    position: relative;
    z-index: var(--zIndLowMid);
    overflow: hidden;
    width: 100%
}

@media (min-width:1100px) {
    section.two-column-left .column .content {
        top: 50%;
        transform: translateY(-50%);
        padding: 1px
    }
}

@media (max-width:1100px) and (min-width:768px) {
    section.two-column-left .column .content {
        padding: 0 1px 1px
    }
}

section.two-column-left .column:nth-child(1) {
    padding: var(--leftColPad)
}

@media (min-width:1100px) {
    section.two-column-left .column:nth-child(1) .content {
        aspect-ratio: 1
    }
}

section.two-column-left .column:nth-child(1) .anchored-image:before,
section.two-column-left .column:nth-child(1) .anchored-image:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: rotate(25deg);
    transition: all var(--fastTransitionTime)
}

section.two-column-left .column:nth-child(1) .anchored-image:before {
    left: calc(-100% - 50px);
    top: -50%
}

section.two-column-left .column:nth-child(1) .anchored-image:after {
    right: calc(-100% - 50px);
    bottom: -50%
}

section.two-column-left .column:nth-child(1):hover .anchored-image:before {
    left: calc(-100% + 35px)
}

section.two-column-left .column:nth-child(1):hover .anchored-image:after {
    right: calc(-100% + 35px)
}

section.two-column-left .column:nth-child(2) {
    padding: var(--rightColPad)
}

section.two-column-left .column .anchored-image {
    width: calc(100% + var(--parallaxImageDistance));
    transform: translate(calc(-1 * var(--parallaxImageDistance)));
    transition: all 0s ease-in-out 0s
}

section.two-column-left .column[data-intersected] .anchored-image {
    transform: translate(calc(-0.5 * var(--parallaxImageDistance)));
    transition: all var(--imageTransitionTime) ease-in-out 0s
}

section.two-column-left .column .component {
    margin-bottom: var(--standardComponentMargin)
}

section.two-column-left .column .component p {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.two-column-left .column .component:last-child {
    margin-bottom: 0
}

section.two-column-left .column .component.call-to-action {
    white-space: nowrap;
    margin-right: 100%
}

section.two-column-left .column .component.small-image {
    display: inline-block;
    width: 60px;
    height: 60px
}

@media (max-width:1099px) {
    section.two-column-left {
        height: auto;
        flex-direction: column
    }
}

section.title-spotlight {
    min-height: 475px
}

section.title-spotlight .title-spotlight-overlay {
    position: absolute;
    z-index: var(--zIndMidLow);
    top: 50%;
    left: 25%;
    width: 78%;
    transform: translate(-50%, -50%);
    text-align: left
}

@media (min-width:1100px) {
    section.title-spotlight .title-spotlight-overlay {
        max-width: calc(min(575px, 60%))
    }
}

@media (max-width:1099px) {
    section.title-spotlight .title-spotlight-overlay {
        top: auto;
        bottom: calc(var(--indentBottom) + 100px);
        left: 50%;
        text-align: center;
        transform: translateX(-50%) !important
    }
}

@media (max-width:767px) {
    section.title-spotlight .title-spotlight-overlay {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        bottom: var(--indentBottom)
    }
}

section.title-spotlight .title-spotlight-overlay .title-logo {
    position: relative;
    max-width: 100%;
    max-height: 300px;
    margin-bottom: 50px
}

@media (max-width:1100px) and (min-width:768px) {
    section.title-spotlight .title-spotlight-overlay .title-logo {
        max-width: 70%;
        max-height: 200px;
        margin: auto
    }
}

@media (max-width:767px) {
    section.title-spotlight .title-spotlight-overlay .title-logo {
        max-height: 175px !important;
        margin-bottom: 25px
    }
}

section.title-spotlight .title-spotlight-overlay .title-logo img {
    object-fit: contain;
    object-position: top left;
    width: 100%;
    height: 100%
}

section.title-spotlight .product-logos {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 40px
}

section.title-spotlight .product-logos img {
    height: 100%;
    margin-right: 18px;
    width: auto
}

@media (max-width:767px) {
    section.title-spotlight .product-logos {
        height: 22px;
        margin-bottom: 15px
    }

    section.title-spotlight .product-logos img {
        position: relative;
        height: 22px;
        margin-right: 10px;
        top: 50%;
        transform: translateY(-50%)
    }
}

section.title-spotlight .cta {
    display: inline-block;
    height: 40px;
    vertical-align: middle
}

section.timeline {
    --dataLabelLeft: 8px;
    --tcMargin: auto;
    --tcLineLeft: 50%;
    --tcPaddingBottom: 275px;
    --tcPaddingTop: 0;
    --tcPaddingHorz: 10%;
    --timelineFilterWidth: 180px;
    --timelineFilterMargin: -10px;
    --componentMargin: 35px;
    --parallaxImagePosition: absolute;
    height: auto
}

@media (max-width:767px) {
    section.timeline {
        --dataLabelLeft: 20px;
        --tcMargin: 100px auto auto 20px;
        --tcLineLeft: 0;
        --tcPaddingBottom: 100px;
        --tcPaddingTop: 75px;
        --timelineFilterWidth: calc(100% - 120px);
        --timelineFilterMargin: 0;
        --parallaxImagePosition: absolute
    }
}

section.timeline .timeline-filter {
    position: relative;
    z-index: var(--zIndLowHigh);
    height: 50px;
    background-color: #000
}

@media (max-width:767px) {
    section.timeline .timeline-filter .label {
        width: 50%
    }
}

section.timeline .timeline-filter .selects {
    width: var(--timelineFilterWidth);
    padding: 0 20px;
    margin-left: var(--timelineFilterMargin);
    text-align: center;
    position: relative;
    z-index: 2;
    padding-left: 28px;
    padding-right: 28px
}

section.timeline .timeline-filter .selects:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.timeline .timeline-filter .selects:before {
    background-color: white
}

@media (max-width:767px) {
    section.timeline .timeline-filter .selects {
        width: 50%;
        padding-left: 10px;
        margin-left: -12px;
        box-sizing: border-box
    }
}

@media (max-width:767px) {
    section.timeline .timeline-filter .selects:before {
        width: calc(100% + 100px);
        left: 0px;
        right: auto
    }
}

@media (max-width:767px) {
    section.timeline .timeline-filter {
        display: flex;
        flex-direction: column
    }
}

section.timeline .timeline-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - var(--tcPaddingHorz) * 2);
    margin: auto;
    padding-bottom: var(--tcPaddingBottom);
    padding-top: var(--tcPaddingTop)
}

section.timeline .timeline-container .line {
    position: absolute;
    z-index: var(--zIndLowLow);
    top: 0;
    left: var(--tcLineLeft);
    width: 3px;
    height: calc(100% - 100px);
    margin-top: 100px;
    background-color: #fff;
    opacity: 1
}

@media (max-width:767px) {
    section.timeline .timeline-container .line {
        margin-top: calc(var(--tcPaddingTop) + 50px)
    }
}

section.timeline .timeline-container .darkener {
    position: absolute;
    z-index: var(--zIndLowMid);
    bottom: 0;
    left: calc(-1 * var(--tcPaddingHorz));
    width: calc(100% + var(--tcPaddingHorz) * 2);
    height: 60%;
    max-height: 1750px;
    background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 100%)
}

section.timeline .timeline-container .parallax-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 0;
    pointer-events: none;
    transform: translateY(-50%)
}

section.timeline .timeline-container .parallax-image {
    --width: 92%;
    --height: 100%;
    --left: 50%;
    --desktopDisplay: block;
    --mobileDisplay: none;
    position: var(--parallaxImagePosition);
    width: var(--width);
    height: var(--height);
    top: 50%;
    left: var(--left);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: transform 0s, opacity 1s linear 0s
}

@media (max-width:767px) {
    section.timeline .timeline-container .parallax-image {
        --width: 225%;
        --height: auto;
        --left: 100%
    }

    section.timeline .timeline-container .parallax-image[data-hasmobile="true"] {
        --desktopDisplay: none;
        --mobileDisplay: block
    }
}

section.timeline .timeline-container .parallax-image .desktop,
section.timeline .timeline-container .parallax-image .mobile {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

section.timeline .timeline-container .parallax-image .desktop {
    display: var(--desktopDisplay);
    width: 100%;
    height: auto
}

section.timeline .timeline-container .parallax-image .mobile {
    display: var(--mobileDisplay);
    width: 100%;
    height: auto
}

section.timeline .timeline-container .parallax-image img {
    position: relative;
    width: 100%;
    height: 100%
}

section.timeline .timeline-container[data-intersected] .parallax-image {
    opacity: 1;
    transition: transform 0.05s ease-out, opacity 1s linear 0.5s
}

section.timeline .timeline-container .timeline-item {
    position: relative;
    z-index: var(--zIndLowHigh);
    margin: 100px 0 0 0;
    overflow: hidden
}

section.timeline .timeline-container .timeline-item .animator {
    opacity: 0;
    transform: translateX(-20%);
    transition: all 0.25s ease-in
}

section.timeline .timeline-container .timeline-item .animator .copy {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.timeline .timeline-container .timeline-item[data-timelinestate="visible"][data-alignment="left"] .animator,
section.timeline .timeline-container .timeline-item[data-timelinestate="visible"][data-alignment="right"] .animator,
section.timeline .timeline-container .timeline-item[data-timelinestate="visible"][data-alignment="middle"] .animator {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1.1s ease-out 0.55s, transform 1.1s ease-out 0.55s
}

section.timeline .timeline-container .timeline-item[data-timelinestate="visible"] .date-label {
    opacity: 1;
    transform: translateX(0) !important;
    transition: all 1.1s ease-out
}

section.timeline .timeline-container .timeline-item .date-label {
    display: inline-block;
    font-size: var(--textLarge);
    padding: 8px;
    padding-left: var(--dataLabelLeft);
    margin-bottom: -2px;
    opacity: 0;
    transform: translateX(-50%);
    transition: all 0.25s ease-in;
    font-family: var(--h7FontFamily);
    font-size: var(--h7FontSize);
    font-style: normal;
    font-weight: var(--h7FontWeight);
    line-height: var(--h7LineHeight);
    letter-spacing: var(--h7Letterspacing);
    text-transform: uppercase;
    line-height: unset
}

section.timeline .timeline-container .timeline-item .component {
    position: relative;
    width: auto;
    margin-top: var(--componentMargin)
}

section.timeline .timeline-container .timeline-item .component.youtube-video .youtube-video {
    height: 0;
    width: 100%;
    padding-top: calc(9 / 16 * 100%)
}

section.timeline .timeline-container .timeline-item .component.youtube-video .youtube-video iframe {
    position: absolute
}

section.timeline .timeline-container .timeline-item .component:not(.call-to-action) {
    color: #fff
}

@media (min-width:768px) {
    section.timeline .timeline-container .timeline-item {
        width: 50%
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] {
        align-self: flex-start;
        text-align: right
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .animator {
        transform: translateX(20%)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .date-label {
        transform: translateX(50%);
        padding-right: 30px !important;
        position: relative;
        z-index: 2;
        padding-left: 48px;
        padding-right: 48px;
        overflow-x: hidden;
        padding-right: 24px;
        padding-left: 48px
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .date-label:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-size: auto 100%;
        background-repeat: no-repeat;
        opacity: 1;
        box-sizing: border-box;
        transform: scale(-1, 1) skew(22deg)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .date-label:before {
        background-color: white
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .date-label:before {
        width: 100%;
        left: 12px;
        transform: scale(1, 1) skew(22deg)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .component {
        margin-right: 30px
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .component.call-to-action {
        overflow-x: hidden;
        padding-right: 16px;
        padding-left: 32px;
        overflow-x: hidden;
        padding-right: 16px;
        padding-left: 32px
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .component.call-to-action:before {
        width: 100%;
        left: 8px;
        transform: scale(1, 1) skew(22deg)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="left"] .component.call-to-action:after {
        width: 100%;
        left: 8px;
        transform: scale(1, 1) skew(22deg)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="right"] {
        text-align: left;
        align-self: flex-end
    }

    section.timeline .timeline-container .timeline-item[data-alignment="right"] .date-label {
        padding-left: 30px !important;
        position: relative;
        z-index: 2;
        padding-left: 48px;
        padding-right: 48px;
        overflow-x: hidden;
        padding-left: 24px;
        padding-right: 48px
    }

    section.timeline .timeline-container .timeline-item[data-alignment="right"] .date-label:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-size: auto 100%;
        background-repeat: no-repeat;
        opacity: 1;
        box-sizing: border-box;
        transform: scale(-1, 1) skew(22deg)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="right"] .date-label:before {
        background-color: white
    }

    section.timeline .timeline-container .timeline-item[data-alignment="right"] .date-label:before {
        left: calc(-1 * 12px)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="right"] .component {
        margin-left: 30px
    }

    section.timeline .timeline-container .timeline-item[data-alignment="middle"] {
        width: 75%;
        align-self: center;
        transform: scale(0.9)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="middle"] .animator {
        transform: translateX(0)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="middle"] .date-label {
        transform: translateX(0);
        padding-left: 30px;
        position: relative;
        z-index: 2;
        padding-left: 32px;
        padding-right: 32px;
        overflow-x: hidden;
        padding-left: 24px;
        padding-right: 48px
    }

    section.timeline .timeline-container .timeline-item[data-alignment="middle"] .date-label:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-size: auto 100%;
        background-repeat: no-repeat;
        opacity: 1;
        box-sizing: border-box;
        transform: scale(-1, 1) skew(22deg)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="middle"] .date-label:before {
        background-color: white
    }

    section.timeline .timeline-container .timeline-item[data-alignment="middle"] .date-label:before {
        left: calc(-1 * 12px)
    }

    section.timeline .timeline-container .timeline-item[data-alignment="middle"] .date-label {
        max-width: 50%;
        left: 50%;
        text-align: center
    }
}

@media (max-width:767px) {
    section.timeline .timeline-container .timeline-item {
        width: calc(100% - 3px);
        left: 3px;
        margin-top: 50px !important
    }

    section.timeline .timeline-container .timeline-item .component {
        margin-left: 20px;
        margin-right: 20px
    }

    section.timeline .timeline-container .timeline-item .date-label {
        position: relative;
        z-index: 2;
        padding-left: 24px;
        padding-right: 24px;
        overflow-x: hidden;
        padding-left: 12px;
        padding-right: 24px
    }

    section.timeline .timeline-container .timeline-item .date-label:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        background-size: auto 100%;
        background-repeat: no-repeat;
        opacity: 1;
        box-sizing: border-box;
        transform: scale(-1, 1) skew(22deg)
    }

    section.timeline .timeline-container .timeline-item .date-label:before {
        background-color: white
    }

    section.timeline .timeline-container .timeline-item .date-label:before {
        left: calc(-1 * 6px)
    }

    section.timeline .timeline-container .timeline-item .date-label:before {
        left: -8px
    }

    section.timeline .timeline-container .parallax-image+.timeline-item {
        margin-top: 0 !important
    }
}

section.timeline a:not(.call-to-action) {
    color: #fff
}

section.job-listings {
    height: auto;
    padding-bottom: 100px;
    background-color: #fff
}

section.job-listings .darkener {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--standardTransitionTime)
}

section.job-listings .darkener.on {
    opacity: 0.5
}

section.job-listings .section-label {
    position: relative;
    left: -18px;
    width: calc(50% + 80px);
    min-width: 250px;
    height: 50px;
    padding: 0 10px;
    text-align: right;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    z-index: var(--zIndLowHigh);
    padding-left: 32px;
    padding-right: 32px;
    font-family: var(--h6FontFamily);
    font-size: var(--h6FontSize);
    font-style: normal;
    font-weight: var(--h6FontWeight);
    line-height: var(--h6LineHeight);
    letter-spacing: var(--h6Letterspacing);
    text-transform: uppercase;
    --h6FontWeight: 300;
    line-height: 50px
}

section.job-listings .section-label:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 0.85;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.job-listings .section-label strong {
    font-weight: 600
}

section.job-listings div.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none
}

section.job-listings div.bg-image img {
    position: absolute;
    height: auto;
    width: 100%;
    max-width: 80%;
    left: 50%;
    top: 50%;
    opacity: 0;
    transition: opacity 0s;
    transform: translate(-50%, -50%)
}

@media (max-width:767px) {
    section.job-listings div.bg-image img {
        right: 50%;
        width: 180%;
        max-width: 180%;
        opacity: 0.08
    }
}

section.job-listings[data-intersected] div.bg-image img {
    opacity: 1;
    transition: opacity 1s linear 0.25s
}

section.job-listings .views-container {
    position: relative;
    z-index: var(--zIndLowMid);
    padding-top: 20px;
    height: 650px;
    min-height: 650px;
    transition: all 1.25s
}

section.job-listings .views-container:before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    pointer-events: none;
    transition: opacity var(--standardTransitionTime)
}

section.job-listings .views-container:not(.greyed):before {
    opacity: 0
}

section.job-listings .views-container .views-exposed-form {
    display: none
}

section.job-listings .views-container nav.pager {
    transition: all var(--fastTransitionTime) linear 1.25s
}

section.job-listings .views-container[data-viewstate="loading"] nav.pager,
section.job-listings .views-container[data-viewstate="added"] nav.pager {
    opacity: 0;
    transition: all var(--fastTransitionTime) linear 0.2s
}

section.job-listings .views-container[data-viewstate="added"] .job-listing-item,
section.job-listings .views-container[data-viewstate="complete"] .job-listing-item {
    opacity: 1;
    transform: none
}

section.job-listings .views-container .job-listing-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--standardTransitionTime) ease-out
}

section.job-listings .views-container .job-listing-item:nth-child(1) {
    transition-delay: 0.075s
}

section.job-listings .views-container .job-listing-item:nth-child(2) {
    transition-delay: 0.15s
}

section.job-listings .views-container .job-listing-item:nth-child(3) {
    transition-delay: 0.225s
}

section.job-listings .views-container .job-listing-item:nth-child(4) {
    transition-delay: 0.3s
}

section.job-listings .views-container .job-listing-item:nth-child(5) {
    transition-delay: 0.375s
}

section.job-listings .views-container .job-listing-item:nth-child(6) {
    transition-delay: 0.45s
}

section.job-listings .views-container .job-listing-item:nth-child(7) {
    transition-delay: 0.525s
}

section.job-listings .views-container .job-listing-item:nth-child(8) {
    transition-delay: 0.6s
}

section.job-listings .views-container .job-listing-item:nth-child(9) {
    transition-delay: 0.675s
}

section.job-listings .views-container .job-listing-item:nth-child(10) {
    transition-delay: 0.75s
}

section.job-listings .views-container .job-listing-item:nth-child(11) {
    transition-delay: 0.825s
}

section.job-listings .views-container .job-listing-item:nth-child(12) {
    transition-delay: 0.9s
}

section.job-listings .views-container .job-listing-item:nth-child(13) {
    transition-delay: 0.975s
}

section.job-listings .views-container .job-listing-item:nth-child(14) {
    transition-delay: 1.05s
}

section.job-listings .views-container .job-listing-item:nth-child(15) {
    transition-delay: 1.125s
}

section.job-listings .views-container .job-listing-item:nth-child(16) {
    transition-delay: 1.2s
}

section.job-listings .views-container .job-listing-item:nth-child(17) {
    transition-delay: 1.275s
}

section.job-listings .views-container .job-listing-item:nth-child(18) {
    transition-delay: 1.35s
}

section.job-listings .views-container .job-listing-item:nth-child(19) {
    transition-delay: 1.425s
}

section.job-listings .views-container .job-listing-item:nth-child(20) {
    transition-delay: 1.5s
}

section.job-listings .views-container .job-listing-item:nth-child(21) {
    transition-delay: 1.575s
}

section.job-listings .views-container .job-listing-item:nth-child(22) {
    transition-delay: 1.65s
}

section.job-listings .views-container .job-listing-item:nth-child(23) {
    transition-delay: 1.725s
}

section.job-listings .views-container .job-listing-item:nth-child(24) {
    transition-delay: 1.8s
}

section.job-listings .views-container .job-listing-item:nth-child(25) {
    transition-delay: 1.875s
}

section.job-listings .views-container .job-listing-item:nth-child(26) {
    transition-delay: 1.95s
}

section.job-listings .views-container .job-listing-item:nth-child(27) {
    transition-delay: 2.025s
}

section.job-listings .views-container .job-listing-item:nth-child(28) {
    transition-delay: 2.1s
}

section.job-listings .views-container .job-listing-item:nth-child(29) {
    transition-delay: 2.175s
}

section.job-listings .views-container .job-listing-item:nth-child(30) {
    transition-delay: 2.25s
}

section.job-listings .views-container .job-listing-item:nth-child(31) {
    transition-delay: 2.325s
}

section.job-listings .views-container .job-listing-item:nth-child(32) {
    transition-delay: 2.4s
}

section.job-listings .views-container .job-listing-item:nth-child(33) {
    transition-delay: 2.475s
}

section.job-listings .views-container .job-listing-item:nth-child(34) {
    transition-delay: 2.55s
}

section.job-listings .views-container .job-listing-item:nth-child(35) {
    transition-delay: 2.625s
}

section.job-listings .views-container .job-listing-item:nth-child(36) {
    transition-delay: 2.7s
}

section.job-listings .views-container .job-listing-item:nth-child(37) {
    transition-delay: 2.775s
}

section.job-listings .views-container .job-listing-item:nth-child(38) {
    transition-delay: 2.85s
}

section.job-listings .views-container .job-listing-item:nth-child(39) {
    transition-delay: 2.925s
}

section.job-listings .views-container .job-listing-item:nth-child(40) {
    transition-delay: 3s
}

section.job-listings .views-container .job-listing-item:nth-child(41) {
    transition-delay: 3.075s
}

section.job-listings .views-container .job-listing-item:nth-child(42) {
    transition-delay: 3.15s
}

section.job-listings .views-container .job-listing-item:nth-child(43) {
    transition-delay: 3.225s
}

section.job-listings .views-container .job-listing-item:nth-child(44) {
    transition-delay: 3.3s
}

section.job-listings .views-container .job-listing-item:nth-child(45) {
    transition-delay: 3.375s
}

section.job-listings .views-container .job-listing-item:nth-child(46) {
    transition-delay: 3.45s
}

section.job-listings .views-container .job-listing-item:nth-child(47) {
    transition-delay: 3.525s
}

section.job-listings .views-container .job-listing-item:nth-child(48) {
    transition-delay: 3.6s
}

section.job-listings .views-container .job-listing-item:nth-child(49) {
    transition-delay: 3.675s
}

section.job-listings .views-exposed-form {
    display: none
}

section.job-listings .listings-message {
    --padding: 42px;
    position: relative;
    z-index: var(--zIndLowMid);
    padding-top: calc(50px + 30px + var(--padding));
    padding-bottom: var(--padding);
    background-color: #fff
}

@media (max-width:767px) {
    section.job-listings .listings-message {
        --padding: 20px
    }
}

section.job-listings .listings-message .content {
    width: 90%;
    text-align: center;
    margin: auto
}

section.job-listings .listings-message .component.copy {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing);
    text-align: left
}

section.job-listings .listings-message .component.copy .large-text {
    font-family: var(--h4FontFamily);
    font-size: var(--h4FontSize);
    font-style: normal;
    font-weight: var(--h4FontWeight);
    line-height: var(--h4LineHeight);
    letter-spacing: var(--h4Letterspacing);
    text-transform: uppercase;
    font-size: calc(var(--h4FontSize) - 2px);
    text-align: center
}

section.job-listings .job-listing-filter {
    position: relative;
    z-index: var(--zIndLowMid);
    width: 100%;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff
}

section.job-listings .job-listing-filter .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    width: 94%;
    height: 64px;
    padding: 0;
    margin-left: 2%
}

@media (min-width:768px) {
    section.job-listings .job-listing-filter .content {
        align-items: center;
        width: calc(100% - 16%);
        margin-left: 8%;
        height: 65px
    }
}

section.job-listings .job-listing-filter .custom-select {
    padding: 15px 0
}

section.job-listings .job-listing-filter .title,
section.job-listings .job-listing-filter .selected-option {
    padding: 8px 0;
    font-weight: 400
}

section.job-listings .job-listing-filter .title {
    width: 40.5%;
    font-family: var(--h11FontFamily);
    font-size: var(--h11FontSize);
    font-style: normal;
    font-weight: var(--h11FontWeight);
    line-height: var(--h11LineHeight);
    letter-spacing: var(--h11Letterspacing);
    text-transform: uppercase
}

@media (max-width:767px) {
    section.job-listings .job-listing-filter .title {
        display: none
    }
}

section.job-listings .job-listing-filter .filter-disciplines {
    width: 30%
}

section.job-listings .job-listing-filter .filter-locations {
    width: 27.5%
}

@media (max-width:767px) {

    section.job-listings .job-listing-filter .filter-disciplines,
    section.job-listings .job-listing-filter .filter-locations {
        font-size: var(--textSmall);
        width: 49%;
        text-align: center
    }

    section.job-listings .job-listing-filter .filter-disciplines.filter-disciplines,
    section.job-listings .job-listing-filter .filter-locations.filter-disciplines {
        position: relative;
        width: calc(49% - 15px)
    }

    section.job-listings .job-listing-filter .filter-disciplines.filter-disciplines:after,
    section.job-listings .job-listing-filter .filter-locations.filter-disciplines:after {
        content: "";
        position: absolute;
        top: 0;
        right: -10px;
        width: 2px;
        height: 100%;
        border-right: 3px solid #f0f0f0;
        transform: skew(-22deg)
    }

    section.job-listings .job-listing-filter .filter-disciplines .custom-select,
    section.job-listings .job-listing-filter .filter-locations .custom-select {
        padding: 8px 0
    }
}

section.job-listings .job-listing-item {
    --itemFlexDirection: row;
    --itemPadding: 30px 0;
    --titleWidth: 40.5%;
    --titleMargin: 0px;
    --disciplineWidth: 30%;
    --locationWidth: 27.5%;
    --jobListingItemAlignment: center;
    position: relative;
    width: 100%
}

@media (max-width:767px) {
    section.job-listings .job-listing-item {
        --itemFlexDirection: column;
        --itemPadding: 22px 0;
        --titleWidth: 100%;
        --titleMargin: 15px;
        --disciplineWidth: 100%;
        --locationWidth: 100%;
        --jobListingItemAlignment: left
    }
}

section.job-listings .job-listing-item>div {
    width: 100%;
    min-height: 25px
}

section.job-listings .job-listing-item>div:hover {
    background-color: rgba(0, 0, 0, 0.05)
}

section.job-listings .job-listing-item span {
    display: block;
    width: calc(100% - 16%);
    margin-left: 8%
}

section.job-listings .job-listing-item a {
    display: flex;
    flex-direction: var(--itemFlexDirection);
    justify-content: space-between;
    align-items: var(--jobListingItemAlignment);
    width: 100%;
    padding: var(--itemPadding);
    color: #000;
    text-decoration: none
}

section.job-listings .job-listing-item a .title {
    font-family: var(--h10FontFamily);
    font-size: var(--h10FontSize);
    font-style: normal;
    font-weight: var(--h10FontWeight);
    line-height: var(--h10LineHeight);
    letter-spacing: var(--h10Letterspacing);
    --h10LineHeight: normal
}

section.job-listings .job-listing-item a .discipline,
section.job-listings .job-listing-item a .location {
    font-family: var(--h12FontFamily);
    font-size: var(--h12FontSize);
    font-style: normal;
    font-weight: var(--h12FontWeight);
    line-height: var(--h12LineHeight);
    letter-spacing: var(--h12Letterspacing);
    --h12LineHeight: normal
}

section.job-listings .job-listing-item .field-content {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent
}

section.job-listings .job-listing-item .field-content:hover {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc
}

section.job-listings .job-listing-item .field-content:hover:after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(8% + 25px);
    width: 25px;
    height: 25px;
    background-image: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.externallink.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0.5;
    pointer-events: none;
    transform: translate(25px, -50%)
}

section.job-listings .job-listing-item .title {
    width: var(--titleWidth);
    margin-bottom: var(--titleMargin);
    padding-right: 5%;
    font-weight: 400;
    box-sizing: border-box
}

section.job-listings .job-listing-item .discipline {
    width: var(--disciplineWidth);
    padding-right: 5%;
    box-sizing: border-box
}

section.job-listings .job-listing-item .location {
    width: var(--locationWidth)
}

section.job-listings nav.pager {
    margin-top: 25px;
    margin-left: 8%
}

section.job-listings .no-results {
    margin: 50px 0 0 0;
    text-align: center
}

.job-listing-options {
    background: #fff;
    min-width: 260px !important
}

.job-listing-options .option {
    padding: 8px
}

section.animating-components {
    --paddingTop: 50px;
    height: auto;
    padding: var(--paddingTop) 0 50px 0;
    overflow: hidden
}

@media (max-width:767px) {
    section.animating-components {
        --paddingTop: 300px
    }
}

section.animating-components .background-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

section.animating-components .foreground-image {
    position: absolute;
    right: -40px;
    bottom: 0;
    width: 75%;
    height: 92%;
    max-height: 900px;
    opacity: 0;
    transition: opacity 1s linear 0.15s;
    top: 50%;
    transform: translateY(-50%)
}

@media (min-width:768px) {
    section.animating-components .foreground-image img {
        object-fit: contain;
        object-position: center right;
        height: 100%
    }
}

@media (max-width:1100px) and (min-width:768px) {
    section.animating-components .foreground-image {
        width: 70%;
        right: -125px
    }
}

@media (max-width:767px) {
    section.animating-components .foreground-image {
        top: 0;
        left: auto;
        max-width: 700px;
        width: 365px;
        transform: translateY(0)
    }
}

section.animating-components .foreground-image img {
    width: 100%
}

section.animating-components .content-overlay {
    position: relative;
    bottom: auto;
    left: var(--indentLeft);
    width: 90%;
    color: #000
}

section.animating-components .component {
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 0.025em;
    margin-bottom: 35px
}

section.animating-components .component:last-child {
    margin-bottom: 0
}

section.animating-components .component.copy {
    text-transform: uppercase;
    font-weight: 200;
    font-size: var(--textLarge);
    line-height: var(--textLarge)
}

section.animating-components .component.small-copy {
    font-size: 17px;
    line-height: 22px
}

section.animating-components .component[data-animatable="Yes"] {
    opacity: 0;
    transition: all 0s;
    transform: translateX(200px)
}

section.animating-components .component[data-animatable="No"] .component.copy {
    --h7LightFontFamily: "geom-graphic";
    --h7LightFontWeight: 300;
    --h7LightFontSize: 21px;
    --h7LightLineHeight: 60px;
    --h7LightLetterspacing: 0.075em;
    font-family: var(--h7LightFontFamily);
    font-size: var(--h7LightFontSize);
    font-style: normal;
    font-weight: var(--h7LightFontWeight);
    line-height: var(--h7LightLineHeight);
    letter-spacing: var(--h7LightLetterspacing);
    text-transform: uppercase
}

section.animating-components[data-state="animating"] .foreground-image {
    opacity: 1
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"] {
    transform: none;
    opacity: 1;
    transition: transform 1.5s, opacity 1.5s
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(1) {
    transition-delay: calc(1 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(2) {
    transition-delay: calc(2 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(3) {
    transition-delay: calc(3 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(4) {
    transition-delay: calc(4 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(5) {
    transition-delay: calc(5 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(6) {
    transition-delay: calc(6 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(7) {
    transition-delay: calc(7 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(8) {
    transition-delay: calc(8 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(9) {
    transition-delay: calc(9 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(10) {
    transition-delay: calc(10 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(11) {
    transition-delay: calc(11 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(12) {
    transition-delay: calc(12 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(13) {
    transition-delay: calc(13 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(14) {
    transition-delay: calc(14 * 0.25s)
}

section.animating-components[data-state="animating"] .component[data-animatable="Yes"]:nth-child(15) {
    transition-delay: calc(15 * 0.25s)
}

section.animating-components[data-state="static"] .component[data-animatable="Yes"] {
    transition: transform 1.5s, opacity 1.5s
}

section.nested-list {
    --padding: 50px;
    --paddingBottom: 220px;
    --halfPadding: 25px;
    --display: flex;
    --headingWidth: calc(50% - 50px);
    --itemPosition: absolute;
    --itemsWidth: 50%;
    --itemsLeft: 50%;
    height: auto;
    padding: var(--padding) var(--padding) var(--paddingBottom) var(--indentLeft);
    overflow-x: hidden
}

@media (max-width:767px) {
    section.nested-list {
        --padding: 25px;
        --paddingBottom: 225px;
        --halfPadding: 10px;
        --display: block;
        --headingWidth: 100%;
        --itemPosition: relative;
        --itemsWidth: 100%;
        --itemsLeft: 0;
        --faqListItemPadding: 35px;
        --faqTopicItemComponent: 55px
    }
}

section.nested-list .search {
    display: flex;
    position: relative;
    z-index: var(--zIndLowHigh);
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--padding)
}

@media (max-width:767px) {
    section.nested-list .search {
        flex-direction: column;
        align-items: flex-start
    }

    section.nested-list .search input {
        width: 100%
    }

    section.nested-list .search .call-to-action {
        margin: 12px 0 0 0;
        flex: none
    }
}

section.nested-list .search input {
    flex: 1;
    height: 42px;
    line-height: 42px;
    color: #fff;
    vertical-align: middle;
    border: none;
    outline: none;
    background-color: transparent;
    border-bottom: 1px solid var(--clHighlight)
}

section.nested-list .search button {
    flex: 0;
    margin: 0 var(--padding);
    height: 42px;
    min-width: 150px;
    vertical-align: middle
}

section.nested-list .content {
    position: relative;
    z-index: var(--zIndLowHigh)
}

section.nested-list .content .nested-list-topic {
    display: var(--display)
}

section.nested-list .content .nested-list-topic .topic-heading {
    display: flex;
    align-items: center;
    position: relative;
    width: var(--headingWidth);
    margin: 0 var(--padding) var(--halfPadding) 0;
    color: #575b5c;
    font-size: 1.25rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.2s;
    transform-origin: 0 50%
}

@media (min-width:768px) {
    section.nested-list .content .nested-list-topic .topic-heading:hover {
        transform: scale(1.03)
    }
}

section.nested-list .content .nested-list-topic .topic-heading .state-icon {
    line-height: 4px
}

section.nested-list .content .nested-list-topic .topic-heading .state-icon:before {
    content: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.plus.white.svg");
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px
}

section.nested-list .content .nested-list-topic .topic-heading .copy {
    font-family: var(--h14FontFamily);
    font-size: var(--h14FontSize);
    font-style: normal;
    font-weight: var(--h14FontWeight);
    line-height: var(--h14LineHeight);
    letter-spacing: var(--h14Letterspacing);
    text-transform: uppercase;
    line-height: unset
}

section.nested-list .content .nested-list-topic .topic-items {
    display: none;
    position: var(--itemPosition);
    left: var(--itemsLeft);
    top: 0;
    width: var(--itemsWidth);
    margin-top: 34px
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item {
    position: relative;
    padding-bottom: var(--padding)
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: var(--clHighlight);
    cursor: pointer;
    --paragraphFAQFontWeight: 500
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading .copy {
    margin-right: 10px
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading .state-icon {
    height: 20px;
    width: 32px
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading .state-icon:before {
    content: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/gr.arrow.white.svg");
    display: inline-block;
    height: 20px;
    width: 20px;
    float: right;
    vertical-align: middle;
    transform: scaleY(-1)
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading[data-state="open"] .state-icon:before {
    transform: scaleY(1)
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading[data-state="open"]+.topic-item-components {
    padding-bottom: var(--padding);
    border-bottom: 1px solid #222
}

@media (max-width:767px) {
    section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading[data-state="open"]+.topic-item-components {
        padding-bottom: var(--faqTopicItemComponent)
    }
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading[data-state="open"]+.topic-item-components {
    height: auto
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-components {
    height: 0;
    color: #fff;
    overflow-y: hidden
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-components .component {
    margin-top: 20px
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-components .component:first-child {
    margin-top: 35px
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-components .copy,
section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-components a {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading .copy,
section.nested-list .content .nested-list-topic .topic-items .nested-list-item .topic-item-heading a {
    font-family: var(--paragraphFAQFontFamily);
    font-size: var(--paragraphFAQFontSize);
    font-style: normal;
    font-weight: var(--paragraphFAQFontWeight);
    line-height: var(--paragraphFAQLineHeight);
    letter-spacing: var(--paragraphFAQLetterspacing)
}

@media (max-width:767px) {
    section.nested-list .content .nested-list-topic .topic-items .nested-list-item {
        padding-bottom: var(--faqListItemPadding)
    }
}

section.nested-list .content .nested-list-topic[data-selected="true"] .topic-heading {
    padding: 15px;
    position: relative;
    z-index: 2;
    padding-left: 46px;
    padding-right: 46px;
    overflow-x: hidden;
    padding-left: 25px;
    padding-right: 50px
}

section.nested-list .content .nested-list-topic[data-selected="true"] .topic-heading:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.nested-list .content .nested-list-topic[data-selected="true"] .topic-heading:before {
    background-color: white;
    border-bottom: 2px solid var(--clHighlight);
    border-left: 2px solid var(--clHighlight)
}

section.nested-list .content .nested-list-topic[data-selected="true"] .topic-heading:before {
    left: calc(-1 * 12.5px)
}

@media (max-width:767px) {
    section.nested-list .content .nested-list-topic[data-selected="true"] .topic-heading:before {
        left: -14px
    }
}

section.nested-list .content .nested-list-topic[data-selected="true"] .topic-heading .state-icon:before {
    content: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/ico.minus.black.svg");
    margin-left: -10px
}

section.nested-list .content .nested-list-topic[data-selected="true"] .topic-items {
    display: block
}

@media (max-width:767px) {
    section.nested-list .content .nested-list-topic+.nested-list-topic {
        margin-top: 40px
    }
}

section.nested-list .content .nested-list-topic[data-searchmatch="false"],
section.nested-list .content .nested-list-item[data-searchmatch="false"] {
    display: none
}

section.nested-list div.call-to-action {
    margin-top: 50px
}

section.nested-list .background-image {
    position: absolute;
    left: 50%;
    top: 550px;
    width: 100%;
    height: 880px;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s
}

section.nested-list .background-image.on {
    opacity: 1
}

section.nested-list .background-image img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

section.nested-list a,
section.nested-list a:visited {
    color: #fff
}

section.nested-list .no-results {
    display: none;
    position: relative;
    z-index: var(--zIndLowHigh);
    color: #fff
}

section.nested-list .no-results.on {
    display: block
}

section.nested-list .input-search {
    font-family: var(--h15FontFamily);
    font-size: var(--h15FontSize);
    font-style: normal;
    font-weight: var(--h15FontWeight);
    line-height: var(--h15LineHeight);
    letter-spacing: var(--h15Letterspacing)
}

section.legal-components {
    background-color: #fff
}

section.legal-components,
section.legal-components:first-of-type {
    height: auto
}

section.legal-components:first-of-type {
    padding-top: calc(var(--headerHeight) + 40px)
}

section.legal-components .watermark {
    position: absolute;
    z-index: var(--zIndLowLow);
    min-height: 88%;
    max-height: 100%;
    min-width: 88%;
    max-width: 100%;
    right: 0;
    top: 0;
    transform: translate(20%, -20%)
}

section.legal-components .watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

section.legal-components .content {
    position: relative;
    z-index: var(--zIndLowMid);
    max-width: var(--maxPaddedSectionWidth);
    margin: auto
}

section.legal-components .component {
    margin: 40px auto;
    word-break: break-word
}

section.legal-components .component+.component {
    margin-top: 0
}

section.legal-components .copy {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.legal-components .copy .wysiwyg-large-text {
    font-family: var(--h6FontFamily);
    font-size: var(--h6FontSize);
    font-style: normal;
    font-weight: var(--h6FontWeight);
    line-height: var(--h6LineHeight);
    letter-spacing: var(--h6Letterspacing);
    text-transform: uppercase
}

section.other-articles {
    z-index: var(--zIndTopSection);
    height: auto
}

section.other-articles .notched-section-label {
    margin-top: 0
}

section.other-articles .notched-section-label .label {
    font-family: var(--h7FontFamily);
    font-size: var(--h7FontSize);
    font-style: normal;
    font-weight: var(--h7FontWeight);
    line-height: var(--h7LineHeight);
    letter-spacing: var(--h7Letterspacing);
    text-transform: uppercase;
    line-height: 50px
}

section.other-articles .notched-section-label .label strong {
    font-weight: 600
}

section.other-articles .notched-section-label,
section.other-articles .notched-section-label[data-bg="white"] {
    background-color: #fff
}

section.other-articles .notched-section-label[data-bg="black"] {
    background-color: #000
}

section.other-articles .views-element-container>div {
    display: flex
}

section.other-articles .views-element-container>div .views-row {
    flex: 1;
    display: flex;
    width: 50%;
    min-height: 300px;
    transition: transform var(--fastTransitionTime)
}

section.other-articles .views-element-container>div .views-row .views-field {
    flex: 1
}

section.other-articles .views-element-container>div .views-row .field-content {
    width: 100%;
    height: 100%;
    display: flex
}

section.other-articles .views-element-container>div .views-row .field-content picture {
    flex: 1;
    position: relative;
    overflow: hidden
}

@media (min-width:768px) {
    section.other-articles .views-element-container>div .views-row .field-content picture {
        padding: 3px;
        margin: 18px
    }
}

@media (max-width:767px) {
    section.other-articles .views-element-container>div .views-row .field-content picture {
        max-width: 100%;
        margin-right: 0
    }
}

section.other-articles .views-element-container>div .views-row .field-content picture img {
    width: 100%;
    box-shadow: 0px 3px 3px var(--bgTransparent)
}

section.other-articles .views-element-container>div .views-row .field-content>*:not(:first-child) {
    margin-top: var(--standardComponentMargin)
}

section.other-articles .views-element-container>div .views-row .views-field-field-media-ss-3 {
    width: 50%
}

section.other-articles .views-element-container>div .views-row .views-field-field-media-ss-3 .field-content {
    aspect-ratio: 1
}

section.other-articles .views-element-container>div .views-row .views-field-field-media-ss-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

section.other-articles .views-element-container>div .views-row .views-field-nothing {
    padding: 20px;
    box-sizing: border-box
}

section.other-articles .views-element-container>div .views-row .views-field-nothing .field-content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (max-width:767px) {
    section.other-articles .views-element-container>div .views-row .views-field-nothing .field-content .title {
        font-family: var(--h4FontFamily);
        font-size: var(--h4FontSize);
        font-style: normal;
        font-weight: var(--h4FontWeight);
        line-height: var(--h4LineHeight);
        letter-spacing: var(--h4Letterspacing);
        text-transform: uppercase
    }
}

@media (min-width:768px) {
    section.other-articles .views-element-container>div .views-row .views-field-nothing .field-content .title {
        font-family: var(--h19NewNewsTitleFontFamily);
        font-size: var(--h19NewNewsTitleFontSize);
        font-style: normal;
        font-weight: var(--h19NewNewsTitleFontWeight);
        line-height: var(--h19NewNewsTitleLineHeight);
        letter-spacing: var(--h19NewNewsTitleLetterspacing);
        text-transform: uppercase
    }
}

section.other-articles .views-element-container>div .views-row .views-field-nothing .field-content>span {
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.other-articles .views-element-container>div .views-row:first-child {
    color: #000;
    background: #fff
}

section.other-articles .views-element-container>div .views-row:first-child .views-field-nothing .field-content .title {
    color: #000
}

section.other-articles .views-element-container>div .views-row:nth-child(2) {
    color: #fff;
    background: #000
}

@media (min-width:768px) {
    section.other-articles .views-element-container>div .views-row:hover {
        transform: scale(1.03);
        border-color: #fff;
        z-index: 1
    }
}

section.other-articles .views-element-container>div .views-row:nth-child(1) .field-content picture:before,
section.other-articles .views-element-container>div .views-row:nth-child(1) .field-content picture:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: rotate(25deg);
    transition: all var(--fastTransitionTime)
}

section.other-articles .views-element-container>div .views-row:nth-child(1) .field-content picture:before {
    left: calc(-100% - 50px);
    top: -50%
}

section.other-articles .views-element-container>div .views-row:nth-child(1) .field-content picture:after {
    right: calc(-100% - 50px);
    bottom: -50%
}

section.other-articles .views-element-container>div .views-row:nth-child(1):hover .field-content picture:before {
    left: calc(-100% + 35px)
}

section.other-articles .views-element-container>div .views-row:nth-child(1):hover .field-content picture:after {
    right: calc(-100% + 35px)
}

section.other-articles .views-element-container>div .views-row:nth-child(2) .field-content picture:before,
section.other-articles .views-element-container>div .views-row:nth-child(2) .field-content picture:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    transform: rotate(25deg);
    transition: all var(--fastTransitionTime)
}

section.other-articles .views-element-container>div .views-row:nth-child(2) .field-content picture:before {
    left: calc(-100% - 50px);
    top: -50%
}

section.other-articles .views-element-container>div .views-row:nth-child(2) .field-content picture:after {
    right: calc(-100% - 50px);
    bottom: -50%
}

section.other-articles .views-element-container>div .views-row:nth-child(2):hover .field-content picture:before {
    left: calc(-100% + 35px)
}

section.other-articles .views-element-container>div .views-row:nth-child(2):hover .field-content picture:after {
    right: calc(-100% + 35px)
}

@media (max-width:1099px) {
    section.other-articles .views-element-container>div {
        flex-direction: column
    }

    section.other-articles .views-element-container>div .views-row {
        width: 100%
    }
}

@media (max-width:767px) {
    section.other-articles .views-element-container>div .views-row {
        flex-direction: column
    }

    section.other-articles .views-element-container>div .views-row .views-field {
        width: 100%
    }
}

.pad-for-other-articles {
    padding-bottom: var(--otherArticlesMargin)
}

.news-content.pad-for-other-articles {
    padding-bottom: 100px
}

footer .newsletter-signup a,
footer .footer-links a {
    --h17FooterFontFamily: "geom-graphic";
    --h17FooterFontWeight: normal;
    --h17FooterFontSize: 12px;
    --h17FooterLineHeight: 12px;
    --h17FooterLetterspacing: 0.025em;
    font-family: var(--h17FooterFontFamily);
    font-size: var(--h17FooterFontSize);
    font-style: normal;
    font-weight: var(--h17FooterFontWeight);
    line-height: var(--h17FooterLineHeight);
    letter-spacing: var(--h17FooterLetterspacing)
}

footer .copyright p {
    --h18FooterFontFamily: "Rajdhani", sans-serif;
    --h18FooterFontWeight: normal;
    --h18FooterFontSize: 12px;
    --h18FooterLineHeight: 12px;
    --h18FooterLetterspacing: 0.025em;
    font-family: var(--h18FooterFontFamily);
    font-size: var(--h18FooterFontSize);
    font-style: normal;
    font-weight: var(--h18FooterFontWeight);
    line-height: var(--h18FooterLineHeight);
    letter-spacing: var(--h18FooterLetterspacing)
}

footer,
.mobile-footer {
    --footerDisplay: flex;
    --footerMobileDisplay: none;
    --textColor: #fff;
    --borderColor: #292929;
    --mobileMenuTextColor: #000;
    --footerHorzPadding: 60px;
    --footerVertPadding: 40px;
    --footerVertMargin: 40px;
    --socialIconSideMargin: 8px;
    --socialLinksMaxWidth: none;
    display: var(--footerDisplay);
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
    padding-bottom: 0
}

@media (max-width:767px) {

    footer,
    .mobile-footer {
        --footerMobileDisplay: block;
        --footerHorzPadding: 10px;
        --footerVertMargin: 30px;
        --socialIconSideMargin: 16px;
        --socialLinksMaxWidth: 280px
    }
}

@media (max-width:1099px) {

    footer,
    .mobile-footer {
        --footerDisplay: block
    }
}

footer .positioner,
.mobile-footer .positioner {
    display: var(--footerDisplay);
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% - var(--indentLeft) * 2);
    padding-top: var(--footerVertPadding);
    margin-top: var(--footerVertPadding);
    margin-left: var(--indentLeft);
    margin-right: var(--indentLeft);
    border-top: 1px solid var(--borderColor)
}

footer.mobile-footer,
.mobile-footer.mobile-footer {
    display: var(--footerMobileDisplay);
    width: 95%;
    margin-top: var(--footerVertPadding);
    margin-left: auto;
    margin-right: auto
}

footer.mobile-footer,
footer.mobile-footer a,
.mobile-footer.mobile-footer,
.mobile-footer.mobile-footer a {
    color: var(--mobileMenuTextColor) !important
}

footer.mobile-footer .social-links,
footer.mobile-footer .newsletter-signup,
footer.mobile-footer .footer-links,
footer.mobile-footer .copyright,
.mobile-footer.mobile-footer .social-links,
.mobile-footer.mobile-footer .newsletter-signup,
.mobile-footer.mobile-footer .footer-links,
.mobile-footer.mobile-footer .copyright {
    font-family: var(--mobileMenuFontFamily);
    font-size: var(--mobileMenuFontSize);
    font-style: normal;
    font-weight: var(--mobileMenuFontWeight);
    line-height: var(--mobileMenuLineHeight);
    letter-spacing: var(--mobileMenuLetterspacing)
}

footer .social-links,
footer .newsletter-signup,
footer .footer-links,
footer .copyright,
.mobile-footer .social-links,
.mobile-footer .newsletter-signup,
.mobile-footer .footer-links,
.mobile-footer .copyright {
    padding-bottom: var(--footerVertPadding);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    min-width: 250px
}

footer .social-links.social-links,
footer .newsletter-signup.social-links,
footer .footer-links.social-links,
footer .copyright.social-links,
.mobile-footer .social-links.social-links,
.mobile-footer .newsletter-signup.social-links,
.mobile-footer .footer-links.social-links,
.mobile-footer .copyright.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: var(--socialLinksMaxWidth)
}

footer .social-links.social-links .image-link,
footer .newsletter-signup.social-links .image-link,
footer .footer-links.social-links .image-link,
footer .copyright.social-links .image-link,
.mobile-footer .social-links.social-links .image-link,
.mobile-footer .newsletter-signup.social-links .image-link,
.mobile-footer .footer-links.social-links .image-link,
.mobile-footer .copyright.social-links .image-link {
    height: 25px;
    margin: 0 var(--socialIconSideMargin) 14px var(--socialIconSideMargin)
}

@media (min-width:1100px) {

    footer .social-links.social-links .image-link:first-child,
    footer .newsletter-signup.social-links .image-link:first-child,
    footer .footer-links.social-links .image-link:first-child,
    footer .copyright.social-links .image-link:first-child,
    .mobile-footer .social-links.social-links .image-link:first-child,
    .mobile-footer .newsletter-signup.social-links .image-link:first-child,
    .mobile-footer .footer-links.social-links .image-link:first-child,
    .mobile-footer .copyright.social-links .image-link:first-child {
        margin-left: 0
    }

    footer .social-links.social-links .image-link:last-child,
    footer .newsletter-signup.social-links .image-link:last-child,
    footer .footer-links.social-links .image-link:last-child,
    footer .copyright.social-links .image-link:last-child,
    .mobile-footer .social-links.social-links .image-link:last-child,
    .mobile-footer .newsletter-signup.social-links .image-link:last-child,
    .mobile-footer .footer-links.social-links .image-link:last-child,
    .mobile-footer .copyright.social-links .image-link:last-child {
        margin-right: 0
    }
}

footer .social-links.social-links .image-link img,
footer .newsletter-signup.social-links .image-link img,
footer .footer-links.social-links .image-link img,
footer .copyright.social-links .image-link img,
.mobile-footer .social-links.social-links .image-link img,
.mobile-footer .newsletter-signup.social-links .image-link img,
.mobile-footer .footer-links.social-links .image-link img,
.mobile-footer .copyright.social-links .image-link img {
    position: relative;
    bottom: 0;
    width: 34px;
    height: 100%;
    transition: all var(--ultraFastTransitionTime)
}

footer .social-links.social-links .image-link:hover img,
footer .newsletter-signup.social-links .image-link:hover img,
footer .footer-links.social-links .image-link:hover img,
footer .copyright.social-links .image-link:hover img,
.mobile-footer .social-links.social-links .image-link:hover img,
.mobile-footer .newsletter-signup.social-links .image-link:hover img,
.mobile-footer .footer-links.social-links .image-link:hover img,
.mobile-footer .copyright.social-links .image-link:hover img {
    bottom: 3px
}

footer .social-links.newsletter-signup a,
footer .newsletter-signup.newsletter-signup a,
footer .footer-links.newsletter-signup a,
footer .copyright.newsletter-signup a,
.mobile-footer .social-links.newsletter-signup a,
.mobile-footer .newsletter-signup.newsletter-signup a,
.mobile-footer .footer-links.newsletter-signup a,
.mobile-footer .copyright.newsletter-signup a {
    margin-bottom: 14px
}

footer .social-links.footer-links,
footer .newsletter-signup.footer-links,
footer .footer-links.footer-links,
footer .copyright.footer-links,
.mobile-footer .social-links.footer-links,
.mobile-footer .newsletter-signup.footer-links,
.mobile-footer .footer-links.footer-links,
.mobile-footer .copyright.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

footer .social-links.footer-links a,
footer .newsletter-signup.footer-links a,
footer .footer-links.footer-links a,
footer .copyright.footer-links a,
.mobile-footer .social-links.footer-links a,
.mobile-footer .newsletter-signup.footer-links a,
.mobile-footer .footer-links.footer-links a,
.mobile-footer .copyright.footer-links a {
    margin-right: 14px;
    margin-bottom: 14px
}

footer .social-links.footer-links a:last-child,
footer .newsletter-signup.footer-links a:last-child,
footer .footer-links.footer-links a:last-child,
footer .copyright.footer-links a:last-child,
.mobile-footer .social-links.footer-links a:last-child,
.mobile-footer .newsletter-signup.footer-links a:last-child,
.mobile-footer .footer-links.footer-links a:last-child,
.mobile-footer .copyright.footer-links a:last-child {
    margin-right: 0
}

footer .social-links.copyright,
footer .newsletter-signup.copyright,
footer .footer-links.copyright,
footer .copyright.copyright,
.mobile-footer .social-links.copyright,
.mobile-footer .newsletter-signup.copyright,
.mobile-footer .footer-links.copyright,
.mobile-footer .copyright.copyright {
    text-align: center
}

footer .social-links.copyright p,
footer .newsletter-signup.copyright p,
footer .footer-links.copyright p,
footer .copyright.copyright p,
.mobile-footer .social-links.copyright p,
.mobile-footer .newsletter-signup.copyright p,
.mobile-footer .footer-links.copyright p,
.mobile-footer .copyright.copyright p {
    margin: 0
}

@media (min-width:1100px) {

    footer .social-links.social-links,
    footer .newsletter-signup.social-links,
    footer .footer-links.social-links,
    footer .copyright.social-links,
    .mobile-footer .social-links.social-links,
    .mobile-footer .newsletter-signup.social-links,
    .mobile-footer .footer-links.social-links,
    .mobile-footer .copyright.social-links {
        min-width: 38%
    }

    footer .social-links.newsletter-signup,
    footer .newsletter-signup.newsletter-signup,
    footer .footer-links.newsletter-signup,
    footer .copyright.newsletter-signup,
    .mobile-footer .social-links.newsletter-signup,
    .mobile-footer .newsletter-signup.newsletter-signup,
    .mobile-footer .footer-links.newsletter-signup,
    .mobile-footer .copyright.newsletter-signup {
        min-width: 22%
    }

    footer .social-links.footer-links,
    footer .newsletter-signup.footer-links,
    footer .footer-links.footer-links,
    footer .copyright.footer-links,
    .mobile-footer .social-links.footer-links,
    .mobile-footer .newsletter-signup.footer-links,
    .mobile-footer .footer-links.footer-links,
    .mobile-footer .copyright.footer-links {
        min-width: 38%;
        justify-content: space-around
    }

    footer .social-links.copyright,
    footer .newsletter-signup.copyright,
    footer .footer-links.copyright,
    footer .copyright.copyright,
    .mobile-footer .social-links.copyright,
    .mobile-footer .newsletter-signup.copyright,
    .mobile-footer .footer-links.copyright,
    .mobile-footer .copyright.copyright {
        min-width: 300px
    }
}

@media (max-width:1099px) {

    footer .social-links,
    footer .newsletter-signup,
    footer .footer-links,
    footer .copyright,
    .mobile-footer .social-links,
    .mobile-footer .newsletter-signup,
    .mobile-footer .footer-links,
    .mobile-footer .copyright {
        width: 100%;
        max-width: 450px;
        text-align: center
    }

    footer .social-links.footer-links a,
    footer .newsletter-signup.footer-links a,
    footer .footer-links.footer-links a,
    footer .copyright.footer-links a,
    .mobile-footer .social-links.footer-links a,
    .mobile-footer .newsletter-signup.footer-links a,
    .mobile-footer .footer-links.footer-links a,
    .mobile-footer .copyright.footer-links a {
        display: block;
        margin-bottom: 12px
    }
}

footer .social-links a,
footer .newsletter-signup a,
footer .footer-links a,
footer .copyright a,
.mobile-footer .social-links a,
.mobile-footer .newsletter-signup a,
.mobile-footer .footer-links a,
.mobile-footer .copyright a {
    display: inline-block;
    color: var(--textColor)
}

footer .copyright,
.mobile-footer .copyright {
    width: 100%
}

section.site-login {
    max-width: 600px;
    height: auto;
    min-height: 0;
    margin: 80px auto 0 auto;
    padding: 35px 25px;
    color: #000;
    border-radius: 20px;
    background: linear-gradient(0deg, white calc(100% - 140px), black calc(100% - 140px), #282828 100%)
}

section.site-login .flexor {
    display: flex;
    width: 100%;
    height: 100px;
    justify-content: space-between
}

section.site-login .content {
    padding-top: 10px
}

section.site-login article {
    margin-top: 20px
}

section.site-login img.logo {
    height: 80px
}

section.site-login img.bt-home {
    height: 35px
}

section.site-login form label {
    display: block;
    margin-bottom: 5px
}

section.site-login form .js-form-item {
    padding: 20px 0
}

section.site-login form .description {
    margin-top: 7px
}

section.newsletter-signup {
    height: auto
}

section.job-listing-details {
    --imageMargin: 0;
    --componentMargin: 45px;
    background-color: #fff
}

@media (max-width:767px) {
    section.job-listing-details {
        --imageMargin: auto;
        --componentMargin: 35px
    }
}

section.job-listing-details,
section.job-listing-details:first-of-type {
    height: auto;
    max-height: none
}

section.job-listing-details .content {
    width: calc(100% - var(--indentLeft) - var(--indentRight));
    margin: auto;
    margin-top: 150px;
    margin-bottom: 100px;
    font-family: var(--paragraphFontFamily);
    font-size: var(--paragraphFontSize);
    font-style: normal;
    font-weight: var(--paragraphFontWeight);
    line-height: var(--paragraphLineHeight);
    letter-spacing: var(--paragraphLetterspacing)
}

section.job-listing-details .content .logo-image {
    width: 65%;
    margin: var(--imageMargin);
    max-width: 200px
}

section.job-listing-details .content .logo-image img {
    width: 100%;
    height: auto
}

section.job-listing-details .content .job-listing-date {
    position: relative;
    z-index: 2;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
    padding-left: 10px;
    padding-right: 20px;
    font-family: var(--h13NewItemDateFontFamily);
    font-size: var(--h13NewItemDateFontSize);
    font-style: normal;
    font-weight: var(--h13NewItemDateFontWeight);
    line-height: var(--h13NewItemDateLineHeight);
    letter-spacing: var(--h13NewItemDateLetterspacing);
    text-transform: uppercase;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 20px 3px 10px;
    margin-top: var(--componentMargin)
}

section.job-listing-details .content .job-listing-date:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 1;
    box-sizing: border-box;
    transform: scale(-1, 1) skew(22deg)
}

section.job-listing-details .content .job-listing-date:before {
    left: calc(-1 * 5px)
}

section.job-listing-details .content>h1 {
    font-family: var(--h3FontFamily);
    font-size: var(--h3FontSize);
    font-style: normal;
    font-weight: var(--h3FontWeight);
    line-height: var(--h3LineHeight);
    letter-spacing: var(--h3Letterspacing);
    text-transform: uppercase;
    margin-bottom: 0
}

section.job-listing-details .content .specifications {
    font-family: var(--h7FontFamily);
    font-size: var(--h7FontSize);
    font-style: normal;
    font-weight: var(--h7FontWeight);
    line-height: var(--h7LineHeight);
    letter-spacing: var(--h7Letterspacing);
    text-transform: uppercase;
    line-height: unset
}

section.job-listing-details .content strong,
section.job-listing-details .content .large-text {
    font-family: var(--h6FontFamily);
    font-size: var(--h6FontSize);
    font-style: normal;
    font-weight: var(--h6FontWeight);
    line-height: var(--h6LineHeight);
    letter-spacing: var(--h6Letterspacing);
    text-transform: uppercase
}

section.job-listing-details .content .body {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

section.job-listing-details .content .body .component {
    margin-top: var(--componentMargin)
}

section.job-listing-details .content .body .component .large-text {
    font-size: var(--textRegularBump);
    font-weight: 300;
    line-height: 26px;
    text-transform: unset
}

section.shareable {
    height: 100%;
    text-align: center
}

section.shareable .content {
    overflow: hidden;
    height: 100%
}

section.shareable .content img {
    position: absolute
}

@media (min-width:768px) {
    section.shareable .content img {
        top: 5%;
        left: 50%;
        height: 90%;
        width: auto;
        transform: translateX(-50%)
    }
}

@media (max-width:767px) {
    section.shareable .content img {
        left: 50%;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: auto;
        transform: translateX(-50%)
    }
}

section.shareable .shareable-options {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s
}

section.shareable .shareable-options.on {
    opacity: 1;
    pointer-events: all
}

section.shareable .shareable-options .dark-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85)
}

section.shareable .shareable-options .option-buttons {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 80px;
    width: auto;
    min-width: 270px;
    transform: translate(-50%, -50%)
}

section.shareable .shareable-options .option-buttons .label {
    text-align: left;
    font-size: 0.85rem;
    font-family: "geom-graphic";
    color: white;
    margin-bottom: 20px
}

section.shareable .shareable-options .option-buttons .icons {
    display: flex;
    align-content: space-between
}

section.shareable .shareable-options .option-buttons a {
    display: none;
    flex: 1;
    width: 30px;
    height: 35px;
    vertical-align: top
}

section.shareable .shareable-options .option-buttons a.option-On {
    display: inline-block
}

section.shareable .shareable-options .option-buttons a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50%
}

section.shareable .shareable-options .option-buttons a.option-On:first-of-type img {
    object-position: 0 50%
}

section.shareable .shareable-options .option-buttons a.option-On:last-of-type img {
    object-position: 100% 50%
}

section.shareable .shareable-options button.close {
    position: absolute;
    bottom: 25%;
    left: 50%;
    width: 30px;
    height: 30px;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
    background-image: url("https://www.kojimaproductions.jp/themes/kojima_productions/images/bt.cross.white.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    transform: translate(-50%, 0)
}

section.no-no-node {
    width: 100%;
    height: 100%
}

section.no-no-node .content {
    position: relative;
    top: 50%;
    left: calc(var(--indentLeft) + var(--indentLeftFramingFactor));
    transform: translateY(-50%)
}

section.no-no-node h1 {
    text-transform: uppercase;
    color: #fff;
    font-size: var(--textExtraLarge)
}

section.no-no-node a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    padding: 20px;
    margin-left: -20px;
    transform: rotate(90deg);
    transition: all 0.25s
}

section.no-no-node a:hover {
    transform: rotate(0deg)
}

section.no-no-node a:hover .walls {
    width: 0px
}

section.no-no-node a img {
    width: 100%;
    height: 100%;
    transform: rotate(90deg)
}

section.no-no-node a .walls {
    position: absolute;
    top: 28px;
    left: 55px;
    width: 20px;
    height: 32px;
    background-color: #fff;
    transition: all 0.25s ease-out 0.3s
}

section.no-no-node>img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%
}

form.content-moderation-entity-moderation-form {
    z-index: 5000;
    position: fixed;
    bottom: 0;
    width: 100%;
    opacity: 0.9
}

.node-preview-container {
    height: var(--previewHeight);
    line-height: var(--previewHeight);
    color: #fff;
    text-align: center;
    padding: 0
}

.node-preview-container+.layout-container {
    padding-top: var(--previewHeight);
    height: calc(100% - var(--previewHeight))
}

.node-preview-container #edit-backlink {
    margin-right: 20px
}

header[data-mode="maintenance"] {
    display: none
}

main[data-mode="maintenance"] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 20px;
    transform: translate(-50%, -50%)
}

main[data-mode="maintenance"] h1 {
    margin-top: 0
}

div.maintenance-strand {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 500px
}

.vjs-text-track-display,
.vjs-loading-spinner,
.vjs-big-play-button,
.vjs-error-display,
.vjs-modal-dialog,
.vjs-control-bar {
    display: none
}

.vjs-poster {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 1;
    transition: all 0.4s
}

.vjs-playing .vjs-poster {
    opacity: 0
}

.shareable.shareable-launcher {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: 0.5s ease
}

.shareable.shareable-launcher.active {
    opacity: 1;
    z-index: 1
}

.shareable.shareable-launcher.inactive {
    opacity: 0;
    z-index: 0
}

@keyframes hide-drupal-message {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-110%)
    }
}

@keyframes vertical-bounce-menu-dropdown {
    0% {
        transform: translateY(-50%)
    }

    100% {
        transform: translateY(25%)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

/* Header Logo - 1038 */
.header-logo-1038 {
    display: none;
}

@media (min-width: 1100px) {
    .header-logo-1038 {
        display: block;
        position: fixed;
        top: 20px;
        left: 50px;
        z-index: 9999;
        padding: 0 30px;
    }

    .header-logo-1038 a {
        display: block;
    }

    .header-logo-1038 img {
        height: 40px;
        width: auto;
    }

    .header-logo-1038 .logo-black-1038 {
        display: none;
    }

    .header-logo-1038 .logo-white-1038 {
        display: block;
    }

    /* Menu font size - 1038 */
    ul.menu.top-level {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    ul.menu.top-level > li > a {
        font-size: 18px;
    }

    ul.menu.top-level ul li a {
        font-size: 16px;
    }
}

/* Hero Video Section - 1038 */
section.multipurpose.hero-video-section-1038 {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

section.multipurpose.hero-video-section-1038 .hero-video-wrapper-1038 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

section.multipurpose.hero-video-section-1038 .hero-video-1038 {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

section.multipurpose.hero-video-section-1038 .carousel-shader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
    z-index: 1;
}

section.multipurpose.hero-video-section-1038 .content-overlay {
    z-index: 2;
}

/* Map Section - 1038 */
section.map-section-1038 {
    width: 100vw;
    max-width: 100vw;
    height: 400px;
    max-height: 400px;
    margin-left: 50%;
    transform: translateX(-50%);
    line-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}

section.map-section-1038 iframe {
    width: 100%;
    height: 400px;
    filter: grayscale(100%);
    display: block;
    margin: 0;
    padding: 0;
}

/* Footer Styles - 1038 */
#page-footer-1038 {
    background-color: #000;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

#page-footer-1038 .positioner {
    display: none;
}

.footer-main-1038 {
    padding: 8rem 0 6rem;
}

.footer-inner-1038 {
    max-width: 100%;
    padding: 0 6rem;
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}

.footer-left-1038 {
    flex: 0 0 280px;
}

.footer-logo-1038 {
    margin-bottom: 2.5rem;
}

.footer-logo-1038 img {
    height: 4rem;
    width: auto;
}

.footer-desc-1038 {
    font-size: 1.4rem;
    line-height: 2;
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-social-1038 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

.footer-social-1038 li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.footer-social-1038 li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.footer-social-1038 li a svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: #fff;
}

.footer-center-1038 {
    flex: 3;
    max-width: none;
}

.footer-menu-wrap-1038 {
    display: flex;
    gap: 8rem;
    justify-content: center;
}

.footer-menu-col-1038 {
    flex: 0 0 auto;
    min-width: 180px;
}

.footer-menu-title-1038 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #fff;
}

.footer-menu-list-1038 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list-1038 li {
    margin-bottom: 1.2rem;
}

.footer-menu-list-1038 a {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu-list-1038 a:hover {
    color: #fff;
}

.footer-right-1038 {
    flex: 0 0 auto;
    text-align: right;
}

.footer-info-title-1038 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #fff;
}

.footer-info-1038 {
    font-size: 1.4rem;
    line-height: 1.8;
}

.footer-info-1038 p {
    margin-bottom: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-company-1038 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
}

.footer-info-1038 a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.footer-bottom-1038 {
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.copyright-1038 {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Footer Responsive - Tablet */
@media only screen and (max-width: 991px) {
    .footer-inner-1038 {
        flex-wrap: wrap;
    }

    .footer-left-1038,
    .footer-center-1038,
    .footer-right-1038 {
        max-width: 100%;
        width: 100%;
        margin-bottom: 3rem;
    }

    .footer-menu-wrap-1038 {
        gap: 3rem;
    }
}

/* Footer Responsive - Mobile */
@media only screen and (max-width: 576px) {
    .footer-main-1038 {
        padding: 5rem 0 3rem;
    }

    .footer-inner-1038 {
        width: 75%;
        margin: 0 auto;
        padding: 0;
        flex-direction: column;
        align-items: center;
    }

    .footer-left-1038,
    .footer-center-1038,
    .footer-right-1038 {
        text-align: center;
    }

    .footer-logo-1038 {
        display: flex;
        justify-content: center;
    }

    .footer-social-1038 {
        justify-content: center;
    }

    .footer-menu-wrap-1038 {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .footer-menu-col-1038 {
        text-align: center;
    }

    .footer-menu-list-1038 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-info-1038 {
        text-align: center;
    }
}