:root {
  /* Color palette */
  --color-text: #3d3d3d;
  --color-inverse: #f4f4f4;
  --color-inverse-darker: #eee;
  --color-brand: #d82b13;
  --color-accent-dark: #1b2e59;
  --color-accent-light: #ecec82;

  /* Font default */
  --font-stack: "Circular Std", Century Gothic, CenturyGothic, AppleGothic, "Futura", -apple-system, Helvetica Neue, Helvetica, sans-serif;

  /* Sizing */
  --size-xxs: 2px;
  --size-xs: 4px;
  --size-s: 8px;
  --size-m: 16px;
  --size-l: 24px;
  --size-xl: 32px;
  --size-xxl: 64px;
  --size-xxxl: 80px;
  --size-xxxxl: 120px;
  --size-xxxxxl: 192px;
  --size-max-modal-w: calc(var(--size-m) * 64);
  --size-header: 56px;
  --size-border: 1px;

  /* Negative Sizing */
  --size--xxs: -2px;
  --size--xs: -4px;
  --size--s: -8px;
  --size--m: -16px;
  --size--l: -24px;
  --size--xl: -32px;
  --size--xxl: -64px;
  --size--xxxl: -80px;
  --size--xxxxl: -120px;
  --size--xxxxxl: -192px;
  --size--max-modal-w: calc(var(--size-m) * -64);
  --size--header: -56px;
  --size--border: -1px;

  /* Z Layers */
  --z-under: -1;
  --z-under-overlay: 7;
  --z-overlay: 8;
  --z-nav: 9;
  --z-modal: 10;

  /* Animation */
  --default-duration: 0.333s;
  --fade-in-time: 0.333s;
}

.accent-dark-shadow {
  text-shadow: 4px 4px 4px var(--color-accent-dark);
}

.bg-accent-dark {
  background-color: var(--color-accent-dark);
}



.chunky-team-member {

}

.z-nav {
  z-index: var(--z-nav);
}

.z-under {
  z-index: var(--z-under);
}

.chunky-team-banner {
  /* margin-bottom: -96px; */
}

.team-member-headshot {
  position: relative;
  top: var(--top);
}

.welcome-header {
  margin-bottom: -80px;
}

.women-header {
  margin-bottom: -88px;
}

/** BREAKPOINTS (derived from Tachyons defaults) **/

/* Not Small Breakpoint */
@media (min-width: 30em) {

}

/* Medium Breakpoint (-m) */
@media ((min-width: 30em) and (max-width: 60em)) {
  .welcome-header {
    /* --negative-margin: -108px; */
  }
  .women-header {
    margin-bottom: -80px;
  }
}

/* Large Breakpoint (-l) */
@media ((min-width: 60em) and (max-width: 90em)) {
  .welcome-header {
    margin-bottom: -126px;
  }
  .women-header {
    margin-bottom: -96px;
  }
}

/* Extra Large Breakpoint (-xl) */
@media (min-width: 90em) {
  .welcome-header {
    margin-bottom: -148px;
  }
  .women-header {
    margin-bottom: -108px;
  }
}

* {
  scroll-behavior: smooth;
}

body {
  color: var(--color-text);
  background-color: var(--color-inverse);
  font-family: var(--font-stack);
  min-height: 100vh;
}

.header {
  height: var(--size-header);
  background: rgba(216, 43, 19, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

a {
  color: currentColor;
}

html {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

html::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

.filter {
  height: 0;
  width: 0;
  position: absolute;
  left: -99999px;
}

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

.bg-brand {
    background-color: var(--color-brand);
}

.accent-dark {
  color: var(--color-accent-dark);
}

.inverse-darker {
  color: var(--color-inverse-darker);
}

.bg-darker {
  background-color: var(--color-inverse-darker);
}

.color-current {
  color: currentColor;
}

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

button.inverse {
  background-color: var(--color-inverse);
  color: var(--color-brand);
}

.grid {
  display: grid;
}

ul {
  padding: 0;
}

.m-auto {
    margin: auto;
}

.chunky-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  gap: var(--size-xl);
}

@media (min-width: 30em) {
  .chunky-team {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.team-member {
  list-style-type: none;
}

.box-shadow {
  /* box-shadow:
    0.3px 0.3px 1.1px rgba(0, 0, 0, 0.105),
    1.1px 1.1px 3.8px rgba(0, 0, 0, 0.155),
    5px 5px 17px rgba(0, 0, 0, 0.26)
  ; */
  box-shadow: 15px 17px 53px -14px rgba(0,0,0,0.58);
  -webkit-box-shadow: 15px 17px 53px -14px rgba(0,0,0,0.58);
  -moz-box-shadow: 15px 17px 53px -14px rgba(0,0,0,0.58);
}

.team-member-summary {
  display: block;
  box-shadow:
    0.3px 0.3px 1.1px rgba(0, 0, 0, 0.105),
    1.1px 1.1px 3.8px rgba(0, 0, 0, 0.155),
    5px 5px 17px rgba(0, 0, 0, 0.26)
  ;
}

.team-member > a > img {
  display: block;
}

.team-member-details {
  display: none;
  z-index: var(--z-modal);
  opacity: 0;
  transition: all 1s ease-in;
}

.team-member-details > div {
  max-width: var(--size-max-modal-w);
  background-color: var(--color-inverse-darker);
}

.bg-blur {
  filter: blur(8);
}

.team-member-details:target {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 100vh;
  backdrop-filter: blur(8px);
  opacity: 1;
  transition: all 1s ease-in;
  overflow-y: scroll !important;
}

.team-member-details:target > div {
  margin: var(--size-l) auto;
}

.chevron-container { 
  display: inline-block;
  width: fit-content;
  border: 2px solid currentColor;
  border-radius: 100px;
  padding: var(--size-l);
}

.fade-in {
  opacity: 0;
  animation: fade-in-animation;
  animation-timing-function: ease-in;
  animation-delay: var(--fade-in-time);
  animation-duration: var(--default-duration);
  animation-fill-mode: forwards;
}

.fade-out {
  animation: fade-out-animation;
  animation-timing-function: ease-in;
  animation-delay: var(--fade-in-time);
  animation-duration: var(--default-duration);
  animation-fill-mode: forwards;
}

.rotate-in {
  animation: rotate-in-animation;
  animation-timing-function: cubic-bezier(0.655, -0.305, 0.095, 0.945);
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}

@keyframes rotate-in-animation {
  0% { 
    opacity: 0;
    scale: 75%;
    transform: translateY(-75%) rotate(-120deg);
  }
  100% { 
    opacity: 1;
    scale: 100%;
    transform: translateY(-50%) rotate(0deg); 
  }
}

.mask {
  mask-image: var(--mask-url);
  -webkit-mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: right bottom;
}

.duotone {
  filter: url(#brand_duotone);
}



.fun-overlay {

  --falling-image-offset: -80px;
  --overlay-height: 480px;

  position: relative;
  height: var(--overlay-height);
  width: 100%;

  margin-top: calc(-1 * var(--falling-image-offset));
}

.fun-overlay > .background {
  position: absolute;
  height: var(--overlay-height);
  top: 0;
  left: 0;
  width: 100%;
  background-image: url(static/images/demo/fun-bg.jpg);
  background-size: cover;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.fun-overlay > img {
  position: absolute;
  opacity: 0;
  max-height: 75%;
  animation-name: slide-in;
  animation-timing-function: ease-in-out;
  animation-duration: var(--default-duration);
  animation-delay: var(--animation-delay);
  animation-fill-mode: forwards;
  object-fit: contain;
}

@keyframes slide-in {
  0% { transform: translateY(-16px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

.bg-image {
  background-image: var(--bg-image-url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
}

.grid-element {
  box-shadow:
    0.3px 0.3px 1.1px rgba(0, 0, 0, 0.105),
    1.1px 1.1px 3.8px rgba(0, 0, 0, 0.155),
    5px 5px 17px rgba(0, 0, 0, 0.26)
  ;
}

.service-feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--size-xl);
  color: var(--color-inverse);
  text-shadow: 3px 3px 6px var(--color-text);
}

.service-feature > .item {
  padding: var(--size-l);
  background-size: cover;
}

.service-feature > .item:not(:first-child) {
  border-left: var(--size-border) solid currentColor;
}

.service-feature > .item.film {
  background: #30303030 url(static/images/unsplash-film.jpg);
  background-position: right bottom;
}

.service-feature > .item.photography {
  background-image: url(static/images/unsplash-camera.jpg);
  background-position: right bottom;
}

.service-feature > .item.animation {
  background-image: url(static/images/unsplash-animation.jpg);
  background-position: right bottom;
}

.z-overlay {
  z-index: var(--z-overlay);
}

#reel-overlay {
  display: none;
}

@media (min-width: 60em) {
  #reel-overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: var(--size-header);
    left: 0;
    width: var(--width);
    height: var(--height);
    background-color: #303030dd;
    z-index: var(--z-overlay);
    color: var(--color-inverse);
  }

  .logo {
    display: inline-block;
    max-width: 540px;
    padding: var(--size-l);
  }

  #reel-overlay > .hero-overlay {
    position: relative;
    display: flex;
    justify-items: center;
    align-items: center;
    gap: var(--size-l);
  }

  #reel-overlay > .hero-overlay::before {
    content: "";
    border: var(--size-border) solid currentColor;
    align-self: stretch;
  }

  #reel-overlay > .hero-overlay > *:first-child {
    order: -1;
  }
}

@keyframes fade-in-animation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out-animation {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.hover-to-text {
  transition: .2s all ease-in;
  background-size: 100% 200%;
  background-position: 0 0;
  background-image: linear-gradient(to top, var(--color-inverse) 50%, transparent 50%);
}

.hover-to-text:hover {
  transition: .2s all ease-out;
  color: var(--color-brand);
  background-position: 0 100%;
  /* background-color: var(--color-brand); */
}

.sticky {
  position: sticky;
}

.scroll-locked {
  overflow-y: hidden;
}

.icon {
  position: relative;
  top: 50%;
}

.menu {
  display: none;
  text-align: center;
}

.menu:target {
  position: absolute;
  display: block;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: var(--color-brand);
  animation-name: slide-down;
  animation-timing-function: ease-in-out;
  animation-duration: var(--default-duration);
}

.jumpInContainer {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.jumpIn {
  opacity: 0;
  position: relative;
  animation-name: jumpIn;
  animation-delay: var(--delay-time);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-duration: var(--default-duration);
  animation-fill-mode: forwards;
}

#player-container {
}

#reel-player {
  padding-top: var(--size-header);
  border: none;
}

.v-center {
  top: 50%;
  transform: translateY(-50%);
}

button {
  display: inline-block;
  border: none;
  padding: var(--size-s) var(--size-m);
  border-radius: var(--size-xl);
  text-decoration: none;
  background: var(--color-brand);
  color: var(--color-inverse);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
}

button.large {
  padding: var(--size-m) var(--size-l);
}

.chunky-team-feature-container {
  display: grid;
  grid-template-columns: repeat(auto-fill,  minmax(320px, 1fr));
  gap: var(--size-xxxl);
}

/* button:hover,
button:focus {
  background: #0053ba;
} */

/* button:focus {
  outline: 1px solid #fff;
  outline-offset: -4px;
} */

/* button:active {
  transform: scale(0.99);
} */

@media (min-width: 1140px) {
  /* .player-container {
    padding-top: 0;
    height: 640px;
  } */
}

@keyframes slide-down {
  0% {
    transform: translateY(-100%);
  }
  99% {
    transform: translateY(0%);
  }
}

@keyframes jumpIn {
  0% {
    opacity: 0;
    top: -50px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}