/*
	Designed by: Tejas Bhatt
	Version: 1.0
	Project Name:
___  __ )__  / __  / / /__  ____/   ___  | / /_  __ \__  __/__  ____/
__  __  |_  /  _  / / /__  __/      __   |/ /_  / / /_  /  __  __/
_  /_/ /_  /___/ /_/ / _  /___      _  /|  / / /_/ /_  /   _  /___
/_____/ /_____/\____/  /_____/      /_/ |_/  \____/ /_/    /_____/


*/

/**Normalize**/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

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

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

.d_b {
    display: block;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

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

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

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

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
    color: inherit; /* 1 */
    font: inherit; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

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

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
    font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

ul {
    margin: 0;
    padding: 0;
}

/*blue - #5A5AE6*/

/*Custom CSS*/

/* @import ("fonts/3sc.css"); */

:root {
    --main_bg_color: hsl(240, 26%, 7%);
    --footer_bg_color: hsl(240, 26%, 7%);
    --secondary_bg_color: hsl(233, 24%, 15%);
    --brand_color: hsl(45, 100%, 55%);
    --rio_blue: hsl(197, 100%, 55%);
    --mint_green: hsl(142, 100%, 74%);
    --main_text_color: hsl(41, 100%, 96%);
    --link_color: hsl(2, 100%, 84%);
    --secondary_color: --link_color;
    --silver: hsl(228, 12%, 92%);
    --max_width: 92vw;
    --cols: 8;
    --gridSize: 1fr;
    --serif: "Recoleta", serif;
    --sans_body_text: "Neue Plak W04 Regular", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    --mono: "space mono", monospace;
    --base_font_size: 2.2rem;
    --base_line_height: 3.5rem;
    --text_shadow: hsl(0, 82%, 62%);
    --small_font_size: 1.6rem;
    --animation_timing: cubic-bezier(0.52, 0.01, 0.16, 1);
    --layer_top_index: 1111;
    --layer_mid_index: 999;
    --medium_font_size: 2.9rem;
    --large_font_size: 4.2rem;
    --outer_spacing: 4vw;
    --gridGap: 4vw;
    --vertGap: /* calc(5*var(--base_line_height)) */ 20vh;
    --dim: 0.7;
    --dimmer: 0.15;
}

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

button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html,
body {
    max-width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

::-moz-selection,
::selection {
    background: var(--brand_color);
    color: var(--main_bg_color);
}

.highlight::selection,
.dot::selection,
.highlight strong::selection {
    color: #fff;
    background: var(--brand_color);
}

body {
    color: var(--main_text_color);
    font: var(--base_font_size) / var(--base_line_height) var(--sans_body_text);
    position: relative;
    background: var(--main_bg_color);
    /* background: -webkit-linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.25) 1px,
            transparent 0px
        )
        0 0 / auto 1rem var(--main_bg_color); */
    overflow-x: hidden;
}

main {
    /* overflow-x: hidden; */
}

h6,
h3,
h2,
h4,
h1,
h5,
h5 + p {
    padding-top: 0;
    padding-bottom: 0;
}

.hang {
    text-indent: -0.45em;
}

.text a:not(.btn) {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.15em;
    text-decoration-color: var(--link_color);
}

.text a:not(.btn):hover {
    text-decoration-style: solid;
}

.button_group {
    flex-wrap: wrap;
    display: flex;
    gap: calc(0.5 * var(--gridGap));
}

.btn {
    padding: calc(0.55 * var(--base_line_height))
        max(3vw, calc(1 * var(--base_line_height)))
        calc(0.75 * var(--base_line_height));
    background: var(--secondary_bg_color);
    position: relative;
    transition: all 0.3s linear;
    text-align: center;
    display: flex;
    /*     flex: 1 0 100%; */
    justify-content: center;
    border-radius: 1rem;
    will-change: transform;
    overflow: hidden;
}

.btn.primary {
    background: var(--main_text_color);
    color: var(--main_bg_color);
}

.btn:hover {
    /* transform: translate3d(0, -0.025em, 0) rotate(-2deg); */
    animation: wiggle 0.3s var(--animation_timing) 5;
}

/* .btn + .btn:hover {
    transform: translate3d(0, -0.025em, 0) rotate(2deg);
} */

.is-column {
    display: flex;
    gap: calc(var(--base_line_height));
    flex-direction: column !important;
}

.is-row {
    display: flex;
    /* 	gap: var(--gridGap); */
    flex-direction: row !important;
}

.no-gap {
    gap: 0;
}

.is-space-between {
    justify-content: space-between !important;
}

.largest {
    position: absolute;
    top: 0;
    left: 0%;
    right: 0;
    z-index: 999;
    overflow: hidden;
    max-width: 100%;
    opacity: 0;
    display: none;
    /* 	max-height: 25vh; */
}

.largest span {
    width: 150%;
    left: 50%;
    font-size: 18vw;
    line-height: 1;
    color: var(--main_text_color);
    font-family: "Neue Plak W04 Bold", sans-serif;
    font-weight: 900;
    display: block;
    text-align: center;
    transform: translate3d(-50%, -57%, 0) skewX(-8deg);
    position: relative;
    z-index: 1000;
    letter-spacing: -1.5vw;
    /*  	-webkit-text-stroke: 0.005vw var(--main_text_color);  */
    text-shadow:
        0px 2px var(--text_shadow),
        0 4px var(--text_shadow),
        0 6px var(--text_shadow),
        0 8px var(--text_shadow),
        0 10px var(--text_shadow),
        0 12px var(--text_shadow),
        0 14px var(--text_shadow),
        0 16px var(--text_shadow),
        0 18px var(--text_shadow),
        0 20px var(--text_shadow),
        0 22px var(--text_shadow),
        0 24px 0 var(--text_shadow),
        0 26px var(--text_shadow),
        0 28px var(--text_shadow),
        0 30px var(--text_shadow),
        0 32px var(--text_shadow);
    /* 	text-shadow: 0 0px 2px var(--text_shadow), 0 -2px 0px var(--text_shadow); */
    text-transform: uppercase;
}

.largest.outline span {
    text-shadow:
        0 5px 15px var(--text_shadow),
        0 -2px 10px var(--text_shadow);
    -webkit-text-fill-color: var(--main_bg_color);
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: var(--text_shadow);
}

/*Typography*/

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    /* font-family: var(--serif); */
    font-feature-settings: "liga" 0;
    text-wrap: pretty;
}

h1 {
    font-size: clamp(7rem, 14vw, 23rem);
    line-height: 0.75;
    font-family: "Neue Plak W04 Bold", sans-serif;
}

h2 {
    font-size: clamp(4.7rem, 9vw, 8.7rem);
    line-height: clamp(4.8rem, 10vw, calc(2.75 * var(--base_line_height)));
    /*font-family: "recoleta";*/
    font-weight: normal;
}

h3 {
    font-size: clamp(3.4rem, 6vw, 6.8rem);
    line-height: clamp(4rem, 95%, calc(2.25 * var(--base_line_height)));
    font-weight: normal;
    /* 	padding-bottom: calc(.75*var(--base_line_height)); */
    /*font-family: "recoleta";*/
    font-kerning: normal;
}

h3 + h5 {
    margin-top: calc(0.75 * var(--base_line_height));
}

h4 {
    font-size: clamp(var(--medium_font_size), 5.5vw, 5.5rem);
    line-height: clamp(3rem, 100%, calc(1.5625 * var(--base_line_height)));
    font-family: "neue plak w04 Bold", sans-serif;
    font-weight: bold;
}

h4 + h4 {
    /* 	font-family: var(--sans_body_text); */
    /*font-family: "recoleta";*/
    font-weight: normal;
    /* 	padding-top: calc(1*var(--base_line_height)); */
}

h4 + p {
    margin-top: calc(1 * var(--base_line_height));
}

.item_heading {
    font-size: var(--medium_font_size);
    line-height: 1.1;
    font-family: "Neue Plak W04 Bold", sans-serif;
    font-weight: bold;
    letter-spacing: -0.015em;
}

h5 {
    font-size: clamp(var(--medium_font_size), 4.5vw, var(--large_font_size));
    line-height: clamp(3rem, 100%, calc(1.40625 * var(--base_line_height)));
    /*font-family: "recoleta-medium";*/
    letter-spacing: -0.1px;
    font-weight: normal;
}

h6 {
    /* 	padding-bottom:  calc(1*var(--base_line_height)); */
    font-size: var(--base_font_size);
    font-family: "Neue Plak W04 Bold", sans-serif;
    line-height: calc(1 * var(--base_line_height));
}

h6 + * {
    margin-top: calc(1 * var(--base_line_height));
}

.call_out {
}

ol,
ul {
    margin: 0;
    padding-bottom: calc(var(--base_line_height));
    counter-reset: my-awesome-counter;
}

li {
    padding-bottom: 0;
    position: relative;
    counter-increment: my-awesome-counter;
    text-wrap: pretty;
}

ol li {
    list-style: none;
}

ol li:before {
    content: counter(my-awesome-counter);
    position: absolute;
    left: calc(-1.25 * var(--base_line_height));
    height: calc(1 * var(--base_line_height));
    text-align: center;
    font-weight: 500;
    border-radius: 50%;
}

ul li:before {
}

p {
    font-family: var(--sans_body_text);
    max-width: calc(32 * var(--base_font_size));
    line-height: calc(var(--base_line_height));
    letter-spacing: -0.1px;
}

h3 + p,
h5 + p,
p + * {
    margin-top: calc(var(--base_line_height));
}

p.large {
    font-size: var(--medium_font_size);
    line-height: clamp(
        calc(1 * var(--base_line_height)),
        138%,
        calc(1.3333 * var(--base_line_height))
    );
    /* 	padding-bottom: calc(1.25*var(--base_line_height)); */
}

a {
    color: var(--main_text_color);
    text-decoration: none;
    position: relative;
    z-index: 101;
}

em {
    font-family: "Neue Haas Unica W04 Hea1492584", sans-serif;
}

strong,
.strong {
    font-family: "Neue Plak W04 Bold", sans-serif;
    font-weight: bold;
}

.sans {
    font-family: var(--sans_body_text);
}

.sans.strong,
.sans > strong {
    font-family: "Neue Plak W04 Bold", sans-serif;
}

del {
    text-decoration: line-through;
}

.serif {
    /* font-family: var(--serif); */
}

.uppercase {
    text-transform: uppercase;
}

.serif.strong {
    /*font-family: "recoleta";*/
    font-weight: bold;
}

.serif.medium {
    /*font-family: "recoleta-medium";*/
    font-weight: normal;
}

small,
.small {
    font-size: 0.833333em;
    line-height: 1.36;
}

.block {
    display: block;
}

.ib {
    display: inline-block;
}

.highlight {
    color: var(--brand_color);
}

.playful {
    text-transform: uppercase;
    font-family: "Evidently", "Neue Plak W04 Bold", sans-serif;
    line-height: 1 !important;
    font-size: clamp(6rem, 25vw, 16rem);
    letter-spacing: 0.045em;
}

.playful > span {
    line-height: 1 !important;
    position: relative;
}

.playful.tiny {
    font-size: clamp(5rem, 15vw, 7.6rem);
}

.to {
    background: url("../img/arrow.svg") center top no-repeat;
    text-indent: -9999em;
    overflow: hidden;
    background-size: 100% auto;
    display: inline-block;
    width: 9rem;
    height: 3.5rem;
    bottom: -0.5em;
    position: relative;
}

.anti.to {
    /* transform: rotate(180deg); */
    background: url("../img/anti-arrow.svg") center top no-repeat;
    bottom: auto;
    top: -1.5em;
}

.lying {
    display: inline-block;
    transform: rotate(-100deg);
    position: relative;
    bottom: -0.25em;
    right: -0.25em;
}

.tendeg {
    display: inline-block;
    transform: rotate(5deg);
    top: -0.0625em;
}

.tc {
    text-align: center;
}

.dancing {
    animation: dancing 1s var(--animation_timing) infinite;
    display: inline-block;
}

@keyframes dancing {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(0.005em, -0.02em);
    }
    50% {
        transform: translate(0, -0em);
    }
    75% {
        transform: translate(-0.005em, -0.02em);
    }
    100% {
        transform: translate(0, -0em);
    }
}

.fivedeg {
    top: 0.0625em;
    display: inline-block;
    transform: rotate(-5deg);
}

.play {
    text-transform: uppercase;
    font-family: "Neue Plak W04 Bold", sans-serif;
}

.play span {
    display: inline-block;
    margin: 0 0.03025em;
    position: relative;
    line-height: 1;
}

.play span:first-of-type {
    transform: rotate(-9.25deg);
    /* 	top: 0.5rem; */
    /* text-shadow:
        -4px 4px var(--text_shadow),
        -7px 7px var(--brand_color),
        -10px 10px var(--rio_blue),
        -13px 13px var(--mint_green); */
}

.play span:nth-of-type(2) {
    transform: rotate(0deg);
    top: 1.2rem;
    /* text-shadow:
        -1px 4px var(--text_shadow),
        -4px 7px var(--brand_color),
        -6px 10px var(--rio_blue),
        -8px 13px var(--mint_green); */
}

.play span:nth-of-type(3) {
    transform: rotate(0deg);
    /* text-shadow:
        0px 4px var(--text_shadow),
        0px 7px var(--brand_color),
        0px 10px var(--rio_blue),
        0px 13px var(--mint_green); */
}

.play span:last-of-type {
    transform: rotate(10deg);
    /* 	top: 1rem; */
    /* text-shadow:
        1px 4px var(--text_shadow),
        3px 7px var(--brand_color),
        5px 10px var(--rio_blue),
        7px 13px var(--mint_green); */
}

.underline {
    display: inline-block;
    background: linear-gradient(
        180deg,
        transparent calc(100% - 2px),
        var(--brand_color) 0
    );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 2px;
}

canvas {
    display: block; /* Make canvas a block element */
    width: 100%; /* Make canvas full width of its container */
    height: auto; /* Let height adjust proportionally */
}

.home_story_container {
    width: 100%;
    margin: 0 auto;
    grid-column: 2 / calc(var(--cols) + 0);
    position: relative;
    padding-bottom: 30%;
    height: auto;
    overflow: hidden;
}

#home_story {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate3d(0, -45%, 0) scale(1);
}

.rps-container {
    width: 100%;
    margin: 0 auto;
    grid-column: 2 / calc(var(--cols) + 0);
    position: relative;
    padding-bottom: 35%;
    height: auto;
    overflow: hidden;
}

#rps,
#pinball {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0) scale(1.18);
}

.pinball-container {
    width: 100%;
    margin: 0 auto;
    grid-column: 2 / calc(var(--cols) + 0);
    position: relative;
    padding-bottom: 50%;
    height: auto;
    overflow: hidden;
}

#pinball {
    top: 0%;
    transform: translate3d(0, 0%, 0) scale(0.85);
}

.circle {
    position: relative;
    text-align: center;
    height: 2em;
    width: 2em;
    margin-right: 0.5rem;
    font-weight: 900;
}

.icon {
    height: calc(1.5625 * var(--base_line_height));
    min-width: calc(1.5625 * var(--base_line_height));
    max-width: calc(1.5625 * var(--base_line_height));
    background: var(--secondary_bg_color);
    border-radius: 50%;
    display: flex;
    margin-bottom: calc(0.15625 * var(--base_line_height));
    justify-content: center;
    align-items: center;
    line-height: calc(1.5625 * var(--base_line_height));
}

.icon.darker {
    background: var(--main_bg_color);
}

.ts {
    background: var(--secondary_bg_color);
}

.wh {
    background: #fafafa;
}

.icon img {
    display: block;
    margin: 0 auto;
    max-width: 56%;
    max-width: calc(1 * var(--base_line_height));
}

.circle:before {
    content: "";
    left: 0;
    right: 0;
    top: -0.15em;
    height: 100%;
    background: var(--text_shadow);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
}

blockquote {
    font-size: 3.6rem;
    line-height: calc(1.40625 * var(--base_line_height));
    font-weight: 300;
    padding: 0 0 calc(1.40625 * var(--base_line_height));
    margin: 0;
    max-width: 25em;
    text-indent: -0.5em;
    quotes: "”" "“"; /* two pairs */
    letter-spacing: -0.01em;
}

blockquote:before {
    content: open-quote;
    font-size: 4.2rem;
    font-weight: 400;
    font-family: var(--sans_body_text);
}

blockquote + p {
    margin-left: calc(1 * var(--base_line_height));
}

.quote {
    font-size: clamp(4.7rem, 6vw, 8.9rem);
    line-height: 1.0112359551;
    font-weight: normal;
    transform: rotate(3deg);
    padding-bottom: 0;
    color: var(--brand_color);
    text-align: center;
}

.quote.smaller {
    font-size: clamp(4.7rem, 4.5vw, 6.7rem);
}

.quote a {
    text-align: center;
    color: var(--link_color);
}

.quote a:after {
    content: close-quote;
    font-size: 0.8em;
    position: relative;
    top: 0.1em;
}

.quote a::before {
    content: open-quote;
}

.cite_container {
    display: flex;
    flex-direction: column;
    gap: calc(0.125 * var(--gridGap));
    text-align: center;
    transform: rotate(-3deg);
    align-items: center;
    img {
        max-width: clamp(10rem, 10vw, 15rem);
        margin-left: auto;
        margin-right: auto;
        transform: rotate(9deg);
    }
}
.cite {
    /* font-size: var(--medium_font_size);
    line-height: 1.1; */
    letter-spacing: -0.01em;
    text-transform: lowercase;
}

sup {
    font-size: 0.75em;
    line-height: 1;
    opacity: 0.75;
    font-weight: 400;
    /* font-style: italic; */
}

@supports (font-variant-position: super) {
    sup {
        vertical-align: baseline;
        line-height: inherit;
        font-variant-position: super;
        line-height: 1;
    }
}

sup::selection {
    color: #fff;
    background: var(--brand_color);
    opacity: 1;
}

.uc {
    display: inline-block;
    position: relative;
    /* 	color: var(--link_color); */
    z-index: 1111;
    text-decoration: underline !important;
    text-underline-offset: 0.25ch;
}

.wiggle {
    display: inline-block;
    position: relative;
    z-index: 1111;
    text-decoration: underline !important;
    text-underline-offset: 0.25ch;
}

.wiggle:hover {
    animation: wiggle 0.3s var(--animation_timing) 5;
}

.lowercase {
    text-transform: lowercase !important;
}

/*
.uc:after {
	content: "";
	height: 1px;
	background: var(--main_text_color);
	width: 100%;
	position: absolute;
	bottom: -1px;
	left: 0;
	z-index: 999;
}
*/

.uc:hover {
    transform: skew(-11deg);
    color: var(--link_color);
}

.uc:hover:after {
    transform: skew(8deg);
    background: var(--link_color);
}

.uc:active:after {
    height: 100%;
    background: #000;
}

[data-icon="insta"] {
    color: var(--link_color);
}

[data-icon="insta"]:before {
    content: "";
    height: 1em;
    width: 1em;
    background: url("../img/instagram.svg") no-repeat center center;
    background-size: auto 90%;
    display: inline-block;
    margin-right: 0.1em;
    position: relative;
    top: 0.2em;
}

.dim {
    opacity: 0.7;
}

.dim::selection {
    opacity: 1 !important;
}

.large_number {
    font-size: var(--large_font_size);
    line-height: 1.06;
    font-weight: 400;
    display: inline-block;
    letter-spacing: -0.41px;
    font-family: "Neue Plak W04 Bold", sans-serif;
}

.call_out {
    margin-top: calc(0.5 * var(--base_line_height));
    margin-bottom: calc(var(--base_line_height));
    font-size: var(--medium_font_size);
    line-height: calc(1 * var(--base_line_height));
}

.kern_fix {
    display: inline-block;
    letter-spacing: -0.05em;
}

/*Structure*/

.content {
    width: calc(100% - 2 * var(--outer_spacing));
    max-width: var(--max_width);
    margin: 0 auto;
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--gridSize));
    position: relative;
    grid-column-gap: var(--gridGap);
}

/*Header*/
header {
    background: url(../img/header-pattern.svg) center top no-repeat;
    background-size: 102% auto;
    padding: calc(1 * var(--outer_spacing) - 0rem) var(--outer_spacing) 0;
    z-index: 1111;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header a {
    /* 	color: var(--brand_color); */
}

nav {
    /* 	flex: 0 0 calc(3%*100/var(--cols)); */
    display: flex;
    justify-content: center;
    flex-direction: row;
}

nav a,
.social a {
    line-height: var(--base_line_height);
    padding-top: calc(0.25 * var(--base_line_height));
    padding-bottom: calc(0.25 * var(--base_line_height));
    margin: 0 1.8vw;
    display: inline-block;
    position: relative;
}

nav .blog {
    display: flex;
}

nav .blog img {
    display: block;
    max-height: calc(1.25 * var(--base_line_height));
}

.logo {
    /*
	position: absolute;
	left: 0;
*/
    width: calc(2 * var(--base_line_height));
    height: calc(2 * var(--base_line_height));
    font-size: var(--base_font_size);
    line-height: 1;
    font-family: var(--sans_body_text);
    color: var(--main_text_color);
    /*
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
*/
    background: url("../img/logo.svg") no-repeat center center;
    background-color: var(--secondary_bg_color);
    background-size: calc(1.5 * var(--base_line_height)) auto;
    border-radius: 1rem;
    text-indent: -9999rem;
    overflow: hidden;
}

.logo strong {
    width: 100%;
    position: relative;
    z-index: 1111;
}
.logo span {
    font-weight: 900;
    float: left;
    width: 3rem;
    height: 3rem;
    text-align: center;
}

.social {
    left: auto;
    right: 0;
    text-align: right;
}

.social a {
    margin: 0;
    z-index: 1111;
    /* 	transform: translate3d(0, 10%, 0); */
    /*
	-webkit-transition: all .7s var(--animation_timing) .48s;
	-moz-transition: all .7s var(--animation_timing) .48s;
	transition: all .7s var(--animation_timing) .48s;
	opacity: 0;
*/
}

/*Animations*/

header a:not(.logo):hover {
    animation: wiggle-big 0.3s var(--animation_timing) 5;
}

header a:not(.logo):after {
    content: "";
    width: 2rem;
    height: 3px;
    background: var(--text_shadow);
    border-radius: 1px;
    position: absolute;
    bottom: calc(1rem - 3px);
    left: calc(50% - 1rem);
    transform: scale3d(0, 1, 1);
}

header a:not(.logo):hover:after {
    /* transform: scale3d(1, 1, 1); */
}

header a.active {
    /* transform: skew(-9deg); */
}

header a.active:after {
    transform: scale3d(1, 1, 1);
}

header a.active:after {
    background: var(--text_shadow);
}

/*Hero*/

@keyframes custom-mq {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0%);
    }
}

.introduction {
    padding-top: calc(1.25 * var(--vertGap));
    padding-bottom: calc(0.75 * var(--vertGap));
    grid-column: 3 / span 6;
    grid-gap: calc(1 * var(--base_line_height)) !important;
}

.introduction .heading {
    grid-column: 1 / -1;
}

.introduction h2,
.introduction h3,
.introduction h4,
.introduction h5,
.introduction h6 {
    grid-column: 1 / calc(var(--cols) + 1);
    padding-bottom: 0;
    /* 	grid-row: 1 / 2; */
    text-align: center;
}

.introduction .text {
    grid-column: 3 / calc(var(--cols) - 1);
    justify-content: flex-start;
    gap: var(--gridGap);
    text-align: center;
}

.tabs {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    justify-content: center;
    padding-bottom: calc(2 * var(--base_line_height));
    li {
        list-style: none;
        padding-bottom: 0;
        margin: 0 calc(0.25 * var(--base_line_height));
    }
    a {
        display: block;
        opacity: var(--dim);
        line-height: 1;
        padding: calc(0.2 * var(--base_line_height))
            calc(0.5 * var(--base_line_height))
            calc(0.33 * var(--base_line_height));
        text-align: center;
        font-size: var(--small_font_size);
        &:hover,
        &.active {
            opacity: 1;
            background: var(--secondary_bg_color);
            border-radius: calc(0.2 * var(--base_line_height));
        }
    }
}

.introduction p {
    margin-left: auto;
    margin-right: auto;
}

.introduction .button_group {
    justify-content: center;
}

.introduction .btn {
    /* flex: 0 0 calc(50% - 0.25 * var(--gridGap)); */
    padding: calc(0.75 * var(--base_line_height))
        max(3vw, calc(1 * var(--base_line_height)))
        calc(1 * var(--base_line_height));
}

.home_fire {
    grid-column: 3 / calc(var(--cols) - 1);
    display: flex;
    flex-direction: row;
    /* gap: var(--gridGap); */
}

.home_fire .intro_accolades {
    flex: 1 0 calc(50% - 0.5 * var(--gridGap));
}

.showreel {
    background: url(../img/showreel/animated.avif) top
        calc(-2 * var(--base_line_height)) center no-repeat;
    background-size: 100% auto;
}

.showreel span {
    mix-blend-mode: difference;
}

.icon.play {
    height: calc(1 * var(--base_line_height));
    min-width: calc(1 * var(--base_line_height));
    background: url(../img/play.svg) no-repeat center center;
    background-size: 100% auto;
    display: inline-block;
    margin: 0 0 0 0.5rem;
}

.intro_accolades {
    align-items: center;
    gap: var(--gridGap);
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
}

.intro_accolades ul {
    margin-top: 0;
    padding-bottom: 0;
    list-style: none;
    display: flex;
    gap: calc(1 * var(--gridGap));
    justify-content: center;
}

.vid_container {
    margin-bottom: 0;
}

.angle {
    position: absolute;
    left: calc(50% - 0.05vw);
    height: 15vh;
    bottom: 5vh;
    width: 0.1vw;
    min-width: 2px;
    transform: skew(-9deg);
}

.angle .line {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0;
}

.loaded .angle .line {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: scrollLine 2s var(--animation_timing) forwards;
    animation: scrollLine 2s var(--animation_timing) forwards;
    animation-delay: 2.25s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-iteration-count: infinite;
}

@-webkit-keyframes scrollLine {
    0% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        opacity: 0.5;
    }
    20% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    20.1% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    60% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    100% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 0.5;
    }
}

@keyframes scrollLine {
    0% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        opacity: 0.5;
    }
    20% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
    20.1% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    60% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    100% {
        transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 0.5;
    }
}

.angle.small {
    height: 10vh;
}

@-webkit-keyframes revealText {
    from {
        opacity: 0;
        -webkit-transform: scale(0.5, 0.5) translateX(-50%) rotateZ(-15deg)
            rotateX(30deg) translateY(0%);
        transform: scale(0.5, 0.5) translateX(-50%) rotateZ(-15deg)
            rotateX(30deg) translateY(0%);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0)
            translateX(0);
        transform: scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0)
            translateX(0);
    }
}

@keyframes revealText {
    from {
        opacity: 0;
        -webkit-transform: scale(0.5, 0.5) translateX(-50%) rotateZ(-15deg)
            rotateX(30deg) translateY(0%);
        transform: scale(0.5, 0.5) translateX(-50%) rotateZ(-15deg)
            rotateX(30deg) translateY(0%);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0)
            translateX(0);
        transform: scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0)
            translateX(0);
    }
}

.kern {
    letter-spacing: -0.05em;
}

.dot {
    color: var(--brand_color);
    display: inline !important;
}

.text {
    /*
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
*/
}

.textCol {
    max-width: calc(50% - 0.9375 * var(--base_line_height));
}

.textCol:last-of-type {
    padding-right: 0;
    padding-bottom: 0;
}

.intro_accolades li {
    flex-direction: row;
    max-width: clamp(12.5rem, 50vw, 18rem);
    padding-bottom: 0;
}

/*Recent Works*/
.recent_work {
    margin-bottom: calc(0.5 * var(--vertGap));
}

.recent_work .grid {
    grid-row-gap: calc(3 * var(--base_line_height));
}

.grid .proj_timeline {
    justify-content: flex-start;
}

.grid .proj_timeline .timestamp {
    margin: 0;
}

.recent_work .grid a {
    display: flex;
    flex-direction: column;
    gap: calc(0.25 * var(--base_line_height));
}

.recent_work .grid figure,
.recent_work .grid .vid_container {
    margin-bottom: calc(0.125 * var(--base_line_height));
}

.grid figure,
.grid img {
    display: block;
    width: 100%;
    /* 	margin-bottom: calc(.5*var(--base_line_height)); */
}

.vid_container {
    position: relative;
    display: block;
    max-width: 100%;
    /* 	border-radius: 4rem; */
    overflow: hidden;
    /* 	margin-bottom: calc(.2*var(--base_line_height)); */
}

.vid_container.wide {
    padding-bottom: 56.25%;
}

.vid_container.aspect43 {
    padding-bottom: 75%;
}

.vid_container.portrait {
    padding-bottom: 177.7%;
}

.vid_container.square {
    padding-bottom: 100%;
}

.vid_container video {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0px, -50%);
}

.grid video {
    display: block;
}

.recent_work {
    display: flex;
    gap: var(--gridGap);
    padding-top: 0;
}

.recent_work .text {
    text-align: center;
    grid-column: 4 / 6;
    grid-row: 3 / 4;
}

.recent_work .grid {
    grid-gap: var(--gridGap);
}

.recent_work .grid a img {
    transition: all 0.6s var(--animation_timing);
    will-change: transform;
}

.recent_work .grid a:hover img {
    /* transform: rotate(1deg); */
    animation: wiggle 0.3s var(--animation_timing) 5;
}

.grid .first {
    grid-column: 1 / calc(var(--cols) / 2 - 1);
    grid-row: 1 / 4;
}

.grid .second {
    grid-row: 1 / 4;
    grid-column: 7 / -1;
}

.grid .fourth {
    grid-column: calc(var(--cols) / 2 + 1) / calc(var(--cols) + 1);
    grid-row: 5 / 7;
}

.grid .sixth {
    grid-column: 1 / calc(var(--cols) / 2);
    grid-row: 5;
}

.first .text {
    margin-top: calc(1 * var(--base_line_height));
    flex-direction: row;
    gap: var(--gridGap);
    flex-wrap: nowrap;
}
.first .text > * {
    flex: 1 0 50%;
}

.featured_figure {
    padding-bottom: 100%;
    display: block;
    height: 0;
}
.featured_figure img {
    width: 100%;
}

/* All work */

.proj_header {
    /* 	padding-top: calc(0.25*var(--base_line_height)); */
}

.service span {
    display: inline !important;
}

.other_work {
    /* 	padding-top: var(--vertGap); */
}

.other_work .text,
.other_work .button_group {
    grid-column: 1 / -1;
    align-content: center;
    justify-content: center;
}

.other_work p {
    margin-left: auto;
    margin-right: auto;
}

.other_work ul {
    padding-top: calc(1 * var(--base_line_height));
    padding-bottom: calc(1 * var(--base_line_height));
    gap: calc(1 * var(--base_line_height));
    list-style: none;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.right_brain {
    padding-top: var(--vertGap);
    padding-bottom: calc(0.5 * var(--vertGap));
}

.principled_glances {
    /* min-height: 100vh; */
    box-sizing: border-box;
    /* padding-top: calc(0.25 * var(--vertGap)); */
}

.principled_glances .heading {
    grid-column: 1 / 5;
}

.principled_glances .people_say {
    grid-column: 3 / var(--cols);
}

.hustle_header {
    padding-bottom: calc(1 * var(--gridGap));
    display: flex;
    flex-direction: column;
}

.hustle_header h4 {
    grid-column: 1 / -1;
}

.hustle_header p {
    grid-column: 1 / -1;
}

.other_work {
    grid-column: 1 / -1;
    padding-top: calc(2 * var(--base_line_height));
    display: grid;
    text-align: center;
    grid-template-columns: repeat(var(--cols), var(--gridSize));
}

.other_work h6 {
    grid-column: 1 / -1;
}

.other_work ul {
}

.other_work li {
    margin: calc(1 * var(--base_line_height)) 0;
    padding-bottom: 0;
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
}

.other_work li img {
    display: block;
    max-height: calc(1.4285714286 * var(--base_line_height));
}

.all_work {
    padding-bottom: calc(0.5 * var(--vertGap));
}

.all_work .grid {
    display: flex;
    flex-wrap: wrap;
    gap: calc(2 * var(--base_line_height));
}

.all_work .grid > div {
    flex: 1 0 calc(33.33333% - 4 / 3 * var(--base_line_height));
    max-width: calc(33.33333% - 4 / 3 * var(--base_line_height));
}

.all_work .grid a,
.resource_grid .grid a {
    display: flex;
    flex-direction: column;
}

.all_work figure,
.all_work .vid_container {
    position: relative;
    height: 0;
    padding-bottom: 100%;
    margin-bottom: calc(0.25 * var(--base_line_height));
}

.all_work img,
.all_work video {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.6s var(--animation_timing);
    will-change: transform;
}

.all_work a:hover img,
.all_work a:hover video {
    animation: wiggle 0.3s var(--animation_timing) 5;
}

.all_work a:hover video {
    transform: translate(0px, -50%) rotate(1deg);
}

.resource_grid {
    padding: 0 0 calc(0.5 * var(--vertGap));
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--base_line_height));
    + .resource_grid {
        padding-top: calc(0.5 * var(--vertGap));
    }
}

.resource_grid h5 {
    text-align: center;
    position: sticky;
    top: 0%;
    /* opacity: var(--dimmer); */
    z-index: 999;
}

.resource_grid .grid {
    display: flex;
    flex-wrap: wrap;
    gap: calc(1 * var(--base_line_height));
}

.resource_grid .grid > div {
    flex: 1 0 calc(33.33333% - 2 / 3 * var(--base_line_height));
    max-width: calc(33.33333% - 2 / 3 * var(--base_line_height));
}

.resource_grid figure,
.resource_grid .vid_container {
    aspect-ratio: 16/9;
    margin-bottom: calc(0.25 * var(--base_line_height));
    overflow: hidden;
    border: 1px solid var(--secondary_bg_color);
}

/* hustle */

.fp {
    grid-column: 6 / -1;
    /* grid-row: 1; */
}

.nw {
    /* grid-row: 2; */
    grid-column: 7 / -1;
}

.dr {
    grid-column: 1 / 4;
    /* grid-row: 1 / 3; */
}

.gifts {
    grid-column: 4 / 6;
}

.card a {
    display: flex;
    flex-direction: column;
    gap: calc(0.375 * var(--base_line_height));
    text-decoration: none;
}

.card a:hover figure,
.card a:hover .vid_container {
    animation: wiggle 0.3s var(--animation_timing) 5;
}

.engagement_detail {
    display: flex;
    flex-direction: column;
}

.engagement_desc {
    display: block;
    max-width: 32em;
    margin-top: 0;
}

.email_details {
    /* background: var(--secondary_bg_color);
    padding: calc(1 * var(--base_line_height)); */
    margin: 0;
    grid-column: 3 / calc(var(--cols) - 1);
}

.email_details span {
    font-size: var(--small_font_size);
    line-height: var(--base_line_height);
    display: block;
    font-family: var(--mono);
}

.collabs {
    margin-bottom: calc(0.5 * var(--vertGap));
}

.madcaps h4 {
    grid-column: 1 / calc(var(--cols) / 2 + 1);
}

.madcaps .text {
    grid-column: 1 / 4;
    /* 	grid-row: 2; */
}

.madcaps .media {
    /* 	grid-row: 2; */
    grid-column: 4 / -1;
}

/*About*/

.about_page main {
    position: relative;
    z-index: 100;
}

@-webkit-keyframes revealBg {
    0% {
        height: 0;
        top: 0;
    }
    50% {
        height: 100%;
        top: 0;
    }
    60% {
        height: 100%;
        top: 0;
    }
    100% {
        height: 57.5vh;
        top: 42.5vh;
    }
}

@keyframes revealBg {
    0% {
        height: 0;
        top: 0;
    }
    50% {
        height: 100%;
        top: 0;
    }
    60% {
        height: 100%;
        top: 0;
    }
    100% {
        height: 57.5vh;
        top: 42.5vh;
    }
}

.about_main {
    display: grid;
}

.content {
    opacity: 1;
}

.about {
    position: relative;
    padding: 35rem 0 0;
    z-index: 999;
}

.about .content_container {
    position: relative;
    z-index: 999;
}

.about_header {
    grid-column: 3 / var(--cols);
    display: grid;
    flex-direction: row;
    position: relative;
    z-index: 999;
    padding-bottom: calc(2 * var(--base_line_height));
}

.about_header h3 {
    position: relative;
}

.pop-media {
    /* height: 450px; */
    aspect-ratio: 1 / 1.5;
    pointer-events: none;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    z-index: 1001;
    position: absolute;
    left: calc(50%);
    top: calc(50%);
    transform: translate3d(-50%, -50%, 0) rotateX(-2deg);
    width: 30rem;
    max-width: 70vw;
    /* height: 45rem; */
    /* isolation: isolate; */
}

.pop-media.blu3skies {
    width: 40rem;
}

/* .pop-media__overlay--c7 {
    opacity: 0.6;
    background: linear-gradient(to right, #fa5bfc, #5baefc);
} */

.pop-media--shadow::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 10px solid #fce75b;
    -webkit-transform: translate3d(20px, 20px, 0);
    transform: translate3d(20px, 20px, 0);
}

/* plyr styles */

.each_team_member .plyr {
    position: absolute;
    left: calc(50%);
    top: calc(50%);
    transform: translate3d(-50%, -50%, 0);
    width: 30rem;
    height: 45rem;
}

.each_team_member .pop-media {
    z-index: 1101;
    object-fit: contain;
    /* -webkit-animation: revealMedia 0.3s var(--animation_timing) forwards;
    animation: revealMedia 0.3s var(--animation_timing) forwards;
    -webkit-mask: linear-gradient(to right, transparent 50%, black 50%);
    mask: linear-gradient(to right, transparent 50%, black 50%);
    -webkit-mask-size: 601px;
    mask-size: 601px;
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%; */
    /* mix-blend-mode: difference; */
}

.each_team_member:hover .pop-media {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotateX(0deg);
}

/* we use pixels because it's more performant than percentages */
@-webkit-keyframes revealMedia {
    to {
        -webkit-mask-position: 300px 0%;
        mask-position: 300px 0%;
    }
}

@keyframes revealMedia {
    to {
        -webkit-mask-position: 300px 0%;
        mask-position: 300px 0%;
    }
}

/* for smaller screens */
@-webkit-keyframes revealMediaSmall {
    to {
        -webkit-mask-position: 250px 0%;
        mask-position: 250px 0%;
    }
}

@keyframes revealMediaSmall {
    to {
        -webkit-mask-position: 250px 0%;
        mask-position: 250px 0%;
    }
}

@keyframes wiggle {
    0% {
        rotate: 0deg;
    }

    25% {
        rotate: -0.5deg;
    }

    75% {
        rotate: 0.5deg;
    }
}

@keyframes wiggle-big {
    0% {
        rotate: 0deg;
    }

    25% {
        rotate: -3deg;
    }

    75% {
        rotate: 3deg;
    }
}

.team {
    position: relative;
    padding-bottom: var(--vertGap);
}

.team h5 {
    grid-column: 1 / -1;
}

.team h1 {
    text-align: center;
    position: sticky;
    top: 50%;
    opacity: var(--dimmer);
    z-index: 999;
}

.collabs {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.author_bio {
    margin-top: calc(0.5 * var(--base_line_height));
    padding-left: calc(1 * var(--base_line_height));
}

aside {
    margin-top: calc(0.33 * var(--base_line_height));
    display: flex;
    flex-direction: column;
    grid-column: 1 / 3;
}

@-webkit-keyframes revealUp {
    0% {
        transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        -o-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0%, 0);
        -moz-transform: translate3d(0, 0%, 0);
        -webkit-transform: translate3d(0, 0%, 0);
        -o-transform: translate3d(0, 0%, 0);
        -ms-transform: translate3d(0, 0%, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        opacity: 1;
    }
}

@keyframes revealUp {
    0% {
        transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        -o-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0%, 0);
        -moz-transform: translate3d(0, 0%, 0);
        -webkit-transform: translate3d(0, 0%, 0);
        -o-transform: translate3d(0, 0%, 0);
        -ms-transform: translate3d(0, 0%, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        opacity: 1;
    }
}

figure {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    /* 	margin: 0 0 calc(.3125*var(--base_line_height)); */
}

figcaption {
    font-size: var(--small_font_size);
    line-height: calc(0.7142857143 * var(--base_line_height));
    margin-top: calc(0.5 * var(--base_line_height));
    opacity: 0.75;
    color: rgba(var(--main_text_color), 0.75);
    max-width: calc(var(--base_font_size) * 33);
}

figcaption a {
    color: var(--link_color);
    border-bottom: 1px solid;
}

aside figcaption {
    -webkit-animation: revealUp 0.4s var(--animation_timing) forwards;
    animation: revealUp 0.4s var(--animation_timing) forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
    opacity: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation-delay: 2.25s;
}

aside img {
    -webkit-clip-path: polygon(16% 0%, 55% -0%, 40% 100%, 0% 100%);
    clip-path: polygon(16% 0%, 55% -0%, 40% 100%, 0% 100%);
    display: block;
    max-width: 100%;
    shape-outside: polygon(
        -55.35% 0.31%,
        91.48% -0.31%,
        76.61% 100.31%,
        -83.33% 100.31%
    );
    shape-margin: calc(1 * var(--base_line_height));
    position: relative;
}

.profile {
    display: block;
    max-width: 100%;
    /*
	-webkit-clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%);
	clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%);
	shape-outside: polygon(-55.35% 0.31%, 91.48% -0.31%, 76.61% 100.31%, -83.33% 100.31%);
	shape-margin: calc(1*var(--base_line_height));
*/
    position: relative;
}

aside figure {
    position: relative;
}

aside figure:before {
    content: "";
    background-color: var(--main_bg_color);
    display: block;
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    transition: all 0.6s var(--animation_timing);
    transform: scale(1);
    transform-origin: top right;
    /*    	transition-delay: 2s; */
    z-index: 1111;
}

.loaded aside figure:before {
    transform: scaleX(0);
}

@-webkit-keyframes curtainOpen {
    0% {
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
    }
    100% {
        transform: scale(0);
        -moz-transform: scale(0);
        -webkit-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
    }
}

@keyframes curtainOpen {
    0% {
        transform: scale(0, 1);
        -moz-transform: scale(0, 1);
        -webkit-transform: scale(0, 1);
        -o-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        opacity: 0;
    }
    100% {
        transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        opacity: 1;
    }
}

.about_content {
    position: relative;
    padding-bottom: 20vh;
    grid-column: 3 / var(--cols);
}

.selling_points {
    padding-top: calc(2 * var(--base_line_height));
    padding-bottom: calc(2 * var(--base_line_height));
    display: grid;
    grid-template-columns: 2fr 4fr 2fr;
    grid-template-areas: "h6 about_text flush";
}

.yeah {
    will-change: opacity;
    /* 	opacity: 0; */
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    -webkit-transition-delay: 0.34s;
    transition-delay: 0.34s;
}

.yeah.section-shown {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.selling_points ul {
    display: block;
    list-style: none;
}

.selling_points li {
    padding-bottom: calc(0.666 * var(--base_line_height));
    max-width: 32em;
}

.yeah li {
    font-size: var(--medium_font_size);
    /*font-family: "recoleta";*/
    font-weight: normal;
    line-height: calc(1.16666 * var(--base_line_height));
}

.about_text {
    grid-area: about_text;
}

.about_text p {
    color: var(--main_bg_color);
}

.about_text .fl {
    font-size: 4.2rem;
    margin-right: 1rem;
    float: left;
    margin-top: 2rem;
    font-weight: bold;
    font-family: var(--sans_body_text);
    transform: skew(-9deg);
}

.team {
}

.team h3 {
    grid-column: 3 / 8;
}

.team .team_members {
    grid-column: 1 / -1;
    /*
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
*/
}

.each_team_member {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}

.each_team_member + .each_team_member {
    margin-top: calc(0.25 * var(--vertGap));
}

.each_team_member h5 + p {
    margin-top: 0;
}

.each_team_member .profile {
    width: calc(11 * var(--base_line_height));
    overflow: hidden;
}

.each_team_member .pop-text {
    display: flex;
    flex-direction: row-reverse;
    gap: calc(1 * var(--base_line_height));
    align-items: flex-end;
    max-width: 50%;
    position: relative;
    z-index: 1001;
}

.each_team_member > div > * {
    display: flex;
    flex-direction: column;
    gap: calc(0.25 * var(--gridGap));
    /* mix-blend-mode: color-dodge; */
}

.each_team_member:nth-of-type(odd),
.each_team_member:nth-of-type(even) {
    /* 	grid-column: 1 / span 5; */
    grid-column: 2 / var(--cols);
}

.each_team_member:nth-of-type(odd) {
    align-items: flex-start;
}

.each_team_member:nth-of-type(even) {
    align-items: flex-end;
    /* 	grid-column: calc(var(--cols)/2 + 0) / calc(var(--cols) + 1); */
}

.each_team_member:nth-of-type(4) {
    /* 	grid-column: calc(var(--cols)/2 - 1) / calc(var(--cols)); */
}

.each_collaborator {
    padding: calc(1 * var(--base_line_height)) 2.5%;
    display: flex;
    justify-content: center;
}

.each_collaborator img {
    display: block;
    margin: 0 auto;
    max-height: calc(2 * var(--base_line_height));
}

/*Footer*/

.thanks_for_the_fish {
    position: relative;
    display: flex;
    flex-direction: column;
    /* min-height: 100vh; */
    justify-content: space-between;
    padding-top: calc(0.5 * var(--vertGap));
    /* padding-bottom: calc(0.5 * var(--vertGap)); */
    /* margin-top: calc(1 * var(--vertGap)); */
    overflow: hidden;
}

.thanks_for_the_fish .largest {
    top: auto;
    bottom: 0;
    position: inherit;
    opacity: 1;
    display: none;
}

.thanks_for_the_fish .text {
    align-items: center;
    text-align: center;
    grid-column: 3 / calc(var(--cols) - 1);
}

.thanks_for_the_fish .largest span {
    transform: translate3d(-50%, 27%, 0) skewX(-8deg);
}

.grid__container {
    grid-gap: var(--gridGap);
}

.dots {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #fff;
}

.social_links {
    grid-row: 2 / 3;
    grid-column: 3 / calc(var(--cols) - 1);
    margin-top: calc(1 * var(--base_line_height) + 2vh);
    margin-bottom: calc(1 * var(--base_line_height) + 8vh);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.social_links ul {
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    padding-bottom: 0;
}

.social_links li {
    padding-bottom: 0;
}

.social_links a {
    padding: 0;
    display: block;
    opacity: 0.75;
}

.social_links a svg {
    height: 3rem;
}

.social_links a:hover {
    /* 	transform: skew(-9deg); */
    opacity: 1;
    animation: wiggle-big 0.3s var(--animation_timing) 5;
}

.play_grid {
    background: var(--footer_bg_color);
    display: grid;
    grid-gap: 0;
    grid-template-rows: 5;
}

.play_grid .grid {
    grid-gap: 0;
}

.play_grid [class^="row-"]:nth-of-type(odd) div:nth-of-type(odd),
.play_grid [class^="row-"]:nth-of-type(even) div:nth-of-type(even) {
    background: var(--main_text_color);
    height: 2vh;
}

.row-1,
.row-2 {
    grid-template-columns: repeat(calc(var(--cols) / 1), var(--gridSize));
}
.row-3,
.row-4,
.row-5 {
    grid-template-columns: repeat(calc(var(--cols) / 2), var(--gridSize));
}

.row-3 div {
    height: 5vw !important;
}
.row-4 div {
    height: 12.5vw !important;
}

.row-5 {
    /* grid-template-columns: repeat(calc(var(--cols) / 4), var(--gridSize)); */
}

.row-5 div {
    height: 17.5vw !important;
}

.eye-container {
    width: 100%;
    position: relative;
    padding-bottom: 40%;
    height: auto;
    overflow: hidden;
    background: var(--footer_bg_color) !important;
}

.eye {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0) scale(0.9, 0.9);
}

.victory {
    transform: scale(1.8) translate3d(0, -23%, 0);
}

/* Contact */
.email_ahvahan {
    grid-column: 2 / var(--cols);
    display: flex;
    flex-direction: column;
    gap: calc(var(--base_line_height));
}

.contact_form {
    grid-column: 3 / -1;
}

/*Case Study Static*/
.froggipedia {
    position: relative;
    z-index: 1111;
}

.proj_heading_container {
    position: relative;
    z-index: 100;
}

.proj_heading {
    padding-top: 25vh;
    position: relative;
    align-items: flex-start;
    min-height: 100vh;
    grid-row-gap: calc(0.5 * var(--gridGap));
}

.proj_heading .timestamp {
    font-size: 4.4rem;
    line-height: calc(1.792 * var(--base_line_height));
    font-weight: 300;
    padding-bottom: 0;
    display: block;
    opacity: 0.8;
}

.proj_heading .text {
    flex-direction: column;
    grid-area: text;
    height: 100%;
    position: relative;
    justify-content: space-between;
    padding-bottom: calc(1 * var(--base_line_height));
}

.proj_heading .top_text p {
    /* 	opacity: 0; */
    animation-delay: 1.25s;
}

.proj_heading .deets {
    margin-top: calc(2 * var(--base_line_height));
    margin-bottom: calc(1 * var(--base_line_height));
    display: block;
    /*
	font-size: var(--small_font_size);
	line-height: calc(0.8333333*var(--base_line_height));
*/
    font-family: var(--sans_body_text);
    font-weight: bold;
    /* 	color: var(--brand_color); */
    position: relative;
    animation-delay: 0.9s;
}

.proj_heading .deets .line {
    width: calc(1.5 * var(--base_line_height));
    height: 2px;
    background: var(--brand_color);
    margin: 0 5px;
    display: inline-block;
}

.proj_heading h4 {
    padding-bottom: 0;
    /* 	margin-top: .8rem; */
}

.proj_heading h4 + h4 {
    /* 	font-family: var(--sand_body_text); */
    font-weight: 400;
    /* 	opacity: 0; */
    margin-bottom: var(--base_line_height);
}

.loaded .proj_heading h4 + h4 {
    /* 	animation-delay: 1s; */
    /* 	opacity: .75 !important; */
}

.proj_heading .mini-quote {
    /*font-family: "recoleta-medium";*/
    font-weight: normal;
    display: block;
    margin-left: -0.8rem;
}

.proj_heading .mini-quote:before {
    content: open-quote;
}

.proj_heading .mini-quote:after {
    content: close-quote;
}

.proj_intro {
    padding: 20.25vh 0;
    /*
	display: grid;
	grid-template-columns: 4fr 1fr 2fr 1fr;
	grid-template-areas: "intro_text flush-2 accolades meta";
*/
}

.proj_intro a:not(.btn) {
    color: var(--link_color);
    /* 	font-weight: 600; */
}

.proj_intro .text a:not(.btn):hover {
    text-decoration: underline;
}

.proj_intro .text a:not(.btn):after {
    content: "\2197";
    position: relative;
    top: 2px;
    margin-left: 0.3rem;
    display: inline-block;
}

.proj_intro .text {
    grid-area: intro_text;
    flex-direction: column;
    padding: calc(2 * var(--base_line_height)) 0 0;
}

.accolades {
    grid-area: accolades;
    flex-direction: column;
    padding: calc(2 * var(--base_line_height)) 0 0;
    /* 	font-size: var(--small_font_size); */
}

.accolades ul {
    list-style: none;
    display: block;
}

.meta_details {
    display: block;
}

.accolades li {
    display: block;
    margin: 0 0 calc(0.25 * var(--base_line_height));
}

.accolades a {
    display: block;
    /* 	color: var(--main_bg_color); */
    font-weight: 400;
}

.accolades a:hover {
    text-decoration: underline;
}

.proj_meta {
    grid-area: meta;
    flex-direction: column;
    padding: calc(2.25 * var(--base_line_height)) 0 0
        calc(1 * var(--base_line_height));
    /*
	font-size: var(--small_font_size);
	line-height: calc(0.83333*var(--base_line_height));
*/
}

.label {
    display: block;
    font-family: var(--mono);
    opacity: 0.5;
    font-size: var(--small_font_size);
    line-height: calc(0.83333 * var(--base_line_height));
}

.meta_each:not(:last-of-type) {
    margin-bottom: var(--base_line_height);
}

.meta_details span {
    display: inline-block;
    position: relative;
    margin: 0 0;
}

.meta_details span:not(:last-of-type):after {
    content: "\2014";
    display: inline;
    margin-left: 0.5rem;
    opacity: 0.75;
}

.proj_goal_container {
    padding: 0 0 var(--vertGap);
}

.proj_approach,
.proj_goals {
    padding: var(--vertGap) 0 0;
}

.proj_approach .text {
    grid-column: 2 / span 6;
    display: flex;
    flex-direction: column;
}

.proj_context {
    /* 	padding: 0 0 5.0625vh; */
    background: #fff;
    color: var(--secondary_bg_color);
}

.proj_context_intro {
    margin: 0 12.5% 5.0625vh;
}

.proj_approach h5 {
    width: 100%;
    padding-right: calc(50% + 0.5 * var(--base_line_height));
}

.proj_approach p:first-of-type {
    /* 	margin-top: calc(-1*var(--base_line_height)); */
    padding-top: 0;
}

.proj_approach p {
    /*     margin-left: calc(50% + .5*var(--base_line_height)); */
}

.proj_approach ol,
.proj_approach ul {
    /* 	margin-left: calc(50% + .5*var(--base_line_height)); */
}

.proj_goals .text {
    grid-column: 2 / 6;
    grid-row: 1 / 3;
    /* 	text-align: center; */
}

.goals {
    display: flex;
    padding-left: 0;
}

.goals li {
    list-style: none;
    flex: 1 0 50%;
    padding: calc(1 * var(--base_line_height)) 0 0;
}

.proj_moodboard_gallery {
    /* 	margin-top: calc(1*var(--base_line_height)); */
    grid-row: 2;
    grid-column: 1 / -1;
}

.figure_wall {
    background: var(--secondary_bg_color);
    padding: calc(1.5 * var(--base_line_height));
    width: calc(100% + 3 * var(--base_line_height));
    transform: translate3d(calc(-1.5 * var(--base_line_height)), 0, 0);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-gap: var(--gridGap);
    margin-bottom: var(--base_line_height);
}

.figure_wall > div {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.figure_caption_collection {
    margin-top: var(--base_line_height);
    max-width: 33em;
}

.figure_wall .main_image.full {
    grid-column: 1 / span 8;
}

.figure_wall .left.main_image {
    grid-column: 1 / span 5;
    grid-row: 1;
}

.figure_wall .left.tertiary-image {
    grid-column: 1 / span 3;
}

.tertiary_image + .tertiary_image {
    grid-row: 2;
}

.figure_wall .right.main_image {
    grid-column: 1 / 6;
}

.figure_wall .right.tertiary_image {
    grid-column: 6 / -1;
}

.figure_monolith {
    background: var(--silver);
    padding: calc(1.5 * var(--base_line_height));
    margin-top: calc(1.5 * var(--base_line_height));
    width: 100%;
    /* transform: translate3d(calc(-1.5 * var(--base_line_height)), 0, 0); */
    margin-bottom: var(--base_line_height);
}

.figure_monolith figcaption {
    color: var(--main_bg_color);
    font-weight: 500;
}
.figure_monolith video {
    display: block;
    max-width: 100%;
}

.figure_wall img {
    display: block;
    max-width: 100%;
    margin-bottom: var(--base_line_height);
}

.figure_wall img + img {
    margin-bottom: 0;
    /* 	margin-top: var(--base_line_height); */
}

.people_say {
    min-height: 100vh;
    padding: calc(0.5 * var(--vertGap)) 0;
}

.people_say .text {
    display: flex;
    flex-direction: column;
    /* padding: calc(0.25 * var(--vertGap)) 0; */
    justify-content: space-around;
    overflow: hidden;
    gap: var(--gridGap);
    align-items: center;
}

.people {
}

.people ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-bottom: 0;
}

.proj_appraisal .text {
    display: flex;
    flex-direction: column;
    padding: var(--vertGap) 0;
    justify-content: space-around;
    min-height: 100vh;
    overflow: hidden;
    gap: var(--gridGap);
    align-items: center;
}

.proj_appraisal {
    overflow: hidden;
}

.proj_appraisal p {
    /* 	max-width: 92%; */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.em-divider {
    background-color: #fff;
    display: block;
    height: 20vh;
    margin: 0 auto;
    width: 2px;
    transform: skew(-9deg);
    opacity: 0.2;
}

.em-divider.smaller {
    height: 10vh;
}

.deliverable_intro {
    display: grid;
    min-height: calc(100vh - 10.125vh);
    flex-direction: row;
    margin-top: 10.125vh;
}

.deliverable_intro_text {
    grid-column: 1 / 3;
}

.deliverable_intro_images {
    grid-column: 3 / -1;
    /* 	align-items: self-start; */
    display: flex;
    justify-content: flex-end;
}

.deliverable_intro_images figure {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    grid-gap: var(--gridGap);
}

.deliverable_intro_images img {
    max-width: 100%;
    /* 	grid-column: 6 / -1; */
    flex: 1 0 66.66%;
    width: 66.66%;
}

.deliverable_intro_images figcaption {
    /*
	grid-column: 1;
	grid-row: 4;
*/
    align-self: end;
}

.deliverable_main {
    padding: var(--vertGap) 0;
}

.deliverable_main .text {
    grid-column: 2 / span 6;
    display: flex;
    flex-direction: column;
}

.deliverable_main .text p {
    max-width: 100%;
    padding-right: calc(50% + var(--base_line_height));
}

.deliverable_main .text p + p {
    margin-left: calc(50% + 0.5 * var(--base_line_height));
    padding-right: 0;
}

.deliverable_main .main {
    background: var(--secondary_bg_color);
    padding: calc(1.5 * var(--base_line_height));
    width: calc(100% + 3 * var(--base_line_height));
    transform: translate3d(calc(-1.5 * var(--base_line_height)), 0, 0);
    display: block;
    grid-column: 1 / -1;
}

.img_txt {
    margin-top: 10.125vh;
    display: grid;
    grid-template-columns: 5fr 5fr;
    grid-gap: var(--gridGap);
    grid-template-areas: "img txt";
    align-items: flex-end;
    grid-column: 1 / -1;
}

.img_txt .text {
    grid-area: txt;
}

.img_txt p:last-of-type {
    padding-bottom: 0;
    margin-bottom: -0.8rem;
    padding-right: 0;
}

figure.with_frame {
    background: var(--secondary_bg_color);
    padding: calc(0.5 * var(--base_line_height));
}

.deliverable_main img {
    display: block;
    max-width: 100%;
}

.each_info {
    border-top: 1px solid var(--secondary_bg_color);
    margin: 10.125vh 0 10.125vh;
    padding-top: calc(10.125vh - 1px);
}

.deliverable_main .img_img {
    grid-column: 1 / -1;
}

.img_img {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.img_img figure {
    flex: 1 0 calc(50% - 1 * var(--base_line_height));
    max-width: calc(50% - 1 * var(--base_line_height));
    background: var(--secondary_bg_color);
    padding: calc(1 * var(--base_line_height));
}

.final_act {
    grid-column: 1 / -1;
    margin-top: 10.125vh;
    /* display: grid;
	grid-template-columns: repeat(var(--cols), var(--gridSize)); */
}

.conclusion {
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--gridSize));
    padding: 10.125vh 0 0;
    min-height: calc(100vh);
    /* 	height: 100vh; */
    align-items: center;
}

.conclusion .text {
    grid-column: 1 / 4;
    justify-content: flex-start;
}

.conclusion figure {
    grid-column: 5 / -1;
}

.team_credit {
    margin: 10.125vh auto 5.0625vh;
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--gridSize));
}

.team_credit h6 {
    grid-column: 2 / 5;
}

.team_members {
    grid-column: 2 / 8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.each_contribution {
    margin: 0 calc(1.5 * var(--base_line_height))
        calc(1 * var(--base_line_height));
    display: flex;
    flex-direction: row;
    /*font-family: "recoleta-medium";*/
}

.profile.small {
    max-width: 5rem;
    display: block;
}

.each_member {
    /* font-size: var(--small_font_size);
	line-height: calc(.625*var(--base_line_height)); */
    margin: 0 calc(0.3125 * var(--base_line_height));
    /*
	display: flex;
	flex-direction: row;
	align-items: center;
*/
}

.each_member:after {
    content: "";
    display: table;
    height: 1px;
    clear: both;
}

.each_member img {
    float: left;
    margin-right: calc(0.3125 * var(--base_line_height));
}

.conclusion .text p {
    padding-right: 0;
}

.conclusion .text p + p {
    margin-left: 0;
    margin-top: 0;
}

hr {
    width: calc(100% * 6 / 8);
    grid-column: 1 / -1;
    background: var(--secondary_bg_color);
    height: 1px;
    border: 0 solid transparent;
    margin: 10.125vh auto;
}

.section__divider {
    width: calc(1.5625 * var(--base_line_height));
    margin: calc(0.625 * var(--base_line_height)) 0;
    height: 2px;
    background: var(--text_shadow);
}

h6 + .section__divider {
    margin-top: calc(0.3125 * var(--base_line_height));
    border-radius: 1px;
}

hr.light {
    opacity: 0.25;
}

html {
}

@media screen and (max-width: 1024px) {
    :root {
        --base_font_size: 1.8rem;
        /* 		--gridGap: 3.2rem; */
    }
    .case_study header {
        /* 		padding: 10vh 0 0; */
    }
    header {
        /* padding: 10.75vh 0 0; */
    }
    .introduction,
    .work_intro {
        padding-top: 25vh;
    }
    blockquote {
        font-size: 2.6rem;
        line-height: 1.34;
        max-width: calc(1em * 630 / 26);
    }
    .large_number {
        font-size: 2.9rem;
        line-height: 1.1;
    }
    .text {
        /* 		flex-direction: column; */
    }
    .textCol {
        max-width: calc(100%);
    }
    .recent_work .project {
        grid-template-columns: 2fr 6fr;
        grid-template-areas: "proj_timeline" "proj_header" "proj_desc";
    }
    .proj_timeline .timestamp {
        padding-right: 5vw;
        /* 		font-size: var(--small_font_size); */
    }
    .proj_header {
        padding-right: 0;
    }
    .proj_desc {
        padding-left: 0;
        grid-column-start: 2;
    }
    .other_work {
        grid-template-columns: 2fr 6fr;
    }
    .other_work li {
        flex: 1 0 33%;
    }
    .card {
        grid-template-columns: 2fr 6fr;
    }
    .pitch {
        grid-template-columns: 2fr 6fr;
        min-height: auto !important;
    }
    .about_main {
        align-items: flex-end;
        grid-template-columns: 5fr 3fr;
        grid-template-areas: "about_content aside";
    }
    .social_links {
        grid-column: 1 / -1;
    }
    aside {
        margin-top: 0;
        margin-right: 0;
        margin-left: calc(1 * var(--base_line_height));
    }
    .about_header {
        grid-column: 1 / calc(var(--cols) - 2);
    }
    .about_content {
        padding-top: 0;
        padding-bottom: 5vh;
    }
    .about_content .angle {
        opacity: 0;
        visibility: hidden;
    }
    .selling_points {
        grid-template-columns: 2fr 6fr;
        grid-template-areas: "h6 about_text";
    }
    figcaption {
        padding-right: 0;
        max-width: 100%;
        margin-top: calc(0.3125 * var(--base_line_height));
    }
    .proj_intro {
        grid-template-columns: 4fr 4fr;
        grid-template-areas: "intro_text intro_text" "accolades meta";
    }
    .proj_intro .text {
        padding: calc(1 * var(--base_line_height)) 0;
    }
    .accolades,
    .proj_meta {
        padding: 0;
        flex: 1 0 50%;
    }
    .proj_approach .text {
        grid-column: 1 / span 8;
    }
    .figure_wall,
    .deliverable_main .main,
    .figure_monolith {
        width: calc(100% + 1 * var(--base_line_height));
        padding: calc(1 * var(--base_line_height))
            calc(0.5 * var(--base_line_height));
        transform: translate3d(calc(-0.5 * var(--base_line_height)), 0, 0);
    }
    .deliverable_main {
        padding-top: var(--base_line_height);
        padding-bottom: 10.125vh;
    }
    .deliverable_intro {
        grid-template-columns: 1fr 2fr;
        grid-gap: 0;
        flex-direction: column;
        grid-template-areas: "deliverable_intro_text deliverable_intro_images";
        min-height: 62.5vh;
        /* max-height: 100vh; */
    }
    .deliverable_main .text p {
        /* 		max-width: 35em !important; */
        /* 		padding-right: 0; */
    }
    .deliverable_main .text p + p {
        /* 		margin-left: 0; */
        margin-top: 0;
    }
    .deliverable_intro_images {
        align-items: flex-end;
        width: calc(100%);
        /* transform: translate3d(calc(-0.5*var(--base_line_height)), 0, 0); */
    }
    .deliverable_intro_images figure {
        flex-direction: column;
        align-items: flex-start;
    }
    .deliverable_intro_images img {
        flex: 1 0 auto;
        width: auto !important;
    }
    .deliverable_intro_images figcaption {
        /* padding-left: calc(0.5*var(--base_line_height)); */
        padding-right: calc(0.5 * var(--base_line_height));
    }
    .deliverable_intro_text {
        padding-right:;
    }
    .img_txt {
        grid-template-columns: 3fr 2fr;
        grid-template-areas: "img txt";
    }
    .img_x3 {
        grid-template-columns: 1fr;
        grid-gap: var(--gridGap);
    }
    .img_x3 figure {
        grid-template-columns: 3fr 2fr;
        grid-gap: var(--gridGap);
        display: grid;
        align-items: flex-end;
    }
    .proj_appraisal .text {
        padding: 10.125vh 0;
        /* min-height: auto; */
    }
    .all_work .grid > div {
        flex: 1 0 calc(50% - 1 * var(--base_line_height));
        max-width: calc(50% - 1 * var(--base_line_height));
    }

    .resource_grid .grid > div {
        flex: 1 0 calc(50% - 0.5 * var(--base_line_height));
        max-width: calc(50% - 0.5 * var(--base_line_height));
    }
}

@media screen and (max-width: 768px) {
    :root {
        --cols: 6;
        --base_font_size: 1.8rem;
        --base_line_height: 3rem;
        /* 		--gridGap: 3rem; */
        --large_font_size: 2.6rem;
        --medium_font_size: 2.2rem;
        /* --outer_spacing: 6vw; */
        /* 		--vertGap: calc(3*var(--base_line_height)); */
    }
    .grid__container {
        /* grid-row-gap: calc(2 * var(--gridGap)); */
    }
    .is-row {
        flex-direction: column !important;
    }
    .button_group {
        gap: calc(1 * var(--gridGap));
    }
    .btn {
        flex: 1 0 100%;
    }
    .logo {
        width: calc(1.6666666667 * var(--base_line_height));
        height: calc(1.6666666667 * var(--base_line_height));
    }
    .inner-content .larger {
        font-size: 8vw;
        line-height: 1;
    }

    .inner-content p {
        line-height: calc(1 * var(--base_line_height));
    }

    .mobile-inline {
        display: inline-block !important;
    }
    header {
        background: url("../img/header-pattern-small.svg") center top no-repeat;
        background-size: 100% auto;
        justify-content: space-between;
        padding-top: calc(2 * var(--outer_spacing));
    }
    nav {
        flex: 1 0 auto;
        /* 		margin-left: calc(1%*100/var(--cols)); */
    }
    .social a {
        margin: 0;
    }
    .large_number {
        font-size: 2.6rem;
        line-height: 0.9615;
    }
    header {
        /* padding-top: 7.125vh; */
    }
    hr {
        margin: 5.0625vh auto;
    }
    .largest span {
        transform: translate3d(-50%, -45%, 0) skew(-9deg);
        text-shadow:
            0px 2px var(--text_shadow),
            0 4px var(--text_shadow),
            0 6px var(--text_shadow),
            0 8px var(--text_shadow),
            0 10px var(--text_shadow),
            0 12px var(--text_shadow),
            0 14px var(--text_shadow),
            0 16px var(--text_shadow),
            0 18px var(--text_shadow);
    }

    .introduction,
    .about_header,
    .team h3,
    .work_intro .work_intro_content {
        grid-column: 1 / -1;
    }

    .introduction,
    .about,
    .work_intro {
        padding: calc(1 * var(--vertGap)) 0 calc(0.5 * var(--vertGap));
    }

    .introduction h2,
    .introduction h3,
    .introduction h4,
    .introduction h5,
    .introduction h6,
    .introduction .text {
        grid-column: 1 / -1;
        /* grid-row: 1 / 2; */
    }

    .anti.to {
        transform: rotate(72deg) translate3d(5rem, 4rem, 0) scale(0.8);
    }

    .introduction .text {
        /* grid-row: 2 / 3; */
    }

    .introduction .btn {
        flex: 1 0 100%;
    }

    .intro_accolades {
        /* align-items: center; */
        padding: calc(0.1 * var(--vertGap)) 0 0;
    }
    .intro_accolades ul {
        justify-content: space-between;
    }
    .angle {
        bottom: 0;
        left: calc(50% - 0.2vw);
    }

    .introduction .text {
        grid-column: 1 / -1;
    }
    .text {
        flex-direction: column;
    }

    .news_flash {
        margin-left: 0;
    }
    .recent_work .grid a {
        gap: calc(0.125 * var(--base_line_height));
    }
    .recent_work .grid {
        grid-row-gap: calc(2 * var(--base_line_height));
    }
    .grid .first {
        grid-column: 1 / calc(var(--cols) - 1);
        grid-row: 2;
    }
    .grid .second {
        grid-column: 2 / calc(var(--cols) + 1);
        grid-row: 3;
    }
    .grid .third {
        grid-column: 2 / -1;
        grid-row: 4;
    }
    .grid .fourth {
        grid-column: 1 / calc(var(--cols));
        grid-row: 4;
    }
    .grid .fifth {
        grid-column: 1 / -1;
        grid-row: 5;
    }
    .grid .sixth {
        grid-row: 5;
        grid-column: 1 / -1;
    }
    .grid .seventh {
        grid-row: 6 / 7;
        grid-column: 2 / -1;
    }
    .grid .eighth {
        grid-column: 1 / -1;
        grid-row: 7 / 8;
    }
    .each_card + .each_card {
        margin-top: calc(1 * var(--base_line_height));
    }
    .dr {
        grid-column: 1 / -1;
    }
    .gifts {
        grid-column: 2 / calc(var(--cols) + 1);
    }
    .fp {
        grid-column: 1 / calc(var(--cols) - 1);
    }
    .each_card figure,
    .each_card .vid_container {
        /* 		margin-bottom: calc(.5*var(--base_line_height)); */
    }
    .proj_header {
        grid-area: proj_header;
        grid-column: 1 / -1;
    }

    .proj_desc {
        margin-left: 0;
        grid-column: 1 / -1;
    }

    .proj_timeline {
        flex-direction: row;
        margin-bottom: 0;
        grid-column: 1 / -1;
        text-align: left;
        justify-content: flex-start;
    }

    .recent_work_intro {
        grid-template-columns: 1fr;
        grid-template-areas: "text";
    }

    .recent_work_intro p {
        font-size: var(--base_font_size);
    }

    .recent_work a:hover .pop-media,
    .recent_work a:active .pop-media {
        opacity: 0;
    }

    .other_work {
        padding: calc(1 * var(--base_line_height)) 0 0;
    }
    .madcaps {
        margin-top: calc(0.5 * var(--vertGap));
    }
    .madcaps h4,
    .madcaps .text,
    .madcaps .media {
        grid-column: 1 / -1;
    }
    .madcaps .media {
        grid-row: 2;
    }
    .thanks_for_the_fish .text {
        grid-column: 1 / -1;
    }
    .thanks_for_the_fish .largest span {
        transform: translate3d(-50%, 20%, 0) skewX(-8deg);
    }
    .row-1,
    .row-2 {
        grid-template-columns: repeat(8, var(--gridSize));
    }
    .row-1 div:nth-of-type(3),
    .row-2 div:nth-of-type(6) {
        background: var(--main_bg_color) !important;
    }
    .row-3,
    .row-4,
    .row-5 {
        grid-template-columns: repeat(2, var(--gridSize));
    }
    .row-4 div,
    .row-5 div {
        height: 25vw !important;
    }
    .row-4 div:nth-of-type(3n),
    .row-4 div:nth-of-type(4n),
    .row-5 div:nth-of-type(4n) {
        display: none;
    }
    .eye-container {
        grid-column: 2 / -1;
    }
    .card {
        flex-direction: column;
        grid-template-columns: 1fr;
        grid-template-areas:
            "proj_timeline"
            "engagement_detail";
    }

    .recent_work .text {
        grid-row: 1;
        grid-column: 1 / -1;
        text-align: left;
    }

    .meta {
        justify-content: space-between;
    }

    .where {
        margin-left: calc(1 * var(--base_line_height));
    }

    .about_page::before {
        left: 8vw;
        width: 92vw;
    }
    .about_header {
        flex-direction: column;
        justify-content: flex-start;
        padding-bottom: 0;
    }

    .about_main {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "about_content"
            "aside";
        /* 		padding-bottom: 10.125vh; */
    }

    .about h6 {
        display: flex;
        flex: 1 0 auto;
        justify-content: flex-start;
        padding: 0;
        transform: translate3d(0, 0, 0);
        margin-bottom: calc(0.5 * var(--base_line_height));
    }

    .selling_points h6 {
        grid-column: 1 / span 5;
        justify-content: flex-start;
    }

    .about_text {
        grid-column: 1 / span 5;
        flex-basis: auto;
    }

    .about_content {
        grid-column: 1 / -1;
        padding-top: 0;
        position: relative;
        padding-bottom: 0;
    }

    .about_content .angle {
        opacity: 0;
        visibility: hidden;
    }

    aside {
        display: none;
    }

    .selling_points {
        grid-template-columns: 1fr;
        grid-template-areas: "h6" "about_text";
        padding-bottom: calc(0 * var(--base_line_height));
    }
    .pitch .text {
        grid-column: 1 / -1;
    }
    .goals {
        flex-wrap: wrap;
    }

    .goals li {
        flex: 1 0 100%;
        display: flex;
        align-items: center;
        padding: calc(0.5 * var(--base_line_height)) 0 0;
    }

    .goals .icon {
        margin-right: calc(0.3125 * var(--base_line_height));
    }

    .tabs {
        justify-content: space-between;
    }

    .each_team_member {
        flex: 1 0 100%;
        max-width: 100%;
    }

    .each_team_member + .each_team_member {
        margin-top: calc(0.125 * var(--vertGap));
    }

    .each_team_member:nth-of-type(odd),
    .each_team_member:nth-of-type(even),
    .each_team_member:nth-of-type(4) {
        grid-column: 1 / -1;
        align-items: inherit;
    }

    .each_team_member .pop-text {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(0.5 * var(--base_line_height));
        max-width: 100%;
    }

    .each_team_member .profile {
        width: calc(9 * var(--base_line_height));
        margin-left: auto;
    }

    .social_links {
        justify-content: space-between;
    }
    .social_links a {
        display: inline-block;
    }

    .close {
        top: 10.125vh;
    }
    .yeah li {
        font-size: var(--base_font_size);
        line-height: calc(1 * var(--base_line_height));
    }
    .proj_heading {
        min-height: 100vh;
        padding-right: 0;
        background-size: 100% auto;
        background-position: right bottom;
    }
    .proj_heading .text {
        min-height: 30vh;
        justify-content: flex-start;
    }
    .proj_heading .deets {
        margin-top: calc(0.5 * var(--base_line_height));
        margin-bottom: calc(0.5 * var(--base_line_height));
    }
    .proj_heading .timestamp {
        font-size: calc(1 * var(--base_font_size));
        line-height: 3rem;
    }
    .proj_heading h4 {
        display: inline;
        /*font-family: "recoleta-medium";*/
        font-weight: normal;
    }
    .proj_heading h4 + h4 {
        margin-left: 0;
        /*font-family: "recoleta";*/
    }
    .proj_intro {
        /*
		grid-template-columns: 1fr;
		grid-template-areas: "intro_text" "accolades" "meta";
*/
        /* 		padding: 0 0 6.5vh; */
    }
    .accolades,
    .proj_meta {
        padding: 0 0 calc(1 * var(--base_line_height));
    }
    .proj_meta {
        margin-top: 0;
    }
    .accolades li {
        display: inline-block;
        margin-right: calc(0.5 * var(--base_line_height));
        margin-bottom: 0;
    }
    .meta_each {
        margin-top: 0;
        margin-bottom: calc(0.33333 * var(--base_line_height));
    }
    .proj_intro .text {
        /* 		padding: calc(1*var(--base_line_height)) calc(1*var(--base_line_height)) calc(.5*var(--base_line_height)); */
        padding: 0;
    }
    .proj_approach {
        padding: 10.125vh 0 6.5vh;
        grid-template-columns: 1fr;
    }
    .proj_goal_container {
        /* 		padding: 0 0 10.125vh; */
    }
    .proj_approach h5 {
        padding-right: 0;
    }
    .proj_approach p,
    .proj_approach ol {
        margin-top: calc(0.5 * var(--base_line_height));
        margin-left: 0;
    }
    .proj_approach p:first-of-type {
        margin-top: calc(1 * var(--base_line_height));
    }
    .proj_context_intro {
        margin: 0 0 5.0625vh;
    }
    .figure_wall {
        grid-template-columns: 1fr;
        grid-template-row: auto auto;
        padding-top: calc(1 * var(--base_line_height));
        padding-bottom: calc(1 * var(--base_line_height));
    }
    .figure_wall .left.main_image,
    .figure_wall .right.tertiary_image {
        grid-column: 1 / -1;
    }
    .figure_wall .left.main_image {
        grid-row: 2;
    }
    .figure_wall .right.tertiary_image {
        grid-row: 1;
    }
    .figure_wall > div {
        justify-content: inherit;
    }
    .figure_wall img {
        margin-bottom: calc(0.5 * var(--base_line_height));
    }
    .figure_caption_collection {
        max-width: 100%;
        margin-top: 0;
    }

    .cite {
        /*
		font-size: 2.9rem;
		line-height: 3.5rem;
*/
    }
    .quote {
        font-size: 4.7rem;
        line-height: 5rem;
    }
    .deliverable_intro {
        grid-template-columns: 1fr;
        grid-gap: var(--gridGap);
        flex-direction: column;
        grid-template-areas: "deliverable_intro_text" "deliverable_intro_images";
    }
    .deliverable_intro_images figure {
        flex-direction: column;
        align-items: flex-start;
    }
    .img_txt {
        grid-template-columns: 1fr;
        grid-template-areas: "img" "txt";
    }
    .img_x3 {
        grid-template-columns: 1fr;
        grid-gap: var(--gridGap);
    }
    .img_x3 figure {
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
    .team_members {
        display: flex;
        flex-direction: row;
        grid-column: 1 / -1;
        justify-content: space-evenly;
    }
    .each_contribution {
        margin: 0 0 calc(1 * var(--base_line_height));
        flex-direction: column;
    }
    .each_member {
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
    }
    .each_collaborator {
        flex: 1 0 calc(45%);
        max-width: calc(45%);
    }
    .hustle {
        padding-top: 10.25vh;
    }
    .hustle_engagement {
        grid-row-gap: calc(2 * var(--base_line_height));
    }
    .all_work .grid > div,
    .resource_grid .grid > div {
        flex: 1 0 100%;
        max-width: 100%;
    }
    .rps-container,
    .home_story_container {
        grid-column: 1 / -1;
    }
    .rps-container {
        padding-bottom: 45%;
    }
    .home_story_container {
        /* transform: scale(1.25); */
        padding-bottom: 60%;
        overflow: hidden;
    }
    .pinball-container {
        grid-column: 1 / -1;
        padding-bottom: 75%;
    }
    #home_story {
        transform: translate3d(0, -45%, 0) scale(1.05);
    }

    #pinball {
        top: 50%;
        transform: translate3d(0, -50%, 0) scale(1.5);
    }
    .thanks_for_the_fish {
        /* margin-top: calc(0.5 * var(--vertGap)); */
        /* padding-bottom: 7.5vh; */
    }
    .email_details {
        grid-column: 1 / -1;
    }
    .email_ahvahan {
        grid-column: 1 / -1;
        flex-direction: column;
    }
    #rps {
        transform: translate3d(0, -50%, 0) scale(1.15);
    }
    .resource_grid {
        padding: 0 0 calc(0.25 * var(--vertGap));
        & + .resource_grid {
            padding-top: calc(0.25 * var(--vertGap));
        }
    }
}