::-moz-selection,
::selection {color: var(--white); background-color: var(--black);}

:root {
  --corridor:   84.8333rem;
  --font:       'Graphik';
  --fancyfont:  'Neue Haas';
}

/* NEUE HAAS */
/* @font-face{
  font-family: "Neue Haas";
  src: 
  url('/carbon/assets/0007e6/00000c/NeueHaasDisplay-Light.woff2') format('woff2'),
  url('/carbon/assets/0007e6/00000c/NeueHaasDisplay-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Neue Haas";
  src: 
  url('/carbon/assets/0007e6/00000c/NeueHaasDisplay-Roman.woff2') format('woff2'),
  url('/carbon/assets/0007e6/00000c/NeueHaasDisplay-Roman.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Neue Haas";
  src: 
  url('/carbon/assets/0007e6/00000c/NHaasGroteskDSPro-65Md.woff2') format('woff2'),
  url('/carbon/assets/0007e6/00000c/NHaasGroteskDSPro-65Md.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Neue Haas";
  src: 
  url('/carbon/assets/0007e7/000001/neue_haas_75.woff2') format('woff2'),
  url('/carbon/assets/0007e7/000001/neue_haas_75.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Neue Haas";
  src: 
  url('/carbon/assets/0007e6/00000c/NeueHaasDisplay-Black.woff2') format('woff2'),
  url('/carbon/assets/0007e6/00000c/NeueHaasDisplay-Black.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
} */


/* 600 700 900 'Neue Haas Grotesk Display Pro'
regular graphik */

* {box-sizing: border-box; outline: none;}

html {font-size: 17px; background-color: var(--white); width: 100%; overflow-x: hidden}
html, body {min-height: 100vh;}

body {padding: 0; margin: 0; font-family: var(--font), 'arial'; color: var(--black); letter-spacing: 0; line-height: 1.33rem; max-width: 100%; font-size: 1rem;}

p {margin: 0 0 1.666rem 0;}
p:last-child {margin-bottom: 0}

ul {margin: 0 0 1.666rem 0;}
  ul li {}

ol {margin: 0 0 1.666rem 0;}
  ol li {}

a {color: var(--black); text-decoration: underline; margin: 0}
a:hover,
a:focus {text-decoration: underline;}
a:active {text-decoration: underline;}
a:visited {color: var(--black)}

.button,
input[type="submit"],
button,
a.button {border: 1px solid #000; font-size: 1rem; line-height: 1; padding: 10px 20px; text-decoration: none; text-transform: uppercase; font-weight: normal; background-color: #fff; color: #000; cursor: pointer; display: inline-block;}

.button:hover,
input[type="submit"]:hover,
button:hover {color: #000; background-color: #fff}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5,.h6 {margin-top: 0; font-family: var(--fancyfont); font-weight: bold}

h1, .h1,
h2.h1                 {font-size: 40px; line-height: 45px; font-weight: 1000; padding-bottom: 29px; padding-top: 54px; margin: 0 0 30px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); text-transform: uppercase;}
h2, .h2               {font-size: 23px; line-height: 26px; margin: 17px 0 21px 0}
h3, .h3               {font-size: 1.38rem; line-height: 1.66rem;}
h4, .h4               {font-size: 1.11rem; line-height: 1.33rem;}
h5, .h5               {font-size: 17px; line-height: 1.4rem; font-weight: bold;}
h6, .h6               {font-size: 1.00rem; line-height: 1.33rem;}

strong {font-weight: bold;}
em {font-style: italic;}

.image {}
  .image img {display: block; height: auto; max-width: 100%; width: auto}

.hide-text {overflow: hidden; text-indent: 100%; line-height: 100%; color: transparent;}

input:-webkit-autofill::first-line,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 1.6666rem var(--white) inset !important; font-family: var(--font) !important; font-size: 1rem !important;}


a.select-field {text-decoration: none !important;}
.select-field * {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--black);}
select {height: 40px; opacity: 0}

.select-field {position: relative; font-size: 0.8888rem; background: transparent; cursor: pointer; display: block; text-decoration: none; color: var(--black); height: 40px;}
.select-field::before,
.expand-form::before {width: 0.6933rem; height: 0.235rem; background-color: var(--caption); mask-image: var(--iconselectarrow); -webkit-mask-image: var(--iconselectarrow); content: ''; position: absolute; right: 0.5555rem; top: 50%; transform: translateY(-50%); z-index: -1; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center;}

.select-field.active {}
.select-field.active::before {transform: translateY(-50%) rotate(180deg);}
  .select-field .select-inner {}
    .select-field .selected {padding: 0.5rem 0.5555rem; border: 0.02777rem solid var(--border);}

    .select-field .options {display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--white); z-index: 1000; border: 0.02777rem solid var(--black); border-top: 0}
    .select-field.active .options {display: block;}
      .select-field .options .option {color: var(--black); padding: 0.2755rem 0.5555rem; display: block; text-decoration: none !important;}
      .select-field .options .option:hover,
      html.focus-active .select-field .options .option:focus-within {background-color: var(--trim); color: var(--black)}
      .select-field .options .option.active {color: var(--black); background-color: var(--white)}


pre {max-width: 100%; white-space: pre-wrap;}
pre.debug {text-decoration: none !important; padding: 15px; font-family: 'Courier New'; font-size: 12px; border: 2px solid rgb(255, 0, 88); border-left-width: 60px; margin: 0; background-color: #fff; color: #333; border-radius: 4px; margin: 10px; position: relative;}
pre.debug * {text-decoration: none !important;}
pre.debug span.emoji {font-size: 36px; line-height: 1; display: block; border-radius: 18px; background-color: #fff; margin-left: -61px; position: absolute;}

.privacy-modal {padding: 25px; background-color: rgba(0, 0, 0, 0.7); position: fixed; bottom: 0; left: 0; width: 100%;}
  .privacy-modal .privacy-modal-inner {}
    .privacy-modal h4 {color: #fff;}
    .privacy-modal p {color: #fff;}
    .privacy-modal p.ack {text-align: right;}
      .privacy-modal p.ack a.button {}


.button,
button {border: 1px solid var(--black); padding: 0 23px; height: 40px; line-height: 40px; text-transform: uppercase;}
.button.icon,
button.icon {padding-left: 55px; background-size: 16px auto; background-repeat: no-repeat; background-position: 23px 50%}

.button.icon-report,
button.icon-report {background-image: url(../../images/icon-report.png)}
