/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

.hideScroll {
  overflow-y: hidden;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  /* height: 100%; */
  font-family: stolzl, Arial, Helvetica, sans-serif;
  font-weight: var(--book);
  background-color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.open {
  height: 100%;
  overflow: hidden;
}
/* 
html.open,
body.open {
  height: 100%;
  overflow: hidden;
} */

body.page-transition {
  transition: all 0.5s;
  opacity: 0;
  background: #000000;
}

/*
  6. Improve media defaults
*/
/* img, */
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a:hover {
  cursor: pointer;
}

.always-hide {
  display: none;
}

.mobile-hide {
  display: none;
}

.no-transition {
  transition: none;
}

.no-transform:hover {
  transform: none;
}

.no-transform {
  transform: none;
}

:root {
  --impossible-yellow: #ffe53b;
  --inevitable-red: #ff2525;
  --slate: #231f20;
  --black: #000000;
  --white: #ffffff;
  --warm-shade: #f6f1ed;

  /* font-weights*/
  --book: 300;
  --medium: 500;
  --bold: 700;
}

.main-stack {
  overflow: hidden;
}
.main-stack {
  /* overflow-x: hidden; */
}

.white {
  color: var(--white);
}

.visual-QA-overlay {
  display: none;
  position: fixed;
  top: 0px;
  opacity: 0.5;
  z-index: 1001;
}

.button-background {
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
  border-radius: 0px 25px;
  /* width: 465px; */
  width: 100%;
  max-width: 465px;
  height: 61px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  font-family: stolzl, sans-serif;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

.mr-40 {
  margin-right: 40px;
}

.no-mr {
  margin-right: 0 !important;
}

.mt-2 {
  margin-top: 2rem;
}

.fl {
  display: flex;
}

[class*="fl-"] {
  display: flex;
}

html {
  scroll-behavior: smooth;
}

.video-component {
  height: inherit;
}

.player-wrapper {
  height: inherit;
}

.video-component #previewImage {
  position: absolute;
  height: inherit;
  width: 100%;
  height: 100%;
  z-index: 99;
}

.main-stack figure.vertical::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: clip-path 0.3s;
}

.main-stack figure.vertical img {
  display: block;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s 0.3s;
}

.main-stack figure.vertical::before,
.main-stack figure.vertical figcaption {
  clip-path: inset(0 0 100% 0);
}

.main-stack figure.vertical.is-animated::before,
.main-stack figure.vertical.is-animated img,
.main-stack figure.vertical.is-animated figcaption {
  clip-path: inset(0);
}

.main-stack a.vertical::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: clip-path 0.3s;
}

.main-stack a.vertical img {
  display: block;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s 0.3s;
}

.main-stack a.vertical::before,
.main-stack a.vertical figcaption {
  clip-path: inset(0 0 100% 0);
}

.main-stack a.vertical.is-animated::before,
.main-stack a.vertical.is-animated img,
.main-stack a.vertical.is-animated figcaption {
  clip-path: inset(0);
}

.main-stack figure.horizontal::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: clip-path 0.3s;
}

.main-stack figure.horizontal img {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s 0.3s;
}

.main-stack figure.horizontal::before,
.main-stack figure.horizontal figcaption {
  clip-path: inset(0 0 0 100%);
}

.main-stack figure.horizontal.is-animated::before,
.main-stack figure.horizontal.is-animated img,
.main-stack figure.horizontal.is-animated figcaption {
  clip-path: inset(0);
}

/* vert-delayed */

.main-stack figure.vert-delayed::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: clip-path 0.3s;
  transition-delay: 3s;
}

.main-stack figure.vert-delayed img {
  display: block;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s 0.3s;
  transition-delay: 3s;
}

.main-stack figure.vert-delayed::before,
.main-stack figure.vert-delayed figcaption {
  clip-path: inset(0 0 100% 0);
}

.main-stack figure.vert-delayed.is-animated::before,
.main-stack figure.vert-delayed.is-animated img,
.main-stack figure.vert-delayed.is-animated figcaption {
  clip-path: inset(0);
}

@media screen and (max-width: 500px) {
  #playerButton img {
    width: 50%;
  }
}

.video-component #playerButton {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 60%;
  max-height: 100px;
  max-width: 100px;
  z-index: 101;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.player-wrapper .ytp-pause-overlay {
  display: none !important;
}

.overlay-background {
  position: absolute;
  width: 100%;
  height: 100%;
}

.overlay-background-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.overlay-background-image.left {
  object-position: left;
}

.overlay-background-image.right {
  object-position: right;
}