:root{
  --distance-between:160px;
}
.fullwidth-vimeo {
  position: relative;
  width: calc(100% - (2 * var(--grid-gap)));
  max-width: 2560px;
  margin: auto;
  margin-top: 80px;
  overflow: hidden;
}
.video-wrapper{width: 100%;position: relative;padding: 0;}
.video-wrapper iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-width: 0px;border-style: none;border-color: none;border-image: none;}
.headlines{margin-top: var(--distance-between);}
.headlines, .description{position: relative;width: 100%;padding: 0px 0 20px 0;text-align: center;}
.description{font-size: var(--default-font-size);font-weight: 100;letter-spacing: 0.02em;width: 40%;margin: auto;line-height: 1.5;padding-bottom: 0;}
.headline{font-size: var(--default-font-size);font-weight: 100;letter-spacing: 0.02em;}
.sub-headline{font-size: var(--default-font-size);font-weight: 100;letter-spacing: 0.02em;}
.gallery {
  width: calc(100% - (2 * var(--grid-gap)));
  max-width: 2560px;
  position: relative;
  margin: auto;
  margin-top: 0;
  display: flow-root;
}

.reel-gallery {
  width: calc(100% - (2 * var(--grid-gap)));
  max-width: 2560px;
  position: relative;
  margin: auto;
  margin-top: 0;
  display: flow-root;
}

.reel-gallery .reel-gallery-item {
  position: relative;
  float: left;
  display: grid;
  width: calc(50% - var(--grid-gap)/2);
  margin-right: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

.reel-gallery .reel-video {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-item {
  position: relative;
  float: left;
  display: grid;
  width: calc(50% - var(--grid-gap)/2);
  margin-right: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}
.reel-gallery .reel-gallery-item:nth-child(even),
.gallery-item:nth-child(even){margin-right: 0%;}

.reel-gallery .reel-gallery-item:last-child,
.gallery .gallery-item:last-child{margin-bottom: calc(110px + var(--distance-between));}

.gallery-item img{position: relative;max-width: 100%;}
.next-project{padding: 40px 0 0 0;width: 100%;text-align: center;font-size: var(--default-font-size);font-weight: 200;}
.bold-link{font-weight: 500;}
.next-project.flow-text a{text-decoration: none;}
.video-poster{position: absolute;top: 0px;left: 0px;width: 100%;z-index: 99;overflow: hidden;transition: 3s all ease-in-out;}
.video-poster img{position: relative;width: 100%;height: auto;display: block;}
.ply-btn{opacity:0;border-radius: 50px; width: 80px;height: 80px;position: absolute;z-index: 999;left: 50%;top: 50%;transform: translate(-50%, -50%);transition: all 0.4s ease-in-out;cursor: pointer;pointer-events: none;}
.ply-btn.afterLoad{opacity:0.5;pointer-events: all;}
.ply-btn:hover{cursor: pointer; opacity: 1;}
.video-poster.hide{opacity: 0;visibility: hidden;transition: 3s all ease-in-out;}
.video-post:last-child{margin-bottom: var(--default-distance-bottom);}
.languages.inner-project {margin-bottom: var(--distance-between);}
.languages li.active{display: none;}
.languages a{font-weight: inherit;border-bottom: 0px solid black;text-decoration: underline;text-decoration-color: rgba(0,0,0,0.5);transition: all 150ms ease-in-out;display: inline-block;margin-top: 40px;}
.languages a:hover{color: rgba(0,0,0,0.5);cursor: pointer;}
.video-posts{margin: 0px auto 0 auto;}
.play-teaser{transition: all 0.1s ease-in-out;cursor: pointer;text-align: center; font-size: 14px;font-weight: 100;letter-spacing: 0.02em; margin: 20px 0 0 0; color: black;}
/*
.play-teaser.white{color: white;}
.play-teaser.black{color: black;}
*/
.play-teaser:hover{cursor: pointer;opacity: 0.6;}


@media only screen and (max-width: 1280px) {
  .headlines{padding: 0px 0 20px 0;}
  .description {width: 60%;}
}

@media only screen and (max-width: 980px) {
  :root{
    --distance-between:80px;
  }
}

@media only screen and (max-width: 736px) {
  .ply-btn{width: 60px;height: 60px;}
  .video-posts{margin: 0px auto 0 auto;}
}

@media only screen and (max-width: 600px) {
  .reel-gallery .reel-gallery-item,
  .gallery-item {
    width: 100%;
    margin-right: 0;
  }
}

@media only screen and (min-device-width: 375px)
and (max-device-height: 812px)
and (-webkit-device-pixel-ratio: 3) ,
only screen
and (min-device-width: 375px)
and (max-device-height: 667px)
and (-webkit-device-pixel-ratio: 2) ,   (max-width:600px)
{
  .fullwidth-vimeo{margin-top: 120px;}
  .description {width: 85%;}
  .ply-btn{width: 45px;height: 45px;}
}
