@charset "UTF-8";
/*
*
*   Collider Custom CSS
*   Base Framework
*   Author: Andreas Beck
*
*/
/* -- Reset -- */
* {
  padding: 0;
  margin: 0;
  /* -webkit-tap-highlight-color: transparent; */
}
*:focus {
  outline: none;
}
*,
::before,
::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html[dir="rtl"] {
  direction: rtl;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  word-break: break-word;
}
html,
body {
  height: 100%;
  width: 100%;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
}
input.formText,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
select,
input {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
button {
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}
textarea {
  resize: vertical;
  overflow: auto;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
img.responsive {
  width: 100% !important;
  height: auto !important;
}
/* Accessibility */
[aria-busy="true"] {
  cursor: progress;
}
[aria-controls] {
  cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}
[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}
/* Correctures */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}
table {
  border-collapse: collapse;
}
img {
  border-style: none;
}
iframe {
  border-style: none;
}
nav ol,
nav ul {
  list-style: none;
  padding: 0;
}
/* -- Experimental Features  -- */
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
}
a {
  color: #000;
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Anton', Arial, Helvetica, sans-serif;
  line-height: 125%;
  text-transform: uppercase;
  color: #2D3C4B;
  font-weight: normal;
}
h1.line,
h2.line,
h3.line,
h4.line,
h5.line,
h6.line {
  position: relative;
  padding-bottom: 30px;
}
h1.line::before,
h2.line::before,
h3.line::before,
h4.line::before,
h5.line::before,
h6.line::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #FFA600;
  width: 60px;
}
h1.inverted,
h2.inverted,
h3.inverted,
h4.inverted,
h5.inverted,
h6.inverted {
  color: #FFFFFF;
}
h1 .highlight,
h2 .highlight,
h3 .highlight,
h4 .highlight,
h5 .highlight,
h6 .highlight {
  font-family: 'IBM Plex', Arial, Helvetica, sans-serif;
  display: inline-block;
  background: #FFA600;
  color: #2D3C4B;
  font-size: 20px;
  font-size: 1.25rem;
  padding: 15px 25px;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 20px;
}
@media screen and (min-width: 760px) {
  h1 .highlight,
  h2 .highlight,
  h3 .highlight,
  h4 .highlight,
  h5 .highlight,
  h6 .highlight {
    font-size: 40px;
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1320px) {
  h1 .highlight,
  h2 .highlight,
  h3 .highlight,
  h4 .highlight,
  h5 .highlight,
  h6 .highlight {
    font-size: 50px;
    font-size: 3.125rem;
  }
}
h1,
.like-h1 {
  font-size: 30px;
  font-size: 1.875rem;
  margin-bottom: 40px;
}
@media screen and (min-width: 760px) {
  h1,
  .like-h1 {
    font-size: 40px;
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1320px) {
  h1,
  .like-h1 {
    font-size: 50px;
    font-size: 3.125rem;
  }
}
h2,
.like-h2 {
  font-size: 40px;
  font-size: 2.5rem;
  margin-bottom: 50px;
}
@media screen and (min-width: 760px) {
  h2,
  .like-h2 {
    font-size: 60px;
    font-size: 3.75rem;
  }
}
@media screen and (min-width: 1320px) {
  h2,
  .like-h2 {
    font-size: 80px;
    font-size: 5rem;
  }
}
h3,
.like-h3 {
  font-size: 30px;
  font-size: 1.875rem;
  margin-bottom: 25px;
}
@media screen and (min-width: 760px) {
  h3,
  .like-h3 {
    font-size: 35px;
    font-size: 2.1875rem;
  }
}
@media screen and (min-width: 1320px) {
  h3,
  .like-h3 {
    font-size: 45px;
    font-size: 2.8125rem;
  }
}
h4,
.like-h4 {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 18px;
  margin-bottom: 25px;
  font-weight: bold;
}
h5,
.like-h5 {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 18px;
  margin-bottom: 25px;
  font-weight: bold;
}
p {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 150%;
}
p a {
  text-decoration: none;
  color: #FFA600;
}
p a:hover {
  text-decoration: underline;
}
p.hint {
  color: #777;
}
hr {
  border: 0;
  border-bottom: 1px solid #DDD;
  margin: 40px 0;
}
.row.center h1.line::before,
.row.center h2.line::before,
.row.center h3.line::before,
.row.center h4.line::before,
.row.center h5.line::before,
.row.center h6.line::before {
  left: 50%;
  transform: translateX(-50%);
}
@font-face {
  font-family: 'Anton';
  src: url('../font/anton-regular-webfont.woff2') format('woff2'), url('../font/anton-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex';
  src: url('../font/ibmplexserif-bold-webfont.woff2') format('woff2'), url('../font/ibmplexserif-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex';
  src: url('../font/ibmplexserif-bolditalic-webfont.woff2') format('woff2'), url('../font/ibmplexserif-bolditalic-webfont.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex';
  src: url('../font/ibmplexserif-italic-webfont.woff2') format('woff2'), url('../font/ibmplexserif-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex';
  src: url('../font/ibmplexserif-regular-webfont.woff2') format('woff2'), url('../font/ibmplexserif-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../font/Inter-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../font/Inter-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../font/Inter-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../font/Inter-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
/*
  @transition

  global definition of transition properties.

  Styleguide Config.Variables.Transition
*/
/*
  @borderRadius

  global definition of border-radius.

  Styleguide Config.Variables.borderRadius
*/
/*
  @boxShadow

  global definition of box-shadow.

  Styleguide Config.Variables.boxShadow
*/
.grid.debug [class*="col-"] span {
  border: 1px solid #FFA600;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 0;
}
/*
  .reset-ul()

  removes margin, padding and bullets from lists.

  Styleguide Config.Mixins.reset-ul()
*/
body {
  overflow-x: hidden;
  font-family: 'IBM Plex', Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: auto;
  color: #2D3C4B;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: smooth;
  }
}
#btnTop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  background: url('../gfx/btn-top.svg') transparent no-repeat center;
  background-size: contain;
  border: none;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
#btnTop:hover {
  transform: scale(0.9);
}
main {
  overflow-x: hidden;
}
header {
  height: 90px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  transition: height 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
header .content-width {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
header .logo {
  display: block;
  padding: 0;
  height: 20px;
  position: fixed;
  top: 30px;
  right: 25px;
}
@media screen and (min-width: 760px) {
  header .logo {
    height: 28px;
    right: 30px;
  }
}
header .logo svg {
  height: 100%;
  max-width: 250px;
  width: auto;
}
header nav > ul {
  white-space: nowrap;
  height: 100%;
}
header nav > ul li {
  display: inline-block;
  height: 100%;
}
header nav > ul li a,
header nav > ul li .button,
header nav > ul li button {
  text-decoration: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  text-transform: uppercase;
  font-size: 17px;
  font-size: 1.0625rem;
  position: relative;
  color: #FFFFFF;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: bold;
}
header nav > ul li a::before,
header nav > ul li .button::before,
header nav > ul li button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #FFA600;
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
header nav > ul li a.button,
header nav > ul li .button.button,
header nav > ul li button.button {
  vertical-align: middle;
}
header nav > ul li a:hover,
header nav > ul li .button:hover,
header nav > ul li button:hover {
  color: #FFA600;
}
header nav > ul li a:hover::before,
header nav > ul li .button:hover::before,
header nav > ul li button:hover::before {
  width: 100%;
}
header nav > ul > li {
  line-height: 100%;
}
header nav.main {
  flex: 1;
}
header nav.meta {
  flex: 0 1 auto;
}
header nav.meta > ul li {
  margin-left: 10px;
}
header nav.meta > ul li:first-child {
  margin-left: 0;
}
header.inverted .content-width nav.main {
  order: 1;
}
header.inverted .content-width nav.meta {
  order: 2;
}
header.inverted .content-width .logo {
  order: 3;
  margin-right: 0;
  margin-left: 20px;
}
header.center .content-width {
  justify-content: center;
}
@media screen and (max-width: 1320px) {
  header.center .content-width {
    justify-content: flex-start;
  }
}
header.center nav.main {
  flex: 0;
}
header.center nav .logo {
  margin-right: 0;
}
header.right .content-width {
  justify-content: flex-end;
}
header.right nav.main {
  flex: 0;
}
header.right nav .logo {
  margin-right: 0;
}
.small-header header {
  height: 60px;
}
@media screen and (max-width: 1320px) {
  header {
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
  }
  header nav {
    display: none;
    background: #FFA600;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }
  header nav ul {
    height: auto;
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  header nav ul li {
    margin-bottom: 25px !important;
  }
  header nav ul li a {
    padding: 0 0 20px 0;
  }
  header nav ul li a:hover {
    color: #FFFFFF;
  }
  header nav ul li a:hover::before {
    background-color: #FFFFFF;
  }
  header nav.open {
    display: block;
  }
}
main {
  flex-shrink: 0;
}
footer {
  margin-top: auto;
  background: #FFA600;
  padding: 20px 0;
}
footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
footer ul li {
  display: inline-block;
  position: relative;
  padding: 0 10px;
}
footer ul li::before {
  content: '';
  width: 1px;
  height: 14px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -7px;
  background: #000000;
}
footer ul li a {
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  font-size: 1rem;
  font-weight: bold;
}
footer ul li:last-child::before {
  display: none;
}
/*
  Grid

  Rows seperate different sections of your layout. Combinations of different classes are possible.

  .col-1-5   - 20% width column
  .col-1-4   - 25% width column
  .col-1-3   - 33.3333% width column
  .col-2-5   - 40% width column
  .col-1-2   - 50% width column
  .col-3-5   - 60% width column
  .col-2-3   - 66.6666% width column
  .col-3-4   - 75% width column
  .col-4-5   - 80% width column
  .col-1-1   - 100% width column

  Markup:
  <!-- .debug just for visualization purposes -->
  <div class="grid debug">
    <div class="{{modifier_class}}">
      <span>Ich bin grid content</span>
    </div>
  </div>

  Style guide: Layout.Grid
*/
.content-width {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding: 0 25px;
}
@media screen and (min-width: 1320px) {
  .content-width {
    width: 1320px;
    padding: 0;
  }
}
.grid {
  display: flex;
  flex-wrap: wrap;
}
.grid.center {
  justify-content: center;
}
.grid[data-textalign="middle"] {
  align-items: center;
}
.grid [class*="col-"] {
  width: 100%;
}
.grid [class*="col-"].mb-first {
  order: -1;
}
.grid [class*="col-"].mb-1-2 {
  width: 50% !important;
}
.grid [class*="col-"].square {
  aspect-ratio: 1;
  padding-bottom: 100px;
  margin-bottom: -70px !important;
}
.grid:not(.no-gap) [class*="col-"] {
  margin-bottom: 30px;
}
@media screen and (min-width: 760px) {
  .grid:not(.no-gap) {
    margin-right: -100px;
  }
  .grid:not(.no-gap) [class*="col-"] {
    margin-bottom: 30px;
    padding-right: 100px;
  }
  .grid:not(.no-gap).gap-small {
    margin-right: -33px;
  }
  .grid:not(.no-gap).gap-small [class*="col-"] {
    padding-right: 33px;
  }
  .grid [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }
  .grid [class*="col-"].col-1-1 {
    width: 100%;
  }
}
@media screen and (min-width: 920px) {
  .grid [class*="col-"],
  .grid .swiper-slide[class*="col-"] {
    flex: 0 0 auto;
  }
  .grid [class*="col-"].mb-first,
  .grid .swiper-slide[class*="col-"].mb-first {
    order: initial;
  }
  .grid [class*="col-"].col-1-1,
  .grid .swiper-slide[class*="col-"].col-1-1 {
    width: 100%;
  }
  .grid [class*="col-"].col-1-2,
  .grid .swiper-slide[class*="col-"].col-1-2 {
    width: 50%;
  }
  .grid [class*="col-"].col-1-3,
  .grid .swiper-slide[class*="col-"].col-1-3,
  .grid [class*="col-"].col-1-4,
  .grid .swiper-slide[class*="col-"].col-1-4,
  .grid [class*="col-"].col-1-5,
  .grid .swiper-slide[class*="col-"].col-1-5,
  .grid [class*="col-"].col-2-5,
  .grid .swiper-slide[class*="col-"].col-2-5,
  .grid [class*="col-"].col-golden-small,
  .grid .swiper-slide[class*="col-"].col-golden-small {
    width: 33.33333%;
  }
  .grid [class*="col-"].col-2-3,
  .grid .swiper-slide[class*="col-"].col-2-3,
  .grid [class*="col-"].col-3-4,
  .grid .swiper-slide[class*="col-"].col-3-4,
  .grid [class*="col-"].col-3-5,
  .grid .swiper-slide[class*="col-"].col-3-5,
  .grid [class*="col-"].col-4-5,
  .grid .swiper-slide[class*="col-"].col-4-5,
  .grid [class*="col-"].col-golden-big,
  .grid .swiper-slide[class*="col-"].col-golden-big {
    width: 66.66666%;
  }
  .grid:not(.no-gap) {
    margin-right: -100px;
  }
  .grid:not(.no-gap) [class*="col-"],
  .grid:not(.no-gap) .swiper-slide[class*="col-"] {
    padding-right: 100px;
  }
}
@media screen and (min-width: 1320px) {
  .grid [class*="col-"],
  .grid .swiper-slide[class*="col-"] {
    flex: 0 0 auto;
  }
  .grid [class*="col-"].col-1-1,
  .grid .swiper-slide[class*="col-"].col-1-1 {
    width: 100%;
  }
  .grid [class*="col-"].col-1-2,
  .grid .swiper-slide[class*="col-"].col-1-2 {
    width: 50%;
  }
  .grid [class*="col-"].col-1-3,
  .grid .swiper-slide[class*="col-"].col-1-3 {
    width: 33.33333%;
  }
  .grid [class*="col-"].col-2-3,
  .grid .swiper-slide[class*="col-"].col-2-3 {
    width: 66.66666%;
  }
  .grid [class*="col-"].col-1-4,
  .grid .swiper-slide[class*="col-"].col-1-4 {
    width: 25%;
  }
  .grid [class*="col-"].col-3-4,
  .grid .swiper-slide[class*="col-"].col-3-4 {
    width: 75%;
  }
  .grid [class*="col-"].col-1-5,
  .grid .swiper-slide[class*="col-"].col-1-5 {
    width: 20%;
  }
  .grid [class*="col-"].col-1-6,
  .grid .swiper-slide[class*="col-"].col-1-6 {
    width: 16.66666%;
  }
  .grid [class*="col-"].col-2-5,
  .grid .swiper-slide[class*="col-"].col-2-5 {
    width: 40%;
  }
  .grid [class*="col-"].col-3-5,
  .grid .swiper-slide[class*="col-"].col-3-5 {
    width: 60%;
  }
  .grid [class*="col-"].col-4-5,
  .grid .swiper-slide[class*="col-"].col-4-5 {
    width: 80%;
  }
  .grid [class*="col-"].col-golden-big,
  .grid .swiper-slide[class*="col-"].col-golden-big {
    width: 61.80339887%;
  }
  .grid [class*="col-"].col-golden-small,
  .grid .swiper-slide[class*="col-"].col-golden-small {
    width: 38.19660113%;
  }
  .grid:not(.no-gap) {
    margin-right: -100px;
  }
  .grid:not(.no-gap) [class*="col-"],
  .grid:not(.no-gap) .swiper-slide[class*="col-"] {
    padding-right: 100px;
  }
}
/*
  Rows

  Rows seperate different sections of your layout. Combinations of different classes are possible.

  .highlight     - Global highlight color
  .grey          - Grey background
  .center        - Centered content
  .full          - Stretches over the whole width
  .cover         - Covers the whole viewport

  Markup:
  <div class="row {{modifier_class}}">
    <div class="content-width">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
      <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
    </div>
  </div>

  Style guide: Layout.Rows
*/
.row {
  padding: 50px 0;
  background-size: cover !important;
}
@media screen and (min-width: 1320px) {
  .row {
    padding: 100px 0;
  }
}
.row.highlight {
  background-color: #2D3C4B;
  padding: 50px 0;
  color: #FFFFFF;
}
.row.highlight-half {
  position: relative;
}
.row.highlight-half::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: #2D3C4B;
  z-index: -1;
}
.row.grey {
  background-color: #DDD;
  padding: 50px 0;
}
.row.full .content-width {
  width: 100%;
}
.row.center {
  text-align: center;
}
.row.cover {
  display: flex;
  align-items: center;
  height: 100vh;
  background-position: center;
}
@media screen and (min-width: 1320px) {
  .content {
    padding-left: 450px;
  }
}
.content ul:not(.dropdown, .list-icons) {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-bottom: 25px;
}
.content ul:not(.dropdown, .list-icons) li {
  position: relative;
  padding-left: 21px;
  margin-bottom: 15px;
}
.content ul:not(.dropdown, .list-icons) li::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 4px;
  width: 8px;
  height: 8px;
  background: #FFA600;
  border-radius: 50%;
}
.content ul:not(.dropdown, .list-icons) ul {
  margin-top: 15px;
  margin-bottom: 15px;
}
.content ul:not(.dropdown, .list-icons) ul li::before {
  opacity: 0.5;
}
.hidden .hide {
  display: none;
}
.mb-70 {
  margin-bottom: 70px;
}
.row.pt-0 {
  padding-top: 0;
}
.row.pb-0 {
  padding-bottom: 0;
}
.row.pt-165 {
  padding-top: 75px;
}
@media screen and (min-width: 760px) {
  .row.pt-165 {
    padding-top: 165px;
  }
}
/*
  Button

  Use this class for the primary call to action button.
  Typically you'll want to use either a `<button>` or an `<a>` element.

  :hover     - Hover State
  :disabled  - Disabled state
  .success   - Success color
  .warning   - Warning color
  .alert     - Alert color
  .link      - Text Link
  .loading   - Loading state

  Markup:
  <a href="" class="btn {{modifier_class}}">Link Button</a>
  <button class="button {{modifier_class}}">Button Element</button>
  <input class="button {{modifier_class}}" type="button" value="Input Button" />

  Style guide: Components.Button
*/
.button {
  height: 50px;
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  align-items: center;
  vertical-align: bottom;
  text-align: center;
  overflow: hidden;
  position: relative;
  color: #FFFFFF;
  background: #FFA600;
  border: 4px solid #FFA600;
  padding: 0 18px;
  font-size: 17px;
  font-size: 1.0625rem;
  transition: background 400ms cubic-bezier(0.22, 1, 0.36, 1), color 400ms cubic-bezier(0.22, 1, 0.36, 1), border-color 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  font-family: 'IBM Plex', Arial, Helvetica, sans-serif;
  box-shadow: none;
  border-radius: 0;
}
.button + .button {
  margin: 0 0 0 20px;
}
.button:hover {
  border-color: #cc8500;
  background: #cc8500;
}
.button:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(255, 166, 0, 0.5);
  position: relative;
  z-index: 1;
}
.button em {
  font-size: 14px;
  position: relative;
}
.button span {
  flex: 1 1 auto;
  font-weight: bold;
  padding-bottom: 3px;
}
.button em + span {
  margin-left: 7px;
}
.button span + em {
  margin-left: 7px;
}
.button.full {
  width: 100%;
}
.button.rounded {
  border-radius: calc(50px / 2);
}
.button.link {
  border: transparent;
  background: transparent;
  color: #FFA600;
  box-shadow: none;
  padding: 0;
}
.button.link em {
  border-radius: 0;
}
.button.link.bg-icon {
  color: #2D3C4B;
}
.button.link.bg-icon em {
  background: #FFA600;
  color: #FFF;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.button.link.bg-icon span {
  color: #2D3C4B;
}
.button.link.bg-icon.rounded em {
  border-radius: 50%;
}
.button.link.bg-icon.outline em {
  border: 4px solid #FFA600;
  color: #FFA600;
  background: transparent;
  transition: background 400ms cubic-bezier(0.22, 1, 0.36, 1), color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.button.link:hover {
  background: transparent;
}
.button.link:hover span {
  text-decoration: underline;
}
.button.link:hover.bg-icon span {
  text-decoration: none;
}
.button.link:hover.bg-icon em {
  background: #cc8500;
}
.button.link:hover.bg-icon.outline em {
  background: #FFA600;
  color: #FFF;
}
.button.secondary {
  background: #2D3C4B;
  border-color: #2D3C4B;
}
.button.secondary:hover {
  border-color: #1a222b;
  background: #1a222b;
}
.button.secondary:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(45, 60, 75, 0.5);
}
.button.secondary.loading::after {
  background-color: rgba(45, 60, 75, 0.9);
}
.button.secondary.outline {
  color: #2D3C4B;
}
.button.secondary.outline:hover {
  background: #1a222b;
  color: #FFF;
}
.button.secondary.link {
  border: transparent;
  background: transparent;
  color: #2D3C4B;
  box-shadow: none;
}
.button.secondary.link.bg-icon em {
  background: #2D3C4B;
}
.button.secondary.link.bg-icon:hover em {
  background: #cc8500;
}
.button.secondary.link.bg-icon.outline em {
  border-color: #2D3C4B;
  color: #2D3C4B;
  background: transparent;
}
.button.secondary.link.bg-icon.outline:hover em {
  background: #2D3C4B;
  color: #FFF;
}
.button.success {
  background: #22C55E;
  border-color: #22C55E;
  color: #FFF;
}
.button.success:hover {
  border-color: #1a9a49;
  background: #1a9a49;
}
.button.success:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(34, 197, 94, 0.5);
}
.button.success.loading::after {
  background-color: rgba(34, 197, 94, 0.9);
}
.button.success.outline {
  color: #22C55E;
}
.button.success.outline:hover {
  background: #1a9a49;
  color: #FFF;
}
.button.success.link {
  border: transparent;
  background: transparent;
  color: #22C55E;
  box-shadow: none;
}
.button.success.link.bg-icon em {
  background: #22C55E;
}
.button.success.link.bg-icon:hover em {
  background: #1a9a49;
}
.button.success.link.outline em {
  border-color: #22C55E;
  color: #22C55E;
  background: transparent;
}
.button.success.link.outline:hover em {
  background: #22C55E;
  color: #FFF;
}
.button.warning {
  background: #F59E0B;
  border-color: #F59E0B;
  color: #FFF;
}
.button.warning:hover {
  border-color: #c57f08;
  background: #c57f08;
}
.button.warning:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(245, 158, 11, 0.5);
}
.button.warning.loading::after {
  background-color: rgba(245, 158, 11, 0.9);
}
.button.warning.outline {
  color: #F59E0B;
}
.button.warning.outline:hover {
  background: #c57f08;
  color: #FFF;
}
.button.warning.link {
  border: transparent;
  background: transparent;
  color: #F59E0B;
  box-shadow: none;
}
.button.warning.link.bg-icon em {
  background: #F59E0B;
}
.button.warning.link.bg-icon:hover em {
  background: #c57f08;
}
.button.warning.link.outline em {
  border-color: #F59E0B;
  color: #F59E0B;
  background: transparent;
}
.button.warning.link.outline:hover em {
  background: #F59E0B;
  color: #FFF;
}
.button.alert {
  background: #EF4444;
  border-color: #EF4444;
  color: #FFF;
}
.button.alert:hover {
  border-color: #eb1515;
  background: #eb1515;
}
.button.alert:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(239, 68, 68, 0.5);
}
.button.alert.loading::after {
  background-color: rgba(239, 68, 68, 0.9);
}
.button.alert.outline {
  color: #EF4444;
}
.button.alert.outline:hover {
  background: #eb1515;
  color: #FFF;
}
.button.alert.link {
  border: transparent;
  background: transparent;
  color: #EF4444;
  box-shadow: none;
}
.button.alert.link.bg-icon em {
  background: #EF4444;
}
.button.alert.link.bg-icon:hover em {
  background: #eb1515;
}
.button.alert.link.outline em {
  border-color: #EF4444;
  color: #EF4444;
  background: transparent;
}
.button.alert.link.outline:hover em {
  background: #EF4444;
  color: #FFF;
}
.button.outline {
  background: transparent;
  color: #FFA600;
}
.button.outline:hover {
  background: #cc8500;
  color: #FFF;
}
.button.outline.bg-icon:hover {
  background: transparent;
}
.button.only-icon {
  width: 37px;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}
.button.only-icon span {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.button[disabled],
.button .disabled {
  border-color: #EEEEEE;
  color: #808080;
  cursor: default;
}
.button[disabled].link.bg-icon em,
.button .disabled.link.bg-icon em {
  color: #808080;
  background: #EEEEEE;
  border-color: #EEEEEE;
}
.button[disabled].loading::after,
.button .disabled.loading::after {
  background-color: rgba(238, 238, 238, 0.1);
}
.button[disabled]:not(.outline, .link),
.button .disabled:not(.outline, .link) {
  background: #EEEEEE;
}
.button.inverted span {
  color: #FFFFFF;
}
.button.inverted.outline {
  border-color: #FFFFFF;
}
.button-group {
  display: inline-flex;
  position: relative;
}
.button-group .button {
  margin: 0;
}
.button-group .button:not(:first-of-type):not(:last-of-type) {
  border-radius: 0;
}
.button-group .button:first-of-type {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button-group .button:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button-group .button.outline:not(:first-of-type):not(:last-of-type),
.button-group .button.outline:first-of-type {
  border-right: none;
}
.button-group .button.outline[disabled],
.button-group .button.outline .disabled {
  border-color: #808080;
}
.button-group.split-button {
  position: relative;
}
.button-group.split-button .button-toggle {
  width: 27px;
}
.button-group.split-button .button-toggle em {
  font-size: 10px;
}
.button-group.split-button .button-toggle:not(.outline) {
  background: #cc8500;
}
.button-group.split-button .button-toggle:not(.outline):hover {
  background: #996400;
}
.button-group.split-button .secondary.button-toggle:not(.outline) {
  background: #1a222b;
}
.button-group.split-button .secondary.button-toggle:not(.outline):hover {
  background: #07090b;
}
.button-group.split-button .success.button-toggle:not(.outline) {
  background: #1a9a49;
}
.button-group.split-button .success.button-toggle:not(.outline):hover {
  background: #136e34;
}
.button-group.split-button .warning.button-toggle:not(.outline) {
  background: #c57f08;
}
.button-group.split-button .warning.button-toggle:not(.outline):hover {
  background: #945f06;
}
.button-group.split-button .alert.button-toggle:not(.outline) {
  background: #eb1515;
}
.button-group.split-button .alert.button-toggle:not(.outline):hover {
  background: #bd1010;
}
nav.main.inline ul li {
  position: relative;
  margin: 0 25px;
}
nav.main.inline ul li ul {
  display: none;
  position: absolute;
  left: -20px;
  top: 100%;
  background: #CFCFCF;
  padding: 20px;
  min-width: 100%;
}
nav.main.inline ul li ul li {
  display: block;
  line-height: initial;
  margin-bottom: 10px;
}
nav.main.inline ul li ul li button {
  color: #FFFFFF;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: bold;
}
nav.main.inline ul li:hover > ul {
  display: block;
}
.hamburger {
  display: none;
  background: transparent;
  border: none;
  height: 90px;
  margin-left: -10px;
  margin-right: 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  position: relative;
  z-index: 10;
}
.hamburger .burger {
  width: 56px;
  height: 38px;
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
}
.hamburger .text {
  text-decoration: none;
  margin-left: 10px;
  font-size: 16px;
  position: relative;
  top: 2px;
}
.hamburger em {
  width: 36px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 0;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), margin 400ms cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  display: block;
  position: absolute;
  top: 18px;
  left: 10px;
  right: 10px;
}
.hamburger em:before,
.hamburger em:after {
  content: '';
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FFFFFF;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hamburger em::before {
  top: -8px;
}
.hamburger em::after {
  bottom: -8px;
}
.hamburger:hover em::before {
  transform: translateY(-6px);
}
.hamburger:hover em::after {
  transform: translateY(6px);
}
.hamburger.open em {
  background: none;
}
.hamburger.open em::before {
  top: 0;
  transform: rotate(45deg);
}
.hamburger.open em::after {
  bottom: 0;
  transform: rotate(-45deg);
}
@media screen and (max-width: 1320px) {
  .hamburger.mb {
    display: flex;
  }
}
.teaser {
  overflow: hidden;
  position: relative;
  height: 450px;
  background: url('../img/img-placeholder.jpg') no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 760px) {
  .teaser {
    height: auto;
    background-size: 100%;
    background-position: top center;
    aspect-ratio: 1600 / 900;
  }
}
.teaser figcaption,
.teaser .caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.teaser figcaption .zos,
.teaser .caption .zos {
  margin-bottom: 60px;
}
.teaser figcaption h1,
.teaser .caption h1 {
  font-size: 45px;
  font-size: 2.8125rem;
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: left;
  display: inline-block;
  line-height: 100%;
}
@media screen and (min-width: 760px) {
  .teaser figcaption h1,
  .teaser .caption h1 {
    font-size: 75px;
    font-size: 4.6875rem;
  }
}
@media screen and (min-width: 920px) {
  .teaser figcaption h1,
  .teaser .caption h1 {
    font-size: 125px;
    font-size: 7.8125rem;
  }
}
@media screen and (min-width: 1320px) {
  .teaser figcaption h1,
  .teaser .caption h1 {
    font-size: 165px;
    font-size: 10.3125rem;
  }
}
.teaser figcaption h1 span,
.teaser .caption h1 span {
  display: block;
  padding-left: 15%;
}
.teaser .content-width {
  z-index: 2;
}
@media only screen and (max-width: 763px) {
  .teaser figcaption {
    position: static;
  }
  .teaser figure[data-textalign="left"] figcaption,
  .teaser figure[data-textalign="center"] figcaption,
  .teaser figure[data-textalign="right"] figcaption {
    right: auto;
    transform: none;
    left: auto;
  }
}
@media only screen and (min-width: 1320px) {
  .teaser figure figcaption {
    position: absolute;
    bottom: 50px;
    margin-top: 0;
  }
  .teaser figure[data-textalign="left"] figcaption {
    left: 30px;
  }
  .teaser figure[data-textalign="left"] .content-width figcaption {
    left: 0;
  }
  .teaser figure[data-textalign="center"] figcaption {
    left: 50%;
    transform: translate(-50%, 0);
  }
  .teaser figure[data-textalign="right"] figcaption {
    right: 30px;
  }
  .teaser figure[data-textalign="right"] .content-width figcaption {
    right: 0;
  }
}
.img {
  position: relative;
  border-radius: 0;
  box-shadow: none;
}
.img > picture {
  display: block;
  overflow: hidden;
}
.img img {
  width: 100%;
  height: auto;
  display: block;
  object-position: var(--focusX, center) var(--focusY, center);
}
.img figcaption.caption {
  padding: 50px;
  width: 100%;
  background: #FFA600;
}
.img figcaption.caption h2 {
  color: #FFFFFF;
}
.img figcaption.caption h2::before {
  background: #FFFFFF;
}
.img figcaption.caption p {
  font-size: 20px;
  font-size: 1.25rem;
}
@media screen and (min-width: 1320px) {
  .img figcaption.caption p {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 1320px) {
  .img figcaption.caption {
    position: absolute;
    left: calc(50% - (1320px / 2));
    bottom: -100px;
    border-radius: 0 0 0 0;
    width: calc((1320px / 2) + 100px);
  }
}
.img.cover {
  aspect-ratio: 3/1;
  border: 1px solid grey;
  width: 500px;
}
.img.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img.square img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card {
  height: 100%;
}
.card .embed-container::before {
  width: 70px;
  height: 70px;
}
.card .img {
  position: relative;
}
.card .img .button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: default;
}
.card figure {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}
.card figure img {
  display: block;
  width: 100%;
  height: auto;
}
.card figure.round picture {
  padding: 0 50px;
}
.card figure.round img {
  border-radius: 50%;
  overflow: hidden;
}
.card figcaption {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  padding: 40px 0 0 0;
  text-align: center;
}
.card figcaption p {
  flex: 1;
  font-size: 18px;
  font-size: 1.125rem;
}
.card figcaption p a {
  color: #FFA600 !important;
}
.card figcaption ul {
  margin-bottom: 20px;
}
.card figcaption h1,
.card figcaption h2,
.card figcaption h3,
.card figcaption h4,
.card figcaption h5,
.card figcaption h6 {
  text-align: center;
  color: #FFFFFF;
  width: 100%;
}
.card figcaption h1 a,
.card figcaption h2 a,
.card figcaption h3 a,
.card figcaption h4 a,
.card figcaption h5 a,
.card figcaption h6 a {
  text-decoration: none;
}
.card figcaption h1 em,
.card figcaption h2 em,
.card figcaption h3 em,
.card figcaption h4 em,
.card figcaption h5 em,
.card figcaption h6 em {
  color: #FFA600;
  font-size: 24px;
  font-size: 1.5rem;
  display: block;
  font-family: 'IBM Plex', Arial, Helvetica, sans-serif;
  font-style: normal;
}
.card.has-border figcaption {
  padding: 30px;
  border: 1px solid #808080;
  border-radius: 0 0 0 0;
}
.card.card-fulllink {
  position: relative;
  z-index: 0;
}
.card.card-fulllink .button {
  position: initial;
}
.card.card-fulllink .button::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 5;
}
.card.highlight figcaption {
  background: #FFA600;
  padding: 30px;
  border-radius: 0 0 0 0;
}
.card.highlight .button {
  background: #FFFFFF;
}
.card.highlight .button span {
  color: #2D3C4B;
}
.card-swiper.hide-overflow {
  overflow: hidden;
}
.card-swiper .grid {
  flex-wrap: nowrap;
  width: auto;
}
.content-width .card-swiper {
  overflow: hidden;
}
.text-img {
  margin-bottom: 60px;
}
.text-img.reverse > .grid {
  flex-direction: row-reverse;
}
.zos {
  height: 15px;
  display: block;
  margin-bottom: 25px;
}
.zos img {
  width: auto !important;
  height: 100% !important;
}
.zos.highlight {
  height: 40px;
}
.zos.highlight img {
  background: #FFA600;
  padding: 10px 15px;
}
@media screen and (min-width: 920px) {
  .zos.highlight {
    height: 60px;
  }
  .zos.highlight img {
    background: #FFA600;
    padding: 15px 20px;
  }
}
@media screen and (min-width: 1320px) {
  .zos.highlight {
    height: 80px;
  }
  .zos.highlight img {
    background: #FFA600;
    padding: 20px 25px;
  }
}
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.embed-container::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url('../gfx/btn-play.svg') no-repeat center;
  background-size: contain;
  width: 75px;
  height: 75px;
  z-index: 9;
  transition: all 400ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
@media screen and (min-width: 760px) {
  .embed-container::before {
    width: 175px;
    height: 175px;
  }
}
.embed-container iframe,
.embed-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.embed-container:hover::before {
  transform: translate(-50%, -50%) scale(0.8);
}
.embed-container.playing::before {
  opacity: 0;
}
.social-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.social-list li {
  display: inline-block;
  margin-right: 25px;
}
.social-list li:last-child {
  margin-right: 0;
}
.social-list li a {
  display: block;
  height: 30px;
}
@media screen and (min-width: 760px) {
  .social-list li a {
    height: 50px;
  }
}
.social-list li a svg {
  height: 100%;
  width: auto;
}
.social-list li a svg path {
  transition: fill 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.social-list li a svg:hover path {
  fill: #FFFFFF;
}
.signature {
  font-size: 20px;
  font-size: 1.25rem;
  color: #FFA600;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
}
.signature span {
  font-weight: bold;
  letter-spacing: 0.1rem;
  font-size: 15px;
  font-size: 0.9375rem;
}
.signature svg {
  display: block;
  margin: -35px 0 -65px 0;
}
video {
  position: relative;
}
/*# sourceMappingURL=style.css.map */