@font-face {
    font-family: "SF Pro Text";
    src: url("assets/fonts/SFProDisplay-Light.woff") format("woff2"), url("assets/fonts/SFProDisplay-Light.woff") format("woff");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'SF Pro Text';
    font-style: normal;
    font-weight: 500;
    src: url("assets/Font/sf-pro-text-medium.woff") format("woff2"), url("assets/Font/sf-pro-text-medium.woff") format("woff");
}

@font-face {
    font-family: "SF Pro Text";
    src: url("assets/fonts/SFProDisplay-Semibold.woff") format("woff2"), url("assets/fonts/SFProDisplay-Semibold.woff") format("woff");
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "SF Pro Text";
    src: url("assets/fonts/SFProDisplay-Bold.woff") format("woff2"), url("assets/fonts/SFProDisplay-Bold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "SF Pro Text";
    src: url("assets/fonts/SF-Pro-Display-Regular.woff") format("woff2"), url("assets/fonts/SF-Pro-Display-Regular.woff") format("woff");
}
body {
      margin: 0px;
	  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  }
  
  img {
      max-width: 100%;
  }
  
  .wrap {
      max-width: 1400px;
      min-height: inherit;
      margin: 0 auto;
  }
  
  .flex-wrap {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap
  }
  
  .boxx {
      padding: 10px 40px 10px 40px;
      border-radius: 0px
  }
  
  .txtcentr {
      text-align: center;
  }
  
  .txtleft {
      text-align: left;
  }
  
  .txtright {
      text-align: right;
  }
  
  .txtjust {
      text-align: justify;
  }
  
  .txtwhite {
      color: #fff;
  }
  
  .centr {
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  
  [class*=flex-] {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex
  }
  
  .value {
      width: 100%
  }
  
  .full-width-landing {
      background-color: #000;
      overflow: hidden;
      width: 100%;
      margin: auto;
  }
  
  .full {
      width: 100%;
      min-height: inherit;
  }
  
  .bggrey {
      background-color: #f5f5f7;
  }
  
  .bgdgrey {
      background-color: #1d1d1f;
  }
  
  .bgblack {
      background-color: black;
  }
  
  .added {
      font-weight: 300;
      font-size: 12px;
      line-height: 16px;
      color: #a1a1a6;
      margin-bottom: 0px;
      text-align: left;
      margin-top: 50px;
  }
  
  .added a {
      text-decoration: none;
      color: #a21818
  }
  
  .added p {
      text-decoration: none;
      color: #515154;
  }
  
  .added ol {
      padding-left: 20px;
  }
  
  .added li {
      padding-left: 10px;
  }
  
  .headerlogo {
      max-width: 90px;
      margin: auto;
      margin-bottom: 140px;
  }
  
  .full-width-landing a {
      text-decoration-line: none;
      text-decoration: none;
  }
  
  .btn {
      margin: 30px auto;
      padding: 5px 18px;
      font-size: 14px;
      background-color: transparent;
      color: #a2a2a2;
      border: 1px solid #a2a2a2;
      border-radius: 15px;
      cursor: pointer;
      text-decoration-line: none;
      text-decoration: none;
  }
  
  .btn:hover {
      border-color: #fff;
      color: #fff;
      box-shadow: 0 2px 4px -2px rgba(40, 40, 40, 0.8);
  }
  
  .full-width-landing .ico {
      height: 60px;
      width: auto;
      max-width: 100px;
      margin-top: 4px;
      margin-bottom: 20px;
  }
  
  .full-width-landing .ico-2 {
      width: 70%;
      margin: 0 auto;
      margin-top: 5px;
  }
  
  .pullup {
      margin-top: -30px;
  }
  
  .tablet {
      display: none;
  }
  
  .mobile {
      display: none;
  }
  
  .headlogo {
      width: 170px;
      margin-bottom: 10px;
  }
  
  .riverhead {
      padding-top: 60px;
  }
  
  .textblock {
      padding-top: 80px;
      float: left;
  }
  
  .separator-line {
      border-bottom: 1px solid #bcbcbf;
      width: 100%;
      height: 10px;
  }
  
  .matop {
      margin-top: 15px;
  }
  
  @media only screen and (max-width:1132px) {
      .textblock {
          padding-top: 40px;
      }
  }
  
  @media only screen and (max-width:768px) {
      .mobile {
          display: block;
      }
      .desktop {
          display: none;
      }
      .tablet {
          display: none;
      }
      .col-xl-6 {
          margin: 0 auto;
      }
      .m-centr {
          margin: 0 auto;
          padding: 0px 1% 0px 1%;
          display: block;
          align-content: center;
      }
      .headerlogo {
          max-width: 55px;
          margin: auto;
          margin-bottom: 40px;
      }
      .btn {
          margin-top: 10px;
      }
      .connectivity {
          margin-top: -40px;
      }
      .matop {
          margin-top: 10px;
      }
      .headlogo {
          margin: 0 auto;
          margin-bottom: 20px;
      }
      .headtext {
          text-align: center;
      }
      .riverhead {
          padding-top: 20px;
      }
      .textblock {
          padding-top: 0px;
      }
  }
  /*------------------------ VISUALS, IMAGES, ICONS
------------------------------------------------*/
  
  @media only screen and (max-width:1132px) {}
  
  @media only screen and (max-width:997px) {}
  
  @media only screen and (max-width:900px) {}
  
  @media only screen and (max-width:768px) {}
  
  @media only screen and (max-width:500px) {}
  /*-------------------- TYPOGRAPHY
------------------------------*/
  /* @import url("https://use.typekit.net/dsa0thf.css"); */
  
  @charset "utf-8";
  * {
      font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      margin: 0;
      padding: 0;
      border: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box
  }
  
  .h1 {
      font-size: 70px;
      font-weight: 500;
      line-height: 1.06;
      color: #f5f5f7;
      margin-bottom: 0px;
  }
  
  .h2 {
      font-size: 23px;
      font-weight: 500;
      line-height: 1.06;
      color: #86868b;
      letter-spacing: 0px;
  }
  
  .h3 {
      font-size: 48px;
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -1px;
      margin-bottom: 20px;
      color: #f5f5f7;
  }
  
  .h4 {
      font-size: 48px;
      font-weight: 500;
      line-height: 1.06;
  }
  
  .p {
      font-size: 19px;
      font-weight: 300;
      line-height: 1.5;
      color: #6e6e73;
  }
  
  .full-width-landing span p {
      font-size: 17px;
      font-weight: 300;
      line-height: 1.5;
      color: #f5f5f7;
  }
  
  .badge-value {
      font-size: 75px;
      line-height: 1;
      font-weight: 500;
      color: #fff;
  }
  
  .badge-unit {
      font-size: 50px;
      line-height: 1;
      font-weight: 500;
      letter-spacing: 0em;
      color: #fff;
  }
  
  .badge-caption {
      font-size: 15px;
      line-height: 1.18583;
      font-weight: 400;
      color: #fff;
  }
  
  @media only screen and (max-width:997px) {
      [class*=flex-] {
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          width: 100%;
      }
      .h1 {
          font-size: 44px;
      }
      .h2 {
          font-size: 20px;
          line-height: 1.06;
      }
      .h3 {
          font-size: 34px;
          font-weight: 500;
          line-height: 1.15;
          letter-spacing: -1px;
          margin-bottom: 20px;
      }
      .p {
          font-size: 18px;
          font-weight: 300;
          line-height: 1.5;
      }
      .full-width-landing span p {
          font-size: 17px;
          font-weight: 300;
          line-height: 1.5;
      }
      .right {
          padding-left: 0px;
      }
      .tablet {
          display: block;
      }
  }
  
  @media only screen and (max-width:900px) {
      .p {
          font-size: 15px;
          font-weight: 300;
          line-height: 1.5;
      }
      .full-width-landing span p {
          font-size: 14px;
          font-weight: 300;
          line-height: 1.5;
      }
      .h1 {
          font-size: 50px;
          font-weight: 500;
          line-height: 1.06;
      }
      .h2 {
          font-size: 20px;
          line-height: 1.06;
      }
      .h3 {
          font-size: 30px;
          font-weight: 500;
          line-height: 1.15;
          letter-spacing: -1px;
          margin-bottom: 20px;
      }
  }
  
  @media only screen and (max-width:768px) {
      .h1 {
          font-size: 46px;
          font-weight: 500;
          line-height: 1.06;
          text-align: center;
      }
      .h3 {
          font-size: 40px;
          font-weight: 500;
          line-height: 1.15;
          letter-spacing: -1px;
          margin-bottom: 20px;
      }
      .p {
          font-size: 17px;
          font-weight: 300;
          line-height: 1.5;
      }
  }
  
  @media only screen and (max-width:500px) {
      .badge-value {
          font-size: 75px;
          line-height: 1;
          font-weight: 500;
          color: #fff;
      }
      .badge-unit {
          font-size: 50px;
          line-height: 1;
          font-weight: 500;
          letter-spacing: 0em;
          color: #fff;
      }
      .badge-caption {
          font-size: 15px;
          line-height: 1.18583;
          font-weight: 400;
          color: #fff;
      }
  }
  
  @media only screen and (max-width:400px) {
      .h1 {
          font-size: 34px;
          font-weight: 500;
          line-height: 1.06;
          margin-bottom: 10px;
      }
      .h2 {
          font-size: 18px;
          line-height: 1.06;
      }
      .h3 {
          font-size: 32px;
          font-weight: 500;
          line-height: 1.15;
          letter-spacing: -1px;
          margin-bottom: 20px;
      }
      .p {
          font-size: 15px;
          font-weight: 300;
          line-height: 1.5;
      }
      .badge-value {
          font-size: 65px;
          line-height: 1;
          font-weight: 500;
          color: #fff;
      }
      .badge-unit {
          font-size: 40px;
          line-height: 1;
          font-weight: 500;
          letter-spacing: 0em;
          color: #fff;
      }
      .badge-caption {
          font-size: 15px;
          line-height: 1.18583;
          font-weight: 400;
          color: #fff;
      }
  }
  
  .img-01 {
      margin-bottom: -200px;
      margin-top: 50px;
  }
  
  .card-element {
      width: 100%;
      border-radius: 30px;
      display: flex;
      padding: 40px;
  }
  
  .card-element .p {
      color: #fff;
  }
  
  .card-element figure {
      position: absolute;
      top: 50px;
      left: 90px;
      width: 100%;
      font-weight: 400;
  }
  
  .card-01 {
      background-image: url(assets/image/asset-3.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 725px;
      padding-top: 100px;
  }
  
  .card-02 {
      background-image: url(assets/image/asset-4.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 725px;
      padding-top: 300px;
  }
  
  .card-03 {
      background-color: #19291d;
      height: 650px;
      padding-top: 200px;
  }
  
  .card-04 {
      background-color: #ca551e;
      height: 650px;
      padding-top: 225px;
  }
  
  .card-05 {
      background-image: url(assets/image/asset-5.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 725px;
      padding-top: 100px;
  }
  
  .card-06 {
      background-image: url(assets/image/asset-6.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 725px;
      padding-top: 100px;
  }
  
  .card-07 {
      background-image: url(assets/image/asset-7.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 850px;
      padding-top: 100px;
  }
  
  .card-08 {
      background-image: url(assets/image/asset-8.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 850px;
      padding-top: 100px;
  }
  
  .card-09 {
      background-image: url(assets/image/asset-9.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 750px;
      padding-top: 200px;
  }
  
  .card-10 {
      background-color: #257983;
      height: 750px;
      padding-top: 200px;
  }
  
  .card-11 {
      background-color: #161616;
      height: 600px;
      padding-top: 100px;
  }
  
  .card-12 {
      background-image: url(assets/image/asset-11.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 700px;
      padding-top: 300px;
  }
  
  .card-13 {
      background-color: #181725;
      height: 750px;
      padding-top: 300px;
  }
  
  .card-14 {
      background-image: url(assets/image/asset-12.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 750px;
      padding-top: 100px;
  }
  
  .card-15 {
      background-color: #151516;
      height: 725px;
      padding-top: 100px;
  }
  
  .card-03 figure,
  .card-07 figure,
  .card-09 figure,
  .card-13 figure,
  .card-15 figure,
  .card-17 figure,
  .card-20 figure {
      position: absolute;
      left: 50px;
      top: 40px;
  }
  
  .card-04 figure,
  .card-08 figure,
  .card-10 figure,
  .card-14 figure,
  .card-16 figure,
  .card-18 figure,
  .card-21 figure {
      position: absolute;
      left: 60px;
      top: 40px;
  }
  
  .card-16 {
      background-color: #071b2a;
      height: 725px;
      padding-top: 100px;
  }
  
  .card-17 {
      background-color: #a8315c;
      height: 725px;
      padding-top: 100px;
  }
  
  .card-18 {
      background-image: url(assets/image/asset-25.jpg);
      background-size: cover;
      background-position: 50% 50%;
      height: 725px;
      padding-top: 100px;
  }
  
  .card-19 {
      background-color: #466879;
      height: 725px;
      padding-top: 200px;
  }
  
  .card-20 {
      background-color: #453d7c;
      height: 725px;
      padding-top: 100px;
  }
  
  .card-21 {
      background-color: #90378e;
      height: 725px;
      padding-top: 100px;
  }
  
  .pink {
      color: #f985fb;
  }
  
  .blue {
      color: #809afc;
  }
  
  .green {
      color: #30d158;
  }
  
  .orange {
      color: #e9bba5;
  }
  
  .grey {
      color: #6e6e73;
  }
  
  .h3.grey {
      margin-bottom: 4px;
  }
  
  .topline {
      border-top: 1px solid #333;
      padding-top: 100px;
      margin-top: 50px;
  }
  
  .topspace {
      margin-top: 100px;
  }
  
  .left {
      padding-left: 0px;
      padding-right: 10px;
  }
  
  .right {
      padding-right: 0px;
      padding-left: 10px;
  }
  
  .mlogo {
      display: flex;
      justify-content: center;
  }
  
  .icon-quartett {
      text-align: center;
      padding-top: -10px;
      padding-left: 50px;
  }
  
  @media only screen and (max-width:1032px) {
      .img-01 {
          margin-bottom: -100px;
      }
  }
  
  @media only screen and (max-width:768px) {
      .h3 br {
          display: none;
      }
      .left {
          padding-left: 0px;
          padding-right: 0px;
          padding-top: 0px;
      }
      .right {
          padding-left: 0px;
          padding-right: 0px;
          padding-top: 20px;
      }
      .img-01 {
          margin-bottom: -70px;
      }
      .img-01 img {
          max-width: 150%;
          margin-left: 50%;
          transform: translateX(-50%);
      }
      .card-04 figure,
      .card-08 figure,
      .card-10 figure,
      .card-14 figure,
      .card-16 figure,
      .card-18 figure,
      .card-21 figure {
          position: absolute;
          left: 50px;
          top: 60px;
      }
      .card-01 {
          background-image: url(assets/image/asset-1-m.jpg);
          background-size: cover;
          background-position: 50% 100%;
          height: unset;
          padding-bottom: 450px;
          padding-top: 100px;
      }
      .card-02 {
          background-image: url(assets/image/asset-2-m.jpg);
          background-size: cover;
          background-position: 50% 50%;
          height: unset;
          padding-top: 100px;
          padding-bottom: 50px;
      }
      .card-03 {
          height: unset;
          padding-top: 250px;
          padding-bottom: 200px;
      }
      .card-04 {
          height: unset;
          padding-top: 250px;
          padding-bottom: 200px;
      }
      .card-05 {
          background-image: url(assets/image/asset-5-m.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50% 100%;
          height: unset;
          padding-bottom: 420px;
          padding-top: 100px;
      }
      .card-06 {
          background-image: url(assets/image/asset-6-m.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50% 100%;
          height: unset;
          padding-bottom: 380px;
          padding-top: 100px;
      }
      .card-07 {
          background-image: url(assets/image/asset-7-m.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          height: unset;
          padding-top: 100px;
          padding-bottom: 60px;
      }
      .card-08 {
          background-image: url(assets/image/asset-8-m.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          height: unset;
          padding-top: 100px;
          padding-bottom: 60px;
      }
      .card-09 {
          background-image: url(assets/image/asset-10-m.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          height: unset;
          padding-top: 100px;
          padding-bottom: 30px;
      }
      .card-10 {
          height: unset;
          padding-top: 150px;
          padding-bottom: 100px;
      }
      .card-11 {
          height: unset;
          padding-top: 100px;
          padding-bottom: 60px;
      }
      .card-12 {
          background-image: url(assets/image/asset-9-m.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50% 50%;
          height: unset;
          padding-top: 100px;
          padding-bottom: 160px;
      }
      .badge {
          margin: 0 auto;
          text-align: center;
          margin-top: 100px;
      }
      .card-13 {
          height: unset;
          padding-top: 200px;
          padding-bottom: 200px;
      }
      .card-14 {
          height: unset;
          padding-top: 100px;
          padding-bottom: 60px;
      }
      .card-15 {
          height: unset;
          padding-top: 100px;
          padding-bottom: 60px;
      }
      .card-16 {
          height: unset;
          padding-top: 100px;
          padding-bottom: 60px;
      }
      .card-17 {
          height: unset;
          padding-top: 100px;
          padding-bottom: 60px;
      }
      .card-18 {
          background-image: url(assets/image/asset-18-m.jpg);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50% 50%;
          height: unset;
          padding-top: 100px;
          padding-bottom: 300px;
      }
      .card-19 {
          height: unset;
          padding-bottom: 80px;
          padding-top: 100px;
      }
      .icon-quartett {
          text-align: center;
          padding-top: 30px;
          padding-left: 0px;
      }
      .card-20 {
          height: unset;
          padding-bottom: 80px;
          padding-top: 100px;
      }
      .card-21 {
          height: unset;
          padding-bottom: 80px;
          padding-top: 100px;
      }
      .mlogo {
          display: block;
          margin: 0 auto;
          text-align: center;
      }
      .mcentr {
          text-align: center;
          margin-top: 50px;
      }
  }
  
  @media only screen and (max-width:600px) {
      .boxx {
          padding: 10px 10px 10px 10px;
      }
      .card-element {
          width: 100%;
          border-radius: 30px;
          display: flex;
          padding-left: 20px;
          padding-right: 20px;
      }
      .card-element figure {
          position: absolute;
          top: 50px;
          left: 40px;
          width: 100%;
          font-weight: 400;
      }
      .card-04 figure,
      .card-08 figure,
      .card-10 figure,
      .card-14 figure,
      .card-16 figure,
      .card-18 figure,
      .card-21 figure {
          position: absolute;
          left: 30px;
          top: 60px;
      }
      .card-03 figure,
      .card-07 figure,
      .card-09 figure,
      .card-13 figure,
      .card-15 figure,
      .card-17 figure,
      .card-20 figure {
          position: absolute;
          left: 30px;
          top: 40px;
      }
      .topspace {
          margin-top: 50px;
      }
      .topline {
          border-top: 1px solid #333;
          padding-top: 50px;
          margin-top: 50px;
      }
  }
  
  @media only screen and (max-width:500px) {
      .img-01 {
          margin-bottom: -50px;
      }
      .card-03 {
          height: unset;
          padding-top: 150px;
          padding-bottom: 100px;
      }
      .card-04 {
          height: unset;
          padding-top: 150px;
          padding-bottom: 100px;
      }
      .card-12 {
          padding-top: 100px;
          padding-bottom: 100px;
      }
  }
  
  @media only screen and (max-width:400px) {
      .card-01 {
          padding-bottom: 330px;
          padding-top: 100px;
      }
      .card-05 {
          padding-bottom: 300px;
          padding-top: 100px;