/**
 * Variables naming rule: --{selector aka component aka namespace}-{css property}-{pseudo class or media query name} eg. --p-background-color-hover 
 * NOTE: Within the component don't use any name spacing eg. component header don't use --header-color just use --color the namespace can be added by the Shadow as an html attribute
 * - if a component holds other components or nodes you can declare or remap classes eg. :host > h1 {--color: var(--h1-color, white);}
 * - if a component holds other components you should share the attribute namespace with its children
 */
html {
    --a-color-hover: #ffffff;
    --a-color: var(--color, white);
    --a-display: block;
    --a-margin: 0;
    --a-text-align: center;
    --a-text-decoration-hover: none;
    --a-text-decoration: underline;
    --a-text-underline-offset: 0.2em; /* should be 6px but not visible */
    --animation: none;
    --any-a-display: inline;
    --background-color: #1F1F67;
    --blog-color-secondary: var(--color);
    --blog-color: #ffffff;
    --button-background-color: var(--color);
    --button-color: var(--background-color);
    --button-height: auto;
    --button-padding: 1em;
    --button-width: auto;
    --carousel-a-text-decoration-hover: var(--a-text-decoration-hover);
    --carousel-a-text-decoration: var(--a-text-decoration);
    --carousel-a-text-underline-offset: var(--a-text-underline-offset);
    --carousel-color-hover: var(--color-hover);
    --carousel-color: var(--color);
    --carousel-h3-font-family: var(--font-family-bold);
    --carousel-h3-font-size: var(--font-size);
    --carousel-h3-margin: 1em;
    --carousel-h3-text-transform: uppercase;
    --carousel-navigation-background-color-focus: rgba(31, 31, 103, .8);
    --carousel-navigation-background-color: rgb(200,200,200,0.2);
    --carousel-navigation-button-size: 48px;
    --carousel-navigation-color-focus: var(--color);
    --carousel-navigation-color: var(--background-color);
    --carousel-navigation-icon-size: 24px;
    --carousel-p-margin: 0;
    --carousel-pagination-background-color-selected: rgb(200,200,200);
    --carousel-pagination-background-color: rgba(31, 31, 103, .8);
    --carousel-pagination-bottom: 10%;
    --carousel-pagination-position: absolute;
    --carousel-pagination-width: 10px;
    --carousel-transition-duration: 1.6s;
    --color-hover-secondary: var(--color);
    --color-hover: #ffffff;
    --color-secondary: #1F1F67;
    --color: rgb(188, 198, 214);
    --contactform-balloon-color: black;
    --contactform-button-background-color-hover: #ffffff;
    --contactform-button-background-color: var(--color);
    --contactform-button-color-hover: #000000 !important;
    --contactform-button-padding: 1em 3em;
    --contactform-button-width: auto;
    --contactform-color: var(--background-color);
    --contactform-font-size: 0.7em;
    --contactform-font-weight: bold;
    --contactform-input-background: var(--color);
    --contactform-input-color: var(--background-color);
    --contactform-input-padding: 0;
    --contactform-input-width-mobile: 100%;
    --contactform-input-width: 100%;
    --contactform-label-color: var(--color);
    --contactform-label-font-family-bold: var(--font-family);
    --contactform-width-mobile: 90%;
    --contactform-width: 60%;
    --content-spacing-mobile: 0;
    --content-spacing: 2em;
    --content-width-mobile: 100%;
    --content-width-not-web-component-mobile: 90%;
    --content-width-not-web-component: 65%;
    --content-width: 45%;
    --cookie-banner-background-color: var(--color);
    --cookie-banner-border-top: 3px solid var(--color-secondary);
    --cookie-banner-box-shadow: 0px -3px 10px var(--color-secondary);
    --cookie-banner-button-background-color-hover: var(--color-secondary);
    --cookie-banner-button-background-color: var(--color-secondary);
    --cookie-banner-button-border-bottom: 0;
    --cookie-banner-button-border-left: 0;
    --cookie-banner-button-border-right: 0;
    --cookie-banner-button-border-top: 0;
    --cookie-banner-button-color-hover: var(--color-hover);
    --cookie-banner-button-color: var(--color);
    --cookie-banner-color: var(--background-color);
    --cookie-banner-font-size: 1em;
    --cta-h4-color: var(--color);
    --cta-p-color: var(--color);
    --cta-text-transform: rotate(15deg);
    --flex-grow: 1;
    --flip-img-height: 25vw;
    --flip-img-max-height-mobile: 300px;
    --flip-img-max-height: 300px;
    --flip-img-max-width-mobile: 300px;
    --flip-img-max-width: 300px;
    --flip-img-width: 25vw;
    --flip-tile-background-color: var(--color-secondary);
    --flipcard-wrapper-background-color: var(--background-color);
    --flipcard-wrapper-justify-content: center;
    --flyer-duration-mobile: 0.8s;
    --flyer-duration: 1.2s;
    --flyer-timing-mobile: cubic-bezier(0.43, 1.77, 0, 0.43);
    --flyer-timing: cubic-bezier(0.88, 1.96, 0, 0.15);
    --font-family-secondary: var(--font-family);
    --font-family: 'Work Sans', sans-serif;
    --font-size-mobile: min(18px, 5vw);
    --font-size: max(18px, 0.9vw);
    --font-weight: 400;
    --font-weight-secondary: 800;
    --footer-a-display: inline;
    --footer-a-link-display-mobile: block;
    --footer-a-link-display: inline;
    --footer-a-link-font-size-mobile: var(--footer-a-link-font-size);
    --footer-a-link-font-size: 0.8rem;
    --footer-a-text-underline-offset: var(--a-text-underline-offset);
    --footer-align-content: flex-start;
    --footer-background-color: rgba(188, 198, 214);
    --footer-box-sizing: border-box;
    --footer-color-hover: var(--color-hover);
    --footer-color: var(--color-secondary);
    --footer-content-width-mobile: 100%;
    --footer-content-width-not-web-component-mobile: var(--content-width-not-web-component-mobile);
    --footer-content-width-not-web-component: var(--content-width-not-web-component);
    --footer-content-width: 100%;
    --footer-flex-wrap: wrap;
    --footer-font-size-mobile: var(--footer-a-link-font-size-mobile);
    --footer-font-size: var(--footer-a-link-font-size);
    --footer-font-weight: 800;
    --footer-homepage-background-color: var(--color);
    --footer-homepage-logo-container-justify-content: flex-end;
    --footer-homepage-padding-mobile: 0 10px 5px 0;
    --footer-homepage-padding: var(--footer-padding);
    --footer-justify-content: space-between;
    --footer-logo-align-items: flex-end;
    --footer-logo-container-flex-wrap-mobile: wrap;
    --footer-logo-container-justify-content-wrapped-mobile: space-between;
    --footer-logo-container-justify-content-wrapped: flex-end;
    --footer-logo-height-mobile: max(50px, 15vw);
    --footer-logo-height: max(65px, 8vw);
    --footer-logo-margin-mobile: 8px 0 0;
    --footer-logo-margin: 0 0 -1vw 0;
    --footer-logo-max-height: max(120px, 5vw);
    --footer-logo-padding: 0;
    --footer-min-height-mobile: 50px;
    --footer-min-height: 50px;
    --footer-p-line-height: normal;
    --footer-p-margin: -3px 0px;
    --footer-padding-mobile: 3vh 2vw;
    --footer-padding: calc(2.4vw - 15px) 10px 0 10px;
    --footer-text-align: center;
    --footer-text-decoration-hover: underline;
    --footer-ul-margin-mobile: 0 auto 15px auto;
    --footer-ul-margin: 0 10px;
    --footer-ul-padding: 0;
    --footer-z-index: 0;
    --h1-font-size-mobile: var(--h1-font-size);
    --h1-font-size-mobile: var(--h1-font-size);
    --h1-font-size: min(1.8em, 9vw);
    --h1-font-weight: 800;
    --h2-font-weight: 800;
    --h3-font-weight: 800;
    --h4-font-weight: 800;
    --h5-font-weight: 800;
    --h6-font-weight: 800;
    --h1-line-height-mobile: var(--h1-line-height);
    --h1-line-height: 1.1em;
    --h1-margin-mobile: 0;
    --h1-margin: 2em auto;
    --h1-text-align: center;
    --h1-text-transform: uppercase;
    --h2-font-size-mobile: var(--h2-font-size);
    --h2-font-size: min(1.4em, 9vw);
    --h2-line-height-mobile: var(--h1-line-height-mobile);
    --h2-line-height: var(--h1-line-height);
    --h2-margin-mobile: 0;
    --h2-margin: 2em auto;
    --h2-text-align: var(--h1-text-align);
    --h2-text-transform: uppercase;
    --h2-word-break: break-word;
    --h3-font-size-mobile: var(--h3-font-size);
    --h3-font-size: min(1.2em, 9vw);
    --h3-line-height-mobile: var(--h1-line-height-mobile);
    --h3-line-height: var(--h1-line-height);
    --h3-margin-mobile: 0;
    --h3-margin: 2em auto;
    --h3-text-align: var(--h1-text-align);
    --h3-text-transform: uppercase;
    --h4-font-family: var(--font-family-bold);
    --h4-font-size-mobile: var(--h4-font-size);
    --h4-font-size: min(1em, 9vw);
    --h4-line-height-mobile: var(--h1-line-height-mobile);
    --h4-line-height: var(--h1-line-height);
    --h4-margin-mobile: 0;
    --h4-margin: 2em auto;
    --h4-text-align: var(--h1-text-align);
    --h4-text-transform: uppercase;
    --h5-font-family: var(--font-family-bold);
    --h5-font-size-mobile: var(--h4-font-size-mobile);
    --h5-font-size-mobile: var(--h5-font-size);
    --h5-font-size: var(--h4-font-size);
    --h5-line-height-mobile: var(--h1-line-height-mobile);
    --h5-line-height: var(--h1-line-height);
    --h5-margin-mobile: 1em;
    --h5-margin: 2em auto;
    --h5-text-align: var(--h1-text-align);
    --h5-text-transform: uppercase;
    --h6-font-size-mobile: var(--h4-font-size-mobile);
    --h6-font-size-mobile: var(--h6-font-size);
    --h6-font-size: var(--h4-font-size);
    --h6-line-height-mobile: var(--h1-line-height-mobile);
    --h6-line-height: var(--h1-line-height);
    --h6-margin: 2em auto;
    --h6-margin-mobile: 0;
    --h6-text-align: var(--h1-text-align);
    --h6-text-transform: uppercase;
    --header-a-font-size-open: 0;
    --header-a-font-size: var(--font-size-mobile);
    --header-a-line-height: 1.3em;
    --header-m-navigation-padding-mobile: 3em 0;
    --logo-padding: 1em;
    --logo-padding-mobile: 0 0 0 1em;
    --header-a-menu-icon-margin: 1em;
    --header-a-menu-icon-margin-open-mobile: 1em;
    /*    --header-a-menu-icon-background-color: var(--header-color);
    --header-a-menu-icon-height-open-mobile: 0;
    --header-a-menu-icon-height: min(5px, 0.6vw);
    --header-a-menu-icon-margin-open-mobile: 0;
    --header-a-menu-icon-margin: 0;
    --header-a-menu-icon-padding: 1em;
    --header-a-menu-icon-spacing: min(6px, 1.4vw);
    --header-a-menu-icon-transition: background-color 1.2s ease;
    --header-a-menu-icon-width: min(55px, 16vw);*/
    --logo-width-mobile: 50%;
    --header-a-padding: 0;
    --header-a-text-decoration-hover: none;
    --header-a-text-underline-offset: var(--a-text-underline-offset);
    --header-a-transition: none;
    --header-align-items: start;
    --header-background-animation: 1s ease;
    --header-background-color-open: rgba(188, 198, 214);
    --header-background-color: var(--header-background-color-open);
    --header-color: var(--color-secondary);
    --header-content-spacing-mobile: var(--header-content-spacing);
    --header-content-spacing: 0;
    --header-content-width-mobile: var(--content-width-mobile);
    --header-content-width-not-web-component-mobile: var(--content-width-not-web-component-mobile);
    --header-content-width-not-web-component: var(--content-width-not-web-component-mobile);
    --header-content-width: var(--content-width-mobile);
    --header-flex-direction-mobile: row;
    --header-flex-direction: row;
    --header-height-mobile: auto;
    --header-height: auto;
    --header-intro-p-margin: 0;
    --header-intro-section-width-mobile: var(--content-width-not-web-component-mobile);
    --header-justify-content-mobile: end;
    --header-justify-content: end;
    --header-justify-content: start;
    --header-logo-height: 25vw;
    --header-logo-margin: 10px 0 0;
    --header-logo-max-height: max(100px, 5vw);
    --header-padding-mobile: 0;
    --header-padding: 0;
    --header-text-align: center;
    --header-title-color-nav-open: #009fe3;
    --header-title-color-secondary-nav-open: var(--header-title-color-nav-open);
    --header-title-color: var(--header-title-color-nav-open);
    --header-title-font-family-bold: var(--font-family-bold);
    --header-title-font-size-mobile: var(--h1-font-size-mobile);
    --header-title-font-size: var(--h1-font-size);
    --header-title-line-height-mobile: var(--header-title-line-height);
    --header-title-line-height: var(--h1-line-height);
    --header-title-margin: 0 max(2.2vw, 15px) 30px;
    --header-title-secondary-color-font-family: var(--font-family);
    --header-title-secondary-color-font-size-mobile: var(--header-title-secondary-color-font-size);
    --header-title-secondary-color-font-size: 0.8em;
    --header-title-secondary-color-text-transform: lowercase;
    --header-title-transition: color 0.8s ease;
    --header-transition: background-color 0.3s ease;
    --highlight-list-border-bottom: none;
    --highlight-list-border-top: none;
    --highlight-list-content-spacing: 40px 0;
    --highlight-list-content-width-mobile: 100%;
    --highlight-list-content-width: 80%;
    --highlight-list-flex-direction: column;
    --hr-color: transparent;
    --icon-display: block;
    --icon-height-mobile: 45px;
    --icon-height: 45px;
    --icon-margin: 15px auto 0 auto;
    --icon-width-mobile: 45px;
    --icon-width: 45px;
    --carousel-picture-img-max-height: 60vh;
    --input-background: var(--color);
    --input-box-shadow: none;
    --input-color: var(--background-color);
    --carousel-picture-width: 100vw;
    --macro-carousel-gap: 0 !important;
    --input-margin: -10px;
    --input-width: 100%;
    --li-align-self: flex-start;
    --li-margin: 0 12px;
    --line-height-mobile: 1.2em;
    --line-height: 1.2em;
    --main-padding-mobile: calc(var(--spacer-height-mobile)/2) 0 var(--spacer-height-mobile) 0;
    --main-padding: calc(var(--spacer-height)/2) 0 var(--spacer-height) 0;
    --module-wrapper-margin-mobile: 20% 0 0 0;
    --module-wrapper-margin: 15% 0 0 0;
    --navigation-a-link-font-size-mobile: 1em;
    --navigation-a-link-font-weight: var(--font-weight-secondary);
    --navigation-a-link-font-size-no-scroll-mobile: 1em;
    --navigation-align-items: center;
    --navigation-background-color-mobile: var(--header-background-color);
    --navigation-background-color: var(--header-background-color);
    --navigation-color-hover: var(--color-hover);
    --navigation-color-open: #ffffff;
    --navigation-color: var(--color-secondary);
    --navigation-a-link-color-no-scroll: var(--navigation-color);
    --navigation-a-link-font-weight-no-scroll: 800;
    --navigation-content-spacing: 1em;
    --navigation-font-size: 1em;
    --navigation-font-weight: bold;
    --navigation-justify-content: flex-end;
    --navigation-padding: 1.5em 0;
    --p-date-text-transform: uppercase;
    --p-line-height: var(--line-height);
    --p-margin: 1em 0;
    --p-text-align: left;
    --padding: 15px 0;
    --picture-height: auto;
    --picture-img-max-height: 80vh;
    --picture-img-min-height: auto;
    --picture-margin: var(--content-spacing, unset) auto; /* Warning! Keep horizontal margin at auto, otherwise the content width + margin may overflow into the scroll bar */
    --picture-width-mobile: 100%;
    --picture-width: var(--content-width, 80%);
    --search-button-button-background-color-hover: #ffffff;
    --search-button-button-background-color: var(--color);
    --search-button-button-color-hover: #000000;
    --search-button-button-height: auto;
    --search-button-button-padding: 1em 3em;
    --search-button-button-width: auto;
    --search-button-color: var(--background-color);
    --search-button-margin: 2em;
    --search-button-width: 100%;
    --search-field-background: var(--color);
    --search-field-input-color: var(--background-color);
    --search-field-input-width: 100%;
    --search-field-label-background: var(--background-color);
    --search-field-label-color: var(--color);
    --section-width-mobile: var(--content-width-not-web-component-mobile);
    --spacer-height-mobile: 20vw;
    --spacer-height: 3.5vw;
    --strong-text-transform: uppercase;
    --summary-text-transform: var(--h1-text-transform);
    --tickets-a-display: inline;
    --tickets-a-text-decoration: var(--a-text-decoration);
    --ul-display: flex;
    --ul-text-align: left;
    --video-margin: 70px auto 0 auto;
    --video-width: var(--picture-width);
}