/*!
Theme Name: Fondant Blocks by House of Cakes
Theme URI: http://underscores.me/
Author: e. james ford
Author URI: http://web.ejimford.com
Description: Custom theme for Fondant Blocks by House of Cakes
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: fondant-blocks
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Fondant Blocks by House of Cakes is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigaon
	## Links
	## Menus
        ### Menu Button
# Accessibility
# Alignments
# Clearings
# Widgets
# Header
# Content
	## Posts and pages
	## Comments
# Footer
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
}

body {
    margin: 0;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
}

b,
strong {
    font-weight: bolder;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    /* 1 */
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    appearance: button;
}

[type="button"],
[type="reset"],
[type="submit"] {
    background-color: var(--fondant-hue-5);
    color: var(--fondant-hue-1);
    border: 4px solid var(--fondant-hue-4);
    padding: 8px 42px 7px;
    margin-left: 10px;
    text-transform: uppercase;
    font-size: 20px;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
    color: #fff;
    font-family: "Nunito Sans", "Helvetica", "Arial", sans-serif;
    font-size: 33px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 44.2px */
    letter-spacing: -1.02px;
    transition: all 0.5s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    margin: 36px 0 0 0;
    /* 72px */
}

h1 {
    font-size: 72px;
    letter-spacing: -2.16px;
}

h1>span {
    font-size: 18px;
    padding: 6px 0px;
    font-weight: 700;
    display: block;
}

h2 {
    font-size: 62px;
    letter-spacing: -1.86px;
}

h3 {
    font-size: 60px;
    line-height: 120%;
    font-weight: 800;
    letter-spacing: -1.8px;
}

h4 {
    font-size: 48px;
    letter-spacing: -1.44px;
}

h5 {
    font-size: 27px;
    font-weight: 800;
    line-height: 120%;
    /* 33.6px */
    letter-spacing: -0.84px;
}

h6 {
    font-size: 22px;
    font-weight: 800;
    line-height: 100%;
    /* 33.6px */
    letter-spacing: -0.66px;
}

p.nospace {
    margin-bottom: 0 !important;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #000;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 15px;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body {
    background: #0E1E3F;
    background: linear-gradient(143deg, rgba(14, 30, 63, 1) 0%, rgba(14, 30, 63, 1) 36%, rgba(37, 80, 167, 0.8) 100%);
    background-image: url('/wp-content/uploads/bg/bg.webp');
}

hr {
    background-color: var(--fondant-hue-grey-dark);
    border: 0;
    height: 10px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 1.5em 1.5em;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
}

figure {
    margin: 1em 0;
    /* Extra wide images within figure tags don't overflow the content area. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

.hide-mobile {
    display: none;
}

.fondant-element-reveal-on-load {
    opacity: 1 !important;
    transition: all 0.75s ease-in-out;
}

.background-overlay {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 100%;
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    opacity: 1;
    transition: all 250ms ease-out;
}

@media only screen and (min-width: 1300px) {
    .site {
        margin: 0px auto;
    }

    .background-overlay {
        width: 100%;
        background-position: top center;
        background-size: 100% auto;
        background-repeat: repeat-x;
        max-height: none;
        height: 1920px;
    }

    .wp-block-image.logo-cover img {
        max-height: 700px;
        width: auto !important
    }
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.wp-block-button {
    text-align: center;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="hidden"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #000 !important;
    border: 1px solid var(--fondant-hue-1) !important;
    border-radius: 0px;
    padding: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="hidden"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #000 !important;
    border: 1px solid var(--fondant-hue-1) !important;
}

select {
    color: #000 !important;
}

textarea {
    width: 100%;
}

article.post-password-required div.brand-cover,
article.post-password-required div.brand-facts,
article.post-password-required div.releases-brand {
    display: none !important;
}

/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/
.site-header {
    margin: 0 auto;
    padding: 0px;
    width: 100%;
    max-width: 1440px;
}

.site-header-inner {
    margin: 0px auto;
    padding: 0px 60px;
}

.site-title {
    font-size: 24px;
}

.site-title a {
    font-size: 24px;
}

.site-branding {
    max-width: 300px;
    float: left;
    padding-top: 36px;
}

.site-tagline {
    max-width: 458px;
    display: none;
    float: right;
    text-transform: uppercase;
    text-align: right;
    margin: 0 0;
    padding-top: 80px;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
    color: #fff;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    display: none !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

/*--------------------------------------------------------------
# Inactivity Message
--------------------------------------------------------------*/
.widget ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

/* Prompt container styling */
#inactivityPrompt {
    position: fixed;
    bottom: -100px;
    /* start off-screen bottom */
    left: 0;
    right: 0;
    /* full width */
    max-height: 100px;
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--fondant-hue-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    transition: bottom 0.4s ease;
    /* enable slide-up transition */
    z-index: 9999;
    /* ensure above other content */
    font-size: 75%;
}

/* SVG timer styling */
#inactivityPrompt svg {
    width: 60px;
    height: 60px;
    /* Rotate so the circle's 0% starts at top (12 o’clock) */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

#inactivityPrompt circle {
    stroke: var(--fondant-hue-1);
    /* black circle stroke */
    fill: none;
    stroke-width: 5;
    /* These will be set/animated via JS for the countdown */
    transition: stroke-dashoffset 1s linear;
}

#inactivityPrompt text {
    fill: var(--fondant-hue-1);
    font-size: 18px;
    text-anchor: middle;
    dominant-baseline: middle;
    transform: rotate(90deg);
    transform-origin: 50% 50%;
    text-shadow: 0 0 0px rgba(255, 255, 255, 0);
}

/* Button styling (optional tweaks) */
#inactivityPrompt button#stillHereBtn {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: none;
    border: none;
    color: transparent;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}

.updated:not(.published) {
    display: none;
}

.site-content {
    padding: 0;
    margin: 32px auto 0px;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
}

.page-header,
.entry-header {
    margin: 0;
    padding: 24px 0px;
}

.entry-header.fixed-entry-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--fondant-hue-1);
    transition: all 250ms ease-in-out;
}

body.admin-bar .entry-header.fixed-entry-header {
    transform: translateY(32px);
}

.entry-header-placeholder {
    display: none;
}

.page-title,
.entry-title {
    padding: 0;
    margin: 0;
}

.entry-header-inner {
    display: block;
    max-width: 1440px;
    margin: 0px auto;
}

.page-title a,
.entry-title a {
    text-decoration: none;
    background-image: url(images/back.svg);
    background-position: left 60px center;
    background-size: 22px auto;
    background-repeat: no-repeat;
    padding: 0px 60px 0px 120px;
    animation: back-arrow 500ms ease-out 1 forwards;
}

.page-content,
.entry-content,
.entry-summary {
    width: 74%;
    max-width: 795px;
    margin: 0px auto;
}

/* ## Glossary and Definitions  */
.page-template-page-glossary .entry-content {
    width: 90%;
    max-width: 964px;
}

.definition-list {
    margin-bottom: 120px;
    padding: 0 0 12px 2px;
}

.definition-list .definition-row {
    display: grid;
    grid-template-columns: 24% 60% 10%;
    column-gap: 3%;
    align-items: center;
    border-top: 1px solid #ddd;
    padding: 18px 0px 18px;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
}

.definition-list .definition-row h6,
.definition-list .definition-row .excerpt {
    margin: 0;
}

.definition-list .excerpt {
    margin-left: 10px;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    /* Show up to 2 lines */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 20px */
    letter-spacing: -0.6px;
    color: var(--fondant-hue-grey-lite);
    max-height: 40px;
}

.definition-list .excerpt p {
    margin: 0;
    color: var(--fondant-hue-grey-lite);
}

.definition-list .full-content.expanded {
    white-space: normal;
    overflow: visible;
    display: block;
    max-height: 300px;
    transition: all 500ms ease-in-out;
}

.definition-list .full-content.expanded p {
    margin: 0 0 12px 0;
}

.definition-list .full-content.expanded p:first-child {
    margin: 12px 0 12px 0;
}

.definition-list .full-content.expanded .text-excerpt {
    display: none;
}

.definition-list .excerpt .text-full {
    max-height: 40px;
    overflow: hidden;
    display: block;
    opacity: 0;
}

.definition-list .full-content.expanded .text-full {
    max-height: 300px;
    opacity: 1;
    transition: all 500ms ease-in-out;
}

.definition-list .toggle-content {
    font-size: 20px;
    line-height: 20px;
    color: transparent;
    background-image: url(images/expand.svg);
    background-size: 11px auto;
    background-position: right center;
    background-repeat: no-repeat;
    transition: all 400ms ease-in-out;
}

.definition-list .toggle-content.expanded {
    background-image: url(images/close.svg);
    background-size: 14px auto;
}

.page-template-page-collecting .entry-content {
    width: 90%;
    max-width: 960px;
}

/* ## Video Pages  */
.thumbnail-video-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 72px auto 36px;
    position: relative;
}

.thumbnail-video-wrapper img,
.thumbnail-video-wrapper video {
    width: 100%;
}

.thumbnail-video-wrapper .video-button-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 140px;
    height: 60px;
}

.thumbnail-video-wrapper .video-button-controls button {
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    color: transparent;
    font-size: 1px;
    line-height: 1px;
    border: none;
}

.thumbnail-video-wrapper .video-button-controls button.sound {
    left: 0;
    right: unset;
}

.thumbnail-video-wrapper .video-button-controls button.unmuted {
    background-image: url(/wp-content/themes/fondant-blocks/images/mute.svg);
}

.thumbnail-video-wrapper .video-button-controls button.muted {
    background-image: url(/wp-content/themes/fondant-blocks/images/sound.svg);
}

.thumbnail-video-wrapper .video-button-controls button.playing {
    background-image: url(/wp-content/themes/fondant-blocks/images/pause.svg);
}

.thumbnail-video-wrapper .video-button-controls button.paused {
    background-image: url(/wp-content/themes/fondant-blocks/images/play.svg);
}

video::-webkit-media-text-track-container {
    padding: 10px;
}

video::-webkit-media-text-track-display,
video::cue {
    font-size: 36px;
}

.video-posts .first-post {
    text-align: center;
    margin: 0 auto;
}

.video-posts .remaining-post {
    display: inline-block;
    width: calc(50% - 10px);
    /* Adjust width to fit two posts per row */
    margin-bottom: 0px;
}

.video-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
    /* row gap and column gap */
    justify-content: center;
    margin-top: 100px;
}

.video-posts .first-post img {
    display: block;
    margin: 0 auto;
    border-radius: 20px;
}

.video-posts .remaining-post img {
    display: block;
    width: 100%;
    /* Adjust image width to fit the container */
    height: auto;
    border-radius: 16px;
}

.video-posts a img {
    box-shadow: 0 0 0px 0px rgba(255, 255, 255, 1);
}

.video-posts a:focus img {
    animation: buttonTap 800ms ease-out 0s 1 normal forwards;
}

.link-to-glossary a {
    font-size: 62px;
    margin-bottom: 24px;
}

.video-nav {
    text-align: center;
    width: 100%;
    margin: 100px 0 48px;
}

.video-nav a {
    padding: 0px 4px;
    display: inline-block;
    width: 66px;
    height: 66px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #122851;
    transition: all 250ms ease-in-out;
    text-indent: -9999999999999999px;
    border-radius: 999998989px;
    box-shadow: 0 0 0px 0px rgba(255, 255, 255, 1);
}

.video-nav a.video-next {
    background-image: url(images/next.svg);
    margin-left: 20px;
}

.video-nav a.video-prev {
    background-image: url(images/previous.svg);
    margin-right: 20px;
}

.video-nav a:focus {
    animation: buttonTap 800ms ease-out 0s 1 normal forwards;
}

/* ## Brand Pages  */
.content-secondary {
    border: 1px solid var(--Grey-2, #A9B4BF);
    background: rgba(169, 180, 191, 0.20);
    padding: 40px 30px;
}

.content-secondary p:last-of-type {
    margin-bottom: 0;
}

.content-secondary p {
    margin: 0 0 18px 0;
}

.brand-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0 0 0;
    padding: 0;
    transform: translateX(-30px);
}

.brand-posts li {
    display: block;
}

.brand-posts li a {
    border-radius: 21.239px;
    background: var(--fondant-hue-grey-lite);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 1 /1;
    transition: all 250ms ease-in-out;
}

.brand-posts li a:focus {
    animation: buttonTap 800ms ease-out 0s 1 normal forwards;
}

.brand-posts li a img {
    width: 100%;
    max-width: 200px;
    height: auto;
}

/* ### Cover   */
.brand-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Adjust as needed */
    height: 564px;
    /* Adjust as needed */
    background-size: 120%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin: 12px auto 24px;
    animation: backgroundSizeAnimation 8s ease-out 1 forwards;
}

.brand-cover-bg-video {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 120%;
    top: 0;
    left: 0;
    animation: backgroundVideoAnimation 8s ease-out 1 forwards;
}

.brand-cover-bg-video video {
    width: 100%;
    height: auto;
}

.brand-logo {
    width: auto;
    height: 464px;
    display: block;
    animation: singleImageSizeAnimation 8s ease-out 1 forwards;
}

.brand-cover-overlay {
    width: 100%;
    height: 540px;
    flex-shrink: 0;
    border-radius: 1086px;
    background: rgba(0, 0, 0, 0.70);
    filter: blur(150px);
    position: absolute;
    top: 0;
    left: 0;
}

.brand-content-primary {
    width: 51%;
    float: left;
    padding-top: 40px;
}

.brand-content-secondary {
    width: 38%;
    float: right;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -0.6px;
    padding-top: 0px;
    margin-right: 4px;
    margin-top: 40px;
}

.brand-content-secondary p {
    margin: 0 0 18px 0;
}

.content-xtra {
    border: 1px solid var(--fondant-hue-grey-lite, #A9B4BF);
    background: rgba(169, 180, 191, 0.20);
}

.brand-content-primary :is(em, i) {
    display: block;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 48px */
    letter-spacing: -1.44px;
    padding-bottom: 24px;
}

.brand-content-primary p {
    margin: 0 0 18px 0;
}

.brand-content-secondary :is(em, i) {
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 28px */
    letter-spacing: -0.84px;
    display: inline-block;
    padding-bottom: 8px;
    padding-top: 20px;
}

.brand-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 equal columns */
    column-gap: 80px;
    /* Space between columns */
}

.brand-facts h5 {
    margin-top: 0;
}

.brand-facts p {
    font-size: 20px;
}

/* ## Events */
.event-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 24px 0;
}

.event {
    border-radius: 36px;
    background: #D9D9D9;
    padding: 0px;
    display: block;
    align-items: center;
    background-color: #f9f9f9;
    position: relative;
    opacity: 0;
    cursor: pointer;
    transition: all 500ms ease-in-out;
    transition-delay: 150ms;
}

article.event {
    background-color: transparent;
}

article.event .single-event-entry-content>p,
article.event .single-event-entry-content>h2 {
    color: #fff;
}

.event .event-image {
    border-radius: 36px 36px 0px 0px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 240px;
    overflow: hidden;
}

.event-content {
    padding: 30px 40px;
}

.event h2 {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    /* 18px */
    letter-spacing: -0.54px;
    margin: 0;
}

.event p {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: -0.54px;
}

.time-label {
    border-radius: 80px;
    padding: 8px 20px;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 80%;
    /* 9.6px */
    text-transform: uppercase;
    letter-spacing: -0.36px;
    position: absolute;
    top: 40px;
    left: 40px;
}

.time-label.today {
    background-color: var(--fondant-hue-4);
    /* Red */
}

.time-label.this-week {
    background-color: var(--fondant-hue-1);
    /* Blue */
}

.time-label.next-week {
    background-color: #D9D9D9;
    color: #000;
    /* Yellow */
}

.time-label.sticky {
    background-color: var(--fondant-hue-3);
    color: #fff;
    /* Yellow */
}



.event-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-modal {
    background: #fff;
    padding: 2em;
    max-width: 700px;
    width: 90%;
    position: relative;
    border-radius: 16px;
    color: #000;
    max-height: 80vh;
    font-size: 22px;
    animation: qrLightboxEnter 250ms ease-in-out 1 forwards;
}

.event-modal-content {
    line-height: 1.45;
    font-size: 16px;
}

.event-modal-content img {
    max-width: 50%;
    height: auto;
}

.event-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    background: none;
    border: none;
    cursor: pointer;
    color: #000;
}

/* ## Releases and News  */
.releases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 18px;
    grid-row-gap: 20px;
    margin: 24px 0;
}

.releases.releases-brand {
    grid-template-columns: repeat(2, 1fr);
}

.release-single {
    border-radius: 20px;
    background: var(--fondant-hue-grey-lite);
    display: block;
    padding: 20px;
    font-size: 18px;
    color: #000;
    line-height: 100%;
    letter-spacing: -0.54px;
    cursor: pointer;
}

.release-thumbnail img {
    height: 180px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.releases.releases-brand .release-thumbnail {
    width: 114px;
    height: 160px;
    overflow: hidden;
    float: left;
    margin-right: 20px !important;
}

.releases.releases-brand .release-thumbnail img {
    height: 100%;
    width: auto;
    display: block;
    margin: 0 auto;
    max-width: none !important;
}

h6.release-title {
    margin: 12px 0 0;
    font-size: 18px;
}

.releases.releases-brand h6.release-title {
    font-size: 22px;
    margin: 20px 0 0 0;
    padding: 0px;
}

.release-date {
    font-size: 14px;
    margin: 0px;
    padding: 4px 0px 0px 0px;
}

.release-single .release-excerpt {
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 100px;
    margin: 0;
    padding: 10px 0 0;
    font-size: 16px;
}

.page-template-page-releases .entry-title {
    background-position: left 30px center;
    padding: 0px 60px 0px 20px;
}

.page-template-page-releases .entry-content {
    max-width: 960px;
    width: 98%;
}

#ripped-article-container {
    background: rgba(255, 255, 255, 0.6);
    color: #000;
    padding: 60px 40px;
    border-radius: 42px;
    margin-top: 40px;
}

#ripped-article-container #ripped-article-featured-image img {
    max-width: 450px;
}

#ripped-article-container p {
    font-size: 24px;
    line-height: 1.3;
}

#ripped-article-container p.has-small-font-size {
    font-size: 16px !important
}

#ripped-article-container h2 {
    margin: 0 0 12px 0;
    font-size: 36px;
    font-weight: 900;
}

#ripped-article-container h3 {
    font-size: 28px !important;
    font-weight: 700;
    text-transform: capitalize;
}

#ripped-article-container .stat-wrapper {
    float: left;
    width: 33%;
    padding: 0 20px 0 0;
    margin-bottom: 48px
}

#ripped-article-container h3.stats-box-header {
    font-size: 18px !important;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
}

.stats-box {
    border: 2px solid #ff5077;
    padding: 20px;
    font-family: var(--tfnt-cnd);
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    margin: 0px auto;
    max-width: 500px;
}

#ripped-article-container h2#ripped-article-subtitle span {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #000;
}

#ripped-article-container h2#ripped-article-title {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid #000;
    line-height: 1.3;
}

#ripped-article-container img {
    margin: 42px auto;
    display: block;
}

#ripped-article-body h2:last-of-type,
#ripped-article-body ul:last-of-type {
    display: none;
}

/* ## QR Codes  */
.shop-this-brand-qr {
    position: absolute;
    top: 52px;
    right: 0px;
    border-radius: 50px 0px 0px 50px;
    background: rgba(18, 18, 18, 0.5);
    color: #fff;
    width: 249px;
    height: 98px;
    padding: 0 0 0 18px;
    z-index: 99;
    cursor: pointer;
}

.release-single .qr-code-link {
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--fondant-hue-4);
    width: 130px;
    height: 130px;
    background-color: #fff;
    background-image: url(images/qr-bg.webp);
    background-size: cover;
    display: block;
    margin: 0 auto;
}

.release-single .qr-code-link img {
    width: 91px;
    height: auto;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    transform: translateY(12px);
    aspect-ratio: 1 / 1;
}

.shop-this-brand-qr.brand-parent .brand-qr-code-link-image {
    animation: fadeInRight 750ms ease 250ms 1 forwards;
    opacity: 0;
}

.shop-this-brand-qr.brand-parent .brand-qr-code-link-text {
    animation: fadeInRight 1050ms ease 350ms 1 forwards;
    opacity: 0;
}

.shop-this-brand-qr-inner {
    display: flex;
    width: 249px;
    height: 98px;
    border-radius: 50px 0px 0px 50px;
    align-items: center;
    justify-content: flex-start;
}

.shop-this-brand-qr .brand-qr-code-link-image {
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--fondant-hue-4);
    width: 70px;
    height: 72px;
    background-color: #fff;
    background-image: url(images/qr-bg.webp);
    background-size: cover;
    display: block;
}

.shop-this-brand-qr .brand-qr-code-link-image img {
    width: 48px;
    height: auto;
    transform: translate(7px, 8px);
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.shop-this-brand-qr .brand-qr-code-link-text {
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    display: inline-block;
    padding-left: 18px;
    letter-spacing: 0.22px;
}

.fanatics-lightbox,
.qr-code-lightbox {
    position: absolute;
    top: -90000px;
    left: -90000px;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--fondant-hue-1);
    width: 32vw;
    transition: all 5000ms ease;
    display: none;
    flex-direction: column;
    border-radius: 40px;
    box-shadow: 0px 0px 60px 2px rgba(0, 0, 0, 0.4);
    transform: scale(0);
    opacity: 0;
    animation: qrLightboxEnter 250ms ease-in-out 1 forwards;
    padding-bottom: 24px;
}

.release-lightbox,
.iframe-lightbox {
    top: 10vh;
    left: 5vw;
    width: 88vw;
}

.qr-code-lightbox.qr-code-page {
    animation: qrLightboxEnter 250ms ease-in-out 1500ms 1 forwards;
}

.fanatics-lightbox.flex-visible {
    display: flex !important;
    position: fixed;
    top: 30vh;
    left: 36vw;
}

.qr-code-lightbox img.qr-code-img {
    width: 142px;
    height: auto;
    transform: translate(0px, 24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.qr-code-lightbox p {
    opacity: 0;
    width: 320px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.96px;
    text-align: center;
    line-height: 140%;
    margin: 0 0 12px 0;
    color: #FFF;
    animation: qrCodePgEntry 950ms ease-in-out 450ms 1 forwards;
    transform-origin: bottom;
}

.qr-code-lightbox p.qr-code-img-container {
    animation: qrCodeEntry 750ms ease-in-out 200ms 1 forwards;
    transform-origin: center;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--fondant-hue-4);
    width: 200px;
    height: 200px;
    background-color: #fff;
    background-image: url(images/qr-bg.webp);
    background-size: cover;
    margin-bottom: 24px;
}

.fanatics-lightbox p.close {
    text-align: right;
    opacity: 0;
    animation: qrCodeEntry 750ms ease-in-out 50ms 1 forwards;
    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    right: -15.5vw;
    top: -14px;
    cursor: pointer;
}

.release-lightbox p.close,
.iframe-lightbox p.close {
    right: -45vw;
    margin: 0;
}

.fanatics-lightbox p.close img {
    width: 24px;
    display: inline;
    filter: brightness(0.3);
}

.qr-code-lightbox p.qr-code-text-container {
    padding: 0px 10px 0px;
}

.lightbox-visible {
    opacity: 0.3 !important;
    transition: all 150ms ease-in-out;
}

.background-overlay.lightbox-visible {
    opacity: 0.01 !important;
}

.lightbox-visible .brand-cover {
    opacity: 0.4 !important;
}

.release-single.lightbox-visible-opaque {
    background: #a9b4bf57 !important;
}

.release-container {
    position: relative;
    width: 100%;
    max-width: 767px;
    margin: 10px auto 40px;
}

@keyframes pulsing {
    0% {
        transform: scale(.98);
        box-shadow: 0 0 0px 0px rgba(226, 7, 19, 1);
    }

    10% {
        transform: scale(1);
    }

    90% {
        transform: scale(1);
        box-shadow: 0 0 0 50px rgba(226, 7, 19, 0)
    }

    100% {
        transform: scale(.98);
        box-shadow: 0 0 0 50px rgba(226, 7, 19, 0)
    }
}

@keyframes buttonTap {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 255, 255, 1);
        transform: scale(1);
    }

    10% {
        transform: scale(0.85);
    }

    30% {
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 56px 50px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 56px 50px rgba(255, 255, 255, 0);
    }
}

@keyframes buttonTapScroll {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 255, 255, 1);
    }

    50% {
        box-shadow: 0 0 56px 50px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 56px 50px rgba(255, 255, 255, 0);
    }
}

@keyframes backgroundSizeAnimation {
    from {
        background-size: 120%;
    }

    to {
        background-size: 110%;
    }
}

@keyframes backgroundVideoAnimation {
    from {
        width: 120%;
    }

    to {
        width: 100%;
    }
}

@keyframes singleImageSizeAnimation {
    from {
        transform: scale(0.95);
    }

    to {
        transform: scale(1.05);
    }
}

@keyframes qrLightboxEnter {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes qrCodePgEntry {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes qrCodeEntry {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: scale(0);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: scale(1);
    }

    55% {
        animation-timing-function: ease-in;
        transform: scale(0.7);
    }

    72% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }

    81% {
        animation-timing-function: ease-in;
        transform: scale(0.84);
    }

    89% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }

    95% {
        animation-timing-function: ease-in;
        transform: scale(0.95);
    }

    100% {
        animation-timing-function: ease-out;
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*--------------------------------------------------------------
## Blog and Archive
--------------------------------------------------------------*/
body:is(.blog, .archive) .site-main .posts-and-sidebar {
    margin: 0px auto;
}

body:is(.blog, .archive) .site-main article {
    border-bottom: 1px solid var(--fondant-hue-grey-lite);
    padding: 20px 0px;
}

body:is(.blog, .archive) .site-main article:first-of-type {
    border-top: none;
    margin-top: 20px;
}

body:is(.blog, .archive) .entry-header {
    background-color: transparent;
    padding: unset;
    background-image: unset;
}

body:is(.blog, .archive) .site-main article .entry-header a {
    text-decoration: none;
}

body:is(.blog, .archive) .site-main article .entry-header a:hover {
    text-decoration: underline;
}

body:is(.blog, .archive) .entry-title {
    text-transform: none;
    margin-bottom: 4px;
}

body:is(.blog, .archive) .entry-title a {
    color: var(--fondant-hue-1);
}

body:is(.blog, .archive) .entry-content {
    padding: 0;
}

body:is(.blog, .archive) .entry-content>* {
    margin-bottom: 4px;
}

body:is(.blog, .archive) .entry-content> :first-child,
body:is(.blog, .archive) .entry-content> :nth-child(2) {
    margin-bottom: 8px;
}

body:is(.blog, .archive) .entry-content>p:last-child {
    margin-bottom: 4px;
}

.navigation.pagination {
    padding: 20px 0px;
    text-align: center;
}

/*--------------------------------------------------------------
## Front Page
--------------------------------------------------------------*/
body.home,
body.page-template-page-entry {
    overflow: hidden;
}

body.home .site {
    overflow-y: hidden !important;
}

body.home .site-header,
body.page-template-page-entry .site-header {
    display: none;
}

body.home .site-content,
body.page-template-page-entry .site-content {
    padding: 0;
    margin: 0;
}

body.home .entry-content,
body.page-template-page-entry .entry-content {
    margin: 0 auto;
    padding: 0;
    display: flex;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
}

body.home .entry-content .wp-block-cover,
body.page-template-page-entry .entry-content .wp-block-cover {
    min-height: 150vh;
    width: 100%;
    transform: scale(1.03);
}

body.home .entry-content .wp-block-button,
body.page-template-page-entry .entry-content .wp-block-button {
    position: relative;
    transition: all 250ms ease-in-out;
}

body.home .entry-content .wp-block-button__link,
body.page-template-page-entry .entry-content .wp-block-button__link {
    position: relative;
    box-shadow: 0 0 0px 0px rgba(226, 7, 19, 1);
    animation: pulsing 2.5s infinite;
}

body.home .entry-content .wp-block-button__link:focus,
body.page-template-page-entry .entry-content .wp-block-button__link:focus {
    animation: buttonTap 800ms ease-out 0s 1 normal forwards;
}

body.page-template-page-portal .site-header {
    background-color: transparent;
}

body.page-template-page-portal .site-header .site-branding {
    padding-top: 24px;
}

body.page-template-page-portal .site-content {
    margin-top: 24px
}

body.page-template-page-portal .site-tagline {
    display: block;
}

body.page-template-page-portal {
    margin: 0;
}

body.page-template-page-portal .entry-content {
    width: 100%;
    max-width: 1440px;
}

.front-button-container {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.front-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    color: white;
    font-size: 24px;
    font-family: "Nunito Sans", "Helvetica", "Arial", sans-serif;
    pointer-events: auto;
}

.front-overlay h2 {
    padding: 110px 48px 69px 40px;
    flex-grow: 1;
    margin: 0;
    transform: translateY(1px);
    font-size: 62px;
    letter-spacing: -1.86px;
}

.front-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    display: block;
}

.front-button-full {
    width: 100%;
    clear: both;
    height: 30vh;
}

.front-button-half {
    width: 50%;
    float: left;
    height: 28vh;
}

.front-button-full.front-button-releases {
    height: 14.75vh;
    min-height: 260px;
}

.front-button-full.front-button-releases .front-overlay {
    align-items: center;
}

.front-button-full.front-button-releases .front-overlay h2 {
    padding: 0vh 0px 0px 40px
}

.front-button-full.front-button-releases .front-overlay h2 span {
    display: block;
    padding: 18px 0px 0px 0px;
    font-size: 24px;
    font-weight: 700;
    line-height: 100%;
    /* 24px */
    letter-spacing: -0.72px;
}

.front-button-full.front-button-releases .front-overlay img {
    width: auto;
    padding-right: 100px;
    max-height: 200px;
}

.front-button-container img.front-button-bg {
    width: 104%;
    margin: 0;
    max-width: none;
    transform: translate(-2px, -2px);
}

.entry-content.button-3 .front-button-container {
    height: 47vh;
    min-height: 640px;
}

.entry-content.button-3 .front-button-container:first-child {
    height: 42.1vh;
}

@media only screen and (min-width: 1280px) {
    body.page-template-page-portal .entry-content.button-3 img {
        height: auto;
        width: 102%;
    }
}

.entry-content.button-3 .front-button-container:nth-child(4),
.entry-content.button-3 .front-button-container:nth-child(4) img,
.entry-content.button-3 .front-button-container:nth-child(4) .front-overlay {
    display: none !important;
}

/*--------------------------------------------------------------
# Site Footer
--------------------------------------------------------------*/
.site-footer {
    background-color: var(--fondant-hue-2);
}

.site-footer-inner {
    margin: 0px auto;
    font-size: 14px;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

.wp-block-embed iframe {
    display: block;
    margin: 0px auto;
}

.wp-block-embed.wp-embed-aspect-4-5 iframe {
    aspect-ratio: 4 / 5;
    max-width: 560px;
}

.wp-block-embed.wp-embed-aspect-16-9 iframe {
    aspect-ratio: 16 / 9;
    max-width: 960px;
}

.wp-block-embed.wp-embed-aspect-9-16 iframe {
    aspect-ratio: 9 / 16;
    max-width: 360px;
}

.wp-block-embed.wp-embed-aspect-1-1 iframe {
    aspect-ratio: 1 / 1;
    max-width: 640px;
}

.wp-block-embed .wp-element-caption {
    text-align: center;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
    transition: all 150ms linear;
    transform-origin: center;
}

.custom-logo-link:active {
    transform: scale(.85);
}

.background-overlay {
    z-index: 3;
}

.site {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
}

.fanatics-lightbox.flex-visible {
    z-index: 80;
}

.thumbnail-video-wrapper img,
.thumbnail-video-wrapper video {
    z-index: 15;
    position: relative;
}

.thumbnail-video-wrapper .video-button-controls {
    z-index: 20;
}

@media only screen and (max-width: 925px) {
    h1 {
        font-size: 54px;
        letter-spacing: -0.82px;
    }

    .brand-posts {
        margin: 40px auto 0;
        transform: translateX(0px);
    }
}

@media only screen and (max-width: 860px) {

    body,
    button,
    input,
    select,
    optgroup,
    textarea {
        font-size: 22px;
    }

    .site-content {
        margin-top: 52px;
    }

    h1 {
        font-size: 40px;
        letter-spacing: -0.82px;
    }

    h1>span {
        font-size: 18px;
        padding: 6px 0px;
        font-weight: 700;
        display: block;
    }

    h2 {
        font-size: 36px;
        letter-spacing: -1.22px;
    }

    h3 {
        font-size: 32px;
        letter-spacing: -1.2px;
    }

    h4 {
        font-size: 28px;
        letter-spacing: -0.95px;
    }

    h5 {
        font-size: 16px;
        letter-spacing: -0.54px;
    }

    h6 {
        font-size: 14px;
        letter-spacing: -0.66px;
    }

    .site-header-inner {
        padding: 48px 40px;
    }

    .site-tagline {
        margin: 20px 0 0;
        float: left;
        text-align: left;
        max-width: 100%;
        padding-left: 60px;
        padding-right: 20px;
    }

    .front-overlay h2 {
        padding: 111px 0px 48px 30px;
        font-size: 28px;
    }

    .front-overlay.front-overlay-news h2 {
        padding: 80px 0px 48px 30px;
    }

    .page-title a,
    .entry-title a {
        background-position: left 30px top 10px;
        background-size: 20px auto;
        padding: 0px 20px 0px 76px;
    }

    body.admin-bar .entry-header.fixed-entry-header {
        transform: translateY(0);
    }

    .entry-content {
        width: 90%;
    }

    .video-posts .first-post {
        max-width: 70%;
    }

    .link-to-glossary a {
        font-size: 36px;
    }

    .definition-list .excerpt {
        line-height: 142%;
    }

    .thumbnail-video-wrapper {
        margin: 42px auto 16px;
    }

    .video-nav {
        margin-top: 20px;
    }

    .brand-posts {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-navigation button,
    .brand-menu li a,
    .definition-list .excerpt {
        font-size: 14px;
    }

    .brand-navigation button,
    .brand-menu li a {
        padding: 11px 18px;
        font-weight: 500;
        letter-spacing: 0px;
        border-width: 1px !important
    }

    .brand-menu li a .long-title {
        display: none;
    }

    .brand-menu li a .short-title {
        display: inline;
    }

    .brand-cover,
    .brand-cover-overlay {
        background-size: cover;
        height: 450px;
        padding: 21px 0px !important;
    }

    .brand-logo {
        height: auto;
        width: 45%;
    }

    .brand-cover.cover-type-image .brand-logo {
        height: auto;
        width: 33%;
    }

    .brand-content-primary :is(em, i) {
        font-size: 32px;
    }

    .brand-content-primary {
        width: 52%;
        font-size: 18px;
        padding-top: 0;
    }

    .brand-content-secondary {
        width: 40%;
        font-size: 14px;
        line-height: 120%;
    }

    .brand-content-secondary {
        margin: 0 0 18px 0;
    }

    .brand-content-secondary :is(em, i) {
        font-size: 18px
    }

    .event .event-image {
        border-radius: 36px 36px 0px 0px;
        background-size: cover;
        height: 125px;
    }

    .event-content {
        padding: 15px 15px;
    }

    .event h2 {
        font-size: 16px;
        line-height: 110%;
        letter-spacing: -0.34px;
        margin: 0;
    }

    .event p {
        font-size: 16px;
        font-weight: 300;
        line-height: 115%;
        letter-spacing: -0.34px;
    }

    .time-label {
        top: 20px;
        left: 20px;
    }

    #wpadminbar {
        position: absolute !important
    }

    .releases {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 600px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    .site-header-inner {
        padding: 0px 40px;
    }

    .site-branding {
        padding-top: 0;
    }

    body.page-template-page-portal .site-tagline {
        display: none;
    }

    .front-button-half {
        width: 100%;
        float: none;
        max-height: 300px;
    }

    .brand-posts,
    .event-list,
    .releases {
        grid-template-columns: repeat(1, 1fr);
    }
}

.scroll-buttons {
    position: fixed;
    right: 20px;
    top: 60%;
    transform: translateY(-60%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

.scroll-buttons button {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background-color: #32a6df;
    color: transparent;
    font-size: 8px;
    cursor: pointer;
    box-shadow: 0 0px 6px rgba(255, 255, 255, 0.3);
    background: url(images/scroll-arrows.svg) no-repeat center center;
    background-size: 100%;
}

.scroll-buttons button:focus {
    animation: buttonTapScroll 800ms ease-out 0s 1 normal forwards;
}

.scroll-buttons button#scrollDown {
    transform: rotate(180deg);
    transform-origin: center;
}

.background-overlay {
    z-index: 3;
}

.site {
    z-index: 10;
    position: relative;
}

.fanatics-lightbox.flex-visible {
    z-index: 20;
}