/* fonts */

@font-face {
  font-family: 'wuerth-book';
  src: url("../fonts/wuerthbook/wuerthbook-webfont.eot");
  src: url("../fonts/wuerthbook/wuerthbook-webfont.eot?#iefix") format("embedded-opentype"),
  url("../fonts/wuerthbook/wuerthbook-webfont.woff") format("woff"),
  url("../fonts/wuerthbook/wuerthbook-webfont.ttf") format("truetype"),
  url("../fonts/wuerthbook/wuerthbook-webfont.svg#wuerthbook-webfont") format("svg");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'wuerth-bold';
  src: url("../fonts/wuerthbold/wuerthbold-webfont.eot");
  src: url("../fonts/wuerthbold/wuerthbold-webfont.eot#iefix") format("embedded-opentype"),
  url("../fonts/wuerthbold/wuerthbold-webfont.woff") format("woff"),
  url("../fonts/wuerthbold/wuerthbold-webfont.ttf") format("truetype"),
  url("../fonts/wuerthbold/wuerthbold-webfont.svg#wuerthbold-webfont") format("svg");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'wuerth-extra-bold-cond';
  src: url("../fonts/wuerthextraboldcond/wuerthextraboldcond-webfont.eot");
  src: url("../fonts/wuerthextraboldcond/wuerthextraboldcond-webfont.eot?#iefix") format("embedded-opentype"),
  url("../fonts/wuerthextraboldcond/wuerthextraboldcond-webfont.woff") format("woff"),
  url("../fonts/wuerthextraboldcond/wuerthextraboldcond-webfont.ttf") format("truetype"),
  url("../fonts/wuerthextraboldcond/wuerthextraboldcond-webfont.svg#wuerthextraboldcond-webfont") format("svg");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'wuerthicons';
  src:
    url('../fonts/wuerthicons/wuerthicons.ttf') format('truetype'),
    url('../fonts/wuerthicons/wuerthicons.woff') format('woff'),
    url('../fonts/wuerthicons/wuerthicons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --global__color--primary: #CC0000;
  --global__color--primary--highlight: #E60000;

  --global__color--secondary: #009EE0;
  --global__color--secondary--highlight: #00b0fa;

  --global__color--contrast--0: #FFFFFF;
  --global__color--contrast--200: #F0F0F0;
  --global__color--contrast--300: #ECECEC;
  --global__color--contrast--400: #D8D8D8;
  --global__color--contrast--900: #202020;
  --global__color--contrast--999: #000000;

  --global__error--color: #000000;
  --global__error--background-color: #f7a707;
}

:root {
  --expo__background-color: #000;
  --expo__color: var(--global__color--contrast--900);
  --expo__font-family: "wuerth-book", Helvetica, Verdana, Arial, sans-serif;
  --expo__font-family__headline: "wuerth-extra-bold-cond", Helvetica, Verdana, Arial, sans-serif;
  --expo__font-family__subheadline: "wuerth-bold", Helvetica, Verdana, Arial, sans-serif;
  --expo__font-family__icons: "wuerthicons";

  --expo__scrollbarTrack_background-color: var(--global__color--contrast--300);
  --expo__scrollbarThumb_background-color: var(--global__color--contrast--400);

  --expo__loader_border-color: 8rem solid var(--global__color--primary);
  --expo__loader__background_background-color: var(--global__color--contrast--0);


  --expo__btn--primary_color: var(--global__color--contrast--0);
  --expo__btn--primary_background-color: var(--global__color--secondary);
  --expo__btn--primary_border-radius: 0;
  --expo__btn--primary_border: 0;
  --expo__btn--primary_transition: background-color 100ms ease, color 100ms ease, border 100ms ease;
  --expo__btn--primary_padding: 6rem 12rem;
  --expo__btn--primary_font-family: var(--expo__font-family__headline);
  --expo__btn--primary_font-size: 20rem;
  --expo__btn--primary_font-weight: 300;
  --expo__btn--primary_line-height: 1.7;
  --expo__btn--primary_text-transform: uppercase;

  --expo__btn--primary--hover_color: var(--global__color--contrast--0);
  --expo__btn--primary--hover_background-color: var(--global__color--secondary--highlight);
  --expo__btn--primary--hover_border: 0;

  --expo__btn--primary--active_color: var(--global__color--contrast--0);
  --expo__btn--primary--active_background-color:  var(--global__color--secondary--highlight);
  --expo__btn--primary--active_border: 0;

  --expo__btn--primary--disabled_color: var(--global__color--secondary);
  --expo__btn--primary--disabled_background-color: transparent;
  --expo__btn--primary--disabled_border: 2px solid var(--global__color--secondary);
  --expo__btn--primary--disabled_opacity: .5;


  --expo__btn--secondary_color: var(--global__color--contrast--0);
  --expo__btn--secondary_background-color: var(--global__color--primary);
  --expo__btn--secondary_border-radius: 0;
  --expo__btn--secondary_border: none;
  --expo__btn--secondary_transition: background-color 100ms ease, color 100ms ease, border 100ms ease;
  --expo__btn--secondary_padding: 6rem 12rem;
  --expo__btn--secondary_font-family: var(--expo__font-family__headline);
  --expo__btn--secondary_font-size: 20rem;
  --expo__btn--secondary_line-height: 1.7;
  --expo__btn--secondary_text-transform: uppercase;

  --expo__btn--secondary--hover_color: var(--global__color--contrast--0);
  --expo__btn--secondary--hover_background-color: var(--global__color--primary--highlight);
  --expo__btn--secondary--hover_border: none;

  --expo__btn--secondary--active_color: var(--global__color--contrast--0);
  --expo__btn--secondary--active_background-color: var(--global__color--primary--highlight);
  --expo__btn--secondary--active_border: none;

  --expo__btn--secondary--disabled_color: var(--global__color--contrast--0);
  --expo__btn--secondary--disabled_background-color: var(--global__color--primary--highlight);
  --expo__btn--secondary--disabled_border: none;
  --expo__btn--secondary--disabled_opacity: .5;;


  --expo__btn--icon_color: var(--global__color--primary);
  --expo__btn--icon_background-color: transparent;
  --expo__btn--icon_border-radius: 0px;
  --expo__btn--icon_border: none;
  --expo__btn--icon_transition: background-color 300ms ease;
  --expo__btn--icon_padding: 12rem 0;
  --expo__btn--icon_font-size: 16rem;
  --expo__btn--icon_line-height: 24rem;

  --expo__btn--icon--hover_color: var(--global__color--primary--highlight);
  --expo__btn--icon--hover_background-color: transparent;
  --expo__btn--icon--hover_border: none;

  --expo__btn--icon--active_color: var(--global__color--primary--highlight);
  --expo__btn--icon--active_background-color: transparent;
  --expo__btn--icon--active_border: none;

  --expo__btn--icon--disabled_color: var(--global__color--primary--highlight);
  --expo__btn--icon--disabled_background-color: transparent;
  --expo__btn--icon--disabled_border: none;
}
