/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  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;
}

.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;
}