/**
  * 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-default-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
  */
/* font tracking */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=15e0d230-9ed9-11ec-b670-06c4e8753e28");
:root {
  --footer-default-invert-background-color-custom:var(--m-black);
  --footer-default-invert-orange-background-color-custom: var(--color-secondary);
  --header-default-a-logo-top-custom: calc(62px / 2 - 90px / 2); /* header.height / 2 - logo.height / 2 */
  --header-default-a-menu-icon-background-color-custom:var(--color);
  --header-default-background-color-custom: var(--background-color);
  --header-default-border-bottom-custom: 1px solid var(--m-gray-300);
  --header-default-logo-width-custom:190px;
  --navigation-default-color-custom: var(--color);
  --teaser-tile-background-color-custom: var(--m-white);
  --emotion-pictures-with-title-bg-color-custom: var(--m-black);
  --emotion-pictures-with-title-bg-background-color-custom: var(--m-white);
  --search-input-width: 10em;
  --header-default-content-width: max(calc(1200px - var(--content-spacing) * 2), 60%);
  --emotion-pictures-with-video-bg-color-custom: var(--m-black);
  --emotion-pictures-with-video-bg-background-color-custom: var(--m-white);
  --emotion-pictures-with-title-bg-line-height-secondary-custom:1.5em;
  --input-type-submit-margin: 0 0.5em 0 0;
  --teaser-tile-h5-margin-custom: 0 0 0.5em;
}