/*--------------------------------------------------------------
 Var
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 Mixins
--------------------------------------------------------------*/
/*--------------------------------------------------------------
 Typography
--------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=PT+Serif:400,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat:700&display=swap");
body {
  background-color: #00dbef;
  font: normal normal 400 18px/1.6 "PT Serif", serif; }

h1, h2, h3 {
  font-family: "Montserrat", "Helvetica", arial, sans-serif;
  font-weight: 700;
  line-height: 1.2; }

h1 {
  font-size: 2rem; }

h2 {
  font-size: 1.5rem; }

h3 {
  font-size: 1rem; }

@media screen and (min-width: 768px) {
  h1 {
    font-size: 3rem; }
  h2 {
    font-size: 2rem; }
  h3 {
    font-size: 1rem; } }

@media screen and (min-width: 375px) {
  p.intro {
    font-size: 1.32em; } }

p.center {
  text-align: center; }

img {
  vertical-align: bottom;
  height: auto; }

/*--------------------------------------------------------------
 Links
--------------------------------------------------------------*/
a {
  color: #007e89;
  transition: all 200ms ease; }
  a:visited {
    color: #007e89; }
  a:hover, a:active {
    color: #00dbef; }
  a.chip-in {
    font-family: "Montserrat", "Helvetica", arial, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 1.2em;
    text-shadow: 1px 1px 1px #cc0000;
    box-shadow: 0px 1px 2px 0px #00000040;
    border-bottom: 2px solid #ff6666;
    background-color: red;
    padding: .6em 3em;
    line-height: 1;
    border-radius: 3px;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    color: white;
    margin: .6em auto; }
    a.chip-in:hover {
      background-color: #ff0a0a;
      transform: translateY(-2px);
      box-shadow: 0px 1px 4px 0px #00000020; }
    a.chip-in:active {
      transform: translateY(0);
      box-shadow: 0px 1px 2px 0px #00000047;
      transition-duration: 0ms; }

img {
  max-width: 100%; }

/*--------------------------------------------------------------
 Header
--------------------------------------------------------------*/
.site-header {
  display: flex;
  flex-direction: column;
  padding: 1em 1.64em;
  background-color: white; }
  .site-header > div {
    display: flex;
    justify-content: center;
    align-items: center; }
  .site-header .social .social__links {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex; }
    .site-header .social .social__links li + li {
      margin-left: .4em;
      transform: translateY(1px); }

@media screen and (max-width: 768px) {
  .site-header + section {
    padding-top: 2px; }
  .site-header .social {
    margin-bottom: 1em;
    text-align: center; } }

@media screen and (min-width: 768px) {
  .site-header {
    flex-direction: row;
    justify-content: space-between; }
    .site-header .social .social__links {
      text-align: left; } }

/*--------------------------------------------------------------
 Sections
--------------------------------------------------------------*/
section {
  padding-top: 2em;
  padding-bottom: 2em; }
  section .section__inside {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 1.64rem;
    padding-right: 1.64rem; }
    @media screen and (min-width: 768px) {
      section .section__inside {
        padding-left: 2.64rem;
        padding-right: 2.64rem; } }
  section.hello {
    background-color: white;
    color: black;
    padding-bottom: 0;
    text-align: center; }
    section.hello .section__inside {
      max-width: 1080px; }
    section.hello .address > h1 {
      margin-bottom: 0; }
    section.hello .the-man {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end; }
      section.hello .the-man img {
        max-width: 100%; }
    @media screen and (min-width: 768px) {
      section.hello .section__inside {
        display: flex;
        text-align: left; }
        section.hello .section__inside .the-man {
          flex: 0 0 40%; } }
  section.exp {
    background-color: black;
    color: white; }
  section.fund {
    background-color: #ffe308; }
  section.cal .ribbon-container {
    background-image: url(../img/tile.jpg);
    background-repeat: repeat-x;
    transform: translateY(-2em);
    overflow: hidden; }
    section.cal .ribbon-container .ribbon {
      max-width: 1440px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      padding-left: 1.64rem;
      padding-right: 1.64rem;
      padding: 0 !important;
      display: block; }
      @media screen and (min-width: 768px) {
        section.cal .ribbon-container .ribbon {
          padding-left: 2.64rem;
          padding-right: 2.64rem; } }
      @media screen and (max-width: 700px) {
        section.cal .ribbon-container .ribbon {
          min-width: 700px;
          transform: translateX(calc( 50vw - 50%)); } }
  section.cal .section__inside {
    max-width: 100%; }
    section.cal .section__inside > p {
      max-width: 40rem;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      padding-left: 1.64rem;
      padding-right: 1.64rem;
      padding: 0; }
      @media screen and (min-width: 768px) {
        section.cal .section__inside > p {
          padding-left: 2.64rem;
          padding-right: 2.64rem; } }
  section.cal .doors {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 6em;
    padding-left: 0;
    padding-right: 0; }
    section.cal .doors .door {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      background-color: black;
      color: white;
      border: 4px dashed white; }
      section.cal .doors .door .fluid-width-video-wrapper {
        display: none; }
      section.cal .doors .door .door-content {
        padding: 1.6em; }
        section.cal .doors .door .door-content .num {
          font-size: 3em;
          line-height: 1; }
        section.cal .doors .door .door-content .door__text {
          display: none;
          text-align: left; }
      section.cal .doors .door.open {
        grid-column: 1/-1;
        height: auto;
        z-index: 9;
        max-width: 40rem;
        margin: auto;
        margin-bottom: 2em; }
        section.cal .doors .door.open .fluid-width-video-wrapper {
          display: block; }
        section.cal .doors .door.open .door-content {
          display: flex;
          flex-direction: column; }
          section.cal .doors .door.open .door-content .door__text {
            display: block; }
      section.cal .doors .door.spacer {
        opacity: 0; }
    section.cal .doors .the-rest {
      order: -1;
      max-width: 1080px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      padding-left: 1.64rem;
      padding-right: 1.64rem;
      padding: 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      @media screen and (min-width: 768px) {
        section.cal .doors .the-rest {
          padding-left: 2.64rem;
          padding-right: 2.64rem; } }
      section.cal .doors .the-rest .door {
        flex: 0 1 100%;
        margin-bottom: 0.64rem; }

@media screen and (min-width: 375px) {
  section.cal .doors .door.open {
    margin-bottom: 5em; }
    section.cal .doors .door.open .fluid-width-video-wrapper::before, section.cal .doors .door.open .fluid-width-video-wrapper::after {
      content: "";
      width: 110%;
      left: -5%;
      background-image: url(../img/tinsel-top.png);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: contain;
      background-position: 50% bottom;
      pointer-events: none;
      display: block;
      position: absolute;
      height: 100px;
      z-index: 9;
      -webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
      filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); }
    section.cal .doors .door.open .fluid-width-video-wrapper::before {
      top: -80px; }
    section.cal .doors .door.open .fluid-width-video-wrapper::after {
      bottom: -80px;
      transform: rotate(180deg); }
  section.cal .doors .the-rest .door {
    flex-basis: 47%; } }

@media screen and (min-width: 768px) {
  section.cal .doors .door.open .fluid-width-video-wrapper::before, section.cal .doors .door.open .fluid-width-video-wrapper::after {
    width: calc(100% + 56px);
    left: -28px; }
  section.cal .doors .door.open .door-content {
    flex-direction: row; }
    section.cal .doors .door.open .door-content .num {
      font-size: 10em;
      margin-right: .2em;
      margin-top: .24em; }
    section.cal .doors .door.open .door-content .door__text {
      margin-top: 2em; }
  section.cal .doors .the-rest .door {
    flex-basis: 31.3333333333%; } }

@media screen and (min-width: 1024px) {
  section.cal .doors .the-rest .door {
    flex-basis: 23.5%; } }

@media screen and (min-width: 1100px) {
  section.cal .doors .door.open {
    margin-bottom: 6em; }
    section.cal .doors .door.open .fluid-width-video-wrapper::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate3d(-50%, -82px, 0);
      width: 100vw;
      height: 164%;
      background-image: url(../img/tinsel-doors-1080.png);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: contain;
      pointer-events: none; } }

/*--------------------------------------------------------------
 Footer
--------------------------------------------------------------*/
.site-footer {
  background: black;
  color: white;
  text-align: center;
  padding-top: 1.64rem;
  padding-bottom: 2.64rem; }
  .site-footer .site-footer__inside {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 1.64rem;
    padding-right: 1.64rem; }
    @media screen and (min-width: 768px) {
      .site-footer .site-footer__inside {
        padding-left: 2.64rem;
        padding-right: 2.64rem; } }