/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  font-weight: normal;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*****************/
/*  Fonts        */
/*****************/
@font-face {
  font-family: Platform Bold;
  src: url(assets/fonts/Platform-Bold.otf) format("opentype");
}
@font-face {
  font-family: Platform Medium;
  src: url(assets/fonts/Platform-Medium.otf) format("opentype");
}
@font-face {
  font-family: Trade Gothic;
  src: url(assets/fonts/TradeGothicLTStd.otf) format("opentype");
}
@font-face {
  font-family: Trade Gothic Light;
  src: url(assets/fonts/TradeGothicLTStd-Light.otf) format("opentype");
}
@font-face {
  font-family: Trade Gothic Bold;
  src: url(assets/fonts/TradeGothicLTStd-Bold.otf) format("opentype");
}
/*****************/
/* Base styling  */
/*****************/
* {
  box-sizing: border-box;
}

html {
  margin: 0;
  font-size: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background-color: #000000;
  color: #ffffff;
  height: 100%;
}

body:fullscreen {
  overflow: hidden;
}

h1,
h2,
h3,
p {
  margin-bottom: 0;
}

a {
  color: white !important;
  text-decoration: none !important;
  border-bottom: 1px solid #d4c179;
  padding-bottom: 1px;
}

a:hover {
  border-bottom: none;
}

.link.mobile-link {
  border-bottom: 1px solid #d4c179 !important;
}

@media screen and (min-width: 1400px) {
  a {
    border-bottom: 2.25px solid #d4c179;
    padding-bottom: 2px;
  }

  a:hover {
    border-bottom: none;
  }

  /*a:active {
        border-bottom: 2.5px solid #D4C179;
      }

      a:hover:focus {
        padding-bottom: 2px;
        border-bottom: 2.25px solid #D4C179;
      }*/
}
.hidden {
  display: none !important;
}

/* Styling for plyr video controls */
button.plyr__control {
  background: none !important;
  box-shadow: none !important;
}

.plyr--full-ui input[type=range] {
  color: lightgrey !important;
}

.plyr__control .plyr__control--pressed {
  height: 40px !important;
  width: 40px !important;
}

.plyr__control .plyr__control--overlaid {
  display: none;
}

/****************************************/
/* Layout for screen size 375px and up  */
/****************************************/
/* Header Styling */
header {
  padding: 22px 22px 0 22px;
  position: absolute;
  background-color: transparent;
  height: 40px;
  width: 100%;
  z-index: 5;
}

header.mobile-header {
  position: absolute;
}

header.mobile-header > .slab-logo {
  float: none;
}

header.mobile-header > .studio-span {
  display: none;
}

.slab-logo {
  width: 131.3px;
  height: 25px;
  cursor: pointer;
  margin: auto;
}

.studio-span {
  font-size: 17px;
  font-family: "Trade Gothic Bold", "Roboto Condensed", "Helvetica";
  letter-spacing: 0.02em;
  float: right;
  display: none;
  cursor: pointer;
}

/* Main Content Styling */
#contentScrollAnchor {
  position: absolute;
  top: -8px;
}

#topScrollAnchor {
  position: absolute;
  top: 0;
}

.main-content {
  margin-left: 22px;
  margin-right: 22px;
  text-align: left;
  position: relative;
}

.slogan {
  font-family: "Platform Medium", "Helvetica";
  letter-spacing: 0.005em;
  font-size: 23px;
  line-height: 37px;
  margin-bottom: 6px;
}

.slogan.mobile-slogan {
  display: block;
}

.mission-statement {
  padding-top: 110px;
  padding-bottom: 110px;
  position: relative;
}

.mission-statement > p {
  font-family: "Trade Gothic Light", "Roboto Condensed", "Helvetica";
  font-size: 15.5px;
  line-height: 34px;
  letter-spacing: 0.06em;
}

.mission-statement.mobile-statement > p {
  font-family: "Trade Gothic Light", "Roboto Condensed", "Helvetica";
}

.mission-statement.mobile-statement > p > span {
  display: initial;
  white-space: normal;
}

.title,
.copyright {
  font-family: "Trade Gothic Light", "Roboto Condensed", "Helvetica";
  font-size: 15.5px;
  line-height: 34px;
  letter-spacing: 0.06em;
}

.copyright {
  padding-bottom: 63px;
}

.link {
  font-family: "Trade Gothic", "Roboto Condensed", "Helvetica";
  line-height: 40px;
  font-size: 25px;
}

.location > .link {
  line-height: 38px;
}

.portfolio {
  padding-top: 110px;
  padding-bottom: 110px;
}

.descriptor {
  padding-top: 110px;
  padding-bottom: 110px;
}

.main-content.mobile-content > .descriptor {
  /* width: 350px; */
  width: 325px;
}

.descriptor > p {
  font-family: "Trade Gothic Light", "Roboto Condensed", "Helvetica";
  font-size: 15.5px;
  letter-spacing: 0.06em;
  line-height: 34px;
}

/***********************************************/
/* Layout for mobile screen size 414px and up  */
/***********************************************/
@media screen and (min-width: 414px) {
  header {
    padding: 25px 28px 0 28px;
  }

  .slab-logo {
    width: 140.45px;
    height: 26.74px;
  }

  .main-content {
    margin-left: 28px;
    margin-right: 28px;
  }

  .slogan {
    font-size: 24.5px;
    line-height: 42px;
  }

  .mission-statement > p {
    font-size: 16.75px;
    line-height: 36.75px;
  }

  .title,
.copyright {
    font-size: 16.75px;
    line-height: 40.75px;
  }

  .link {
    font-size: 25.75px;
    line-height: 40px;
  }

  .location > .link {
    line-height: 38px;
  }

  .main-content.mobile-content > .descriptor {
    width: 355px;
  }

  .descriptor > p {
    font-size: 16.6px;
    line-height: 36.75px;
  }
}
/****************************************/
/* Layout for screen size 640px and up  */
/****************************************/
@media screen and (min-width: 640px) {
  /* Header Styling */
  header {
    position: fixed;
    padding-top: calc(18px + 5 * ((100vw - 640px) / 194));
    padding-right: calc(20px + (25 - 20) * ((100vw - 640px) / (834 - 640)));
    padding-left: calc(20px + (25 - 20) * ((100vw - 640px) / (834 - 640)));
  }

  .slab-logo {
    float: left;
    width: calc(70.9px + (93.55 - 70.9) * ((100vw - 640px) / (834 - 640)));
    height: calc(13.5px + (17.81 - 13.5) * ((100vw - 640px) / (834 - 640)));
  }

  .studio-span {
    display: block;
    font-size: calc(14.5px + (17 - 14.5) * ((100vw - 640px) / (834 - 640)));
  }

  /* Main Content Styling */
  .main-content {
    margin-left: 18.125vw;
    margin-right: 0;
  }

  #contentScrollAnchor {
    top: 0;
  }

  .slogan {
    display: none;
  }

  .mission-statement {
    padding-top: 17.023vw;
    padding-bottom: 16.067vw;
  }

  .mission-statement > p {
    font-family: "Platform Medium", "Helvetica";
    font-size: 2.697vw;
    line-height: inherit;
    letter-spacing: 0em;
  }

  .mission-statement > p > span {
    display: block;
    white-space: nowrap;
  }

  .title,
.copyright {
    font-size: 15.5px;
    line-height: 34px;
  }

  .link {
    font-size: 25px;
  }

  .location > .link {
    line-height: 1.6;
    vertical-align: bottom;
  }

  .contact,
.portfolio {
    padding-top: 0;
    padding-bottom: calc( 120px + (128 - 120) * ((100vw - 640px) / (1024 - 640)) );
  }

  .descriptor {
    padding-top: calc(120px + (165 - 120) * ((100vw - 640px) / (834 - 640)));
    padding-bottom: calc(120px + (138 - 120) * ((100vw - 640px) / (834 - 640)));
    width: auto;
  }

  .descriptor > p {
    font-size: 15.5px;
    line-height: 34px;
  }

  .descriptor > p > span {
    white-space: nowrap;
    display: block;
  }
}
/***********************************************/
/* Layout for mobile screen size 667px and up  */
/***********************************************/
@media screen and (min-width: 667px) {
  header.mobile-header {
    padding: 22px 53px 0 53px;
  }

  header.mobile-header > .slab-logo {
    width: 131.3px;
    height: 25px;
  }

  .main-content.mobile-content {
    margin-left: 53px;
    margin-right: 53px;
  }

  .mission-statement.mobile-statement {
    width: 570px;
  }

  .mission-statement.mobile-statement > p {
    font-size: 15.5px;
    line-height: 34px;
    letter-spacing: 0.05em;
  }

  .slogan {
    font-size: 23px;
  }

  .title,
.copyright {
    font-size: 15.5px;
    line-height: 39px;
  }

  .link {
    font-size: 24px;
    line-height: 1.5;
  }

  .main-content.mobile-content > .contact,
.main-content.mobile-content > .portfolio {
    padding-bottom: 110px;
  }

  .descriptor > p {
    font-size: 15.5px;
    line-height: 34px;
  }
}
/***********************************************/
/* Layout for mobile screen size 736px and up  */
/***********************************************/
@media screen and (min-width: 736px) {
  header.mobile-header {
    padding: 26px 60px 0 60px;
  }

  header.mobile-header > .slab-logo {
    width: 140.45px;
    height: 26.74px;
  }

  .main-content.mobile-content {
    margin-left: 60px;
    margin-right: 60px;
  }

  .mission-statement.mobile-statement {
    width: 603px;
  }

  .mission-statement.mobile-statement > p {
    font-size: 16.75px;
    line-height: 36.75px;
  }

  .slogan {
    font-size: 24.5px;
  }

  .title,
.copyright {
    font-size: 16.75px;
    line-height: 41.75px;
  }

  .link {
    font-size: 25.75px;
  }

  .descriptor > p {
    font-size: 16.6px;
    line-height: 34px;
  }
}
@media screen and (min-width: 834px) {
  /* Header Styling */
  header {
    padding-top: calc(23px + (29 - 23) * ((100vw - 834px) / (1024 - 834)));
    padding-right: calc(25px + (31 - 25) * ((100vw - 834px) / (1024 - 834)));
    padding-left: calc(25px + (31 - 25) * ((100vw - 834px) / (1024 - 834)));
  }

  .slab-logo {
    width: calc(93.55px + (114.86 - 93.55) * ((100vw - 834px) / (1360 - 834)));
    height: calc(17.81px + (21.87 - 17.81) * ((100vw - 834px) / (1360 - 834)));
  }

  .studio-span {
    font-size: calc(17px + (20 - 17) * ((100vw - 834px) / (1360 - 834)));
  }

  .title,
.copyright {
    font-size: calc(15.5px + (18.8 - 15.5) * ((100vw - 834px) / (1024 - 834)));
    line-height: calc(34px + (49 - 34) * ((100vw - 834px) / (1024 - 834)));
  }

  .location > .title {
    line-height: 42px;
  }

  .link {
    font-size: calc(25px + (29.5 - 25) * ((100vw - 834px) / (1024 - 834)));
  }

  .contact,
.portfolio {
    padding-bottom: calc( 128px + (158 - 128) * ((100vw - 834px) / (1024 - 834)) );
  }

  .descriptor {
    padding-top: calc(165px + (208 - 165) * ((100vw - 834px) / (1024 - 834)));
    padding-bottom: calc( 138px + (210 - 138) * ((100vw - 834px) / (1024 - 834)) );
  }

  .descriptor > p {
    font-size: calc(15.5px + (18.8 - 15.5) * ((100vw - 834px) / (1024 - 834)));
    line-height: calc(34px + (44 - 34) * ((100vw - 834px) / (1024 - 834)));
  }
}
/****************************************/
/* Layout for screen size 1024px and up  */
/****************************************/
@media screen and (min-width: 1024px) {
  header {
    padding-top: calc(29px + (23 - 29) * ((100vw - 1024px) / (1112 - 1024)));
    padding-right: calc(31px + (25 - 31) * ((100vw - 1024px) / (1112 - 1024)));
    padding-left: calc(31px + (25 - 31) * ((100vw - 1024px) / (1112 - 1024)));
  }

  .title,
.copyright {
    font-size: 18.8px;
    line-height: 49px;
  }

  .copyright {
    padding-bottom: 109px !important;
  }

  .link {
    font-size: calc( 29.5px + (34.25 - 29.5) * ((100vw - 1024px) / (1112 - 1024)) );
  }

  .contact,
.portfolio {
    padding-bottom: calc( 158px + (199 - 158) * ((100vw - 1024px) / (1112 - 1024)) );
  }

  .descriptor {
    padding-top: calc(208px + (182 - 208) * ((100vw - 1024px) / (1112 - 1024)));
    padding-bottom: calc( 210px + (206 - 210) * ((100vw - 1024px) / (1112 - 1024)) );
  }

  .descriptor > p {
    font-size: calc( 18.8px + (24.5 - 18.8) * ((100vw - 1024px) / (1112 - 1024)) );
    line-height: calc(44px + (49 - 44) * ((100vw - 1024px) / (1112 - 1024)));
  }
}
/****************************************/
/* Layout for screen size 1112px and up  */
/****************************************/
@media screen and (min-width: 1112px) {
  header {
    padding-top: calc(23px + (27 - 23) * ((100vw - 1112px) / (1366 - 1112)));
    padding-right: calc(25px + (30 - 25) * ((100vw - 1112px) / (1366 - 1112)));
    padding-left: calc(25px + (30 - 25) * ((100vw - 1112px) / (1366 - 1112)));
  }

  .contact,
.portfolio {
    padding-bottom: calc( 199px + (164 - 199) * ((100vw - 1112px) / (1366 - 1112)) );
  }

  .title,
.copyright {
    font-size: 18.8px;
    line-height: 49px;
  }

  .location > .title {
    line-height: calc(56px + (56 - 56) * ((100vw - 1112px) / (1366 - 1112)));
  }

  .link {
    font-size: 34.25px;
  }

  .descriptor {
    padding-top: calc(182px + (171 - 182) * ((100vw - 1112px) / (1366 - 1112)));
    padding-bottom: calc( 206px + (204 - 206) * ((100vw - 1112px) / (1366 - 1112)) );
  }

  .descriptor > p {
    font-size: calc(24.5px + (25 - 24.5) * ((100vw - 1112px) / (1366 - 1112)));
    line-height: calc(49px + (47 - 49) * ((100vw - 1112px) / (1366 - 1112)));
  }
}
@media screen and (min-width: 1280px) {
  .title {
    letter-spacing: 0.036em;
  }
}
/****************************************/
/* Layout for screen size 1366px and up  */
/****************************************/
@media screen and (min-width: 1366px) {
  header {
    padding-top: calc(27px + (32 - 27) * ((100vw - 1366px) / (1920 - 1366)));
    padding-right: calc(30px + (43 - 30) * ((100vw - 1366px) / (1920 - 1366)));
    padding-left: calc(30px + (43 - 30) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .slab-logo {
    width: calc( 114.86px + (128.8 - 114.86) * ((100vw - 1366px) / (1920 - 1366)) );
    height: calc(21.87px + (24.52- 21.87) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .studio-span {
    font-size: calc(20px + (22 - 20) * ((100vw - 1366px) / (1920 - 1366)));
  }

  /* Extend line height all the way to 2856 */
  .title,
.copyright {
    font-size: calc( 18.8px + (20.5 - 18.8) * ((100vw - 1366px) / (1920 - 1366)) );
    line-height: calc(48px + (75 - 48) * ((100vw - 1366px) / (2856 - 1366)));
  }

  .link {
    font-size: calc( 34.25px + (48 - 34.25) * ((100vw - 1366px) / (1920 - 1366)) );
  }

  .contact,
.portfolio {
    padding-bottom: calc( 164px + (215 - 164) * ((100vw - 1366px) / (1920 - 1366)) );
  }

  .descriptor {
    padding-top: calc(171px + (225 - 171) * ((100vw - 1366px) / (1920 - 1366)));
    padding-bottom: calc( 204px + (257 - 204) * ((100vw - 1366px) / (1920 - 1366)) );
  }

  .descriptor > p {
    font-size: calc(25px + (34 - 25) * ((100vw - 1366px) / (1920 - 1366)));
    line-height: calc(47px + (66 - 47) * ((100vw - 1366px) / (1920 - 1366)));
  }

  .copyright {
    padding-bottom: 88px !important;
  }
}
/*****************************************/
/* Styling for screen size 1920px and up */
/*****************************************/
@media screen and (min-width: 1920px) {
  /* Header Styling */
  header {
    padding-top: calc(32px + (47 - 32) * ((100vw - 1920px) / (2560 - 1920)));
    padding-right: calc(43px + (55 - 43) * ((100vw - 1920px) / (2560 - 1920)));
    padding-left: calc(43px + (55 - 43) * ((100vw - 1920px) / (2560 - 1920)));
  }

  .slab-logo {
    width: calc(128.8px + (169.2 - 128.8) * ((100vw - 1920px) / (2560 - 1920)));
    height: calc( 24.52px + (32.21 - 24.52) * ((100vw - 1920px) / (2560 - 1920)) );
  }

  .studio-span {
    font-size: calc(22px + (28 - 22) * ((100vw - 1920px) / (2560 - 1920)));
  }

  /* Main Content Styling */
  .main-content {
    margin-left: calc( 349.5px + (606 - 349.5) * ((100vw - 1920px) / (2560 - 1920)) );
    margin-right: calc( 349.5px + (606 - 349.5) * ((100vw - 1920px) / (2560 - 1920)) );
  }

  .mission-statement {
    padding-top: 326.67px;
    padding-bottom: 308.48px;
  }

  .mission-statement > p {
    font-size: calc( 51.75px + (57.15 - 51.75) * ((100vw - 1920px) / (2560 - 1920)) );
  }

  .title,
copyright {
    font-size: 20.5px;
  }

  .link,
copyright {
    font-size: 48px;
  }

  .contact,
.portfolio {
    padding-bottom: 215px;
  }

  .descriptor {
    padding: 292px 0 257px 0;
  }

  .descriptor > p {
    font-size: 34px;
    line-height: 66px;
  }

  .copyright {
    padding-bottom: 97px !important;
  }
}
/*****************************************/
/* Styling for screen size 2560px and up */
/*****************************************/
@media screen and (min-width: 2560px) {
  header {
    padding: 47px 55px 0 55px;
  }

  .slab-logo {
    width: 169.2px;
    height: 32.21px;
  }

  .studio-span {
    font-size: 28px;
  }

  .main-content {
    margin-left: calc((100% - 1348px) * 0.5);
    margin-right: calc((100% - 1348px) * 0.5);
  }

  .mission-statement > p {
    font-size: 57.15px;
  }
}
.reel-link {
  font-family: "Trade Gothic", "Roboto Condensed", "Helvetica";
  line-height: 26px;
  font-size: 24px;
  padding-top: 110px;
  border-bottom: 1px solid #d4c179;
  display: inline-block;
  width: auto;
  /* width: 120px; */
}

#slabVidReel {
  height: 100vh;
  width: 100vw;
}

@media screen and (min-width: 414px) {
  .reel-link {
    font-size: 25.75px;
    /* width: 129px; */
  }
}
@media screen and (min-width: 640px) {
  .reel-link {
    padding-top: 16.067vw;
  }
}
@media screen and (min-width: 667px) {
  .reel-link {
    font-size: 24px;
    /* width: 119px; */
  }
}
@media screen and (min-width: 736px) {
  .reel-link {
    font-size: 25.75px;
    /* width: 130px; */
  }
}
video::-webkit-media-controls {
  display: none !important;
}

.video-block {
  position: relative;
  background-color: black;
  height: 100vh;
  width: 100%;
  opacity: 0.94;
  overflow: hidden;
}

#slab-video-container {
  height: 100%;
  width: 100vw;
}

#slab-video-main {
  height: 100%;
  width: 100vw;
  pointer-events: none;
}

.video-block.mobileVideo #slab-video-container {
  width: 100%;
  height: calc(100vw * 16 / 9);
}

.video-block.mobileVideo #slab-video-main {
  width: inherit;
  height: inherit;
}

.video-block.mobileVideo.mobileLandscape #slab-video-main {
  height: calc(100vw * 9 / 16);
  background-position: center;
  -webkit-transform: scale(3.2);
  transform: scale(3.2);
  width: 100%;
}

.sound-icon {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -webkit-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  display: none;
}

.sound-icon:hover {
  opacity: 1 !important;
}

.icon-unmuted {
  margin-right: 3px;
}

.partialOpacity {
  opacity: 0.5;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 5px;
  }
}
@media screen and (min-width: 640px) {
  .video-block {
    height: calc(100vw * (9 / 16));
    opacity: unset;
  }

  .sound-icon {
    display: block;
    position: absolute;
    cursor: pointer;
    bottom: 25px;
    right: 25px;
    height: 20.92px;
    width: 20.92px;
  }
}
@media screen and (min-width: 834px) {
  .sound-icon {
    /*display: block;
    position: absolute;
    cursor: pointer;*/
    bottom: 25px;
    right: 25px;
    height: 20.92px;
    width: 20.92px;
  }
}
@media screen and (min-width: 1024px) {
  .sound-icon {
    height: 25.69px;
    width: 25.69px;
    bottom: 29px;
    right: 29px;
  }
}
@media screen and (min-width: 1112px) {
  .sound-icon {
    bottom: 23px;
    right: 23px;
    height: 20.92px;
    width: 20.92px;
  }
}
@media screen and (min-width: 1366px) {
  .sound-icon {
    height: 27.08px;
    width: 27.09px;
    bottom: 30px;
    right: 30px;
  }
}
@media screen and (min-width: 1920px) {
  .sound-icon {
    /*height: 38.07px;
    width: 38.06px;*/
    height: 34.07px;
    width: 34.07px;
    bottom: 40px;
    right: 40px;
  }
}
@media screen and (min-width: 2560px) {
  .sound-icon {
    height: 34.07px;
    width: 34.07px;
    bottom: 49px;
    right: 55px;
  }
}