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

html,
body {
  height: 100%;

}

/* .is-transitioning {
  pointer-events: none;
  cursor: progress;
} */

:root {
  --heading-xl: font-size: max(5.125rem,min(13.3333vw + 2rem,18rem));
  --body-blurb-size: max(.875rem,min(.647249vw + .723301rem,1.5rem));;
  --h2-size: 4rem;
}

* {
  margin: 0;
  box-sizing: border-box;
  /*transition: all 0.3s ease-in-out;*/
}


/*
html {
  --color: transparent;
}
*/



body {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* background: var(--bg-color); */
  transition: 0.3s ease-out;
  background: #1a1a1a;
  /* overflow: hidden; */
}


@font-face {
  font-family: "Monument Extended-Ultra-Light";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/MonumentExtended-Ultralight.ttf") format("truetype");
}

@font-face {
  font-family: "M Light2";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/MExtra-Light.ttf") format("truetype");
}


@font-face {
  font-family: "Monument Extended-Light";
  /* font-style: normal; */
  /* font-weight: 300; */
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/MonumentExtended-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Monument Extended-Bold";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/monumentextended-bold.ttf") format("truetype");
}

@font-face {
  font-family: "Monument Extended-UltraBold";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/MonumentExtended-Ultrabold.ttf") format("truetype");
}

@font-face {
  font-family: 'Rational';
  /* 'R-disp-semi-bold'; */
  src: url('https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/R-disp-semi-bold.woff') format("woff");
}

@font-face {
  font-family: 'Rational-light';
  src: url('https://assets.codepen.io/4086427/RationalTextDEMO-Light.otf') format("opentype");
}

@font-face {
  font-family: 'R-disp-med';
  src: url('   https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/rdisp-medium.woff') format("woff");
}


@font-face {
  font-family: "R-bk-med";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/ra-txt-med.woff") format("woff");
}


@font-face {
  font-family: "R-light";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/rdisp-light.woff") format("woff");
}

@font-face {
  font-family: "R-txt-book-light";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/Rattxt-book.woff") format("woff");
}

@font-face {
  font-family: 'R-txt-light';
  src: url('https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/RTxt-Light.ttf') format("truetype");
}

@font-face {
  font-family: 'M-light';
  src: url('https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/M-Light.otf') format("opentype");
}


@font-face {
  font-family: 'M-Black';
  src: url('https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/M-Black.woff') format("woff");
}


@font-face {
  font-family: "rdisp-medium";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/rdisp-medium.woff") format("woff");
}

@font-face {
  font-family: "rdisp-light";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/rdisp-light.woff") format("woff");
}

@font-face {
  font-family: "rtext-extra-light";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/RTxt-ExtraLight.woff") format("woff");
}

@font-face {
  font-family: "rtext-hairline";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/RTxt-Hairline.woff") format("woff");
}

@font-face {
  font-family: "rtext-thin";
  src: url("https://mrc-website-assets.s3.eu-west-2.amazonaws.com/fonts/RTxt-Thin.woff") format("woff");
}



h1 {
  font-size: 4em;
  margin: 0;
  color: white;
  position: relative;
  overflow: hidden;
  font-family: "Monument Extended-Bold";
  letter-spacing: 0.05em;
  /* padding-bottom: 10px; */
}


/* SQUASHED GLOBE */

.squashed-globe-container {
  /* display: flex;
  justify-content: right;
  margin-left: 10vw;
  width: 80px;
  height: 80px; */
  display: flex;
  justify-content: center;
padding-bottom:1rem;
z-index:2;
max-width: 20vw;
}

.video-container-mobile {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 50vh;
}


#video-header-bg {
  position: absolute;
  width: 100vw;
  height: 100%;
  opacity: 45%;
}


.contact-qr-block {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 0rem;
}

#contact-code {
  width: 40vw;
}



/* WORKED FOR SECTION */

.worked-for-section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  /* background: #1a1a1a; */
  box-sizing: border-box;
  padding: 10rem 0;
}

/* Parent wrapper */
.wrapper {
  display: flex;
  align-content: center;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  max-width: 100vw;
  /* --color-bg: #1a1a1a; */
  --color-bg-accent: #ecdcc0;
  --size: clamp(20rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: 15s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
  /* background: #1a1a1a;
    box-sizing: border-box; */
}

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  box-sizing: border-box;
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    animation-play-state: paused;
  }
}

.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: -3s;
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }

  to {
    transform: translateX(var(--scroll-end));
  }
}

@keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }

  to {
    transform: translateY(var(--scroll-end));
  }
}

/* Element styles */
.marquee svg {
  display: grid;
  place-items: center;
  width: var(--size);
  fill: var(--color-text);
  aspect-ratio: 16/9;
  padding: calc(var(--size) / 10);
  box-sizing: border-box;
}



@keyframes fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}



/* END WORKED FOR SECTION */


/* LIGHTBOX STYLES */

div.lightbox {
  -webkit-font-smoothing: antialiased;
  align-items: center;
  background-color: black;
  box-sizing: border-box;
  color: #000000;
  display: flex;
  font-family: Agrandir;
  height: 100vh;
  justify-content: center;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  will-change: transform;
  z-index: 99;
}

div.lightbox__top.lightbox-bar {
  -webkit-font-smoothing: antialiased;
  background-color: black;
  box-sizing: border-box;
  color: #000000;
  font-family: Agrandir;
  height: 50%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleY(1);
  transform-origin: center top;
  width: 100%;
  will-change: transform;
  z-index: 2;
}

div.lightbox__bottom.lightbox-bar {
  -webkit-font-smoothing: antialiased;
  background-color: black;
  bottom: 0;
  box-sizing: border-box;
  color: #000000;
  font-family: Agrandir;
  height: 50%;
  left: 0;
  position: absolute;
  transform: scaleY(1);
  transform-origin: center bottom;
  width: 100%;
  will-change: transform;
  z-index: 2;
}

/* LIGHTBOX-VIDEO-CONTENT STYLES */

div.lightbox__content {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  color: #000000;
  font-family: Agrandir;
  height: 100vh;
  object-fit: cover;
  padding-top: 0;
  position: relative;
  width: 100%;
}

/* THUMBNAIL STYLES */

div.video-holder.col-10 {
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  font-family: Agrandir;
  margin-left: auto;
  margin-right: 15px;
  margin-top: 80px;
  max-width: 290px;
  position: relative;
  transform: translate3d(0, 0, 0.0047px) rotate(4.691deg);
  width: 83.3333%;
  will-change: transform;
  z-index: 0;
}

@media (min-width: 64em) {
  div.video-holder.col-10 {
    margin-top: 100px;
    max-width: 390px;
  }
}

@media (min-width: 90em) {
  div.video-holder.col-10 {
    max-width: 450px;
  }
}

@media (min-width: 75em) {
  div.video-holder.col-10 {
    margin-top: 60px;
  }
}

div.vid-wrap.relative {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  font-family: Agrandir;
  position: relative;
}

div.vid-wrap.relative:before {
  backface-visibility: hidden;
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

/*
div.play {
  -webkit-font-smoothing: antialiased;
  background-color: #000000;
  border-radius: 83px;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  font-family: Agrandir;
  height: 83px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
  width: 83px;
  will-change: transform;
  z-index: 1;
}
*/

div.video-holder.col-10 div.play svg {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  /*color: #000000;*/
  cursor: pointer;
  font-family: Agrandir;
  height: 27px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 27px;
}

div.video-holder.col-10 svg polygon {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  /*color: #000000;*/
  cursor: pointer;
  fill: #ffffff;
  font-family: Agrandir;
}

div.img-container.col-12 {
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  font-family: Agrandir;
  overflow: hidden;
  padding-top: 60%;
  position: relative;
  width: 100%;
  z-index: 0;
}

@media (min-width: 75em) {
  div.img-container.col-12 {
    clip-path: polygon(20% 0,
        91.5% 0,
        100% 14.5%,
        100% 100%,
        80% 100%,
        8.6% 100%,
        0 86.1%,
        0 0);
    transform: scale(0.99);
  }
}

@media (min-width: 64em) {
  div.img-container.col-12 {
    clip-path: polygon(20% 0,
        91.5% 0,
        100% 14.5%,
        100% 100%,
        80% 100%,
        8.7% 100%,
        0 85.1%,
        0 0);
  }
}

img.attachment-full.size-full {
  -webkit-font-smoothing: antialiased;
  border-radius: 0;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  font-family: Agrandir;
  height: 100%;
  left: 0;
  margin: 0 auto;
  object-fit: cover;
  padding: 2px;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

small.white.block.caps.center {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: block;
  font-family: Agrandir;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 2px;
  margin-top: 1.1rem;
  text-align: center;
  text-transform: uppercase;
}


.plyr {
  --plyr-color-main: transparent;
}







/* NEW MRC-HEADER */

.mrc-header-video {
  background: #1a1a1a;
  padding: 10rem;
  position: absolute;
}

.mrc-header-title, .mrc-header-title2 {
  position: relative;
  color: #f4f4f4;
  font-size: 10vw;
  padding:0;
  line-height: 9vw;
  margin: 0;
  font-family: "Monument Extended-UltraBold";
  z-index:2;
  }

  .mrc-header-blurb {
    position: relative;
    font-family: 'R-txt-light';
    font-size: clamp(1rem, 1vw, 1.75rem);
    color: #f4f4f4;
    max-width: 70vw;
    line-height: 1.3;
    padding-top: 3rem;
    padding-bottom: 4rem;
    text-align: center;
    z-index:2;

  }
  

.MRC-header-section {
  position: relative;
  font-family: "Monument Extended-Bold";
  width: 100vw;
  height: 100vh;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}



#mrcvideo-overlay {
  position: absolute;
  height: 100vh;
  width: 100vw;
  z-index: 1;
  background: rgb(0 0 0 / 45%);}
/* END NEW HEADER */

/* SHOWREEL BUTTON STYLES */

.mrc_button_container {
position: relative;
z-index: 2;
}

.mrcbutton {
  font-family: "R-bk-med";
  font-size: 1rem;
  width: 14rem;
    height: 2.5rem;
      color: #005DFF;
      align-items: center;
      background: #00ffa3;
      border: none;
      border-radius: 6.25rem;
      cursor: pointer;
      display: inline-flex;
      font-weight: 600;
      gap: 0.363636em;
      justify-content: center;
      letter-spacing: -0.01em;
      line-height: 1.04545;
      overflow: hidden;
      /* padding: 1.25em 1em; */
      position: relative;
      text-decoration: none;
  }

  .wider_button {
    width: 15rem;
  }
  

  .section_heading {
    font-family: "Monument Extended-Bold";
    font-size: 8vw;
    letter-spacing: 0.05em;
    color: #f4f4f4;
    /* padding-bottom: 10rem; */
    padding-left: 4vw;
    padding-right: 4vw;
    line-height: 90%;
    width: 100vw;
    overflow: hidden;
  }


  
  .mrcbutton--stroke:after {
  /*     border: 0.125rem solid #005DFF; */
      border-radius: 6.25rem;
      content: "";
      pointer-events: none;
  }
  .mrcbutton--stroke:after {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
  }
  
  
  .mrcbutton--stroke .mrc_circle {
      transform: scale(0);
      transform-origin: 0 0;
      will-change: transform;
  }
  
  .mrc_circle {
        translate: none;
      rotate: none;
      scale: none;
      transform: translate(-12.3054%, 113.167%) scale(0, 0);
      bottom: 0;
      left: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 0;
  }
  
  
  /* .mrcbutton {
    padding: 1.25em 1em;  
  } */
  
  
  .mrc_circle:before {
      aspect-ratio: 1/1;
      background: #005DFF;
      border-radius: 50%;
      content: "";
      display: block;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      transform: translate(-50%, -50%);
      width: 170%;
  }
  
  .mrcbutton__flair:before {
    .mrcbutton__flair:before {
      aspect-ratio: 1/1;
      background: #005DFF;
      border-radius: 50%;
      content: "";
      display: block;
      left: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      transform: translate(-50%, -50%);
      width: 170%;
  }
  
    .mrcbutton__label {
      position: absolute;
      text-align: center;
      transition: color 50ms var(--ease-in-out-quart);
    color: #005DFF;
      z-index: 100;
  }
    
  }
  
    .mrcbutton__label {
      position: absolute;
      text-align: center;
      transition: color 75ms var(--ease-in-out-quart);
    color: #1a1a1a;
      z-index: 10;
  
  }
  
  .mrcbutton {
      color: #005DFF;
      }
    
  
      .mrcbutton__label2 {
        position: absolute;
      text-align: center;
        color: #fff;
        z-index: 20;
      transition: color 50ms var(--ease-in-out-quart);
  visibility: hidden;
  }

/* END */

#mrc-sticker {
  margin: auto;
  max-width: 50vw;
}