@charset "UTF-8";
/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

SITE STYLES

By the folks at F & C	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!SITE ROOT	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
::-moz-selection {
  background: #FF8833;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #FF8833;
  color: #fff;
  text-shadow: none;
}

html {
  box-sizing: border-box;
}

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

* {
  margin: 0;
}

* + * {
  margin-top: 1.5rem;
}
@media screen and (min-width: 70em) {
  * + * {
    margin-top: 1.6rem;
  }
}

body, br, li, dt, dd, th, td, option {
  margin-top: 0;
}

html {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #FF8833;
}

body {
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  color: #fff;
  background-color: #333333;
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-variant-ligatures: common-ligatures;
  line-height: 1.5;
}
body {
  font-size: 1.125rem;
}
@media screen and (min-width: 20rem) {
  body {
    font-size: calc(0.15625vw + 1.09375rem);
  }
}
@media screen and (min-width: 100rem) {
  body {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 70em) {
  body {
    line-height: 1.6;
  }
}

.wf-active body {
  font-family: "aktiv-grotesk", "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
}

.browsehappy {
  margin: 0 auto;
  padding: 0.2em 0;
  text-align: center;
  background: #ccc;
  color: #000;
}

.page {
  margin: 0px auto;
  margin-bottom: -1.5rem;
}
@media screen and (min-width: 70em) {
  .page {
    margin-bottom: -1.6rem;
  }
}

.long-form {
  max-width: 42.5em;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(0.75rem + 3vw);
  padding-right: calc(0.75rem + 3vw);
}

a, button, input, select, textarea, label, summary {
  touch-action: manipulation;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!HEADING STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none;
  -webkit-hyphens: none;
          hyphens: none;
  color: #fff;
}
@media (min-width: 70em) {
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
  }
}

.wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4, .wf-active h5, .wf-active h6 {
  font-family: "aktiv-grotesk", "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
}

.huge-title {
  font-size: 3.1573345183rem;
}
@media screen and (min-width: 20rem) {
  .huge-title {
    font-size: calc(2.3814568521vw + 2.6810431479rem);
  }
}
@media screen and (min-width: 100rem) {
  .huge-title {
    font-size: 5.0625rem;
  }
}

h1, .h1 {
  font-size: 2.368593037rem;
}
@media screen and (min-width: 20rem) {
  h1, .h1 {
    font-size: calc(1.2580087038vw + 2.1169912962rem);
  }
}
@media screen and (min-width: 100rem) {
  h1, .h1 {
    font-size: 3.375rem;
  }
}

h2, .h2,
h3, .h3 {
  font-size: 1.776889rem;
}
@media screen and (min-width: 20rem) {
  h2, .h2,
  h3, .h3 {
    font-size: calc(0.59138875vw + 1.65861125rem);
  }
}
@media screen and (min-width: 100rem) {
  h2, .h2,
  h3, .h3 {
    font-size: 2.25rem;
  }
}

h2, .h2 {
  font-weight: 500;
}

h3, .h3 {
  font-weight: 300;
}

h4, .h4,
h5, .h5,
h6, .h6 {
  font-size: 1.333rem;
}
@media screen and (min-width: 20rem) {
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    font-size: calc(0.20875vw + 1.29125rem);
  }
}
@media screen and (min-width: 100rem) {
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    font-size: 1.5rem;
  }
}

h4, .h4 {
  font-weight: 500;
}

h6, .h6 {
  font-style: italic;
  font-weight: 500;
}

.page-title {
  text-align: center;
  margin-top: 3rem;
}

.page-title span {
  display: block;
  text-align: center;
  margin-top: 0;
}
.page-title span {
  font-size: 1.125rem;
}
@media screen and (min-width: 20rem) {
  .page-title span {
    font-size: calc(0.15625vw + 1.09375rem);
  }
}
@media screen and (min-width: 100rem) {
  .page-title span {
    font-size: 1.25rem;
  }
}

p + h1,
p + h2,
p + h3,
p + h4 {
  margin-top: 3rem;
}
@media (min-width: 70em) {
  p + h1,
  p + h2,
  p + h3,
  p + h4 {
    margin-top: 3.2rem;
  }
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!PARAGRAPH STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
p {
  font-weight: 300;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-chars: 10 3 4;
  -moz-hyphenate-limit-chars: 10 3 4;
  -ms-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
  -webkit-hyphenate-limit-lines: 1;
  -moz-hyphenate-limit-lines: 1;
  -ms-hyphenate-limit-lines: 1;
  hyphenate-limit-lines: 1;
  -webkit-hyphenate-limit-last: always;
  -moz-hyphenate-limit-last: always;
  -ms-hyphenate-limit-last: always;
  hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphenate-limit-zone: 8%;
  hyphenate-limit-zone: 8%;
}

.lead {
  font-size: 1.25em;
  font-weight: 300;
}

.secondary {
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
  font-weight: 400;
}

.wf-active .secondary {
  font-family: "aktiv-grotesk-thin", "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
}

.tertiary {
  font-size: 0.825em;
}

.milli {
  font-size: 0.825rem;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!QUOTATIONS STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
blockquote {
  margin: 3rem 0 6rem;
  padding-left: 1.5em;
  border-left-width: 0.1rem;
  border-left-style: solid;
  border-left-color: #999999;
}
@media (min-width: 60em) {
  blockquote {
    margin-right: 1.5em;
    margin-left: 1.5em;
  }
}
@media (min-width: 70em) {
  blockquote {
    margin-top: 3.2em;
    margin-bottom: 6.4em;
  }
}
blockquote p {
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
  color: #999999;
  font-size: 1.25em;
}
blockquote small {
  font-size: 0.75em;
}

.wf-active blockquote p {
  font-family: "aktiv-grotesk", "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
}

cite {
  display: block;
  font-style: normal;
  line-height: inherit;
}
cite a {
  border-bottom-color: #FF8833;
}

q {
  quotes: "“" "”" "‘" "’";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!MISCELLANEOUS TYPE STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
address {
  font-style: inherit;
}

abbr[title] {
  text-decoration: none;
  border-bottom: 1px dotted white;
  cursor: help;
}

.amp {
  font-family: inherit;
  font-style: italic;
}

dfn {
  font-style: italic;
}

ins {
  background-color: white;
  color: #fff;
  text-decoration: none;
}

mark {
  color: #fff;
  font-style: inherit;
  font-weight: inherit;
}

small {
  font-size: 0.625em;
}

strong {
  font-weight: 500;
}

em {
  font-style: italic;
}

b {
  font-weight: normal;
}

i {
  font-style: normal;
}

code {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", Courier, monospace;
  font-size: 0.825em;
  line-height: inherit;
  font-weight: inherit;
  padding-left: 0.125em;
  padding-right: 0.125em;
  vertical-align: middle;
  border-radius: 3px;
  color: white;
  background: white;
}

pre {
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", Courier, monospace;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

sub,
sup {
  position: relative;
  font-size: 66%;
  line-height: 0;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!LIST STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
ul, ol {
  margin-left: 1.375rem;
  padding: 0;
}
ul li > ul,
ul li > ol, ol li > ul,
ol li > ol {
  margin-left: 1.25rem;
  margin-top: 0.5rem;
  padding: 0;
}
@media (min-width: 70em) {
  ul li > ul,
  ul li > ol, ol li > ul,
  ol li > ol {
    margin-top: 0.5333333333rem;
  }
}
ul > li, ol > li {
  position: relative;
}
ul > li + li, ol > li + li {
  margin-top: 0.5rem;
}
@media (min-width: 70em) {
  ul > li + li, ol > li + li {
    margin-top: 0.5333333333rem;
  }
}

dt {
  font-weight: 500;
}

dd {
  margin-bottom: 1.5rem;
}
@media (min-width: 70em) {
  dd {
    margin-bottom: 1.6rem;
  }
}

dd:last-child {
  margin-bottom: 0;
}

.dl-inline dt, .dl-inline dd {
  display: inline;
  margin-bottom: 0;
}
.dl-inline dd + dt::before {
  content: "\a";
  white-space: pre;
}
.dl-inline dd + dd::before {
  content: ", ";
  font-weight: normal;
  margin-left: -0.25em;
}

.list-inline {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
@media (min-width: 60em) {
  .list-inline {
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 60em) {
  .list-inline li {
    margin-right: 24px;
  }
}
.list-inline li:last-child {
  margin-right: 0;
}

.list-plain {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!LINK STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #FF8833;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25ch;
  transition-property: color;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
}
a:hover {
  color: #FF8833;
}
a:focus {
  outline: none;
}
a:focus-visible {
  outline: 1px solid;
  outline-offset: 2px;
  outline-color: #FF8833;
  border-radius: 1px;
  text-decoration: none;
}
.long-form a {
  color: rgb(33.15, 33.15, 33.15);
}
.long-form a:hover {
  color: #FF8833;
}

.a-underline {
  color: #fff;
  text-decoration: none;
  position: relative;
  border: none;
  transition: color 0.25s ease-in-out;
}
.a-underline:visited {
  color: #fff;
}
.a-underline:hover {
  color: #FF8833;
}
.a-underline:focus {
  color: #FF8833;
  outline: 4px solid rgb(25, 190.3125, 255);
  outline-offset: 2px;
}
.a-underline:active {
  color: #FF8833;
  outline: none;
}
.a-underline::after {
  content: "";
  height: 0.15em;
  width: 0;
  border-bottom: 0.1rem solid #FF8833;
  transition: width 0.25s ease-in-out;
  position: absolute;
  bottom: -0.25em;
}
.a-underline:hover::after {
  width: 100%;
}

.a-underline--right::after {
  right: 0;
}

.a-underline--left::after {
  left: 0;
}

.a-underline--center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!IMAGE STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
audio,
canvas,
img,
svg,
video {
  vertical-align: middle;
}

img, video, object, svg, iframe {
  max-width: 100%;
  border: none;
}

svg {
  max-height: 100%;
}

iframe {
  border: 1px solid #FF8833;
}

img[width],
img[height] {
  max-width: none;
}

figure {
  display: block;
  max-width: 100%;
}
figure img {
  margin: 0;
}

figcaption {
  margin-top: 0.75rem;
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
  font-size: 0.75em;
  font-style: normal;
  font-weight: 400;
}
@media (min-width: 70em) {
  figcaption {
    margin-top: 0.8rem;
  }
}

.img-right,
.img-left,
.img-center {
  width: auto;
}

.img-right {
  float: right;
  margin-left: 1.5rem;
}

.img-left {
  float: left;
  margin-right: 1.5rem;
}

.img-center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.img-right img,
.img-left img,
.img-center img {
  width: auto;
}

.circle-image {
  display: block;
  overflow: hidden;
  width: 50%;
  padding-bottom: 50%;
  height: 0;
  position: relative;
}

.circle-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.circle-image-2 {
  display: block;
  overflow: hidden;
  width: 50%;
  padding-bottom: 50%;
  height: 0;
  position: relative;
}

.circle-image-2 img {
  width: 100%;
  height: 100%;
  position: absolute;
  clip-path: circle(50%);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.round-corner-image {
  display: block;
  overflow: hidden;
  width: 50%;
  padding-bottom: 50%;
  height: 0;
  position: relative;
}

.round-corner-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 20%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.square-image {
  display: block;
  overflow: hidden;
  width: 50%;
  padding-bottom: 50%;
  height: 0;
  position: relative;
}

.square-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!ICON STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
svg path {
  fill: inherit;
}

.icon {
  display: inline-block;
  fill: currentColor;
  width: 1.5em;
  height: 1.5em;
  position: relative;
  top: -0.15em;
  vertical-align: middle;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!RULES STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
hr {
  clear: both;
  display: block;
  height: 0.0625rem;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #FF8833;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!FORM STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
form {
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
}
form ul {
  list-style-type: none;
  margin-left: 0;
}

.wf-active form {
  font-family: "aktiv-grotesk", "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
}

fieldset {
  min-width: 0;
  margin: inherit 0 0;
  padding: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  border-bottom: solid 1px white;
}

label {
  display: block;
  max-width: 100%;
  font-family: inherit;
  font-weight: 400;
  color: #fff;
}
label.inline {
  display: inline-block;
  margin-right: 0.5rem;
}

input,
select,
textarea {
  display: block;
  font-family: inherit;
}

input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input:not([type]),
textarea {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  vertical-align: middle;
  padding: 0.5em 0.75em;
  font-size: 0.875em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #333333;
  border: solid 1px white;
  border-radius: 0;
  transition: border-color 0.25s ease-in-out;
}
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
input:not([type]):focus,
textarea:focus {
  outline: none;
  border-color: #FF8833;
}
input[type=color]:disabled,
input[type=date]:disabled,
input[type=datetime]:disabled,
input[type=datetime-local]:disabled,
input[type=email]:disabled,
input[type=month]:disabled,
input[type=number]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=tel]:disabled,
input[type=text]:disabled,
input[type=time]:disabled,
input[type=url]:disabled,
input[type=week]:disabled,
input:not([type]):disabled,
textarea:disabled {
  background-color: rgb(48.96, 48.96, 48.96);
  cursor: not-allowed;
}
input[type=color]::-moz-placeholder, input[type=date]::-moz-placeholder, input[type=datetime]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=month]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=time]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=week]::-moz-placeholder, input:not([type])::-moz-placeholder, textarea::-moz-placeholder {
  color: white;
}
input[type=color]::placeholder,
input[type=date]::placeholder,
input[type=datetime]::placeholder,
input[type=datetime-local]::placeholder,
input[type=email]::placeholder,
input[type=month]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=text]::placeholder,
input[type=time]::placeholder,
input[type=url]::placeholder,
input[type=week]::placeholder,
input:not([type])::placeholder,
textarea::placeholder {
  color: white;
}
input[type=color]::-moz-placeholder,
input[type=date]::-moz-placeholder,
input[type=datetime]::-moz-placeholder,
input[type=datetime-local]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=month]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=search]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=text]::-moz-placeholder,
input[type=time]::-moz-placeholder,
input[type=url]::-moz-placeholder,
input[type=week]::-moz-placeholder,
input:not([type])::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: white;
}

[placeholder]:focus::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: opacity 0.5s 0.5s ease;
  transition: opacity 0.5s 0.5s ease;
}

textarea {
  resize: vertical;
}

[type=checkbox],
[type=radio] {
  display: inline;
  vertical-align: text-top;
  margin: 0.3125rem 4px 0 0;
}

[type=file] {
  width: 100%;
}

select {
  width: 100%;
  height: 2em;
  font-size: 1rem;
}

select[multiple] {
  height: auto;
}

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #ff4136;
  border-color: #ff4136;
}

input[type=file]:focus:invalid:focus,
input[type=radio]:focus:invalid:focus,
input[type=checkbox]:focus:invalid:focus {
  outline-color: #ff4136;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!BUTTON STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.btn,
button,
input[type=submit],
input[type=button],
input[type=reset] {
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  display: inline-block;
  padding: 0.5em 0.75em 0.625em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: inherit;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  color: rgb(33.15, 33.15, 33.15);
  background-color: #fff;
  border: 0.125rem solid rgb(33.15, 33.15, 33.15);
  transition-property: color, background-color, border-color;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}
@media screen and (min-width: 70em) {
  .btn,
  button,
  input[type=submit],
  input[type=button],
  input[type=reset] {
    line-height: 1.6;
  }
}
.btn:visited,
button:visited,
input[type=submit]:visited,
input[type=button]:visited,
input[type=reset]:visited {
  color: rgb(33.15, 33.15, 33.15);
}
.btn:focus, .btn:hover,
button:focus,
button:hover,
input[type=submit]:focus,
input[type=submit]:hover,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:focus,
input[type=reset]:hover {
  color: #fff;
  border-color: rgb(33.15, 33.15, 33.15);
  background-color: rgb(33.15, 33.15, 33.15);
}
.btn:focus,
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}
.btn:active,
button:active,
input[type=submit]:active,
input[type=button]:active,
input[type=reset]:active {
  outline: none;
}

button:disabled,
input[type=submit]:disabled,
input[type=button]:disabled,
input[type=reset]:disabled {
  color: rgb(211.65, 211.65, 211.65);
  background: rgb(244.8, 244.8, 244.8);
  border-color: rgb(211.65, 211.65, 211.65);
  cursor: not-allowed;
  -webkit-text-fill-color: rgb(211.65, 211.65, 211.65);
  -webkit-opacity: 1;
}

.btn__inverse {
  color: #fff;
  background-color: rgb(33.15, 33.15, 33.15);
  border-color: #fff;
  border-width: 0.0625rem;
}
.btn__inverse:visited {
  color: #fff;
}
.btn__inverse:focus, .btn__inverse:hover {
  color: rgb(33.15, 33.15, 33.15);
  border-color: #fff;
  background-color: #fff;
}
.btn__inverse:focus {
  outline: 0.0625rem solid #fff;
}
.btn__inverse:active {
  outline: none;
}

.btn--animated {
  color: rgb(33.15, 33.15, 33.15);
  background-color: #fff;
  position: relative;
  z-index: 2;
}
.btn--animated:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  background-color: rgb(33.15, 33.15, 33.15);
  transition: width 0.25s ease-in-out;
}
.btn--animated:visited {
  color: rgb(33.15, 33.15, 33.15);
}
.btn--animated:hover, .btn--animated:focus, .btn--animated:active {
  color: #fff;
  background-color: transparent;
}
.btn--animated:hover:before, .btn--animated:focus:before, .btn--animated:active:before {
  width: 100%;
}

.btn--animated__inverse {
  color: #fff;
  background-color: rgb(33.15, 33.15, 33.15);
  border-color: #fff;
  border-width: 0.0625rem;
}
.btn--animated__inverse:before {
  background-color: #fff;
}
.btn--animated__inverse:visited {
  color: #fff;
}
.btn--animated__inverse:hover, .btn--animated__inverse:focus, .btn--animated__inverse:active {
  color: rgb(33.15, 33.15, 33.15);
  background-color: transparent;
  border-color: #fff;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!TABLE STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
table {
  width: 100%;
  max-width: 100%;
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
  border-collapse: collapse;
  background: #333333;
}

.wf-active form {
  font-family: "aktiv-grotesk", "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
}

caption {
  font-weight: 500;
  text-align: left;
  margin-bottom: 1rem;
}

th,
td {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  padding: 0.5em;
  border: 0.0625rem solid white;
}

th {
  font-weight: 500;
  background-color: white;
}

@media (max-width: 60em) {
  thead tr,
  tfoot tr {
    position: absolute;
    top: -9999em;
    left: -9999em;
  }
  tr {
    border: 0.0625rem solid white;
  }
  tr + tr {
    margin-top: 1.5rem;
  }
  tr,
  td {
    display: block;
    font-weight: 400;
  }
  td:nth-child(odd) {
    background-color: white;
  }
  td {
    border: none;
    padding-left: 50%;
  }
  td:before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 500;
    line-height: 1.5;
    margin-left: -100%;
    width: 100%;
  }
}
@media (max-width: 40em) {
  td {
    padding-left: 0.75em;
  }
  td:before {
    display: block;
    margin-bottom: 0.75em;
    margin-left: 0;
  }
}
.table--stripe tbody tr:nth-child(odd) td,
.table--stripe tbody tr:nth-child(odd) th {
  background-color: red;
  color: rgb(33.15, 33.15, 33.15);
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!HERO STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.hero {
  width: 100%;
  height: calc(100vh - 4.5rem);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.hero::before {
  background-color: #333333;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  animation-name: fadeIn;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@media screen and (min-width: 70em) {
  .hero {
    height: calc(100vh - 5rem);
  }
}

/* Trumbo */
.hero-bg-01::before {
  background-image: url(../img/home/hero-trumbo-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-01::before {
    background-image: url(../img/home/hero-trumbo-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-01::before {
    background-image: url(../img/home/hero-trumbo-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-01::before {
    background-image: url(../img/home/hero-trumbo-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-01::before {
    background-image: url(../img/home/hero-trumbo-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-01::before {
    background-image: url(../img/home/hero-trumbo-2560.jpg);
  }
}

/* Beirut */
.hero-bg-02::before {
  background-image: url(../img/home/hero-beirut-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-02::before {
    background-image: url(../img/home/hero-beirut-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-02::before {
    background-image: url(../img/home/hero-beirut-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-02::before {
    background-image: url(../img/home/hero-beirut-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-02::before {
    background-image: url(../img/home/hero-beirut-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-02::before {
    background-image: url(../img/home/hero-beirut-2560.jpg);
  }
}

/* Captain Fantastic */
.hero-bg-03::before {
  background-image: url(../img/home/hero-captain-fantastic-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-03::before {
    background-image: url(../img/home/hero-captain-fantastic-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-03::before {
    background-image: url(../img/home/hero-captain-fantastic-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-03::before {
    background-image: url(../img/home/hero-captain-fantastic-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-03::before {
    background-image: url(../img/home/hero-captain-fantastic-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-03::before {
    background-image: url(../img/home/hero-captain-fantastic-2560.jpg);
  }
}

/* Danny Collins */
.hero-bg-04::before {
  background-image: url(../img/home/hero-danny-collins-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-04::before {
    background-image: url(../img/home/hero-danny-collins-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-04::before {
    background-image: url(../img/home/hero-danny-collins-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-04::before {
    background-image: url(../img/home/hero-danny-collins-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-04::before {
    background-image: url(../img/home/hero-danny-collins-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-04::before {
    background-image: url(../img/home/hero-danny-collins-2560.jpg);
  }
}

/* The Polka King */
.hero-bg-05::before {
  background-image: url(../img/home/hero-polka-king-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-05::before {
    background-image: url(../img/home/hero-polka-king-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-05::before {
    background-image: url(../img/home/hero-polka-king-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-05::before {
    background-image: url(../img/home/hero-polka-king-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-05::before {
    background-image: url(../img/home/hero-polka-king-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-05::before {
    background-image: url(../img/home/hero-polka-king-2560.jpg);
  }
}

/* Brian Banks */
.hero-bg-06::before {
  background-image: url(../img/home/hero-brian-banks-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-06::before {
    background-image: url(../img/home/hero-brian-banks-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-06::before {
    background-image: url(../img/home/hero-brian-banks-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-06::before {
    background-image: url(../img/home/hero-brian-banks-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-06::before {
    background-image: url(../img/home/hero-brian-banks-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-06::before {
    background-image: url(../img/home/hero-brian-banks-2560.jpg);
  }
}

/* Hotel Mumbai */
.hero-bg-07::before {
  background-image: url(../img/home/hero-hotel-mumbai-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-07::before {
    background-image: url(../img/home/hero-hotel-mumbai-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-07::before {
    background-image: url(../img/home/hero-hotel-mumbai-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-07::before {
    background-image: url(../img/home/hero-hotel-mumbai-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-07::before {
    background-image: url(../img/home/hero-hotel-mumbai-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-07::before {
    background-image: url(../img/home/hero-hotel-mumbai-2560.jpg);
  }
}

/* Ice Road */
.hero-bg-08::before {
  background-image: url(../img/home/hero-ice-road-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-08::before {
    background-image: url(../img/home/hero-ice-road-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-08::before {
    background-image: url(../img/home/hero-ice-road-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-08::before {
    background-image: url(../img/home/hero-ice-road-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-08::before {
    background-image: url(../img/home/hero-ice-road-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-08::before {
    background-image: url(../img/home/hero-ice-road-2560.jpg);
  }
}

/* Water Man */
.hero-bg-09::before {
  background-image: url(../img/home/hero-water-man-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-09::before {
    background-image: url(../img/home/hero-water-man-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-09::before {
    background-image: url(../img/home/hero-water-man-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-09::before {
    background-image: url(../img/home/hero-water-man-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-09::before {
    background-image: url(../img/home/hero-water-man-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-09::before {
    background-image: url(../img/home/hero-water-man-2560.jpg);
  }
}

/* Wander Darkly */
.hero-bg-010::before {
  background-image: url(../img/home/hero-wander-darkly-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-010::before {
    background-image: url(../img/home/hero-wander-darkly-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-010::before {
    background-image: url(../img/home/hero-wander-darkly-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-010::before {
    background-image: url(../img/home/hero-wander-darkly-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-010::before {
    background-image: url(../img/home/hero-wander-darkly-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-010::before {
    background-image: url(../img/home/hero-wander-darkly-2560.jpg);
  }
}

/* Wander Darkly */
.hero-bg-011::before {
  background-image: url(../img/home/hero-trial-of-the-chicago-7-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-011::before {
    background-image: url(../img/home/hero-trial-of-the-chicago-7-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-011::before {
    background-image: url(../img/home/hero-trial-of-the-chicago-7-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-011::before {
    background-image: url(../img/home/hero-trial-of-the-chicago-7-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-011::before {
    background-image: url(../img/home/hero-trial-of-the-chicago-7-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-011::before {
    background-image: url(../img/home/hero-trial-of-the-chicago-7-2560.jpg);
  }
}

/* Hit Man */
.hero-bg-012::before {
  background-image: url(../img/home/hero-hit-man-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-012::before {
    background-image: url(../img/home/hero-hit-man-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-012::before {
    background-image: url(../img/home/hero-hit-man-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-012::before {
    background-image: url(../img/home/hero-hit-man-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-012::before {
    background-image: url(../img/home/hero-hit-man-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-012::before {
    background-image: url(../img/home/hero-hit-man-2560.jpg);
  }
}

/* Winner */
.hero-bg-013::before {
  background-image: url(../img/home/hero-winner-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-013::before {
    background-image: url(../img/home/hero-winner-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-013::before {
    background-image: url(../img/home/hero-winner-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-013::before {
    background-image: url(../img/home/hero-winner-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-013::before {
    background-image: url(../img/home/hero-winner-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-013::before {
    background-image: url(../img/home/hero-winner-2560.jpg);
  }
}

/* Love Me */
.hero-bg-014::before {
  background-image: url(../img/home/hero-love-me-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .hero-bg-014::before {
    background-image: url(../img/home/hero-love-me-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .hero-bg-014::before {
    background-image: url(../img/home/hero-love-me-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .hero-bg-014::before {
    background-image: url(../img/home/hero-love-me-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .hero-bg-014::before {
    background-image: url(../img/home/hero-love-me-1920.jpg);
  }
}
@media screen and (min-width: 70.01em) {
  .hero-bg-014::before {
    background-image: url(../img/home/hero-love-me-2560.jpg);
  }
}

/* The Assessment 01 */
.hero-bg-015::before {
  background-image: url(../img/home/the-assessment-hero-01.jpg);
}

/* The Assessment 02 */
.hero-bg-016::before {
  background-image: url(../img/home/the-assessment-hero-02.jpg);
}

/* The Wedding Banquet 01 */
.hero-bg-017::before {
  background-image: url(../img/home/the-wedding-banquet-hero-01.jpg);
}

/* The Wedding Banquet 01 */
.hero-bg-018::before {
  background-image: url(../img/home/the-wedding-banquet-hero-02.jpg);
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Hero + Nav Fixes for iOS devices

Odd behavior in iOS Safari changes viewport height in order to 
toggle Safari’s toolbars.

Use media queries that target the width, height,
and orientation of various iOS devices.

iOS Device Resolutions: 
http://www.iosres.com/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

A HUGE thank you to:
Hiatus - http://hiatuspost.com
Frank Chimero - https://frankchimero.com

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
/* iPhone 5SE: Portrait */
@media all and (device-width: 320px) and (device-height: 568px) and (orientation: portrait) {
  .hero {
    height: calc(568px - 11.75rem);
  }
}
/* iPhone 5SE: Landscape */
@media all and (device-width: 568px) and (device-height: 320px) and (orientation: landscape) {
  .hero {
    height: calc(320px - 11.75rem);
  }
}
/* iPhone 8: Portrait */
@media all and (device-width: 375px) and (device-height: 667px) and (orientation: portrait) {
  .hero {
    height: calc(667px - 11.75rem);
  }
}
/* iPhone 8: Landscape */
@media all and (device-width: 667px) and (device-height: 375px) and (orientation: landscape) {
  .hero {
    height: calc(375px - 11.75rem);
  }
}
/* iPhone 8 Plus: Portrait */
@media all and (device-width: 414px) and (device-height: 736px) and (orientation: portrait) {
  .hero {
    height: calc(736px - 11.75rem);
  }
}
/* iPhone 8 Plus: Landscape */
@media all and (device-width: 736px) and (device-height: 414px) and (orientation: landscape) {
  .hero {
    height: calc(414px - 11.75rem);
  }
}
/* iPhone X: Portrait */
@media all and (device-width: 375px) and (device-height: 812px) and (orientation: portrait) {
  .hero {
    height: calc(812px - 15.675rem);
  }
}
/* iPhone X: Landscape */
@media all and (device-width: 812px) and (device-height: 375px) and (orientation: landscape) {
  .hero {
    height: calc(375px - 15.675rem);
  }
}
/* iPad Mini, iPad Air, iPad Pro 9": Portrait */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .hero {
    height: calc(1024px - 10.75rem);
  }
}
/* iPad Mini, iPad Air, iPad Pro 9": Landscape */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  .hero {
    height: calc(768px - 10.75rem);
  }
}
/* iPad Pro 10.5": Portrait */
@media all and (device-width: 834px) and (device-height: 1112px) and (orientation: portrait) {
  .hero {
    height: calc(1112px - 8.75rem);
  }
}
/* iPad Pro 10.5": Landscape */
@media all and (device-width: 834px) and (device-height: 1112px) and (orientation: landscape) {
  .hero {
    height: calc(834px - 8.75rem);
  }
}
/* iPad Pro 12.9": Portrait */
@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) {
  .hero {
    height: calc(1366px - 8.75rem);
  }
}
/* iPad Pro 12.9": Landscape */
@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation: landscape) {
  .hero {
    height: calc(1024px - 9.25rem);
  }
}
.inner-hero {
  margin: 0 1.5rem;
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
  font-weight: 200;
}

.wf-active .inner-hero {
  font-family: "aktiv-grotesk-thin", "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
}

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  .inner-hero {
    font-family: "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
    font-weight: 300;
  }
  .wf-active .inner-hero {
    font-family: "aktiv-grotesk", "Helvetica Neue", "HelveticaNeue", Arial, sans-serif;
  }
}
.inner-hero h1 {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.inner-hero .logo-full {
  max-width: 40rem;
  margin-top: 0;
  color: rgba(0, 0, 0, 0) !important;
}

.inner-hero .logo-full img[src=""] {
  content: "" !important;
  border: none !important;
  border: 0 !important;
}

.inner-hero p {
  -webkit-hyphens: none;
          hyphens: none;
}
.inner-hero p {
  font-size: 2rem;
}
@media screen and (min-width: 20rem) {
  .inner-hero p {
    font-size: calc(0.625vw + 1.875rem);
  }
}
@media screen and (min-width: 100rem) {
  .inner-hero p {
    font-size: 2.5rem;
  }
}
.inner-hero p::after {
  content: "";
  position: relative;
  width: 25%;
  max-width: 8rem;
  height: 0.25rem;
  background: #fff;
  display: block;
  margin-top: 1.75rem;
  left: 50%;
  transform: translate(-50%, 0);
}

@media screen and (min-width: 40.01em) {
  .inner-hero .logo-full {
    margin: 0 auto calc(1.5rem + 4vh);
  }
  .inner-hero p::after {
    margin-top: calc(1.75rem + 4vh);
  }
}
.inner-hero p span {
  display: inline;
}
@media screen and (min-width: 40.01em) {
  .inner-hero p span {
    display: block;
    margin-top: 0;
  }
}

@media screen and (max-height: 480px) and (orientation: landscape) {
  .inner-hero .logo-full {
    width: calc(1.125vw + 20rem);
    margin: auto;
  }
  .inner-hero p {
    font-size: calc(1.125vw + 1rem);
  }
  .inner-hero p::after {
    width: 15%;
    height: 0.1875rem;
    margin-top: 2.5rem;
  }
}
/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!HEADER & NAVIGATION STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  z-index: 100;
  margin: 0 auto;
  padding: 0.125rem calc(0.75rem + 3vw) 0;
  width: 100%;
  height: 4.5rem;
  background-color: rgb(33.15, 33.15, 33.15);
}
@media screen and (min-width: 70em) {
  .header {
    height: 5rem;
    padding-top: 0.25rem;
  }
}

.nav {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: 30rem;
}

nav a:nth-child(1) {
  order: 3;
}

nav a:nth-child(2) {
  order: 1;
}

nav a:nth-child(3) {
  order: 2;
}

nav a:nth-child(4) {
  order: 4;
}

nav a:nth-child(5) {
  order: 5;
}

.nav a {
  font-size: 0.875rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  border: none;
  transition: color 0.25s ease-in-out;
}
.nav a:visited {
  color: #fff;
}
.nav a:hover {
  color: #fff;
}
.nav a:focus {
  color: #fff;
  outline: none;
  border-bottom: 0.125rem solid #FF8833;
}
.nav a:active {
  color: white;
  outline: none;
}
.nav a::before {
  content: "";
  height: 0.125em;
  width: 0;
  border-bottom: 0.125rem solid #FF8833;
  transition: width 0.25s ease-in-out;
  position: absolute;
  bottom: -0.125em;
}
.nav a:hover::before {
  width: 100%;
}

.touchevents .nav a::before {
  content: none;
}
.touchevents #about .about,
.touchevents #films .films,
.touchevents #news .news,
.touchevents #contact .contact {
  border-bottom: 0.125rem solid #FF8833;
}

#about .about::before,
#films .films::before,
#news .news::before,
#contact .contact::before {
  width: 100%;
}

.nav a.logo {
  width: 2.5rem;
  padding-top: 0.8125rem;
  align-self: center;
  border: none;
}
.nav a.logo::before {
  border: none;
}
@media screen and (min-width: 70em) {
  .nav a.logo {
    width: 3rem;
  }
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!PANELS STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.section--project-list {
  max-width: 80rem;
  margin: calc(3.5rem + 3vw) auto 0;
  padding: 0 calc(0.75rem + 3vw);
}

.project-item {
  position: relative;
  width: 100%;
  margin: calc(3.5rem + 3vw) auto 0;
}
@media screen and (min-width: 60em) {
  .project-item {
    width: 100%;
    height: 30rem;
    display: flex;
    align-items: flex-end;
  }
}
@media screen and (min-width: 80em) {
  .project-item {
    height: 40rem;
  }
}

.project-item:first-child {
  margin: 0 auto;
}

.project-item:last-child {
  margin: calc(3.5rem + 3vw) auto;
}

.project-item-bg {
  width: 100%;
  height: 15rem;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transition: all 0.15s ease-in-out;
}
@media screen and (min-width: 40em) {
  .project-item-bg {
    height: 20rem;
  }
}
@media screen and (min-width: 60em) {
  .project-item-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30rem;
  }
}
@media screen and (min-width: 80em) {
  .project-item-bg {
    height: 40rem;
  }
}

.project-item-text {
  padding: 0;
  position: relative;
  z-index: 1;
  display: block;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  max-width: 30rem;
}
@media screen and (min-width: 60em) {
  .project-item-text {
    margin: 0 0 2rem 2rem;
  }
}

.project-item-text a {
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.5ch;
}
.project-item-text a:focus-visible {
  outline: 0.075em solid;
  outline-offset: 3px;
  outline-color: #FF8833;
}

.project-description {
  -webkit-hyphens: none;
          hyphens: none;
}

ul.project-description {
  list-style: none;
  margin-left: 0;
}

ul.project-description > li {
  margin-top: 0;
}

.project-details {
  -webkit-hyphens: none;
          hyphens: none;
  font-size: 0.75em;
}

.project-the-wedding-banquet {
  background-position: center bottom;
  background-image: url(../img/films/the-wedding-banquet/the-wedding-banquet-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-the-wedding-banquet {
    background-image: url(../img/films/the-wedding-banquet/the-wedding-banquet-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-the-wedding-banquet {
    background-image: url(../img/films/the-wedding-banquet/the-wedding-banquet-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-the-wedding-banquet {
    background-image: url(../img/films/the-wedding-banquet/the-wedding-banquet-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-the-wedding-banquet {
    background-image: linear-gradient(70deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), url(../img/films/the-wedding-banquet/the-wedding-banquet-featured-1920.jpg);
  }
}

.project-the-assessment {
  background-position: center bottom;
  background-image: url(../img/films/the-assessment/the-assessment-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-the-assessment {
    background-image: url(../img/films/the-assessment/the-assessment-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-the-assessment {
    background-image: url(../img/films/the-assessment/the-assessment-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-the-assessment {
    background-image: url(../img/films/the-assessment/the-assessment-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-the-assessment {
    background-image: linear-gradient(50deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)), url(../img/films/the-assessment/the-assessment-featured-1920.jpg);
  }
}

.project-to-kill-a-tiger {
  background-position: center bottom;
  background-image: url(../img/films/to-kill-a-tiger/to-kill-a-tiger-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-to-kill-a-tiger {
    background-image: url(../img/films/to-kill-a-tiger/to-kill-a-tiger-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-to-kill-a-tiger {
    background-image: url(../img/films/to-kill-a-tiger/to-kill-a-tiger-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-to-kill-a-tiger {
    background-image: url(../img/films/to-kill-a-tiger/to-kill-a-tiger-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-to-kill-a-tiger {
    background-image: url(../img/films/to-kill-a-tiger/to-kill-a-tiger-featured-1920.jpg);
  }
}

.project-love-me {
  background-position: center top;
  background-image: url(../img/films/love-me/love-me-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-love-me {
    background-image: url(../img/films/love-me/love-me-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-love-me {
    background-image: url(../img/films/love-me/love-me-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-love-me {
    background-image: url(../img/films/love-me/love-me-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-love-me {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url(../img/films/love-me/love-me-featured-1920.jpg);
  }
}

.project-winner {
  background-position: center top;
  background-image: url(../img/films/winner/winner-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-winner {
    background-image: url(../img/films/winner/winner-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-winner {
    background-image: url(../img/films/winner/winner-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-winner {
    background-image: url(../img/films/winner/winner-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-winner {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)), url(../img/films/winner/winner-featured-1920.jpg);
  }
}

.project-hit-man {
  background-position: center top;
  background-image: url(../img/films/hit-man/hit-man-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-hit-man {
    background-image: url(../img/films/hit-man/hit-man-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-hit-man {
    background-image: url(../img/films/hit-man/hit-man-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-hit-man {
    background-image: url(../img/films/hit-man/hit-man-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-hit-man {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)), url(../img/films/hit-man/hit-man-featured-1920.jpg);
  }
}

.project-golda {
  background-position: center top;
  background-image: url(../img/films/golda/golda-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-golda {
    background-image: url(../img/films/golda/golda-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-golda {
    background-image: url(../img/films/golda/golda-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-golda {
    background-image: url(../img/films/golda/golda-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-golda {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url(../img/films/golda/golda-featured-1920.jpg);
  }
}

.project-ice-road {
  background-position: center top;
  background-image: url(../img/films/ice-road/ice-road-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-ice-road {
    background-image: url(../img/films/ice-road/ice-road-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-ice-road {
    background-image: url(../img/films/ice-road/ice-road-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-ice-road {
    background-image: url(../img/films/ice-road/ice-road-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-ice-road {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(../img/films/ice-road/ice-road-featured-1920.jpg);
  }
}

.project-water-man {
  background-position: center top;
  background-image: url(../img/films/water-man/water-man-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-water-man {
    background-image: url(../img/films/water-man/water-man-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-water-man {
    background-image: url(../img/films/water-man/water-man-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-water-man {
    background-image: url(../img/films/water-man/water-man-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-water-man {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), url(../img/films/water-man/water-man-featured-1920.jpg);
  }
}

.project-wander-darkly {
  background-position: center top;
  background-image: url(../img/films/wander-darkly/wander-darkly-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-wander-darkly {
    background-image: url(../img/films/wander-darkly/wander-darkly-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-wander-darkly {
    background-image: url(../img/films/wander-darkly/wander-darkly-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-wander-darkly {
    background-image: url(../img/films/wander-darkly/wander-darkly-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-wander-darkly {
    background-image: url(../img/films/wander-darkly/wander-darkly-featured-1920.jpg);
  }
}

.project-trial-of-the-chicago-7 {
  background-position: center top;
  background-image: url(../img/films/trial-of-the-chicago-7/trial-of-the-chicago-7-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-trial-of-the-chicago-7 {
    background-image: url(../img/films/trial-of-the-chicago-7/trial-of-the-chicago-7-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-trial-of-the-chicago-7 {
    background-image: url(../img/films/trial-of-the-chicago-7/trial-of-the-chicago-7-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-trial-of-the-chicago-7 {
    background-image: url(../img/films/trial-of-the-chicago-7/trial-of-the-chicago-7-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-trial-of-the-chicago-7 {
    background-image: linear-gradient(70deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)), url(../img/films/trial-of-the-chicago-7/trial-of-the-chicago-7-featured-1920.jpg);
  }
}

.project-hotel-mumbai {
  background-position: center top;
  background-image: url(../img/films/hotel-mumbai/hotel-mumbai-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-hotel-mumbai {
    background-image: url(../img/films/hotel-mumbai/hotel-mumbai-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-hotel-mumbai {
    background-image: url(../img/films/hotel-mumbai/hotel-mumbai-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-hotel-mumbai {
    background-image: url(../img/films/hotel-mumbai/hotel-mumbai-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-hotel-mumbai {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)), url(../img/films/hotel-mumbai/hotel-mumbai-featured-1920.jpg);
  }
}

.project-brian-banks {
  background-position: center top;
  background-image: url(../img/films/brian-banks/brian-banks-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-brian-banks {
    background-image: url(../img/films/brian-banks/brian-banks-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-brian-banks {
    background-image: url(../img/films/brian-banks/brian-banks-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-brian-banks {
    background-image: url(../img/films/brian-banks/brian-banks-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-brian-banks {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)), url(../img/films/brian-banks/brian-banks-featured-1920.jpg);
  }
}

.project-beirut {
  background-image: url(../img/films/beirut/beirut-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-beirut {
    background-image: url(../img/films/beirut/beirut-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-beirut {
    background-image: url(../img/films/beirut/beirut-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-beirut {
    background-image: url(../img/films/beirut/beirut-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-beirut {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(../img/films/beirut/beirut-featured-1920.jpg);
  }
}

.project-polka-king {
  background-image: url(../img/films/polka-king/polka-king-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-polka-king {
    background-image: url(../img/films/polka-king/polka-king-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-polka-king {
    background-image: url(../img/films/polka-king/polka-king-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-polka-king {
    background-image: url(../img/films/polka-king/polka-king-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-polka-king {
    background-image: url(../img/films/polka-king/polka-king-featured-1920.jpg);
  }
}

.project-captain-fantastic {
  background-position: center top;
  background-image: url(../img/films/captain-fantastic/captain-fantastic-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-captain-fantastic {
    background-image: url(../img/films/captain-fantastic/captain-fantastic-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-captain-fantastic {
    background-image: url(../img/films/captain-fantastic/captain-fantastic-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-captain-fantastic {
    background-image: url(../img/films/captain-fantastic/captain-fantastic-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-captain-fantastic {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)), url(../img/films/captain-fantastic/captain-fantastic-featured-1920.jpg);
  }
}

.project-trumbo {
  background-image: url(../img/films/trumbo/trumbo-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-trumbo {
    background-image: url(../img/films/trumbo/trumbo-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-trumbo {
    background-image: url(../img/films/trumbo/trumbo-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-trumbo {
    background-image: url(../img/films/trumbo/trumbo-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-trumbo {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)), url(../img/films/trumbo/trumbo-featured-1920.jpg);
  }
}

.project-danny-collins {
  background-image: url(../img/films/danny-collins/danny-collins-featured-640.jpg);
}
@media screen and (min-width: 30.01em) {
  .project-danny-collins {
    background-image: url(../img/films/danny-collins/danny-collins-featured-1024.jpg);
  }
}
@media screen and (min-width: 40.01em) {
  .project-danny-collins {
    background-image: url(../img/films/danny-collins/danny-collins-featured-1440.jpg);
  }
}
@media screen and (min-width: 50.01em) {
  .project-danny-collins {
    background-image: url(../img/films/danny-collins/danny-collins-featured-1600.jpg);
  }
}
@media screen and (min-width: 60.01em) {
  .project-danny-collins {
    background-image: linear-gradient(60deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)), url(../img/films/danny-collins/danny-collins-featured-1920.jpg);
  }
}

.spread {
  position: relative;
}

.spread--about {
  margin: calc(3.5rem + 3vw) auto 0;
  background-color: #2E2E2E;
}

@media screen and (min-width: 48em) {
  .spread-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .spread-inner .spread-cell {
    flex: 1 1 0;
  }
}
.spread-cell {
  margin-top: 0;
  padding: 5rem calc(0.75rem + 3vw);
  display: flex;
}

.spread-cell p {
  -webkit-hyphens: none;
          hyphens: none;
}
.spread-cell p {
  font-size: 1.25rem;
}
@media screen and (min-width: 20rem) {
  .spread-cell p {
    font-size: calc(0.3125vw + 1.1875rem);
  }
}
@media screen and (min-width: 100rem) {
  .spread-cell p {
    font-size: 1.5rem;
  }
}

.spread-cell a {
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.5ch;
}
.spread-cell a:focus-visible {
  outline: 0.075em solid;
  outline-offset: 4px;
  outline-color: #FF8833;
}

.spread-cell--left {
  background-color: #262626;
}

@media screen and (max-width: 47.99em) {
  .spread-cell--left {
    padding-bottom: 3rem;
    background-color: transparent;
  }
  .spread-cell--right {
    padding-top: 0;
  }
}
@media screen and (min-width: 48em) {
  .spread-cell {
    min-height: 45vh;
    align-items: center;
  }
}
@media screen and (min-width: 48em) {
  .spread-cell-inner {
    max-width: 40ch;
  }
}
@media screen and (min-width: 48em) {
  .spread-cell {
    justify-content: center;
  }
}
/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!CARD STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.c-card {
  overflow: hidden;
  height: 100%;
  padding-bottom: 1.5rem;
  background-color: #2E2E2E;
  border: 1px solid #262626;
  animation-name: fadeIn;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@media screen and (min-width: 70em) {
  .c-card {
    padding-bottom: 1.6rem;
  }
}

.c-card > *:not(:first-child) {
  padding-left: 12px;
  padding-right: 12px;
}

.c-card .c-card__link {
  display: block;
  border: none;
}

.c-card .c-card__title {
  font-size: 1.6875rem;
  z-index: 1;
  transition: color 0.15s ease-in-out;
}

.c-card__title a {
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.5ch;
}
.c-card__title a:focus-visible {
  outline: 0.06em solid;
  outline-offset: 3px;
  outline-color: #FF8833;
}

.c-card p,
.c-card ul {
  font-size: 0.9rem;
  z-index: 1;
}

.c-card ul {
  list-style: none;
  margin-left: 0;
}

.c-card ul > li {
  margin-top: 0;
}

p.c-card__footer {
  font-size: 0.75rem;
  z-index: 1;
}

.c-card__categories {
  font-size: 0.75rem;
  color: #999999;
  line-height: normal;
  margin-left: 0;
}

.c-card__categories * {
  display: inline-block;
}

.c-card__categories li {
  margin-top: 0.375rem;
  padding: 0.1rem 0.5rem 0;
  border-radius: 1rem;
  border: 1px solid;
}

.c-card__categories li:not(:last-child) {
  margin-right: 3px;
}

.c-card__categories a {
  transition: all 0.1s;
  border: none;
}

.c-card__categories a:hover {
  background: #FF8833;
  color: #fff;
  border-color: #FF8833;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!CONTENT FILTER STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
/*
 * Thanks to George Martsoukos
 * How to Build a Filtering Component in Pure CSS
 * https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css--cms-33111
 * https://codepen.io/tutsplus/pen/bJxBRG
 *
 * And to Harry Roberts
 * Pure CSS Content Filter
 * https://csswizardry.com/2016/10/pure-css-content-filter/
 * https://codepen.io/csswizardry/pen/ooqZVX
 */
input.c-filter__target {
  position: absolute;
  left: -9999px;
}

.c-filter__links {
  text-align: center;
  margin: 1.5rem auto 3rem;
}

.c-filter__links * {
  display: inline-block;
}

.c-filter__links label {
  padding: 0.25rem 0.75rem 0;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 2rem;
  min-width: 3.375rem;
  transition: all 0.1s;
}

.c-filter__links label:hover {
  background: #FF8833;
  color: #fff;
}

[value=All]:checked ~ .c-filter__links [for=All],
[value=Produced]:checked ~ .c-filter__links [for=Produced],
[value=Distributed]:checked ~ .c-filter__links [for=Distributed] {
  background: #FF8833;
  color: #fff;
}

[value=All]:checked ~ .c-filter__list [data-category] {
  display: block;
}

[value=Produced]:checked ~ .c-filter__list .c-filter__item:not([data-category~=Produced]),
[value=Distributed]:checked ~ .c-filter__list .c-filter__item:not([data-category~=Distributed]),
[value=jQuery]:checked ~ .c-filter__list .c-filter__item:not([data-category~=jQuery]) {
  display: none;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!FOOTER STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.footer {
  padding: 4.5rem calc(0.75rem + 3vw) 6rem;
  color: #fff;
  background-color: rgb(33.15, 33.15, 33.15);
}

.footer-details {
  text-align: center;
}

.footer-logo {
  width: 8em;
  margin: 1.5rem auto;
}

.footer-logo a {
  border: none;
}
.footer-logo a:focus {
  outline: none;
}
.footer-logo a::before {
  border: none;
}

.footer-social {
  margin: 1.5rem auto 1.75rem;
  text-align: center;
  list-style: none;
}

.footer-social li {
  display: inline-block;
  margin-right: 0.5rem;
}
.footer-social li:last-child {
  margin-right: 0;
}

.footer-social .icon {
  width: 1.75em;
  height: 1.75em;
  position: inherit;
}

.footer-social a {
  border: none;
  outline: 0;
}
.footer-social a:hover {
  outline: 0;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!Flickity v2.1.2 Styles
https://flickity.metafizzy.co	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

/* ---- flickity-button ---- */
.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: #333;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!LAYOUT CONTAINER STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.l-container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.l-container--full {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.l-container--narrow {
  width: 100%;
  max-width: 42.5rem;
  margin-left: auto;
  margin-right: auto;
}

.l-container--tiny {
  width: 100%;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

.l-container--medium {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.l-container--wide {
  width: 100%;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!GRID STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.l-grid {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: -12px;
  margin-top: 12px;
}

.l-grid__item {
  width: 100%;
  margin-top: 0;
  padding: 12px;
}

@media screen and (min-width: 30.01em) {
  .l-grid--2up .l-grid__item {
    width: 50%;
  }
}

@media screen and (min-width: 30.01em) {
  .l-grid--3up .l-grid__item {
    width: 50%;
  }
}
@media screen and (min-width: 50.01em) {
  .l-grid--3up .l-grid__item {
    width: 33.33333%;
  }
}

@media screen and (min-width: 30.01em) {
  .l-grid--4up .l-grid__item {
    width: 50%;
  }
}
@media screen and (min-width: 50.01em) {
  .l-grid--4up .l-grid__item {
    width: 33.33333%;
  }
}
@media screen and (min-width: 70.01em) {
  .l-grid--4up .l-grid__item {
    width: 25%;
  }
}

@media screen and (min-width: 30.01em) {
  .l-grid--5up .l-grid__item {
    width: 50%;
  }
}
@media screen and (min-width: 50.01em) {
  .l-grid--5up .l-grid__item {
    width: 33.33333%;
  }
}
@media screen and (min-width: 70.01em) {
  .l-grid--5up .l-grid__item {
    width: 25%;
  }
}
@media screen and (min-width: 100.01em) {
  .l-grid--5up .l-grid__item {
    width: 20%;
  }
}

@supports (display: grid) {
  .l-grid {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    margin: 24px 0 0 0;
  }
  .l-grid__item {
    width: 100%;
    padding: 0;
  }
  @media screen and (min-width: 30.01em) {
    .l-grid--2up {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .l-grid--2up .l-grid__item {
    width: 100%;
  }
  @media screen and (min-width: 40.01em) {
    .l-grid--3up {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 60.01em) {
    .l-grid--3up {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .l-grid--3up .l-grid__item {
    width: 100%;
  }
  @media screen and (min-width: 30.01em) {
    .l-grid--4up {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 50.01em) {
    .l-grid--4up {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 70.01em) {
    .l-grid--4up {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .l-grid--4up .l-grid__item {
    width: 100%;
  }
  @media screen and (min-width: 30.01em) {
    .l-grid--5up {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 60.01em) {
    .l-grid--5up {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 80.01em) {
    .l-grid--5up {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media screen and (min-width: 100.01em) {
    .l-grid--5up {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .l-grid--5up .l-grid__item {
    width: 100%;
  }
}
.grid-content {
  padding: 1rem;
  color: white;
  background-color: rgba(192, 192, 192, 0.3);
  border: 2px solid rgba(192, 192, 192, 0.2);
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!SPECIFIC FILM PAGE STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
#films .section--project-list {
  margin-top: 3rem;
}
#films .c-filter {
  margin-bottom: calc(3.5rem + 3vw);
}
@media screen and (max-width: 39.99em) {
  #films .c-filter__item:not(:first-of-type) {
    margin-top: 1.5rem;
  }
}
.film-trailer-container {
  max-width: 80rem;
  margin: 3rem auto;
  padding: 0 calc(0.75rem + 3vw);
}

.video-item {
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}

.video-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

.film-details-container {
  margin: 3rem auto 4.5rem;
  padding: 0 calc(0.75rem + 3vw);
}

.film-details {
  max-width: 42.5em;
  margin: auto;
}

.film-details p:first-of-type {
  margin: auto;
  -webkit-hyphens: none;
          hyphens: none;
}

.film-poster {
  max-width: 30rem;
  margin: 3rem auto;
}

.film-credits {
  margin: 3rem auto;
  text-align: center;
}

.film-credits p {
  margin: 3rem auto;
}

.film-credits ul {
  margin: 3rem auto;
  list-style: none;
}
.film-credits ul > li {
  margin: 0;
}

.watch-on {
  max-width: 25rem;
  margin-inline: auto;
}

.watch-on-link {
  max-width: 10rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.watch-on-link:nth-child(even) {
  margin-block-start: 1.5rem;
}
@media screen and (min-width: 30.01em) {
  .watch-on-link:nth-child(even) {
    margin-block-start: 0;
  }
}

.studio-logo {
  width: 9rem;
  margin-block: 0;
  height: auto;
  fill: currentcolor;
  transition-property: fill;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
}
.studio-logo:hover {
  fill: #FF8833;
}

.film-stills-container {
  max-width: 80rem;
  margin: 3rem auto calc(3.5rem + 3vw);
  padding: 0 calc(0.75rem + 3vw);
}

/* carousel height, as percentage of width */
.carousel {
  padding-bottom: 56.25%;
}

/* viewport inherit size from carousel */
.carousel .flickity-viewport {
  position: absolute;
  width: 100%;
}

/* cell inherit height from carousel */
.carousel-cell {
  width: 100%; /* full width */
  height: 100%; /* height of carousel */
  margin-top: 0;
  margin-right: 1.5rem;
}

.flickity-page-dots {
  bottom: -40px;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!SPECIFIC ABOUT PAGE STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
#about {
  background-color: #fff;
  background: linear-gradient(0deg, rgb(150, 203, 209) 0%, rgba(255, 255, 255, 0) 100%);
  color: rgb(33.15, 33.15, 33.15);
}
#about h1, #about h2, #about h3, #about h4, #about h5, #about h6 {
  color: rgb(33.15, 33.15, 33.15);
}
#about .long-form {
  margin-bottom: calc(6rem + 3vw);
}
#about .long-form p:first-of-type {
  margin-top: 2.25rem;
}
#about .bio .circle-image,
#about .bio .round-corner-image,
#about .bio .square-image {
  margin-top: 3rem;
  margin-left: auto;
  margin-right: auto;
}
#about .bio .square-image {
  border: 0.5rem solid white;
}
#about .bio-name, #about .bio-title {
  text-align: center;
}
#about .bio-title {
  display: block;
  margin-top: 0;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!SPECIFIC NEWS PAGE STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
#news {
  background-color: #fff;
  background: linear-gradient(0deg, rgb(150, 203, 209) 0%, rgba(255, 255, 255, 0) 100%);
  color: rgb(33.15, 33.15, 33.15);
}
#news .page-title {
  color: rgb(33.15, 33.15, 33.15);
}
#news .long-form {
  margin-bottom: calc(6rem + 3vw);
}
#news .long-form div:first-of-type {
  margin-top: 2.625rem;
}
#news p {
  -webkit-hyphens: none;
          hyphens: none;
}

.news-item {
  margin-top: 3rem;
  padding: 1.5rem 0 3rem;
  border-top: 2px solid #FF8833;
  background-repeat: no-repeat;
  background-size: 9em;
  background-position: left bottom;
}

.news-item-deadline {
  background-image: url(/-/img/svg/deadline-logo-opt.svg);
}

.news-item-hollywood-reporter {
  padding-bottom: 4.5rem;
  background-image: url(/-/img/svg/hollywood-reporter-logo-opt.svg);
}

.news-item-variety {
  padding-bottom: 5.25rem;
  background-image: url(/-/img/svg/variety-logo-opt.svg);
}

.news-item-variety-australia {
  padding-bottom: 5.25rem;
  background-image: url(/-/img/svg/variety-australia-logo-opt.svg);
}

.news-item-awardsdaily {
  padding-bottom: 5.25rem;
  background-image: url(/-/img/logos/awardsdaily-logo-bw.png);
}

.news-item-screen-daily {
  padding-bottom: 54px;
  background-image: url(/-/img/svg/screen-daily-logo-opt.svg);
}

.news-item a {
  text-decoration: none;
  border: none;
  transition-property: color, border-color;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
}
.news-item a:link {
  color: rgb(33.15, 33.15, 33.15);
}
.news-item a:visited {
  color: rgb(33.15, 33.15, 33.15);
}
.news-item a:hover {
  color: #FF8833;
}
.news-item a:active {
  color: #FF8833;
  outline: none;
}
.news-item a:focus {
  color: #FF8833;
  outline: 2px solid rgb(33.15, 33.15, 33.15);
  outline-offset: 2px;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!SPECIFIC CONTACT PAGE STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.section--contact-info {
  max-width: 80rem;
  margin: 1.5rem auto calc(6rem + 3vw);
  padding: 0 calc(0.75rem + 3vw);
}

@media screen and (min-width: 50em) {
  .address-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
  }
  .address-item {
    flex: 0 0 50%;
    margin-bottom: 0;
    padding-right: 1.5rem;
  }
  .address-item:last-child {
    margin-right: -1.5rem;
  }
}
.address-item {
  margin-bottom: 4.5rem;
}

.map-item {
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}

.googlemap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

.vcard {
  max-width: 25rem;
  color: #FF8833;
}

.vcard .type {
  display: block;
  color: #fff;
}

.email-container {
  padding-top: 4.5rem;
  border-top: 2px solid #fff;
}

.email-container p {
  max-width: 25rem;
  -webkit-hyphens: none;
          hyphens: none;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!SPECIFIC DISCLAIMER PAGE STYLES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
#privacy-policy,
#terms {
  background-color: #fff;
  background: linear-gradient(0deg, rgb(150, 203, 209) 0%, rgba(255, 255, 255, 0) 100%);
  color: rgb(33.15, 33.15, 33.15);
}
#privacy-policy h1, #privacy-policy h2, #privacy-policy h3, #privacy-policy h4, #privacy-policy h5, #privacy-policy h6,
#terms h1,
#terms h2,
#terms h3,
#terms h4,
#terms h5,
#terms h6 {
  color: rgb(33.15, 33.15, 33.15);
}
#privacy-policy .long-form,
#terms .long-form {
  margin: 3rem auto calc(6rem + 3vw);
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

UTILITY STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

.reset-clearfix:after {
  display: initial;
  clear: none;
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  clip: auto !important;
  clip-path: none !important;
  height: auto !important;
  overflow: visible !important;
  width: auto !important;
  white-space: normal !important;
}

.tabindex:focus {
  outline: none;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!ASPECT RATIOS with CUSTOM PROPERTIES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
/*
 * Thanks to Thierry Koblentz
 * Aspect Ratio Using Custom Properties and Calc
 * http://www.cssmojo.com/aspect-ratio-using-custom-properties-and-calc/
 * https://css-tricks.com/aspect-ratio-boxes/#article-header-id-7
 */
[style*="--aspect-ratio"],
[style*="--aspect-ratio"] > :first-child {
  width: 100%;
  height: auto;
}

[style*="--aspect-ratio"] > img {
  height: auto;
}

@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
    overflow: hidden;
  }
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  [style*="--aspect-ratio"] > img {
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

!ANIMATION STYLES

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

MEDIA QUERIES	

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~	*/
#main:before {
  display: none;
}

@media screen and (min-width: 20em) {
  #main:before {
    content: "xxx-small";
  }
}
@media screen and (min-width: 30em) {
  #main:before {
    content: "xx-small";
  }
}
@media screen and (min-width: 40em) {
  #main:before {
    content: "x-small";
  }
}
@media screen and (min-width: 50em) {
  #main:before {
    content: "small";
  }
}
@media screen and (min-width: 60em) {
  #main:before {
    content: "medium";
  }
}
@media screen and (min-width: 70em) {
  #main:before {
    content: "large";
  }
}
@media screen and (min-width: 80em) {
  #main:before {
    content: "x-large";
  }
}
@media screen and (min-width: 90em) {
  #main:before {
    content: "xx-large";
  }
}
@media screen and (min-width: 100em) {
  #main:before {
    content: "xxx-large";
  }
}

/*# sourceMappingURL=styles.css.map */