Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <body class="body">
  <div class="bodywrap">
    <div class="vertical-slider">
<!--       <div class="draggable__guidance">
        <div class="draggable__guidance-flex-wrap">
          <div id="guidance-helper-icon-js" class="draggable__guidance-icon"></div>
        </div>
      </div> -->
      <div id="vertical-slider-container" class="vertical-slider__container">
        <div id="js-vertical-slider-wrapper" class="js-vertical-slider-wrapper">
          <div class="js-intro-teaser">
            <div class="js-intro-teaser-content">
              <div class="intro-teaser-content__inner-wrap w-background-video w-background-video-atom">
                <div class="main-container">
                  <h1 id="headline-slider" class="vertical-slider__title">slide 1</h1>
                </div>
              </div>
            </div>
          </div>
          <div class="js-intro-teaser">
            <div class="js-intro-teaser-content">
              <div class="intro-teaser-content__inner-wrap w-background-video w-background-video-atom">
                <div class="main-container">
                  <h1 id="headline-slider" class="vertical-slider__title">slide 2</h1>
                </div>
              </div>
            </div>
          </div>
          <div class="js-intro-teaser">
            <div class="js-intro-teaser-content">
              <div class="intro-teaser-content__inner-wrap w-background-video w-background-video-atom">
                <div class="main-container">
                  <h1 id="headline-slider" class="vertical-slider__title">slide 3</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="proxy" class="proxy"></div>
    </div>
  </div>
</body>
</html>

              
            
!

CSS

              
                body {
  background-color: #1a1a1a;
  font-family: Spectral, sans-serif;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 20px;
}

h1 {
  margin-top: 20px;
  margin-bottom: 40px;
  font-family: 'GT Walsheim Pro', Arial, sans-serif;
  color: #fff;
  font-size: 10.4vw;
  line-height: 10vw;
  font-weight: 700;
  letter-spacing: -0.54vw;
}

.bodywrap {
  position: static;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  overflow: hidden;
  width: auto;
  height: auto;
}

.vertical-slider__container {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-right: auto;
  margin-left: auto;
}

.js-vertical-slider-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  height: 100vh;
  margin-left: 0vw;
  padding-right: 0vw;
  padding-left: 0vw;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: -webkit-grab;
  cursor: grab;
}

.js-intro-teaser {
  position: relative;
  width: 80vw;
  height: 80vh;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: transparent;
}

.js-intro-teaser-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.intro-teaser-content__inner-wrap {
  position: absolute;
  z-index: 99;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #eaeaea;
}

.proxy {
  position: relative;
  left: 50%;
  display: none;
  width: 100px;
  height: 100px;
}

.nav-bar {
  position: relative;
  z-index: 999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: auto;
  margin: 0px;
  padding-top: 0vw;
  padding-right: 0vw;
  padding-left: 0vw;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.vertical-slider {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 9;
  width: 100vw;
  height: 100vh;
  cursor: -webkit-grab;
  cursor: grab;
}

.main-container {
  width: 80vw;
  max-width: 1920px;
}

.nav__logo {
  position: relative;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
  z-index: 9999999;
  width: auto;
  height: auto;
  margin-top: 3vw;
  margin-left: 4vw;
  -webkit-transition: opacity 300ms ease, -webkit-transform 200ms ease;
  transition: opacity 300ms ease, -webkit-transform 200ms ease;
  transition: transform 200ms ease, opacity 300ms ease;
  transition: transform 200ms ease, opacity 300ms ease, -webkit-transform 200ms ease;
}

.nav__logo:hover {
  opacity: 0.8;
}

.nav__logo:active {
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}

.svg-logo-notch-interactive {
  width: 7vw;
}

.preloader {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 9999;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #1a1a1a;
  cursor: none;
}

.preloader__wrap {
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.preloader__content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.preloader__content-text {
  margin-right: auto;
  margin-left: auto;
  padding-right: 0.3vw;
  padding-left: 0.3vw;
  font-family: 'GT Walsheim Pro', Arial, sans-serif;
  color: #fff;
  font-size: 2.5vw;
  line-height: 3vw;
  letter-spacing: -0.1vw;
}

.vertical-slider__title {
  display: inline-block;
  font-family: 'GT Walsheim Pro', Arial, sans-serif;
  color: #000;
  font-size: 10.4vw;
  line-height: 10vw;
  font-weight: 700;
  letter-spacing: -0.54vw;
}

.mobile-turn {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: none;
}

.nav__overlay {
  position: fixed;
  left: auto;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 998;
  display: none;
  overflow: hidden;
  width: 50%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-color: rgba(26, 26, 26, .8);
}

.main-nav__wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  padding-left: 7vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  background-color: #1a1a1a;
}

.main-nav__link {
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
  font-family: 'GT Walsheim Pro', Arial, sans-serif;
  color: #fff;
  font-size: 5vw;
  line-height: 7.2vw;
  font-weight: 700;
  letter-spacing: -0.2vw;
  text-decoration: none;
  text-transform: none;
}

.main-nav-wrap__link-track {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  align-self: flex-start;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
}

.js-nav-toggle {
  position: relative;
  z-index: 9999999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  height: auto;
  padding: 1vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0px;
  background-color: transparent;
  cursor: none;
}

.burger-top-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.burger-bar1 {
  width: 24px;
  height: 2px;
  background-color: #fff;
}

.burger-middlebar-base {
  position: static;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 24px;
  height: 2px;
  margin-top: 4px;
  margin-bottom: 4px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
}

.burger-middlebar-top {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  width: 24px;
  height: 2px;
}

.burger-middlebar {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 24px;
  height: 2px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
}

.burger-bar3 {
  width: 24px;
  height: 2px;
  background-color: #fff;
}

.nav__contact-cta {
  position: relative;
  z-index: 999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin-right: 8px;
  clear: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  -webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
  font-family: 'GT Walsheim Pro', Arial, sans-serif;
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  text-align: right;
  letter-spacing: -0.4px;
  text-decoration: none;
}

.nav__contact-cta:hover {
  opacity: 0.8;
}

.nav__contact-cta:active {
  opacity: 0.6;
}

.nav__control-wrap {
  position: static;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3vw;
  margin-right: 3vw;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.slider__wrap-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 80vw;
  max-width: 1920px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.scrollbar {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 7.5%;
  z-index: 1000;
  height: 1px;
  background-color: hsla(0, 0%, 100%, .2);
}

.scrollbar__handle {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.scrollbar__handle.js-scrollbar__handle {
  background-color: #fff;
}

.meta-nav__wrap {
  position: absolute;
  bottom: 7vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}

.meta-nav__link {
  margin-right: 1.4vw;
  margin-left: 1.4vw;
  opacity: 0.3;
  -webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
  font-family: 'GT Walsheim Pro', Arial, sans-serif;
  color: #fff;
  font-size: 1.1vw;
  line-height: 1.1vw;
  font-weight: 700;
  letter-spacing: -0.02vw;
  text-decoration: none;
}

.meta-nav__link:hover {
  opacity: 1;
}

.meta-nav__link:active {
  opacity: 0.8;
}

.meta-nav__left-wrap {
  position: absolute;
  left: 4vw;
  top: auto;
  right: auto;
  bottom: 4vw;
}

.meta-nav__right-wrap {
  position: absolute;
  left: auto;
  top: auto;
  right: 4vw;
  bottom: 4vw;
}

.white-arrow-mobile {
  display: none;
}

.draggable__guidance {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 3vw;
  z-index: 999;
  display: block;
  overflow: hidden;
  width: 12vw;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  background-color: transparent;
  cursor: -webkit-grab;
  cursor: grab;
}

.draggable__guidance-icon {
  width: auto;
}

.draggable-guidance-icon-svg {
  height: 0.7vw;
}

.draggable__guidance-text {
  margin-top: 0.6vw;
  font-family: 'GT Walsheim Pro', Arial, sans-serif;
  color: #fff;
  font-size: 1vw;
  line-height: 1.2vw;
  font-weight: 700;
  text-align: center;
}

.draggable__guidance-flex-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.custom-mouse-cursor {
  position: fixed;
  z-index: 999999999999999;
}

.slider__wrap-flex-60-child {
  width: 60vw;
  height: auto;
}

.slider__wrap-flex-40-child {
  width: 40vw;
  height: auto;
}

.play-button_wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.play-button {
  position: relative;
  z-index: 999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 8.333vw;
  height: 8.333vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  border-radius: 100%;
  background-color: #c4a190;
  color: #fff;
  text-decoration: none;
}

.play-button--icon {
  position: relative;
  left: 0.1vw;
  bottom: 0vw;
  width: 1vw;
  height: auto;
}

.play-button__label {
  position: absolute;
  font-family: 'GT Walsheim Pro', Arial, sans-serif;
  font-size: 1.11vw;
  line-height: 1.11vw;
  letter-spacing: -0.02vw;
}

@media (max-width: 991px) {
  .nav-bar {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
  }

  .nav__logo {
      margin-top: 4vw;
      margin-left: 6vw;
  }

  .svg-logo-notch-interactive {
      width: 10vw;
  }

  .preloader {
      display: none;
  }

  .preloader__content-text {
      font-size: 3.6vw;
      line-height: 3.6vw;
      letter-spacing: -0.1vw;
  }

  .vertical-slider__title {
      display: block;
      text-align: center;
  }

  .nav__overlay {
      display: none;
  }

  .main-nav__link {
      margin: 2vw 0vw;
      text-align: center;
  }

  .main-nav-wrap__link-track {
      width: 100%;
      padding-right: 6vw;
      padding-left: 6vw;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      -ms-grid-row-align: auto;
      align-self: auto;
  }

  .nav__contact-cta {
      margin-right: 16px;
  }

  .nav__control-wrap {
      margin-top: 5vw;
      margin-right: 5vw;
  }

  .meta-nav__wrap {
      bottom: 6vw;
      padding-right: 0vw;
      padding-left: 0vw;
  }

  .meta-nav__link {
      margin-right: 2.2vw;
      margin-left: 2.2vw;
      font-size: 1.8vw;
      line-height: 1.8vw;
  }

  .meta-nav__left-wrap {
      left: 6vw;
      bottom: 6vw;
  }

  .meta-nav__right-wrap {
      right: 6vw;
      bottom: 6vw;
  }

  .draggable__guidance {
      bottom: 6vw;
      width: 36vw;
  }

  .draggable-guidance-icon-svg {
      height: 1.6vw;
  }

  .draggable__guidance-text {
      margin-top: 1vw;
      font-size: 2vw;
      line-height: 2vw;
  }
}

@media (max-width: 767px) {
  .preloader__content-text {
      padding-right: 2vw;
      padding-left: 2vw;
      font-size: 6.6vw;
      line-height: 6.6vw;
  }

  .mobile-turn {
      position: fixed;
      left: 0%;
      top: 0%;
      right: 0%;
      bottom: 0%;
      z-index: 99999;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      overflow: hidden;
      width: 100%;
      height: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: #1a1a1a;
  }

  .mobile-turn__text {
      font-family: 'GT Walsheim Pro', Arial, sans-serif;
      color: #fff;
      font-size: 20px;
      line-height: 24px;
      text-align: center;
  }

  .nav__contact-cta {
      display: none;
  }

  .draggable__guidance {
      display: none;
  }
}

@media (max-width: 479px) {
  .bodywrap {
      position: static;
      overflow: visible;
  }

  .intro-teaser-content__inner-wrap {
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
  }

  .nav-bar {
      position: fixed;
      left: 0%;
      top: 0%;
      right: 0%;
      bottom: auto;
      z-index: 999;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: auto;
      margin: 0px;
      padding: 0px;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
  }

  .vertical-slider {
      position: fixed;
      z-index: 2;
  }

  .main-container {
      width: 100vw;
      padding-right: 8vw;
      padding-left: 8vw;
  }

  .nav__logo {
      z-index: 999;
      margin-top: 0vw;
      margin-left: 8vw;
  }

  .svg-logo-notch-interactive {
      width: 22vw;
  }

  .preloader {
      z-index: 9999;
      display: none;
  }

  .preloader__content-text {
      padding-right: 1vw;
      padding-left: 1vw;
      font-size: 8.6vw;
      line-height: 8.6vw;
  }

  .vertical-slider__title {
      display: block;
      font-size: 16vw;
      line-height: 16vw;
      text-align: center;
      letter-spacing: -0.6vw;
  }

  .mobile-turn {
      display: none;
  }

  .nav__overlay {
      position: fixed;
      z-index: 998;
      display: none;
      overflow: visible;
  }

  .main-nav__wrap {
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
  }

  .main-nav__link {
      margin-top: 2.4vw;
      margin-bottom: 2.4vw;
      font-size: 14vw;
      line-height: 15vw;
      letter-spacing: -0.2vw;
  }

  .main-nav-wrap__link-track {
      position: static;
      padding-right: 8vw;
      padding-left: 8vw;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start;
  }

  .js-nav-toggle {
      position: relative;
      z-index: 999;
      width: auto;
      height: auto;
      padding: 8vw;
  }

  .nav__contact-cta {
      position: relative;
      display: none;
      margin-right: 16px;
  }

  .nav__control-wrap {
      position: relative;
      z-index: 999;
      display: inline-block;
      margin-top: 0vw;
      margin-right: 0vw;
  }

  .slider__wrap-flex {
      width: 100vw;
      padding-right: 8vw;
      padding-left: 8vw;
  }

  .meta-nav__wrap {
      position: static;
      bottom: 8vw;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      margin-top: 4vw;
      padding-right: 8vw;
      padding-left: 8vw;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
      -ms-flex-align: start;
      align-items: flex-start;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      grid-auto-columns: 1fr;
      grid-column-gap: 22px;
      grid-row-gap: 16px;
      grid-template-areas: ".";
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      -ms-grid-rows: auto 16px auto 16px auto;
      grid-template-rows: auto auto auto;
  }

  .meta-nav__link {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-right: 6vw;
      margin-left: 0vw;
      padding-top: 4vw;
      padding-bottom: 4vw;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      opacity: 0.4;
      font-size: 5vw;
      line-height: 5.6vw;
      text-align: left;
  }

  .meta-nav__link.white {
      margin-right: 0vw;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      opacity: 1;
      text-align: left;
  }

  .meta-nav__inner-wrap {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      margin-top: 4vw;
      margin-bottom: 0vw;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
  }

  .meta-nav__left-wrap {
      display: none;
  }

  .meta-nav__right-wrap {
      right: auto;
      bottom: 4vw;
      width: 84vw;
      color: #fff;
      text-align: center;
  }

  .white-arrow-mobile {
      display: block;
      margin-left: 3vw;
  }

  .draggable__guidance {
      position: fixed;
      display: block;
      width: 64vw;
  }

  .draggable-guidance-icon-svg {
      height: 3.6vw;
  }

  .draggable__guidance-text {
      margin-top: 3vw;
      font-size: 4vw;
      line-height: 5vw;
  }
}

              
            
!

JS

              
                var container = document.querySelector('#vertical-slider-container')
var wrapper = document.querySelector('#js-vertical-slider-wrapper')
var boxes = document.querySelectorAll('.js-intro-teaser')
var boxCount = boxes.length
var containerWidth = Math.ceil(container.getBoundingClientRect().width)
var totalWidth = containerWidth * boxCount
var slider = { value: 0, follow: 0, ease: 0.08 }
var proxyWidth = window.innerWidth / 2
var proxySegment = proxyWidth / (boxCount - 1)
var bounds = { minX: 0, maxX: -proxyWidth }
var ratio = proxyWidth / (totalWidth - containerWidth)
var activeSlide = 0
var timelines = []
TweenMax.set('#js-vertical-slider-wrapper', { width: totalWidth })
TweenMax.set('.js-intro-teaser', { width: containerWidth })
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i]
  var title = box.querySelector('h1, h2')
  var tl = new TimelineMax({ paused: !0 })

  tl.from(title, 0.4, { opacity: 1, y: 0 })
  timelines[i] = tl
}

var draggable = new Draggable(proxy, {
  type: 'x',
  trigger: container,
  bounds: bounds,
  throwProps: !0,
  edgeResistance: 0.9,
  snap: snapX,
  onDrag: updateSlider,
  onThrowUpdate: updateSlider,
  onPress: onPress,
  onRelease: throwComplete,
  onThrowComplete: throwComplete,
})

function onPress() {
  TweenMax.to('.js-intro-teaser-content', 0.3, { scale: 0.6 })
  timelines[activeSlide].reverse()
}

function snapX(value) {
  var snap = Math.round(value / proxySegment)
  activeSlide = Math.max(0, Math.min(boxCount - 1, -snap))

  return snap * proxySegment
}

timelines[0].play()

function updateSlider() {
  let that = document.querySelector('.proxy')._gsTransform.x
  Math.round(that / proxySegment) * -1
  // console.log(Math.round(this.x / proxySegment) * -1);
  slider.value = draggable.x
}
function throwComplete() {
  if (!draggable.isThrowing) {
    var tl = new TimelineMax()
    tl.to('.js-intro-teaser-content', 0.2, { scale: 1 })
    tl.add(timelines[activeSlide].play())
  }
}

function tick() {
  slider.follow += (slider.value - slider.follow) * slider.ease
  TweenMax.set('#js-vertical-slider-wrapper', { x: slider.follow / ratio })
}

TweenMax.ticker.addEventListener('tick', tick)

window.addEventListener('resize', function () {
  containerWidth = Math.ceil(container.getBoundingClientRect().width)
  totalWidth = containerWidth * boxCount
  proxyWidth = window.innerWidth / 2
  proxySegment = proxyWidth / (boxCount - 1)
  bounds = { minX: 0, maxX: -proxyWidth }
  ratio = proxyWidth / (totalWidth - containerWidth)
  draggable.applyBounds(bounds)
  TweenMax.set(proxy, { x: -activeSlide * proxySegment })
  draggable.update()
  slider.value = draggable.x
  TweenMax.set('#js-vertical-slider-wrapper', { width: totalWidth })
  TweenMax.set('.js-intro-teaser', { width: containerWidth })
})

var timeoutId

function slideAnim() {
  //   event.preventDefault();
  // slider.follow = 0;
  let that = document.querySelector('.proxy')._gsTransform.x

  if (timeoutId) {
    clearTimeout(timeoutId)
    TweenMax.ticker.removeEventListener('tick', tick)

    slider.follow += -event.deltaY * 0.02
    slider.value = -event.deltaY * 0.02 + slider.follow
    // slider.follow += event.deltaY * 0.5; //event.deltaY
    // move = Math.min(Math.max(-100, move), 100);
    TweenMax.to('.proxy', 0.3, { x: slider.follow })
    TweenMax.to('.js-vertical-slider-wrapper', 0.3, {
      x: slider.follow / ratio,
    })
    updateSlider()
    onPress()
    // draggable.x = slider.value;
    // console.log(draggable.x, slider.value, slider.follow)

    timelines[activeSlide].reverse()
  }
  timeoutId = setTimeout(function () {
    throwComplete()
    snapX(slider.follow)
    TweenMax.ticker.addEventListener('tick', tick)
  }, 800)
}

window.addEventListener('wheel', slideAnim)

              
            
!
999px

Console