::selection {
background-color: var(--selection-color, rgba(0, 0, 0, 0.25));
color: #1b1b1b;
}

html,
body {
font-family: 'Chronicle Deck A', 'Chronicle Deck B', Georgia;
font-style: normal;
font-size: 0;
margin: 0;
padding: 0;
-webkit-font-smoothing: subpixel-antialiased;
max-width: 100%;
overflow-x: hidden;
position: relative;
color: #1b1b1b;
}

body.fonts-loading {
opacity: 0;
}

body.transitioning {
pointer-events: none;
}

a svg {
pointer-events: none;
}

body {
overflow: hidden;
}

h1,
h2 {
font-family: 'Financier Display', Georgia, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 600;
}

h6 {
font-weight: lighter;
letter-spacing: 0.5px;
}

html {
background-color: #ffffff;
}

h1,
p,
li,
ul {
margin: 0;
padding: 0;
}

ul,
li {
list-style: none;
list-style-type: none;
}

p {
letter-spacing: 0.25px;
}

a:focus {
outline: none;
}

* {
box-sizing: border-box;
}

#ribbon {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}

#ribbon.case-detail-mode {
position: absolute;
height: 112.5vw;
min-height: 1600px;
}

/*#ribbon.home-mode {
position: fixed;
}

#ribbon.case-detail-mode {
position: absolute;
height: 112.5vw;
min-height: 1600px;
}

#ribbon.next-case-mode {
position: absolute;
bottom: 0;
top: auto;
height: var(--footer-height, 100vh);
}*/

/*/////////////////////////////////
HEADER
/////////////////////////////////*/

#logo {
z-index: 50;
position: absolute;
left: calc(3.75% - 30px);
top: 14px;
pointer-events: bounding-box;
}

#logo.fixed {
position: fixed;
}

#logo.transitioning {
transition: opacity 0.75s linear;
}

#logo a {
display: block;
width: 104px;
height: 72px;
padding: 29px 30px;
}

#logo a svg {
margin: 2px 0 0 0;
}

/*/////////////////////////////////
HIRE US LINK
/////////////////////////////////*/

#hire-us {
z-index: 50;
position: absolute;
top: 14px;
right: calc(11.6% - 15px);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.031em;
-webkit-font-smoothing: antialiased;
font-family: 'Financier Display', Georgia, sans-serif;
transition: opacity 0.3s linear;
}

#hire-us.fixed {
position: fixed;
}

#hire-us.transitioning {
transition: opacity 0.75s linear;
}

#hire-us a {
display: block;
text-decoration: none;
height: 72px;
color: #1b1b1b;
padding: 27px 15px 29px;
}

#hire-us a::after {
content: '';
display: block;
background: rgb(27, 27, 27);
height: 0;
position: absolute;
left: 9px;
right: 8px;
bottom: 25px;
opacity: 0.1;
transition: height 0.25s ease, opacity 0.25s ease;
}

#hire-us a:hover::after {
height: 8px;
}

#hire-us.hidden,
#hire-us.menu-hidden {
opacity: 0;
pointer-events: none;
}

/* /////////////////////////////////
Footer
///////////////////////////////// */

#footer {
/* width: 92.5%;
max-width: 1440px; */
margin: 300px auto 150px;
display: flex;
}

#footer > div {
height: 120px;
width: 15.5405%;
border-top: 1px solid rgba(33, 33, 33, 0.15);
position: relative;
display: inline-block;
vertical-align: top;
}

.dark #footer > div {
border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#footer > div:first-child {
margin: 0 1.3614% 0 25.337838%;
}

#footer > div:nth-child(2) {
margin: 0 1.3614% 0 0;
}

#footer h5 {
font-size: 16px;
margin: 10px 0 0;
font-weight: 400;
}

.dark #footer h5 {
color: white;
}

#footer a {
font-size: 14px;
position: absolute;
bottom: 0;
color: #ff6e63;
color: var(--accent-color, #ff6e63);
text-decoration: none;
transition: color 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

#footer a:hover {
color: var(--accent-hover-color, #ff6e63);
}

#footer #social > div {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
}

#footer #social a {
position: relative;
flex: 1;
height: 16px;
}

#footer #social a:hover svg {
fill: var(--accent-hover-color, #ff6e63);
transform: translate3d(0, -50%, 0) scale(1.15);
}

#footer #social a svg {
position: absolute;
transform: translate3d(0, -50%, 0) scale(1);
transform-origin: 50% 50%;
top: 50%;
fill: #ff6e63;
fill: var(--accent-color, #ff6e63);
transition: fill 0.75s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

/*///////////////////////////////
WRAPPER
///////////////////////////////*/

#wrapper {
width: 100%;
overflow: hidden;
}

.page-content {
width: 92.5%;
max-width: 1480px;
margin: 0 auto;
position: relative;
}

.section {
width: 108.108108%;
margin-left: -4.05%;
overflow: hidden;
}

.section.dark {
background: #1b1b1b;
color: white;
}

.section-content {
width: 92.5%;
max-width: 1480px;
margin: 0 auto;
position: relative;
}

@media only screen and (min-width: 1600px) {
#logo {
left: 30px;
}

.section {
width: 100vw;
margin-left: calc(-50vw + 740px);
}
}

@media only screen and (max-width: 1280px) {
#logo {
left: calc(5% - 30px);
}

.page-content {
width: 90%;
}

.section {
width: 111.111111%;
margin-left: -5.5555555%;
}

.section-content {
width: 90%;
}

#hire-us {
right: calc(15.3% - 15px);
}

#footer {
width: 90%;
}

#footer > div {
width: 20%;
margin: 0;
}

#footer > div:first-child {
margin: 0 5% 0 15%;
}

#footer > div:nth-child(2) {
margin: 0 5% 0 0;
}
}

@media screen and (max-width: 1024px) {
#footer > div {
width: 24%;
margin: 0;
}

#footer > div:first-child {
margin: 0 5% 0 9%;
}

#footer > div:nth-child(2) {
margin: 0 5% 0 0;
}
}

@media only screen and (max-width: 768px) {
#logo {
left: calc(6% - 30px);
}

#hire-us {
right: calc(21.2% - 15px);
}

.page-content {
width: 88%;
}

.section {
width: 113.636364%;
margin-left: -6.818182%;
}

.section-content {
width: 88%;
}

#footer {
flex-flow: column;
width: 88%;
margin: 150px auto 150px;
}

#footer > div {
width: 65.6%;
margin: 0 0 0 17.2%;
}

#footer > div:first-child {
margin: 0 0 0 17.2%;
}

#footer > div:nth-child(2) {
margin: 0 0 0 17.2%;
}

#footer a {
bottom: 50px;
}
}

@media only screen and (max-width: 580px) {
#logo {
left: calc(12.5% - 30px);
}

#hire-us {
right: calc(25.8% - 10px);
}

#hire-us a {
padding: 27px 10px 29px;
}

.page-content {
width: 75%;
}

.section {
width: 133.333333%;
margin-left: -16.6666665%;
}

.section-content {
width: 75%;
}

#footer {
width: 65.4320988%;
margin: 200px auto 40px;
}

#footer > div {
margin: 0;
width: 100%;
}

#footer > div:first-child,
#footer > div:nth-child(2) {
margin: 0;
}
}
#menu-button {
pointer-events: bounding-box;
position: fixed;
display: block;
width: 72px;
height: 72px;
right: calc(3.75% - 24px);
top: 14px;
z-index: 100;
transition: transform 0.5s ease-in-out 0.125s;
}

#menu-button div {
position: absolute;
left: 24px;
width: 16px;
height: 2px;
background: #1b1b1b;
background: var(--button-color, #1b1b1b);
transition: width 0.125s ease-in-out, top 0.25s ease-in-out 0.5s,
transform 0.25s ease-out 0.25s, opacity 0.001s linear 0.5s,
background-color 0.25s linear;
}

#menu-button.animating div {
transition: width 0.125s ease-in-out, top 0.25s ease-in-out 0.5s,
transform 0.25s ease-out 0.25s, opacity 0.001s linear 0.5s;
}

#menu-button.light div {
background: white;
}

#menu-button div:nth-child(1),
#menu-button div:nth-child(2),
#menu-button:hover div {
width: 24px;
}

#menu-button div:nth-child(1) {
top: 29px;
}

#menu-button div:nth-child(2) {
top: 35px;
}

#menu-button div:nth-child(3) {
top: 41px;
}

#menu-button.opened {
transform: rotate(90deg);
transition: transform 0.5s ease-in-out 0.375s;
}

#menu-button.opened div {
width: 24px;

transition: width 0.125s ease-in-out 0.875s, top 0.25s ease-in-out 0.25s,
transform 0.25s ease-out 0.5s, opacity 0.001s linear 0.5s;
}

#menu-button.opened div:nth-child(1) {
top: 35px;
transform: rotate(45deg);
}

#menu-button.opened div:nth-child(2) {
opacity: 0;
}

#menu-button.opened div:nth-child(3) {
top: 35px;
transform: rotate(-45deg);
}

#menu-button.closing div {
width: 24px;
}

/*/////////////////////////////////
Menu Button Arrow for Case Study
/////////////////////////////////*/
#menu-button.arrow-transition-in {
position: fixed;
transform: rotate(90deg);
transition: transform 0.25s ease-in-out 0s;
}

#menu-button.arrow-transition-in div {
/*width: 24px;*/

transition: width 0.125s ease-in-out 0s, top 0.2s ease-in-out 0.05s,
transform 0.25s ease-out 0s, background-color 0.25s linear;
}

#menu-button.arrow-transition-in div:nth-child(1) {
top: 32px;
transform: rotate(-45deg);
width: 11px;
left: 22px;
}

#menu-button.arrow-transition-in div:nth-child(2) {
width: 28px;
}

#menu-button.arrow-transition-in div:nth-child(3) {
top: 38px;
transform: rotate(45deg);
width: 11px;
left: 22px;
}
#menu-button.arrow-transition-out {
position: fixed;
transform: rotate(0);
transition: transform 0.25s ease-in-out 0s;
}
#menu-button.arrow-transition-out div {
transition: width 0.125s ease-in-out 0.1s, top 0.125s ease-in-out 0s,
transform 0.125s ease-out 0s;
}
#menu-button.arrow-transition-out div {
position: absolute;
left: 24px;
width: 16px;
height: 2px;
}

#menu-button.arrow-transition-out div:nth-child(1),
#menu-button.arrow-transition-out div:nth-child(2) {
width: 24px;
}

#menu-button.arrow-transition-out div:nth-child(1) {
top: 29px;
}

#menu-button.arrow-transition-out div:nth-child(2) {
top: 35px;
}

#menu-button.arrow-transition-out div:nth-child(3) {
top: 41px;
}

#menu {
position: fixed;
display: none;
right: 0;
top: 0;
bottom: 0;
width: 100%;
max-width: 800px;
background: grey;
z-index: 99;
}

#menu.opening,
#menu.opened {
display: block;
}

#menu.closing {
display: block;
}

#menu.opened {
transform: none;
}

#menu-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-height: 100%;
width: 100%;
}

#menu ul {
position: relative;
left: 12%;
width: 80%;
}

#menu li {
font-size: 72px;
font-family: 'Financier Display';
font-weight: 600;
-webkit-font-smoothing: antialiased;
line-height: 2em;
/* letter-spacing: 0.0167em; */
}

#menu li a {
text-decoration: none;
color: white;
position: relative;
}

#menu.reversed li a {
color: #1b1b1b;
}

#menu li a::after {
content: '';
display: block;
background: rgb(255, 255, 255);
height: 0;
position: absolute;
left: -8px;
right: -12px;
bottom: -1px;
opacity: 0.1;
transition: height 0.25s ease, opacity 0.25s ease;
}

#menu.reversed li a::after {
background: rgb(27, 27, 27);
}

#menu li a:hover::after {
height: 27px;
opacity: 0.15;
}

#menu.reversed li a:hover::after {
opacity: 0.075;
}

#menu li.current a::after,
#menu li.current a:hover::after {
content: '';
display: block;
height: 36px;
position: absolute;
bottom: -1px;
opacity: 0.3;
}

#menu.reversed li.current a::after,
#menu.reversed li.current a:hover::after {
opacity: 0.15;
}

#menu li.dropdown > a {
padding-right: 64px;
}

#menu li.dropdown > a::before,
#menu li.dropdown > a::after {
content: '';
display: block;
background: white;
height: 2px;
width: 24px;
position: absolute;
left: auto;
right: -0;
top: 50%;
opacity: 1;
transition: transform 350ms;
}

#menu.reversed li.dropdown > a::before,
#menu.reversed li.dropdown > a::after {
background: #1b1b1b;
opacity: 1;
}

#menu li.dropdown > a::after {
transform: rotate(-90deg);
}

#menu li.dropdown.opened > a::before {
transform: rotate(180deg);
}

#menu li.dropdown.opened > a::after {
transform: rotate(0deg);
}

#menu ul li ul {
position: relative;
top: auto;
transform: initial;
left: 24px;
width: 100%;
height: 0;
overflow: hidden;
transition: height 350ms;
}

#menu ul li ul li {
font-size: 24px;
font-weight: 400;
padding-left: 8px;
line-height: 1.6em;
}

#menu ul li ul li:last-child {
padding-bottom: 1em;
}

#menu ul li ul li a:hover::after {
height: 14px;
}

#menu ul li ul li.current a::after,
#menu ul li ul li.current a:hover::after {
height: 16px;
}

#follow-bar {
position: absolute;
top: 140px;
right: calc(3.75vw - 6px);
width: 60px;
color: white;
}

.reversed #follow-bar {
color: #1b1b1b;
}

#follow-bar > div {
display: flex;
align-items: center;
justify-content: space-between;
width: 82px;
transform: translate(0, 30px) rotate(90deg);
margin: 0 0 100px 0;
}

#follow p {
display: inline-block;
font-size: 16px;
}

#follow span {
display: inline-block;
width: 12px;
height: 1px;
background-color: white;
}

.reversed #follow span {
background-color: #1b1b1b;
}

#follow-bar a {
position: relative;
display: block;
width: 60px;
height: 60px;
margin: 40px auto 0;
}

#follow-bar a:first-of-type {
margin: 130px auto 0;
}

#follow-bar a svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(0, -50%, 0) scale(1);
transform-origin: 50% 50%;
fill: white;
transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

#follow-bar a:hover svg {
transform: translate3d(0, -50%, 0) scale(1.15);
}

.reversed #follow-bar a svg {
fill: #1b1b1b;
}

#menu-modal {
display: none;
position: absolute;
background: rgba(255, 255, 255, 0);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 98;
}

#menu-modal.closing,
#menu-modal.initial.open {
display: block;
background: rgba(255, 255, 255, 0);
}

#menu-modal.open {
display: block;
background: rgba(255, 255, 255, 0.8);
}

#logo {
transform-origin: calc(50vw - 3.75% - 30px + 52px) calc(50vh - 30px + 36px);
}

#logo.modalled {
transform: scale(0.95, 0.95);
}

#logo.modalled a {
cursor: default;
}

#wrapper {
transform-origin: center 50vh;
}

#wrapper.modalled {
transform: scale(0.95, 0.95);
}

@media only screen and (min-width: 1600px) {
#menu-button {
right: 36px;
}

#follow-bar {
right: 54px;
}

#logo {
transform-origin: calc(50vw - 30px + 52px) calc(50vh - 14px + 36px);
}
}

@media only screen and (max-width: 1280px) {
#menu-button {
right: calc(5% - 24px);
}

#follow-bar {
right: calc(5vw - 12px);
}

#follow-bar > div {
transform: translate(-3px, 30px) rotate(90deg);
}

#logo {
transform-origin: calc(50vw - 5% - 30px + 52px) calc(50vh - 14px + 36px);
}

#menu {
width: 54%;
}

#menu li {
font-size: 62px;
}

#menu li a:hover::after {
height: 20px;
}

#menu li.current a::after,
#menu li.current a:hover::after {
height: 30px;
}

#menu li.dropdown > a:hover::after {
height: 2px;
}
}

@media only screen and (max-width: 768px) {
#menu-button {
right: calc(6% - 24px);
}

#follow-bar {
right: calc(6vw - 12px);
}

#follow-bar > div {
transform: translate(-3px, 30px) rotate(90deg);
}

#logo {
transform-origin: calc(50vw - 6% - 30px + 52px) calc(50vh - 14px + 36px);
}

#menu {
width: 64%;
}

#menu li {
font-size: 52px;
}

#menu li a:hover::after {
height: 18px;
}

#menu li.current a::after,
#menu li.current a:hover::after {
height: 24px;
}

#menu ul li ul {
left: 10px;
}
}

@media only screen and (max-width: 580px) {
#menu-button {
right: calc(12.5% - 24px);
}

#follow-bar {
right: calc(12.5vw - 12px);
top: 86px;
}

#follow-bar > div {
margin: 0;
}

#follow p,
#follow span {
display: none;
}

#follow-bar a:first-of-type {
margin: 0 auto 0;
}

#follow-bar a {
margin: 5px auto 0;
}

#logo {
transform-origin: calc(50vw - 12.5% - 30px + 52px)
calc(50vh - 14px + 36px);
}

#menu {
width: 88%;
}

#menu ul {
left: 8%;
}

#menu li {
font-size: 42px;
}

#menu li a:hover::after {
height: 14px;
}

#menu li.current a::after,
#menu li.current a:hover::after {
height: 18px;
}
}

@media only screen and (max-width: 400px) {
#menu ul {
left: 6%;
}
}
#responsive-grid {
position: fixed;
top: 0;
height: 100%;

width: 92.5%;
max-width: 1480px;

left: 50%;
transform: translateX(-50%);

display: flex;
justify-content: space-between;

pointer-events: none;
z-index: 100;
}

.grid-column {
height: 100%;
background: rgba(255, 0, 0, 0.125);
width: 7.0945946%;
}

@media only screen and (max-width: 1280px) {
#responsive-grid {
width: 90%;
}

.grid-column {
background: rgba(255, 0, 255, 0.125);
width: 9%;
}

.grid-column:nth-child(1n+10) {
display: none;
}
}

@media only screen and (max-width: 768px) {
#responsive-grid {
width: 88%;
}

.grid-column {
background: rgba(0, 255, 255, 0.125);
width: 14%;
}

.grid-column:nth-child(1n+7) {
display: none;
}

/* gutter: 3.2% */
}

@media only screen and (max-width: 580px) {
#responsive-grid {
width: 75%;
}

.grid-column {
background: rgba(0, 255, 0, 0.125);
width: 13.580247%;
}

.grid-column:nth-child(1n+7) {
display: none;
}
}
/* column 7.0945946 */
/* gutter 1.3513513 */

.home-page {
z-index: 0;
}

#bullets {
/* 4 cols + 3 gutters */
/* 28.3783784 + 4.0540539 */
width: 400px;
font-size: 16px;
line-height: 16px;
text-align: center;
position: fixed;
/* position: absolute; */
left: calc(18.772563% - 200px);
top: 50vh;
transform: translateY(-200px);
color: #1b1b1b;
-webkit-font-smoothing: antialiased;
/* transition: transform 0.6s cubic-bezier(0.475, -0.020, 0.010, 1.005); */

font-family: "Financier Display", Georgia, sans-serif;
font-weight: 600;
}

#bullets.absolute {
position: absolute;
left: calc(16.21621622% - 200px);
}

#bullets li {
margin: 48px 0;
position: relative;
z-index: 1;
/* transition: margin 0.6s cubic-bezier(0.475, -0.020, 0.010, 1.005),
font-size 0.6s cubic-bezier(0.475, -0.020, 0.010, 1.005),
line-height 0.6s cubic-bezier(0.475, -0.020, 0.010, 1.005); */
}

#bullets li.focused {
/* font-size: 317px; */
/* line-height: 227px;
margin: 86px 0;
z-index: 0; */
}

#bullets li a {
text-decoration: none;
color: #1b1b1b;
padding: 12px;
position: relative;
}

#bullets li.focused a {
cursor: default;
}

#bullets .project-name {
display: none;
position: absolute;
left: 12px;
text-align: left;
white-space: nowrap;
overflow: hidden;
padding-bottom: 0.2em;
padding-top: 10px;
transform: translateY(-10px);
width: var(--initial-width, auto);
transition: width 0.25s;
opacity: var(--initial-opacity, 0);
}

#bullets .project-name span {
opacity: 0;
}

#bullets a:hover .project-name {
opacity: 1;
width: var(--full-width, 500%);
}

#bullets li.focused a:hover .project-name, #bullets li.closing a:hover .project-name {
width: var(--initial-width, 0%);
}

#pages {
/* width: 57.77027027%; */
margin-left: 33.78378378%;
position: relative;
padding: 0;
transition: filter 0.5s;
}

#pages li {
height: 100vh;
}

#pages a {
display: block;
position: relative;
text-decoration: none;
color: #1b1b1b;
top: 50%;
transform: translateY(-50%);
}

#pages h2 {
font-size: 72px;
margin: 0 0 35px 0;
/* width: 74.73469388%; */
width: 61.734694%;
padding-top: 23px;
line-height: 1.025em;
font-weight: 600;
}

#pages .client-hidden h2 {
padding-top: 0;
}

#pages h3 {
position: absolute;
top: 0px;
width: 100%;
margin: 0;
font-size: 16px;
line-height: 1.5em;
font-family: "Financier Display", Georgia, sans-serif;
font-weight: 600;
-webkit-font-smoothing: antialiased;
letter-spacing: 0.031em;
}

#pages p {
font-size: 16px;
line-height: 24px;
width: 36.2244898%;
font-weight: 400;
}

#pages .arrow {
display: block;
position: absolute;
height: 86px;
width: 16.959064%;
bottom: 0;
right: 16.900585%;
/* transition: width 0.25s cubic-bezier(0.475, -0.020, 0.010, 1.005); */
}

#pages .arrow img {
position: absolute;
right: 0;
top: 31px;
}

#pages .arrow .circle {
display: block;
width: 86px;
height: 86px;
position: absolute;
right: -32px;
top: 0;
border-radius: 50%;
box-sizing: border-box;
border: 4px solid var(--highlight-primary, grey);
opacity: 0.5;
transition: opacity 0.25s linear;
}

#pages .arrow .spine {
background: #1b1b1b;
height: 4px;
top: 41px;
left: 0;
right: 4px;
position: absolute;
transition: left 0.25s cubic-bezier(0.475, -0.020, 0.010, 1.005);
}

#pages a:hover .arrow .spine, #pages a .arrow .spine.transitioning {
/* width: 14.619883%; */
left: 13.836478%;
}

#pages a:hover .arrow .circle {
opacity: 1.0;
}

@media only screen and (min-width: 1601px) {
#bullets {
left: calc(50% - 700px);
}

#bullets.absolute {
left: calc(16.21621622% - 200px);
}
}

@media only screen and (max-width: 1280px) {
#bullets {
left: calc(24.416667% - 200px);
}

#bullets.absolute {
left: calc(21.5625% - 200px);
}

#pages {
margin-left: 34.2%;
}

#pages h2 {
font-size: 62px;
/* width: 82.734694%; */
width: 65.539514%;
}

#pages p {
width: 58.5%;
font-size: 14px;
line-height: 22px;
}

#pages .arrow {
right: 8.4%;
width: 25.4%;
}

#pages a:hover .arrow .spine, #pages a .arrow .spine.transitioning {
/* width: 21.1%; */
left: 16.860465%;
}
}

@media only screen and (max-width: 768px) {
#bullets {
left: calc(19.733333% - 200px);
}

#bullets.absolute {
left: calc(15.6% - 200px);
}

#pages {
margin-left: 34.4%;
}

#pages h2 {
font-size: 52px;
width: 73.780488%;
}


#pages .arrow {
right: 35px;
}

#pages a:hover .arrow .spine, #pages a .arrow .spine.transitioning {
left: 16.346154%;
}
}

@media only screen and (max-width: 580px) {
/* column 13.580247% */
/* gutter 3.7037036% */

#bullets {
left: calc(17.545455% - 200px);
}

#bullets.absolute {
left: calc(6.7901% - 200px);
}

#bullets li {
transition: opacity 0.325s linear;
}

#bullets li.above {
opacity: 0;
}

#pages {
margin-left: 34.5679%;
}

#pages h2 {
width: 100%;
font-size: 40px;
line-height: 1.025em;
margin: 0 0 10px 0;
}

#pages h3 {
font-size: 14px;
}

#pages p {
width: 100%;
font-size: 12px;
line-height: 18px;
}

#pages .arrow {
top: 110%;
/* width: calc((40.740741% + 11.1111108%) / 0.8271605 - 31px); */
width: calc(55% - 31px);
right: auto;
}

#pages .arrow .circle {
width: 58px;
height: 58px;
}

#pages .arrow .spine {
top: 27px;
right: -16px;
}

#pages .arrow img {
right: -20px;
top: 17px;
}

#pages .arrow .circle {
right: -40px;
}
}
#pages h2.transitioning {
transition: opacity 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#pages h2.transition-out, #pages h2.transition-in {
opacity: 0;
transform: translate3d(-50vw, 0, 0) scale(0.1);
transition-delay: 0;
}
#pages h3.transitioning {
transition: opacity 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#pages h3.transition-out, #pages h3.transition-in {
opacity: 0;
transform: translate3d(-50vw, 0, 0) scale(0.1);
transition-delay: 0;
}

#pages p.transitioning {
transition: opacity 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#pages p.transition-out, #pages p.transition-in {
opacity: 0;
transform: translate3d(-50vw, 0, 0) scale(0.1);
transition-delay: 0;
}
#pages .arrow .spine.transitioning {
transition: opacity 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#pages .arrow .spine.transition-out, #pages .arrow .spine.transition-in {
opacity: 0;
transform: translate3d(25vw, 0, 0) scale(0.5);
transition-delay: 0;
}

#pages .arrow img.transitioning {
transition: opacity 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#pages .arrow img.transition-out, #pages .arrow img.transition-in {
opacity: 0;
transform: translate3d(25vw, 0, 0) scale(0.5);
transition-delay: 0;
}

#pages .arrow .circle.transitioning, #pages a .arrow .circle.transitioning {
transition: opacity 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#pages .arrow .circle.transition-out, #pages a:hover .arrow .circle.transition-out,
#pages .arrow .circle.transition-in, #pages a:hover .arrow .circle.transition-in {
opacity: 0;
transform: translate3d(25vw, 0, 0) scale(0.5);
transition-delay: 0;
}

#bullets.transitioning {
transition: opacity 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000), left 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#bullets.transition-in {
opacity: 0;
left: -25vw;
transition-delay: 0;
}

#bullets.transition-out {
opacity: 0;
left: -25vw;
transition-delay: 0;
transition: opacity 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000), left 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

@media only screen and (max-width: 768px) {
#bullets.transition-in {
left: -60vw;
}

#bullets.transition-out {
left: -60vw;
}
}
/*/////////////////////////////////
CASE ENTRY
/////////////////////////////////*/
.case-detail-page {
z-index: 1;
}

.case {
position: relative;
padding-top: 275px;
}

.case-title {
position: relative;
}

.case-title h1 {
font-size: 120px;
line-height: 1.025em;
margin: 0 0 75px 8.4459%;
/* size of homepage title (adjusted for full width) * case study text height / homepage text height */
/* 40.87837838% * 299 / 179 */
width: 68.28287722%;
font-weight: 600;
}

.case-title h2 {
position: absolute;
top: -41px;
margin: 0 0 0 8.4459%;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.031em;
font-family: "Financier Display", Georgia, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 600;
}

.case-title span {
display: block;
margin: 0 0 0 8.4459%;
margin: 0 0 95px 8.4459%;
height: 4px;
width: 15.5405%;
background-color: #ac63ff ;
}

.case-title h3 {
font-size: 16px;
font-weight: lighter;
margin: 0 0 0 8.4459%;
line-height: 1.5em;
}

/*/////////////////////////////////
LAZY CONTENT
/////////////////////////////////*/
.case .lazy-wrapper {
position: relative;
}

.case .lazy-wrapper::after {
content: '';
display: block;
width: 100%;
height: 100%;
background: #dde1e4;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s, height 0s linear 0.5s;
}

.case .lazy-wrapper.loaded::after {
opacity: 0;
height: 0;
}

.case .lazy-wrapper video {
transform: translateZ(0);
}

@keyframes spinner-rotation {
0%   { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.case .lazy-wrapper .spinner,
#screenshot-container-desktop .lazy-wrapper .spinner,
#screenshot-container .lazy-wrapper .spinner {
position: absolute;
width: 28px;
height: 28px;
left: calc(50% - 14px);
top: calc(50% - 14px);
background-image: url('../images/spinner.png');
background-size: 28px 28px;
z-index: 1;
animation: spinner-rotation 0.75s infinite linear;
opacity: 1;
transition: opacity 0.25s linear;
}

.case .lazy-wrapper.loading .spinner,
#screenshot-container-desktop .lazy-wrapper.loading .spinner,
#screenshot-container .lazy-wrapper.loading .spinner {
opacity: 1;
}

.case .lazy-wrapper.loaded .spinner,
#screenshot-container-desktop .lazy-wrapper.loaded .spinner,
#screenshot-container .lazy-wrapper.loaded .spinner {
opacity: 0;
}

/*/////////////////////////////////
DEVICES
/////////////////////////////////*/
.lazy-wrapper img, .lazy-wrapper video {
width: 100%;
height: 100%;
object-fit: scale-down;
}

.iphone-4::before {
background-image:url('../images/iPhone-4.png');
content: '';
position: absolute;
background-size: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.iphone-8::before {
background-image:url('../images/iPhone-8.png');
content: '';
position: absolute;
background-size: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.iphone-X::before {
background-image:url('../images/iPhone-X-BG.png');
content: '';
position: absolute;
background-size: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.iphone-X::after {
background-image:url('../images/iPhone-X.png');
content: '';
position: absolute;
background-size: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.ipad::before {
content: '';
position: absolute;
background-image:url('../images/iPad.png');
background-size: cover;
width: 100%;
height: 100%;
}

.iphone-4 .lazy-wrapper {
position: absolute;
top: 20.35714%;
left: 31.346153%;
width: 59.80769%;
height: 56.13052%;
}

.iphone-8 .lazy-wrapper {
position: absolute;
top: 15.357143%;
left: 31.538462%;
width: 59.807692%;
height: 66.190476%;
}

.iphone-X .lazy-wrapper {
position: absolute;
top: 8.5119048%;
left: 31.25%;
width: 60.096154%;
height: 80.714286%;
border-radius: 15px;
}

.ipad .lazy-wrapper {
position: absolute;
top: 12.9375%;
left: 18.25%;
width: 65.916667%;
height: 74.1875%;
border-radius: 3px;
}

.desktop .lazy-wrapper{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}

/*/////////////////////////////////
HEROSHOTS IPHONES X 3 LAYOUT & DEFAULT
/////////////////////////////////*/
.iphonex3-layout, .default-layout {
display: block;
position: relative;
display: flex;
margin: 0 0 0 0;
}

.iphonex3-layout::after, .default-layout::after {
content: "";
display: block;
padding-bottom: 100%;
}

.iphonex3-layout .iphone-4, .default-layout .iphone-4 {
position: absolute;
width: 37.142857%;
height: 60%;
background-size: cover;
}

.iphonex3-layout .iphone-8, .default-layout .iphone-8, .iphonex3-layout .iphone-X {
position: absolute;
width: 33.428571%;
height: 54%;
background-size: cover;
}

.iphonex3-layout .iphone-4:nth-child(3) {
top: -8%;
left: 61%;
}

.iphonex3-layout .iphone-4:nth-child(2) {
top: 12%;
left: 27.33%;
}

.iphonex3-layout .iphone-4:first-child {
top: 32%;
left: -6.55%;
}

.iphonex3-layout .iphone-8:nth-child(3), .default-layout .iphone-8:nth-child(3), .iphonex3-layout .iphone-X:nth-child(3) {
top: -8%;
left: 63.1%;
}

.iphonex3-layout .iphone-8:nth-child(2), .default-layout .iphone-8:nth-child(2), .iphonex3-layout .iphone-X:nth-child(2) {
top: 12%;
left: 29.45%;
}

.iphonex3-layout .iphone-8:first-child, .default-layout .iphone-8:first-child, .iphonex3-layout .iphone-X:first-child {
top: 32%;
left: -4.3%;
}

.iphonex3-layout .case-rally-mark, .default-layout .case-rally-mark {
position: absolute;
display: block;
width: 32.4320%;
top: 65%;
right: 0;
}

.rally-mark-mobile {
display: none;
}

.case-rally-mark svg, .rally-mark-mobile svg {
width: 106px;
height: 106px;
display: block;
margin: 0 auto 0;
}

.iphonex3-layout .case-tagline, .default-layout .case-tagline {
position: absolute;
display: flex;
width: 44.2297%;
left: 50.6757%;
top: 86%;
}

.case-tagline-mobile {
display: none;
}

.case-tagline p, .case-tagline-mobile p {
font-family: "Financier Display";
font-weight: 600;
font-size: 40px;
line-height: 50px;
color: #1b1b1b;
letter-spacing: .5px;
}

.case-tagline span, .case-tagline-mobile span {
color: #ceced6;
}

#heroshot-slider-container {
display: none;
}

/*/////////////////////////////////
HEROSHOT IPAD-IPHONE LAYOUT
/////////////////////////////////*/
.ipad-iphone-layout {
position: relative;
display: flex;
margin: 0 0 0 0;
}

.ipad-iphone-layout::after {
content: "";
display: block;
padding-bottom: 100%;
}

.ipad-iphone-layout .ipad {
display: block;
position: absolute;
width: 88%;
height: 58.66666696%;
top: 18%;
right: 28%
}

.ipad-iphone-layout .iphone-4, .ipad-iphone-layout .iphone-8, .ipad-iphone-layout .iphone-X {
display: block;
position: absolute;
width: 37.1428572%;
height: 60%;
top: -8%;
left: 61%;
}

.ipad-iphone-layout .case-rally-mark {
position: absolute;
display: block;
width: 32.4%;
top: 66%;
right: 0;
}

.ipad-iphone-layout .case-tagline {
position: absolute;
display: flex;
width: 42.5%;
left: 17%;
top: 87%;
}

/*/////////////////////////////////
HEROSHOT IPHONE IPAD LAYOUT
/////////////////////////////////*/
.iphone-ipad-layout {
position: relative;
display: flex;
margin: 0 0 0 0;
}

.iphone-ipad-layout::after {
content: "";
display: block;
padding-bottom: 100%;
}

.iphone-ipad-layout .ipad{
display: block;
position: absolute;
width: 88%;
height: 58.66666696%;
top: -2%;
left: 26%;
}

.iphone-ipad-layout .iphone-4, .iphone-ipad-layout .iphone-8 {
position: absolute;
width: 37.1428572%;
height: 60%;
top: 30%;
left: -6.55%;
}

.iphone-ipad-layout .iphone-X {
position: absolute;
width: 37.1428572%;
height: 60%;
top: 30%;
left: -7%;
}

.iphone-ipad-layout .case-rally-mark {
position: absolute;
width: 57.8%;
top: 68%;
right: 0;
}

.iphone-ipad-layout .case-tagline {
position: absolute;
display: flex;
width: 49.2297%;
top: 85%;
right: 8.5%;
}

/*/////////////////////////////////
HEROSHOTS DESKTOP LAYOUT
/////////////////////////////////*/
.desktop-layout {
position: relative;
}

.desktop-layout::after {
content: "";
display: block;
padding-bottom: 90%;
}

.desktop-layout .desktop {
display: block;
position: absolute;
width: 83.2%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 30px 25px -30px;
}

.desktop-layout .desktop::before {
content: '';
display: block;
position: relative;
padding-bottom: calc(100% * var(--native-height, 1) / var(--native-width, 1));
}

.desktop-layout .case-rally-mark {
position: absolute;
display: block;
width: 24%;
right: 0;
bottom: -2%;
}

.desktop-layout .case-tagline {
position: absolute;
display: flex;
width: 40%;
left: 17%;
bottom: 0;
}

/*/////////////////////////////////
HEROSHOTS IPAD LAYOUTS
/////////////////////////////////*/
.ipad-layout {
position: relative;
margin: 0 0 0 0;
}

.ipad-layout::after {
content: "";
display: block;
padding-bottom: 100%;
}

.ipad-layout .ipad {
position: absolute;
width: 103.3%;
height: 68.8%;
top: 5vw;
left: -2.7%;
}

.ipad-layout .case-rally-mark {
position: absolute;
display: block;
width: 24%;
top: 87%;
right: 0;
}

.ipad-layout .case-tagline {
position: absolute;
display: flex;
width: 40%;
left: 17%;
top: 87%;
}

/*/////////////////////////////////
INTRO PARAGRAPH
/////////////////////////////////*/
#case-intro {
display: flex;
margin: 120px 0 0 0;
}

#case-intro p {
font-size: 16px;
line-height: 28px;
width: 22.9865%;
}

#case-intro p:first-child {
margin: 0 2.5% 0 16.8918%;
}

.layout4#case-intro {
display: flex;
margin: 150px 0 0 0;
}

.layout4#case-intro p:first-child {
margin: 0 2.5% 0 33.7836%;
}

/*/////////////////////////////////
CASE DETAILS
/////////////////////////////////*/
#case-details {
margin-top: 180px;
position: relative;
}

#case-details::after {
content: "";
display: block;
padding-bottom: 57.5%;
}

#case-details #de-svg {
position: absolute;
width: 15.5405%;
left: 16.8918%;
top: 0;
}

.launch-square {
position: absolute;
background: #ac63ff;
width: 15.5405%;
right: 16.8918%;
}

.launch-square::after {
content: "";
display: block;
padding-bottom: 100%;
}

.launch-square a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--accent-color, #1b1b1b);
transition: background-color 0.175s linear;
}

.launch-square a:hover {
background-color: var(--accent-hover-color, #1b1b1b);
}

.launch-square span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 30px;
font-size: 16px;
letter-spacing: 1px;
color: #fff;
text-decoration: none;
}

.launch-square span::selection {
color: #fff;
background-color: var(--accent-hover-color, #1b1b1b);
}

.launch-square.reversed span {
color: #1b1b1b;
}

.launch-square.reversed span::selection {
color: #1b1b1b;
background-color: var(--accent-hover-color, white);
}

#case-details #deets-dash {
position: absolute;
width: 4px;
height: 30%;
background: #000;
top: 62%;
left: 24.5%;
}

#case-details #ets-svg {
position: absolute;
width: 15.7405%;
right: 16.8918%;
top: 62%;
}

/*/////////////////////////////////
CASE STYLES
/////////////////////////////////*/
#case-styles {
position: relative;
}

#case-styles::after {
content: "";
display: block;
}

#style-header, #style-description{
width: 40.8784%;
margin-left: 16.8918%;
}

#style-header {
margin-top: 10%;;
}

#style-header img {
max-width: 100%;
}

#style-description p {
font-size: 16px;
line-height: 28px;
margin-top: 45px;
}

/*/////////////////////////////////
COLOR CARDS
/////////////////////////////////*/
#style-cards {
display: flex;
flex-wrap: wrap;
width: 50.6765%;
margin: 180px 0 180px 33.7838%;
}

.color-card {
position: relative;
width: 30.7%;
margin: 0 2.6% 2.6% 0;
border: solid 1px #f2f2f2;
background: black;
}

.color-card::after {
content: "";
display: block;
padding-bottom: 140%;
}

.color-card span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: rgba(0,0,0,.1);
z-index: 0;
}

.color-card span h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 16px;
letter-spacing: 1px;
font-weight: normal;
font-family: 'Helvetica', 'Arial', sans-serif;
color: #fff;
text-transform: uppercase;
}

#small-slider-container {
display: none;
}

/*/////////////////////////////////
SCREENSHOT SLIDER
/////////////////////////////////*/
#screenshot-container {
display: none;
}

.screenshot-container-desktop {
display: block;
position: relative;
background: #f4f5f5;
width: 108.108108%;
left: -4.054054%;
}

#screenshot-wrapper-desktop {
position: relative;
padding: 200px 0;
}

#screenshot-slider-wrapper-desktop {
max-width: 1480px;
margin: 0 auto;
}

.screenshot-cell-desktop {
position: relative;
width: 100%;
max-height: 700px;
}

.screenshot-cell-desktop .lazy-wrapper {
position: relative;
margin: 0 auto;
height: 700px;
width: 76.875%;
}

#screenshot-slider-desktop .flickity-viewport {
max-height: 700px !important;
}

#screenshot-slider-desktop .flickity-slider {
display: flex;
align-items: center;
}

.screenshot-slider-desktop .flickity-page-dots {
position: relative !important;
max-width: 120px !important;
margin: 0 auto 0 !important;
bottom: -40px !important;
}

.screenshot-slider-desktop .flickity-page-dots .dot {
padding: 30px 0;
margin: 0  !important;
height: 0px !important;
border-radius: 0  !important;
background: none ! important;
}

.screenshot-slider-desktop .flickity-page-dots .dot.is-selected {
opacity: .25 !important;
}

.nav-item {
display: block;
height: 2px;
background: #333;
}

.slider-bar {
position: absolute;
top: 20px;
left: 0px;
padding: 10px 0;
}

.slider-bar span {
display: block;
background: #333;
height: 2px;
}

.screenshot-slider-desktop .flickity-button {
background: none !important;
width: 6.5% !important;
}

.screenshot-slider-desktop .flickity-button::after {
content: '';
width: 100%;
height: 2px;
background: #333;
position: absolute;
left: 0;
top: 48.27%;
}

.screenshot-slider-desktop .flickity-prev-next-button {
border-radius: 0 !important;
}

.screenshot-slider-desktop .flickity-prev-next-button.previous {
left: 4% !important;
}

.screenshot-slider-desktop .flickity-prev-next-button.next {
right: 4% !important;
}

#screenshot-slider-desktop button.flickity-button {
padding: 0 !important;
}

#screenshot-slider-desktop button.flickity-button:disabled {
opacity: 1 !important;
}

.flickity-prev-next-button.previous .flickity-button-icon {
width: 20% !important;
left: -4% !important;
top: 21% !important;
}

.flickity-prev-next-button.next .flickity-button-icon {
width: 20% !important;
left: 83% !important;
top: 21% !important;
}

/*/////////////////////////////////
SLIDESHOW LAZY
/////////////////////////////////*/

#screenshot-container .lazy-wrapper img,
#screenshot-container .lazy-wrapper video,
#screenshot-container-desktop .lazy-wrapper img,
#screenshot-container-desktop .lazy-wrapper video {
opacity: 0;
transition: opacity 0.25s linear;
}

#screenshot-container .lazy-wrapper.placeholder-loaded video,
#screenshot-container-desktop .lazy-wrapper.placeholder-loaded video {
opacity: 0.75;
}

#screenshot-container .lazy-wrapper.loaded img,
#screenshot-container .lazy-wrapper.loaded video,
#screenshot-container-desktop .lazy-wrapper.loaded img,
#screenshot-container-desktop .lazy-wrapper.loaded video {
opacity: 1;
}

/*/////////////////////////////////
FOOTER
/////////////////////////////////*/
.footer {
position: relative;
min-height: 160px;
}

.footer a {
position: relative;
display: block;
padding-top: 150px;
padding-bottom: 150px;
text-decoration: none;
color: #1b1b1b;
z-index: 2;
}

.footer a h6 {
font-size: 16px;
font-weight: lighter;
margin: 0 0 0 8.4459%;
line-height: 1.5em;
letter-spacing: 0;
}

.footer a span.next-label {
text-decoration: none;
font-size: 16px;
font-weight: lighter;
margin: 0 0 0  8.4459%;
line-height: 25px;
display: inline-block;
}

.footer a h1 {
font-size: 120px;
margin: 150px 0 70px 8.4459%;
line-height: 1.025em;
width: 68.28287722%;
font-weight: 600;
}

.footer a h2 {
font-size: 16px;
font-family: "Financier Display", Georgia, sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 600;
position: absolute;
top: 280px;
margin: 0 0 0 8.4459%;
letter-spacing: 0.031em;
line-height: 1.5em;
}

.footer a span.color-bar {
display: block;
width: 15.5404%;
height: 4px;
background-color: #009bd1;
margin: 0 0 90px 8.4459%;
}

#arrow {
position: absolute;
left: 8.4459%;
bottom: 60px;
}

#rally-tree {
position: absolute;
bottom: 60px;
right: 0;
z-index: 1;
}

/*/////////////////////////////////
MEDIA QUERIES
/////////////////////////////////*/
@media only screen and (min-width: 1600px) {
#screenshot-container-desktop {
width: 100vw;
left: calc(-50vw + 740px);
}

#screenshot-slider-desktop .flickity-prev-next-button.previous {
left: 0% !important;
}

#screenshot-slider-desktop .flickity-prev-next-button.next{
right: 0% !important;
}
}

/*/////////////////////////////////
MEDIA QUERIES
/////////////////////////////////*/
@media only screen and (max-width: 1280px) {
.case-title h1 {
font-size: 100px;
margin: 0 0 65px 11.375%;
line-height: 1.025em;
/* 43.125 * 249 / 154 */
width: 69.72808442%
}

.case-title h2 {
margin-left: 11.375%;
}

.case-title span {
margin: 0 0 65px 11.375%;
width: 20.375%;
}

.case-title h3 {
margin: 0 0 0 11.375%;
}

#case-rally-mark {
width: 31.75%;
}

/*/////////////////////////////////
HEROSHOT IPHONE X 3 LAYOUT
/////////////////////////////////*/
.iphonex3-layout .case-tagline, .default-layout .case-tagline {
width: 54.2297%;
left: 45.5%;
top: 86%;
}

.iphonex3-layout .case-tagline p, .default-layout .case-tagline p{
font-size: 32px;
line-height: 40px;
color: #1b1b1b;
}

/*/////////////////////////////////
HEROSHOT IPAD-IPHONE LAYOUT
/////////////////////////////////*/
.ipad-iphone-layout .case-rally-mark {
width: 31.8%;
top: 64%;
right: 0;
}

.ipad-iphone-layout .case-tagline {
width: 45.5%;
left: 11.5%;
}

.ipad-iphone-layout .case-tagline p {
font-size: 32px;
line-height: 40px;
color: #1b1b1b;
}

/*/////////////////////////////////
HEROSHOT IPHONE-IPAD LAYOUT
/////////////////////////////////*/
.iphone-ipad-layout .case-rally-mark {
width: 54.5%;
top: 72%;
right: 0;
}

.iphone-ipad-layout .case-tagline {
top: 92%;
width: 54.5%;
right: 0;
}

.iphone-ipad-layout .case-tagline p {
font-size: 32px;
line-height: 40px;
color: #1b1b1b;
}

/*/////////////////////////////////
HEROSHOTS DESKTOP LAYOUT
/////////////////////////////////*/
.desktop-layout .desktop {
width: 88%;
}

.desktop-layout::after {
padding-bottom: 92%;
}

.desktop-layout .case-rally-mark {
width: 31.8%;
bottom: -3%;
}

.desktop-layout .case-tagline {
width: 50%;
left: 11.4%;
}

.desktop-layout .case-tagline p {
font-size: 32px;
line-height: 40px;
color: #1b1b1b;
}

/*/////////////////////////////////
HEROSHOTS IPAD LAYOUT
/////////////////////////////////*/
.ipad-layout .ipad {
position: absolute;
width: 101.8%;
height: 67.8%;
top: 5vw;
left: -2.2%;
}

.ipad-layout .case-rally-mark {
position: absolute;
display: block;
width: 31.8%;
top: 90%;
right: 0;
}

.ipad-layout .case-tagline {
position: absolute;
display: flex;
width: 50%;
left: 11.4%;
top: 90%;
}

.ipad-layout .case-tagline p {
font-size: 32px;
line-height: 40px;
color: #1b1b1b;
}

/*/////////////////////////////////
INTRO PARAGRAPH
/////////////////////////////////*/
#case-intro p {
width: 31.75%;
}

#case-intro p:first-child {
margin: 0 2.5% 0 11.375%;
}

#case-details::after {
padding-bottom: 75%;
}

.layout4#case-intro p:first-child {
margin: 0 2.5% 0 34.2%;
}

/*/////////////////////////////////
CASE DETAILS
/////////////////////////////////*/
#case-details #de-svg {
width: 20.375%;
left: 11.375%;
}

.launch-square {
width: 20.375%;
right: 11.375%;
}

#case-details #deets-dash {
left: 21.2%;
}

#case-details #ets-svg {
width: 20.375%;
right: 11.375%;
}

/*/////////////////////////////////
CASE STYLES
/////////////////////////////////*/
#style-header {
width: 43%;
}

#style-header, #style-description {
margin-left: 11.375%;
}

#style-description {
width: 45.486111%;
}

#style-header {
margin-top: 14%;;
}

#style-cards {
width: 68.25%;
margin: 15vw 0 15vw 11.375%;
}

.color-card {
width: 30%;
margin: 0 3.3% 3.3% 0;
}

/*/////////////////////////////////
SCREENSHOTS
/////////////////////////////////*/
.screenshot-container-desktop {
width: 111.111111%;
left: -5.5555555%;
}

.screenshot-wrapper-desktop {
padding: 175px 0;
}

.screenshot-cell-desktop {
width: 100%;
max-height: 525px;
}

.screenshot-cell-desktop .lazy-wrapper {
position: relative;
margin: 0 auto;
height: 525px;
width: 69.525%;
}

.screenshot-slider-desktop .flickity-viewport {
max-height: 525px !important;
}

.screenshot-slider-desktop .flickity-page-dots {
bottom: -40px !important;
}

.screenshot-slider-desktop .flickity-button {
width: 8% !important;
}

.screenshot-slider-desktop .flickity-prev-next-button.previous {
left: 5% !important;
}

.screenshot-slider-desktop .flickity-prev-next-button.next{
right: 5% !important;
}

.screenshot-slider-desktop .flickity-button::after {
content: '';
width: 100%;
height: 2px;
background: #333;
position: absolute;
left: 0;
top: 48.27%;
}

.color-card span h3 {
font-size: 14px;
}

.footer a {
padding-top: 120px;
padding-bottom: 200px;
}

.footer a h6 {
margin: 0 0 0 11.375%;
}

.footer a span.next-label {
margin: 0 0 0 11.375%;
}

.footer a h1 {
font-size: 100px;
margin: 100px 0 50px 11.375%;
width: 69.72808442%;
}

.footer a h2 {
margin-left: 11.375%;
top: 215px;
}

.footer a span.color-bar {
width: 20.375%;
margin: 0 0 90px 11.375%;
}

#arrow {
position: absolute;
left: 11.375%;
bottom: 60px;
}
}

@media only screen and (max-width: 768px) {
.case-title h1 {
font-size: 92px;
margin: 0 0 50px 0;
line-height: 1.025em;
/* 48.4 * 229 / 129 */
width: 85.91937984%;
}

.case-title h2 {
margin-left: 0;
}

.case-title span {
margin: 0 0 50px 0;
width: 31.2%;
}

.case-title h3 {
margin: 0 0 0 0;
}

/*/////////////////////////////////
HEROSHOT FLICKITY SLIDER LAYOUT
/////////////////////////////////*/
.iphonex3-layout, .default-layout {
display: none;
}

#heroshot-slider-container {
display: block;
width: 100%;
position: relative;
margin: 80px 0 125px 0;
}

#heroshot-slider-wrapper {
position: relative;
width: 100%;
margin: 0 auto 0;
height: 118vw;
}

.heroshot-slider {
transform-style: preserve-3d;
}

.heroshot-cell.iphone-4, .heroshot-cell.iphone-8, .heroshot-cell.iphone-X  {
width: 80%;
padding-bottom: 129.2307696%;
}

.heroshot-cell.iphone-4::before, .heroshot-cell.iphone-8::before, .heroshot-cell.iphone-X::after, .heroshot-cell.iphone-X::before {
left: -11%;
}

.heroshot-cell.iphone-4 .lazy-wrapper, .heroshot-cell.iphone-8 .lazy-wrapper, .heroshot-cell.iphone-X .lazy-wrapper {
left: 20.538462%;
}

.flickity-viewport {
overflow: visible !important;
}

.heroshot-slider .flickity-page-dots {
bottom: 0 !important;
max-width: 120px !important;
position: relative !important;
margin: 0 auto 0 !important;
}

.heroshot-slider .flickity-page-dots .dot  {
padding: 30px 0;
margin: 0  !important;
height: 0px !important;
border-radius: 0  !important;
background: none ! important;
}

.heroshot-slider .flickity-page-dots .dot.is-selected {
opacity: .25 !important;
}

/*/////////////////////////////////
IPAD-IPHONE & IPHONE-IPAD, IPAD LAYOUT
/////////////////////////////////*/
.ipad-iphone-layout::after, .iphone-ipad-layout::after, .ipad-layout::after {
padding-bottom: 105%;
}

.ipad-iphone-layout .iphone-4, .ipad-iphone-layout .iphone-8, .ipad-iphone-layout .iphone-X, .iphone-ipad-layout .iphone-4, .iphone-ipad-layout .iphone-8, .iphone-ipad-layout .iphone-X {
display: none;
}

.ipad-iphone-layout .case-rally-mark, .iphone-ipad-layout .case-rally-mark, .desktop-layout .case-rally-mark, .ipad-layout .case-rally-mark, .default-layout .case-rally-mark {
display: none;
}

.ipad-iphone-layout .case-tagline, .iphone-ipad-layout .case-tagline, .desktop-layout .case-tagline, .ipad-layout .case-tagline, .default-layout .case-tagline {
display: none;
}

.ipad-iphone-layout .ipad, .iphone-ipad-layout .ipad, .ipad-layout .ipad {
width: 124.223602%;
height: 78.7%;
left: -13.5%;
top: 150px;
}

.rally-mark-mobile {
display: block;
margin-top: 15vw;
}

.case-tagline-mobile {
display: block;
}

.case-tagline-mobile p {
font-size: 32px;
line-height: 40px;
margin: 15vw 17.2% 0 0;
}

/*/////////////////////////////////
HEROSHOTS DESKTOP LAYOUT
/////////////////////////////////*/

.desktop-layout::after {
padding-bottom: 80%;
}

.desktop-layout .desktop {
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 10vw;
}

/*/////////////////////////////////
INTRO PARAGRAPHS
/////////////////////////////////*/
#case-intro p {
width: 48.4%;
}

#case-intro p:first-child {
margin: 0 3.2% 0 0;
}

.layout4#case-intro {
margin: 15vw 0 0 0;
}

.layout4#case-intro p {
width: 48.4%;
}

.layout4#case-intro p:first-child {
margin: 0 3.2% 0 0;
}

#case-details::after {
/* padding-bottom: 145%; */
padding-bottom: 200%;
}

#case-details #de-svg {
width: 48.4%;
left: -18%;
}

.launch-square {
width: 48.4%;
right: 0;
}

#case-details #deets-dash {
left: 7%;
height: 25%;
top: 58%;

}

#case-details #ets-svg {
/* width: 41.4%; */
width: 48.4%;
right: 0;
top: 58%;
}

#case-styles {
margin-top: 65vw;
}

#style-header, #style-description {
margin: 0;
width: 100%;
}

#style-cards {
width: 100%;
margin: 20vw 0;
}

.color-card {
width: 31.2%;
margin: 0 3.2% 3.2% 0;
}

.color-card:nth-child(3), .color-card:nth-child(6){
margin: 0 0 3.2% 0;
}

.color-card span h3 {
font-size: 14px;
}

/*/////////////////////////////////
SCREENSHOT FLICKITY SLIDER
/////////////////////////////////*/
#screenshot-container-desktop {
display: none;
}

#screenshot-container {
display: block;
position: relative;
background: #f4f5f5;
width: 113.636364%;
left: -6.818182%;
}

#screenshot-wrapper {
position: relative;
width: 100%;
margin: 0 auto;
padding: 150px 0;
}

#screenshot-slider .flickity-viewport {
max-height: 500px !important;
}

#screenshot-slider .flickity-slider {
display: flex;
align-items: center;
}

.screenshot-cell {
width: 88%;
margin: 0 auto;
max-height: 500px;
margin-right: 8%;
}

.screenshot-cell .lazy-wrapper {
display: block;
height: 500px;
}

.screenshot-slider .flickity-page-dots {
position: relative !important;
margin: 0 auto 0 !important;
width: 120px !important;
}

.screenshot-slider .flickity-page-dots .dot {
padding: 30px 0;
margin: 0  !important;
height: 0px !important;
border-radius: 0  !important;
background: none ! important;
}

.screenshot-slider .flickity-page-dots .dot.is-selected {
opacity: .25 !important;
}

/*/////////////////////////////////
FOOTER
/////////////////////////////////*/
.footer a {
padding-top: 100px;
padding-bottom: 200px;
}

.footer a h6 {
margin: 0 0 0 0;
}

.footer a span.next-label {
margin: 0 0 0 0;
}

.footer a h1 {
font-size: 92px;
margin: 100px 0 50px 0%;
width: 85.91937984%;
}

.footer a h2 {
margin-left: 0;
top: 195px;
}

.footer a span.color-bar {
width: 31.2%;
margin: 0 0 50px 0%;
}

#arrow {
left: 0%;
}
}

@media only screen and (max-width: 580px) {
.case {
padding-top: 200px;
}

.case-title h1 {
font-size: 54px;
line-height: 1.025em;
margin: 0 0 45px 0;
/* 65.4321 * 296 / 220 */
width: 88.03591636%;
}

.case-title span {
margin: 0 0 45px 0;
width: 48.1481%;
}

.case-title h3 {
margin: 0 0 0 0;
}

/*/////////////////////////////////
HEROSHOTS IPHONESX3 LAYOUT
/////////////////////////////////*/
#heroshot-slider-container {
margin: 80px 0 115px 0;
}

#heroshot-slider-wrapper {
height: 151vw;
}

.heroshot-cell.iphone-4, .heroshot-cell.iphone-8, .heroshot-cell.iphone-X  {
width: 120%;
padding-bottom: 193.8461%;
}

/*/////////////////////////////////
IPAD-IPHONE & IPHONE-IPAD, IPAD LAYOUT
/////////////////////////////////*/
.ipad-iphone-layout::after, .iphone-ipad-layout::after , .ipad-layout::after {
padding-bottom: 115%;
}

.ipad-iphone-layout .ipad, .iphone-ipad-layout .ipad, .ipad-layout .ipad {
width: 151%;
height: 87.5%;
top: 50px;
left: -27.25%;
}

.case-tagline-mobile p {
font-size: 24px;
line-height: 34px;
margin: 15vw 0 0 0;
}

/*/////////////////////////////////
HEROSHOTS DESKTOP LAYOUTS
/////////////////////////////////*/
.desktop-layout .desktop {
width: 100%;
}

.desktop-layout::after {
padding-bottom: 100%;
}

/*/////////////////////////////////
INTRO PARAGRAPHS
/////////////////////////////////*/
#case-intro, .layout4#case-intro {
display: block;
margin-top: 15vw;
}

#case-intro p, .layout4#case-intro p {
width: 100%;
}

#case-intro p:first-child, .layout4#case-intro p:first-child  {
margin: 0 0 30px 0;
}

/*/////////////////////////////////
CASE DETAILS
/////////////////////////////////*/
#case-details {
margin-top: 100px;
}

#case-details::after {
padding-bottom: 180%;
}

#case-details #de-svg {
width: 48.4%;
left: -18%;
}

#case-details #deets-dash {
left: 6.7901%;
top: 62%;
}

#case-details #ets-svg {
width: 48.4%;
right: 0;
top: 62%;
}

#case-styles {
margin-top: 70vw;
}

#style-cards {
display: none;
}

#small-slider-container {
width: 133.333333%;
left:  -16.6666665%;
display: block;
}

#small-slider-wrapper {
width: 75%;
margin: 25vw 0;
}

.colorcard-cell {
width: 48%;
height: 50vw;
margin-right: 4%;
border: solid 1px #f2f2f2;
background: black;
}

.colorcard-cell span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background: rgba(0,0,0,.1);
z-index: 0;
}

.colorcard-cell span h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 14px;
letter-spacing: 1px;
font-weight: normal;
font-family: 'Helvetica', 'Arial', sans-serif;
color: #fff;
text-transform: uppercase;
}

.colorcard-cell img {
width: 100%;
}

.colorswatch-slider .flickity-page-dots {
position: relative !important;
margin: 0 auto 0 !important;
width: 120px !important;
}

.colorswatch-slider .flickity-page-dots .dot {
padding: 30px 0;
margin: 0  !important;
height: 0px !important;
border-radius: 0  !important;
background: none ! important;
}

.colorswatch-slider .flickity-page-dots .dot.is-selected {
opacity: .25 !important;
}

#screenshot-container {
width: 133.333333%;
left: -16.6666665%;
}

#screenshot-wrapper {
width: 100%;
padding: 100px 0;
}

#screenshot-slider .flickity-viewport {
max-height: 400px !important;
}

.screenshot-cell {
width: 90%;
max-height: 400px;
}

.screenshot-cell img {
max-height: 400px;
}

.screenshot-cell video {
max-height: 400px;
}

.footer a h1 {
font-size: 54px;
margin: 65px 0 50px 0%;
width: 88.03591636%;
}

.footer a h2 {
top: 160px;
}

.footer a span.color-bar {
margin: 0 0 65px 0%;
}
}

@media only screen and (max-width: 400px) {
/*/////////////////////////////////
BREAKPOINT A - small
/////////////////////////////////*/
.case-title h1 {
font-size: 54px;
}

.colorcard-cell span h3 {
font-size: 12px;
}

/*/////////////////////////////////
HEROSHOTS DESKTOP LAYOUTS
/////////////////////////////////*/
.rally-mark-mobile {
margin-top: 20vw;
}

.case-tagline-mobile p {
margin: 20vw 0 0 0;
}

#case-intro, .layout4#case-intro {
margin-top: 20vw;
}
}

.flickity-viewport {
transform: translateZ(0);
}
.case .transitioning {
transition: opacity 0.75s, transform 0.75s;
}

.case .transition-out {
transform: translate3d(0, 100vh, 0);
}

.case .transition-in {
transform: translate3d(0, 100vh, 0);
}

.case-title h3.transitioning,
.case-title h1.transitioning,
.case-title .stroke.transitioning,
.case-title h2.transitioning {
transition: opacity 0.75s cubic-bezier(0.19, 1, 0.22, 1) 0.2s,
transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.case-title h3.transition-out,
.case-title .stroke.transition-out,
.case-title h2.transition-out {
opacity: 0;
transform: translate3d(25vw, 10vh, 0) scale(0.5);
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.case-title h3.transition-in,
.case-title .stroke.transition-in,
.case-title h2.transition-in {
opacity: 0;
transform: translate3d(25vw, 10vh, 0) scale(0.5);
}

.case-title h1.transition-out {
opacity: 0;
transform: translate3d(20vw, 10vh, 0) scale(0.7);
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.case-title h1.transition-in {
opacity: 0;
transform: translate3d(20vw, 10vh, 0) scale(0.7);
}

.heroshots.transitioning > div:nth-child(1) {
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s,
transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.15s;
}
.heroshots.transitioning > div:nth-child(2) {
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s,
transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
}
.heroshots.transitioning > div:nth-child(3) {
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s,
transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

#heroshots.transition-in > div:nth-child(1) {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
}
#heroshots.transition-in > div:nth-child(2) {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
}
#heroshots.transition-in > div:nth-child(3) {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
}
#heroshots.transition-out > div:nth-child(1) {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
transition: opacity 0.75s cubic-bezier(0.19, 1, 0.22, 1) 0.4s,
transform 0.675s cubic-bezier(0, 0, 0.58, 1) 0.075s;
}
#heroshots.transition-out > div:nth-child(2) {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
transition: opacity 0.75s cubic-bezier(0.19, 1, 0.22, 1) 0.4s,
transform 0.675s cubic-bezier(0, 0, 0.58, 1) 0.05s;
}
#heroshots.transition-out > div:nth-child(3) {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
transition: opacity 0.75s cubic-bezier(0.19, 1, 0.22, 1) 0.4s,
transform 0.675s cubic-bezier(0, 0, 0.58, 1) 0s;
}

.heroshot-slider-container.transitioning {
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s,
transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.15s;
}

.heroshot-slider-container.transition-in {
transform: translate3d(0, 100vh, 0);
}

.heroshot-slider-container.transition-out {
transform: translate3d(0, 100vh, 0);
transition: opacity 0.75s cubic-bezier(0.19, 1, 0.22, 1) 0.4s,
transform 0.675s cubic-bezier(0, 0, 0.58, 1) 0.075s;
}

.screenshot-container.transitioning,
.screenshot-container-desktop.transitioning {
transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
.screenshot-container.transition-in,
.screenshot-container-desktop.transition-in {
transform: translate3d(0, -100vh, 0);
}
.screenshot-container.transition-out,
.screenshot-container-desktop.transition-out {
transform: translate3d(0, -100vh, 0);
transition: transform 0.75s cubic-bezier(0, 0, 0.58, 1);
}

.next-label.transitioning {
transition: opacity 0.75s cubic-bezier(0, 0, 0.58, 1),
transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
.next-label.transition-in {
opacity: 0;
transform: translate3d(0, -100vh, 0);
}
.next-label.transition-out {
opacity: 0;
transform: translate3d(0, -100vh, 0);
transition: opacity 0.75s cubic-bezier(0, 0, 0.58, 1),
transform 0.75s cubic-bezier(0, 0, 0.58, 1);
}

.rally-tree.transitioning {
transition: opacity 0.75s cubic-bezier(0, 0, 0.58, 1),
transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
.rally-tree.transition-in {
opacity: 0;
transform: translate3d(0, 50vh, 0);
}
.rally-tree.transition-out {
opacity: 0;
transform: translate3d(0, 50vh, 0);
transition: opacity 0.75s cubic-bezier(0, 0, 0.58, 1),
transform 0.75s cubic-bezier(0, 0, 0.58, 1);
}

.footer-arrow.transitioning {
transition: opacity 0.75s cubic-bezier(0, 0, 0.58, 1),
transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
.footer-arrow.transition-in {
opacity: 0;
transform: translate3d(0, 50vh, 0);
}
.footer-arrow.transition-out {
opacity: 0;
transform: translate3d(0, 50vh, 0);
transition: opacity 0.75s cubic-bezier(0, 0, 0.58, 1),
transform 0.75s cubic-bezier(0, 0, 0.58, 1);
}
/*/////////////////////////////////
STUDIO SECTIONS
/////////////////////////////////*/

/* #about-section, #projects-wrapper, #team-section, #camp-section { */
#about-section, #team-section, #camp-section {
width: 100%;
max-width: 1480px;
margin: 0 auto;
}

/*/////////////////////////////////
ABOUT SECTION
/////////////////////////////////*/
#about-section {
padding-top: 275px;
margin-bottom: 180px;
color: #1b1b1b;
}

#studio-header h1 {
font-size: 150px;
color: #1b1b1b;
line-height: 135px;
margin-left: 8.4459%;
}

#studio-header h1 span {
display: inline-block;
vertical-align: middle;
width: 230px;
height: 4px;
background-color: #1b1b1b;
opacity: 0.3;
margin: 0 0 0 45px;
transform-origin: 0;
transform: scaleX(0);
transition: transform 1s 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#studio-header h1.animate span {
transform: scaleX(1);
}

#studio-header p {
display: none;
margin: 100px 0 0 0;
font-size: 16px;
font-weight: lighter;
line-height: 28px;
letter-spacing: 0.25px;
}

#intro-wrapper {
display: flex;
margin-top: 100px;
}

#intro-wrapper p {
font-size: 16px;
font-weight: lighter;
line-height: 28px;
letter-spacing: 0.25px;
}

#intro-p1 {
display: inline-block;
width: 23.9865%;
margin: 0 0 0 33.7839%;
}
#intro-p2 {
display: inline-block;
width: 23.9865%;
margin: 0 0 0 1.35135%;
}

#studio-vision{
margin: 180px 0 0 8.4459%;
}

#vision-header {
display: inline-block;
width: 49.2297%;
}

#vision-header h2 {
font-weight: 600;
font-size: 56px;
line-height: 56px;
margin: 0 0 60px 0;
}

#vision-header p {
font-weight: lighter;
font-size: 16px;
line-height: 28px;
}

#vision-header span {
font-weight: bold;
}

#logo-mark {
display: inline-block;
width: 32.3378%;
vertical-align: top;
/*margin: 0 0 0 8.4459%;*/
}

#logo-mark svg {
width: 106px;
height: 106px;
display: block;
margin: 0 auto 0;
}

#studio-description {
display: none;
margin: 200px 0 0 35%;
}

#studio-description p {
padding: 0;
font-size: 16px;
font-weight: lighter;
}

#description-wrapper {
margin: 200px 0 0 0;
display: flex;
}

#description-wrapper p {
font-size: 16px;
font-weight: lighter;
line-height: 28px;
letter-spacing: 0.25px;
}

#content-p1 {
display: inline-block;
vertical-align: top;
margin: 0 0 0 33.7839%;;
width: 23.9865%;
}

#content-p2 {
display: inline-block;
vertical-align: top;
margin: 0 0 0 1.35135%;
width: 23.9865%;
}

.studio-partners {
margin-top: 250px;
}

#studio-past-present {
display: inline-block;
vertical-align: top;
width: 33.7878%;
margin: 0 0 0 8.4459%;
}

#studio-past-present h2 {
margin: 0;
font-size: 56px;
}

#studio-past-present h2:first-child {
margin-top: 80px;
}

#partners-dash {
display: inline-block;
vertical-align: middle;
width: 38px;
height: 1px;
background-color: #000;
margin-left: 12px;

transform: scale(0, 1);
transform-origin: left;
transition: transform 0.5s ease-out;
}

#partners-dash.animate {
transform: scale(1, 1);
}

#studio-past-present p {
display: inline-block;
margin: 24px 4px 0 0;
font-size: 16px;
font-weight: lighter;
}

#studio-past-present a {
display: inline-block;
font-weight: lighter;
font-size: 16px;
color: #ff6e63;
color: var(--accent-color, #ff6e63);
text-decoration: none;
letter-spacing: 0.25px;
transition: color 0.25s linear;
}

#studio-past-present a:hover {
color: #cc5850;
color: var(--accent-hover-color, #cc5850);
}

#partner-list {
display: inline-block;
vertical-align: top;
width: 32%;
margin-left: 16.8919%;
}

.list-item {
display: inline-block;
vertical-align: top;
width: 40%;
font-size: 16px;
font-weight: lighter;
margin: 0 0 15px 0;
line-height: 24px;
letter-spacing: 0.25px;

opacity: 0;
transform: translateY(100px) scale(0.6);
transition: transform 0.8s 0.1s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.8s 0.1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.list-item:nth-child(even) {
margin: 0 0 0 13%;
}

.list-item.is-moved {
opacity: 1;
transform: translateY(0) scale(1);
}

/*/////////////////////////////////
DREAM PROJECTS SECTION -LEFT
/////////////////////////////////*/
/*#dream-projects-section {
display: block;
position: relative;
background: #1b1b1b;
width: 108.108108%;
left: -4.054054%;
}*/

#projects-wrapper {
display: flex;
}

/*#dream-projects-section  #projects-wrapper{
width: 92.5%;
}*/

#project-body-left {
display: inline-block;
vertical-align: top;
margin: 200px 0 0 8.4459%;
width: 40.8781%;
}

#project-body-left svg {
width: 106px;
height: 106px;
}

#project-body-left h1 {
font-size: 104px;
line-height: 89px;
color: #fff;
margin-top: 88px;
}

#project-body-left span {
display: block;
width: 160px;
height: 4px;
background-color: #fff;
margin: 100px 0 0 0;
transform-origin: 0;
transform: scaleX(0);
transition: transform 1s 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#project-body-left  span.animate  {
transform: scaleX(1);
}

#project-body-left p {
font-size: 16px;
color: #fff;
margin: 100px 42% 0 0;
line-height: 28px;
letter-spacing: 0.25px;
}

/*/////////////////////////////////
DREAM PROJECTS SECTION -RIGHT
/////////////////////////////////*/
#project-body-right {
width: 50.6759%;
margin: 400px 0 100px;
}

.grid-item {
display: inline-block;
vertical-align: top;
position: relative;
width: 30.5%;
margin-bottom: 200px;
}

.grid-item:nth-child(odd) {
margin: 0 19.6666% 220px 2.5%;
}

.grid-item:nth-child(5) {
margin: 0 19.6666% 120px 2.5%;
/* background: #ff6e63; */
}

.grid-item:after {
content: "";
display: block;
padding-bottom: 100%;
}

.grid-item .content {
position: absolute;
width: 100%;
height: 100%;
}

.content h1 {
color: #fff;
font-size: 14px;
margin: 0 0 35px 0;
}

.content h2 {
font-size: 24px;
color: #fff;
margin: 0;
}

.content p {
font-size: 16px;
font-weight: 300;
line-height: 28px;
letter-spacing: 0.25px;
color: #fff;
margin: 20px 0 10px 0;
}

.content h6 {
font-size: 12px;
margin: 0;
font-style: italic;
color: #a8a8a8;
}

.content a {
display: block;
vertical-align: top;
width: 100%;
font-size: 22px;
font-weight: bold;
text-align: center;
color: #fff;
text-decoration: none;
padding: 45% 0;
-webkit-font-smoothing: antialiased;
background-color: #ff6e63;
background-color: var(--accent-color, #ff6e63);
transition: background-color 0.25s linear;
}

.content a:hover {
background-color: #e6635a;
background-color: var(--accent-hover-color, #e6635a);
}

/*/////////////////////////////////
TEAM SECTION -LEFT
/////////////////////////////////*/
#team-left {
display: inline-block;
vertical-align: top;
width: 23.9864%;
margin: 200px 0 0 8.4459%;
}

#team-left svg {
width: 106px;
height: 106px;
}

#team-left h1 {
font-size: 104px;
color: #1b1b1b;
margin: 95px 0 95px 0;
line-height: 89px;
}

#team-left span {
display: block;
width: 160px;
height: 4px;
background-color: #000;
transform-origin: 0;
transform: scaleX(0);
transition: transform 1s 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#team-left span.animate  {
transform: scaleX(1);
}

#team-left p {
font-size: 16px;
margin: 100px 10% 35px 0;
line-height: 28px;
letter-spacing: 0.25px;
}

#now-hiring {
display: block;
font-size: 16px;
font-family: "Chronicle Deck A", "Chronicle Deck B", Georgia;
font-weight: bold;
line-height: 28px;
letter-spacing: 0.25px;
}

#now-hiring a {
text-decoration: none;
color: #ff6e63;
color: var(--accent-color, #ff6e63);
transition: color 0.25s linear;
}

#now-hiring a:hover {
color: #cc5850;
color: var(--accent-hover-color, #cc5850);
}

/*/////////////////////////////////
TEAM SECTION -RIGHT
/////////////////////////////////*/
#team-right {
display: inline-block;
margin-top: 340px;
width: 67.5672%;
}

#team-right .grid-item {
display: inline-block;
vertical-align: top;
position: relative;
width: 23%;
margin-bottom: 200px;
}

#team-right .grid-item:nth-child(odd) {
margin: 0 14.5% 200px 27%;
}

#team-right a.grid-item {
text-align: center;
color: #fff;
font-size: 16px;
text-decoration: none;
}

#team-right a.grid-item .content {
background: #ff6e63;
background-color: var(--accent-color, #ff6e63);
transition: background-color 0.25s linear;
}

#team-right a.grid-item:hover .content {
background-color: #e6635a;
background-color: var(--accent-hover-color, #e6635a);
}

#team-right a.grid-item h2 {
margin: 30% 0 15% 0;
font-size: 24px;
color: #fff;
}

#team-right  a.grid-item h2 span {
font-weight: lighter;
}

#team-right .content h1 {
color: #000;
}

#team-right .content h2 {
margin: 40px 0 20px 0;
color: #000;
}

#team-right .content p {
color: #000;
}

#team-right .content h6 {
color: #878787;
}

/*/////////////////////////////////
CAMP SECTION
/////////////////////////////////*/

#camp-container {
position: relative;
margin: 200px 0 0 0;
}

#camp-container::after {
content: "";
display: block;
padding-bottom: 57.5%;
}

.clip-paths-svg {
position: absolute;
top: 0;
left: 0;
}

.no-svg-placeholder {
display: none;
width: 100%;
}

_:-ms-lang(x), .no-svg-placeholder {
display: block;
}

#ca {
position: absolute;
width: 15.805%;
left: 16.7918%;
background-image: url(../images/canyon-background-large.jpg);
background-position: 50% 50%;
background-attachment: fixed;
background-size: cover;
}

#ca::after {
content: "";
display: block;
padding-bottom: 203.913043%;
}

_:-ms-lang(x), #ca {
background-image: none;
}

_:-ms-lang(x), #ca::after {
padding-bottom: 0;
}

#rally-camp-title {
position: absolute;
font-size: 24px;
font-weight: bold;
right: 16.89189189%;
margin: 0;
top: 26%;
width: 15.54054055%;
text-align: center;
}

#rally-camp-title span {
display: none;
}

#camp-dash {
position: absolute;
width: 4px;
height: 27%;
background-image: url(../images/canyon-background-large.jpg);
background-position: 50% 50%;
background-attachment: fixed;
background-size: cover;
top: 58%;
left: 24.5621%;
}

_:-ms-lang(x), #camp-dash {
background-attachment: inherit;
background-size: auto;
}

#mp {
position: absolute;
top: 58%;
width: 17%;
left: 67.4672%;
background-image: url(../images/canyon-background-large.jpg);
background-position: 50% 50%;
background-attachment: fixed;
background-size: cover;
}

#mp::after {
content: "";
display: block;
padding-bottom: 205.4736842%;
}

_:-ms-lang(x), #mp {
background-image: none;
}

_:-ms-lang(x), #mp::after {
padding-bottom: 0;
}

#camp-info {
width: 22.9877%;
margin: 120px 0 180px 16.8918%;

}

#camp-info p {
font-size: 16px;
font-weight: 300;
line-height: 28px;
letter-spacing: 0.25px;
margin: 0 0 20px 0;
}

.camp {
margin: 0 0 175px 0;
}

.date {
display: inline-block;
vertical-align: top;
margin: 0 0 0 16.8918%;
width: 23.9863%;
}

.date h1 {
font-size: 56px;
margin: 75px 0 50px 0;
}

.date h5 {
font-size: 16px;
font-weight: normal;
margin: 0 0 10px 0;
line-height: 28px;
letter-spacing: 0.25px;
}

.date a {
font-size: 16px;
font-weight: normal;
margin: 0;
text-decoration: none;
display: block;
color: #ff6e63;
color: var(--accent-color, #ff6e63);
transition: background-color 0.25s linear;
}

.date a:hover {
color: #cc5850;
color: var(--accent-hover-color, #cc5850);
}

#camp-section .photos {
display: inline-block;
vertical-align: top;
width: 59.1219%;
}

#camp-section .photo-card {
display: inline-block;
vertical-align: top;
margin: 0 0 55px 2.3%;
width: 26.3714%;
text-decoration: none;
}

#camp-section .photo-card:nth-child(even) {
margin-left: 16.5857%;
}

.info-container {
position: relative;
width: 100%;
padding: 76% 0;
-webkit-font-smoothing: antialiased;
background: #ff6e63;
background-color: var(--accent-color, #ff6e63);
transition: background-color 0.25s linear;
}

a:hover .info-container {
background-color: #e6635a;
background-color: var(--accent-hover-color, #e6635a);
}

.info-container h4 {
position: absolute;
font-size: 20px;
font-weight: bold;
text-align: center;
margin: 0;
color: #fff;
transform: translate3d(-50%, -50%, 0);
top: 50%;
left: 50%;
}

.photo-wrapper {
overflow: hidden;
position: relative;
width: 100%;
background: #d4d4d4;
}

.studio-page .photo-wrapper {
padding-bottom: 152.173913%;
}

.photo-wrapper::before {
content: "";
position: absolute;
background: #e8e8e8;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(1.03, 1.03);
transition: height 0.5s ease-in-out 0.25s;
}

.photo-wrapper.loaded::before {
height: 0;
}

.photo {
position: absolute;
width: 100%;
transform: scale(1.05, 1.05);
transition: transform 2s ease-out 0.15s;
}

.loaded .photo {
transform: scale(1, 1);
}

.photos h6 {
font-size: 12px;
font-style: italic;
color: #000;
margin: 25px 0 0 0;
font-weight: normal;
}

.photos .dash {
display: inline-block;
vertical-align: middle;
width: 8px;
height: 1px;
background-color: #000;
margin: 0 3px;
}

.photos a:nth-child(2) {
pointer-events: none;
}

.photos a:nth-child(2) div {
background: #e8e8e8;
}

/*/////////////////////////////////
Animations
/////////////////////////////////*/
.word {
white-space: nowrap;
}

.logo-lines {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: 4s linear;
}

.logo-lines.animate {
stroke-dashoffset: 0;
}

.tree-form {
transform-origin: center;
transform: scale(0) rotateX(-35deg) rotateY(-30deg);
transition: transform 2s .5s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1.2s 0.1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.tree-form.animate {
transform: scale(1) rotateX(0deg) rotateY(0deg);
}

/* .follow-icon {
opacity: 0;
transform: translateY(300px) scale(0);
transition: transform 1.2s 0.1s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1.2s 0.1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.follow-icon.animate {
opacity: 1;
transform: translateY(0) scale(1);
} */

.intro-paragraph, #studio-header p, #description-wrapper .content, #vision-header p, #logo-mark, #studio-description, #studio-past-present p, #projects-logo, #projects-intro, .grid-item, #team-logo, #team-intro, #now-hiring, .team-square, #rally-camp-title, .ca-paragraph, .date h5, .date a, #camp-section .photo-card, #ca, #mp, #camp-dash {
opacity: 0;
transform: translateY(300px) scale(0) rotateX(-35deg) rotateY(-30deg);
transition: transform 1.2s 0.25s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1.2s 0.1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#ca, #mp, #camp-dash {
-moz-transform: none;
}

.intro-paragraph.animate, #studio-header p.animate, #description-wrapper .content.animate, #vision-header.animate p, #logo-mark.animate, #studio-description.animate, #studio-past-present.animate, #studio-past-present.animate p, #projects-logo.animate, #projects-intro.animate, .grid-item.animate, #team-logo.animate, #team-intro.animate, #now-hiring.animate, .team-square.animate, #rally-camp-title.animate, .ca-paragraph.animate, .date.animate h5, .date.animate a, #camp-section .photo-card.animate {
opacity: 1;
transform: translateY(0) scale(1) rotateX(0deg) rotateY(0deg);
}

#ca.animate, #mp.animate, #camp-dash.animate {
opacity: 1;
transform: translateY(0) scale(1) rotateX(0deg) rotateY(0deg);
-moz-transform: none;
}

/*/////////////////////////////////
MEDIA QUERIES
/////////////////////////////////*/
@media only screen and (min-width: 1600px) {

/*/////////////////////////////////
BREAKPOINT D - beyond max
/////////////////////////////////*/
/*#dream-projects-section {
width: 100vw;
left: calc(-50vw + 740px);
}*/
}

@media only screen and (max-width: 1280px) {

/*/////////////////////////////////
BREAKPOINT C
/////////////////////////////////*/

/*/////////////////////////////////
ABOUT SECTION
/////////////////////////////////*/
#about-section {
padding-top: 275px;
margin: 0 auto 250px;
}

#studio-header h1 {
margin: 0 0 0 11.375%;
}

#studio-header h1 span {
display: block;
margin: 45px 0 0 0;
}

#intro-wrapper {
margin: 100px 0 0 11.375%;
}

#intro-p1 {
width: 45.5%;
margin: 0 0 0 0;
}

#intro-p2 {
width: 45.5%;
margin: 0 0 0 6%;
}

#studio-vision {
margin: 125px 0 0 11.375%;
}

#vision-header {
width: 51.35%;
}

#vision-header h2 {
font-size: 46px;
line-height: 46px;
margin: 0 0 60px 0;
}

#content-p1 {
margin: 0 0 0 0;
width: 45.5%
}

#content-p2 {
margin: 0 0 0 6%;
width: 45.5%
}

#logo-mark {
width: 48.65%;
}

#logo-mark svg {
margin: 0 auto 0;
}

#description-wrapper {
margin: 125px 0 0 11.375%;
}

.studio-partners {
margin: 150px 0 0 11.375%;
}

#studio-past-present {
width: 38.5%;
margin: 0 0 0 0;
}

#studio-past-present h2 {
font-size: 46px;
}

#studio-past-present a {
line-height: 40px;
}

#partner-list {
margin: 0 0 0 13%;
width: calc(61.5% - 13%);
}

/*/////////////////////////////////
DREAM PROJECTS SECTION
/////////////////////////////////*/
/*#dream-projects-section {
width: 112.108108%;
left: -6.054054%;
}

#dream-projects-section  #projects-wrapper{
width: 90%;
}*/

#projects-wrapper {
flex-flow: column;
}

#project-body-right, #project-body-left {
width: auto;
}

#project-body-left {
margin: 200px 0 0 11.375%;
}

#project-body-left p {
width: 65%;
}

#project-body-right {
margin-top: 100px;
}

.grid-item {
width: 31.75%;
margin: 0 11.375% 120px 6.875%;
}

.grid-item:nth-child(odd) {
margin: 0 6.875% 150px 11.375%;
}

.grid-item:nth-child(5), .grid-item:nth-child(6) {
margin-top: 5%;
}

.grid-item:nth-last-child(-n+2) {
margin-top: 5%;
}

/*/////////////////////////////////
TEAM SECTION
/////////////////////////////////*/
#team-wrapper {
display: flex;
flex-flow: column;
}

#team-left, #team-right {
width: auto;
}

#team-left {
margin: 250px 0 0 11.375%;
}

#team-left h1 {
margin: 95px 0;
line-height: 89px;
}

#team-left span {
margin: 0;
padding: 0;
}

#team-left p {
width: 65%;
margin: 75px 0 35px 0;
}

#team-right {
margin-top: 100px;
}

#team-right .grid-item {
width: 31.5%;
margin: 120px 11.375% 0 7.125%;
}

#team-right .grid-item:nth-child(odd) {
margin: 120px 7.125% 0 11.375%;
}

/*/////////////////////////////////
CAMP SECTION
/////////////////////////////////*/
#camp-container {
margin: 150px 0 0 0;
}

#camp-container::after {
padding-bottom: 80%;
}

#ca {
width: 20.675%;
left: 11.2%;
}

#rally-camp-title {
right: 11.375%;
width: 20.375%;
}

#mp {
width: 22.575%;
left: 68.1%;
top: 55%
}

#camp-dash {
left: 21.375%;
height: 24%;
top: 55%;
}

#camp-info {
width: auto;
margin: 100px 0 180px 11.375%;
}

#camp-info p {
width: 45.5%;
margin: 0 0 20px 0;
}

.date {
margin: 0 0 0 11.375%;
width: 34.125%;
}

#camp-section .photos {
width: 54.5%;
}

.date h1 {
font-size: 45px;
}

#camp-section .photo-card {
margin: 0 0 55px 0;
width: 37%;
}

#camp-section .photo-card:nth-child(even) {
margin-left: 5%;
}
}

@media only screen and (max-width: 900px) {
/*/////////////////////////////////
Cheating: BREAKPOINT B/C
/////////////////////////////////*/

.grid-item::after {
padding-bottom: 120%;
}

.content a {
padding: 55% 0;
}

#team-right a.grid-item h2 {
margin: 40% 0 15% 0;
}
}

@media only screen and (max-width: 768px) {
/*/////////////////////////////////
BREAKPOINT B
/////////////////////////////////*/

/*/////////////////////////////////
ABOUT SECTION
/////////////////////////////////*/
#about-section {
padding-top: 230px;
margin: 0 auto 150px;
}

#studio-header h1 {
font-size: 96px;
line-height: 90px;
margin: 0;
}

#studio-header h1 span {
width: 115px;
}

#intro-wrapper {
margin: 100px 0 0 0;
}

#intro-p1, #intro-p2 {
width: 46.8%;
}

#intro-p2 {
margin: 0 0 0 6.4%;
}

#studio-vision {
display: flex;
flex-flow: column;
margin: 125px 0 0 0;
}

#vision-header, #logo-mark {
width: auto;
}

#logo-mark {
margin: 120px auto;
}

#description-wrapper {
margin: 0 0 0 0;
}

#content-p1, #content-p2 {
width: 46.8%;
}

#content-p2 {
margin: 0 0 0 6.4%;
}

.studio-partners {
margin: 150px 0 0 0;
display: flex;
flex-flow: column;
}

.list-item {
width: 31%;
}

#studio-past-present, #partner-list {
width: auto;
}

#studio-past-present {
margin: 0;
}

#studio-past-present h2 {
margin: 0;
font-size: 42px;
}

#studio-past-present h2:first-child {
margin-top: 0;
}

#partner-list {
display: inline;
margin: 75px 0 0 0;
}

#partner-list li:nth-child(even) {
margin: 0;
}

#partner-list li:nth-child(odd) {
margin-right: 4%;
}

/*/////////////////////////////////
DREAM PROJECTS SECTION
/////////////////////////////////*/
/*#dream-projects-section {
width: 113.636364%;
left: -6.818182%;
}

#dream-projects-section  #projects-wrapper {
width: 88%;
}*/

#project-body-left {
margin: 150px 0 0 0;
}

#project-body-left h1 {
margin-top: 100px;
font-size: 75px;
line-height: 75px;
}

#project-body-left p {
margin: 75px 20% 0 0;
}

#project-body-right {
margin: 180px 0 150px;
}

.grid-item {
width: 34.2%;
}

.grid-item::after {
padding-bottom: 150%;
}

.grid-item:nth-child(odd) {
margin: 0 0 250px 0;
}

.grid-item:nth-child(even) {
margin: 0 0 250px 18%;
}

.content h2 {
font-size: 22px;
margin: 30px 0 20px 0;
}

.content a {
font-size: 22px;
padding: 67.5% 0;
}

/*/////////////////////////////////
TEAM SECTION
/////////////////////////////////*/
#team-left {
margin: 150px 0 0 0;
}

#team-right {
margin-top: 180px;
}

#team-left h1 {
margin-top: 100px;
font-size: 75px;
line-height: 75px;
}

#team-right .grid-item {
margin: 200px 0 0 18%;
width: 34.4%;
}

#team-right .grid-item:nth-child(odd) {
margin: 200px 0 0;
}

#team-right .grid-item:nth-child(-n+2) {
margin-top: 0;
}

#team-right a.grid-item h2 {
font-size: 22px;
margin: 45% 0 15% 0;
}

#camp-container::after {
padding-bottom: 120%;
}

#ca {
width: 31.8%;
left: -0.2%;
background-position: 40% 50%;
}

#rally-camp-title {
font-size: 22px;
width: 31.2%;
right: 0;
}

#camp-dash {
left: 15.2%;
background-position: 40% 50%;
}

#mp {
width: 34.3%;
left: 68.6%;
background-position: 70% 50%;
}

#camp-info {
margin: 100px 0 180px 0;
}

#camp-info p {
width: 48.4%;
}

.date {
margin: 0;
}

.camp {
display: flex;
flex-flow: column;
margin: 0 0 75px 0;
}

.date, #camp-section .photos {
width: auto;
}

.date h1 {
margin: 0 0 25px 0;
}

#camp-section .photos {
margin-top: 50px;
}

#camp-section .photo-card {
width: calc(50% - 12.5px);
}

#camp-section .photo-card:nth-child(odd) {
margin-right: 12.5px;
}

#camp-section .photo-card:nth-child(even) {
margin-left: 12.5px;
}
}

@media only screen and (max-width: 580px) {

/*/////////////////////////////////
BREAKPOINT A
/////////////////////////////////*/

/*/////////////////////////////////
ABOUT SECTION
/////////////////////////////////*/
#about-section {
padding-top: 200px;
margin: 0 auto 150px;
}

#studio-header p {
display: block;
}

#intro-wrapper {
display: none;
}

#vision-header p {
max-width: 325px;
}

#description-wrapper {
display: block;
}

#content-p1, #content-p2 {
width: 100%;
max-width: 325px;
}

#content-p2 {
margin: 20px 0 0 0;
}

#studio-header h1 {
font-size: 92px;
}

#vision-header h2 {
font-size: 40px;
}

#studio-past-present h2 {
font-size: 40px;
}

#partner-list li:nth-child(odd) {
margin-right: 0%;
}

.list-item {
width: 50%;
}

.list-item:nth-child(even) {
width: 45%;
}

#partner-list li:nth-child(even) {
margin-left: 5%;
}

/*/////////////////////////////////
DREAM PROJECTS SECTION
/////////////////////////////////*/
/*#dream-projects-section {
width: 133.333333%;
left: -16.6666665%;
}

#dream-projects-section  #projects-wrapper {
width: 75%;
}*/

#project-body-left p {
width: auto;
max-width: 325px;
margin: 75px 0 0 0;
}

#project-body-right {
margin: 100px 0 80px;
}

.grid-item {
width: 100%;
max-width: 325px;
}

.grid-item .content {
position: relative;
}

.grid-item::after {
padding-bottom: 0;
}

.grid-item:nth-child(odd), .grid-item:nth-child(even), .grid-item:nth-last-child(-n+2) {
margin: 0 0 100px 0;
}

.content a {
padding: 45% 0;
}

/*/////////////////////////////////
TEAM SECTION
/////////////////////////////////*/
#team-left {
margin: 150px 0 0 0;
}

#team-left p {
width: auto;
margin: 75px 0 35px 0;
max-width: 325px;
}

#team-right {
margin-top: 100px;
}

#team-right .grid-item:nth-child(odd), #team-right .grid-item:nth-child(even) {
margin: 0 0 100px;
width: 100%;
max-width: 325px;
}

#team-right .grid-item a {
padding: 45% 0;
}

#team-right div.grid-item .content {
position: relative;
}

#team-right a.grid-item .content {
position: absolute;
font-size: 16px;
}

#team-right .grid-item::after {
padding-bottom: 100%;
}

#team-right div.grid-item::after {
padding-bottom: 0;
}

#team-right a.grid-item h2 {
margin: 30% 0 15% 0;
}

/*/////////////////////////////////
CAMP SECTION
/////////////////////////////////*/
#camp-container::after {
padding-bottom: 250%;
}

#ca {
width: 48.6%;
}

#rally-camp-title {
width: 48.148093%;
font-size: 24px;
}

#camp-dash {
left: 23.5%;
height: 21.5%;
top: 48%;
width: 1.0667%;
}

#mp {
width: 52.8%;
top: 50%;
right: -4.2%;
left: auto;
}

#camp-info {
margin: 50px 0 120px 0;
}

#camp-info p {
width: auto;
}

.date h1 {
font-size: 40px;
}

#camp-section .photo-card {
width: 48.1481%;
}

#camp-section .photo-card:nth-child(odd) {
margin-right: 0;
}

#camp-section .photo-card:nth-child(even) {
margin-left: 3.7037%;
}

.photos h4 {
font-size: 18px
}
}

@media only screen and (max-width: 400px) {
/*/////////////////////////////////
BREAKPOINT A - small
/////////////////////////////////*/

}

@media (pointer: coarse) {

#ca, #mp {
background-image: none;
}

#ca::after, #mp::after {
display: none;
}

.clip-paths-svg {
display: none;
}

.no-svg-placeholder {
display: block;
}

#camp-dash {
background-attachment: inherit;
background-size: auto;
}

}
.studio-page .transitioning {
transition: opacity 0.75s, transform 0.75s;
}
.studio-page .transition-in {

}
.studio-page .transition-out {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
}
/*/////////////////////////////////
Form Section
/////////////////////////////////*/
#form-section {
width: 100%;
max-width: 1480px;
margin: 275px auto 0;
overflow: hidden;
display: block;
opacity: 1;
transition: opacity 0.5s;
}

#form-section.hidden {
opacity: 0;
}

#hello {
margin-left: 8.4459%;
}

#form-section h1 {
font-size: 150px;
color: #1b1b1b;
line-height: 150px;
margin-bottom: 145px;
}

#form-section h1 span {
display: inline-block;
width: 215px;
height: 4px;
background-color: #1b1b1b;
opacity: 0.3;
vertical-align: middle;
margin: 0 0 0 75px;
transform-origin: 0;
transform: scaleX(0);
transition: transform 1s 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#form-section h1.animate span {
transform: scaleX(1);
}

#form {
max-width: 500px;
margin: 0 0 135px 33.7838%;
overflow: hidden;
font-size: 20px;
opacity: 1;
transition: opacity 0.25s 0.5s;
}

#form h4 {
float: left;
margin: 0;
font-weight: 300;
padding: 0 5px 0 0;
user-select: none;
}

#form > div {
margin: 0 0 15px;
}

#form textarea {
display: block;
font-family: "Chronicle Deck A", "Chronicle Deck B", Georgia;
width: 100%;
border: none;
resize: none;
height: 100px;
font-style: normal;
font-weight: 700;
font-size: 20px;
padding: 8px 0 0 0;
-webkit-appearance: none;
-webkit-border-radius: 0;
color: #1b1b1b;
transition: border-color 0.35s;
background: transparent;
}

#form input {
font-family: "Chronicle Deck A", "Chronicle Deck B", Georgia;
border: none;
width: 100%;
padding: 0;
font-style: normal;
font-weight: 700;
font-size: 20px;
-webkit-appearance: none;
-webkit-border-radius: 0;
color: #1b1b1b;
transition: border-color 0.35s;
background: transparent;
}

#form select {
font-family: "Chronicle Deck A", "Chronicle Deck B", Georgia;
width: 100%;
border: none;
border-bottom: 1px solid rgba(33, 33, 33, 0.3);
border-radius: 0;
background-color: transparent;
font-style: normal;
font-weight: 700;
font-size: 20px;
-webkit-appearance: none;
-webkit-border-radius: 0;
background: url("../images/arrow.svg") no-repeat right+10px center/14px 9px;
cursor: pointer;
color: #1b1b1b;
}

#form span {
display: block;
overflow: hidden;
position: relative;
}

#form .border {
padding: 0 0 2px 0;
}

#form .border:before {
position: absolute;
left: 0;
content: '';
height: 1px;
width: 100%;
bottom: 0;
display: block;
border-bottom: solid 1px rgba(33, 33, 33, 0.3);
}

#form .border:after {
position: absolute;
left: 0;
content: '';
height: 1px;
width: 100%;
bottom: 0;
display: block;
border-bottom: solid 2px #1b1b1b;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.7s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#form .border.animate:after {
transform: scaleX(1);
}

#name, #company, #description, #budget, #timeframe, #email, #ps {
opacity: 0;
transform: translateY(1200px) scale(0.6);
transition: transform 1.2s 0.1s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1.2s 0.1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#name.animate, #company.animate, #description.animate, #budget.animate, #timeframe.animate, #email.animate, #ps.animate {
opacity: 1;
transform: translateY(0) scale(1);
}

#submit {
position: relative;
display: inline-block;
margin: 0 0 0 16.8919%;
}

#submit.disabled {
pointer-events: none;
cursor: default;
}

#submit h2 {
font-size: 56px;
color: #1b1b1b;
display: inline-block;
vertical-align: top;
margin: 10px 0 0 0;
opacity: 0.25;
transition: opacity 0.35s;
}

#submit > span {
position: absolute;
width: 200px;
height: 4px;
background-color: #1b1b1b;
top: 50%;
transform: translateX(-130px) scaleX(0.7);
transform-origin: 0 50%;
transition: transform 1.25s cubic-bezier(0.190, 1.000, 0.220, 1.000);
z-index: 10;
}

#submit #arrow {
position: absolute;
display: inline-block;
left: 150px;
height: 91px;
width: 200px;
}

#submit #arrow #point {
position: absolute;
width: 14px;
height: 14px;
right: 10px;
top: 111.5%;
transform: rotate(45deg) translate(-160px, 160px);
border: 4px solid #1b1b1b;
border-left: none;
border-bottom: none;
opacity: 0;
transition: transform 1.25s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.55s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#submit #circle {
display: inline-block;
position: relative;
overflow: hidden;
left: 185px;
margin: 5px 0 0 0;
width: 86px;
height: 86px;
}

#halfclip {
width: 50%;
height: 100%;
right: 0;
position: absolute;
overflow: hidden;
transform-origin: left center;
}

.halfcircle {
box-sizing: border-box;
height: 100%;
right: 0;
position: absolute;
border: solid 4px transparent;
border-top-color: rgba(255, 110, 99, 0.3);
border-left-color: rgba(255, 110, 99, 0.3);
border-radius: 50%;
transition: border-color 0.35s;
}

#clipped {
width: 200%;
transform: rotate(-45deg);
}

#fixed {
width: 100%;
transform: rotate(135deg);
opacity: 0;
}

#submit.active {
cursor: pointer;
pointer-events: auto;
}

#submit.active h2 {
opacity: 1;
}

#submit.active > span {
transform: translateX(32px) scaleX(1);
transition: transform 1.25s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#submit.active #arrow #point {
transform: rotate(45deg) translate(0, 0);
opacity: 1;
transition: transform 1.25s cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 0.4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#submit.active #circle #halfclip {
animation: cliprotate 0.5s 1 normal;
transform: rotate(180deg);
}

#submit.active #circle #clipped {
transform: rotate(135deg);
animation: rotate 0.25s linear 2 normal;
}

#submit.active #circle #fixed {
animation: showfixed 0.5s 1 normal;
opacity: 1;
}

#submit.active:hover > span {
transform: translateX(72px) scaleX(0.8);
}

#submit.active:hover .halfcircle {
border-top-color: rgba(255, 110, 99, 1);
border-left-color: rgba(255, 110, 99, 1);
}

input:focus, textarea:focus, select:focus {
outline: none;
}

.error::-webkit-input-placeholder {
color: #ff6e63;
}
.error::-moz-placeholder {
color: #ff6e63;
}
.error:-ms-input-placeholder {
color: #ff6e63;
}
.error:-moz-placeholder {
color: #ff6e63;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(27, 27, 27, 0.5);
font-size: 20px;
font-weight: 100;
transition: color 0.2s;
}
::-moz-placeholder { /* Firefox 19+ */
color: rgba(27, 27, 27, 0.5);
font-size: 20px;
font-weight: 100;
transition: color 0.2s;
}
:-ms-input-placeholder { /* IE 10+ */
color: rgba(27, 27, 27, 0.5);
font-size: 20px;
font-weight: 100;
transition: color 0.2s;
}
:-moz-placeholder { /* Firefox 18- */
color: rgba(27, 27, 27, 0.5);
font-size: 20px;
font-weight: 100;
transition: color 0.2s;
}

/*/////////////////////////////////
Success Message
/////////////////////////////////*/
#success {
position: absolute;
max-width: 530px;
width: 100%;
overflow: hidden;
display: block;
margin: 0 auto 0;
top: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
z-index: -10;
transition: opacity 0.5s 0.2s;
}
#success h1 {
font-size: 155px;
color: #1b1b1b;
line-height: 155px;
margin: 0 0 55px 0;
}
#success h1 span {
position: relative;
display: inline-block;
width: 105px;
height: 105px;
margin: 0 0 0 25px;
transform: scale(0);
transform-origin: 50% 50%;
transition: transform 0.35s 0.7s;
}
#success h1 span svg {
position: absolute;
top: 0;
}
#success p {
font-size: 20px;
color: #1b1b1b;
width: 45%;
line-height: 32px;
margin: 0 0 0 15px;
opacity: 0;
transform: translateY(250px);
transition: transform 0.75s 0.6s, opacity 0.75s 0.6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

#success.visible {
display: block;
opacity: 1;
z-index: 10;
}
#success.visible span {
transform: scale(1);
}
#success.visible p {
opacity: 1;
transform: translateY(0);
}
/*/////////////////////////////////
Error Message
/////////////////////////////////*/
#error {
max-width: 750px;
margin: 300px auto 0;
overflow: hidden;
display: none;
opacity: 1;
}
#error h1 {
font-size: 200px;
color: #1b1b1b;
line-height: 175px;
margin-bottom: 55px;
}
#error h1 span {
display: inline-block;
width: 215px;
height: 4px;
background-color: #ff6e63;
vertical-align: middle;
margin: 0 0 0 75px;
transform-origin: 0;
transform: scaleX(1);
transition: transform 0.75s 0.25s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#error p {
font-size: 20px;
font-weight: 300;
color: #1b1b1b;
line-height: 32px;
margin: 0 0 0 10px;
}
#error p a {
text-decoration: none;
color: #ff6e63;
}

/*////////////////////////////
Animations
////////////////////////////*/
.word {
white-space: nowrap;
}

@keyframes rotate {
0% {transform: rotate(-45deg);}
100% {transform: rotate(135deg);}
}
@keyframes showfixed {
0% {opacity: 0;}
49.99% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}
@keyframes cliprotate {
0% {transform: rotate(0deg);}
50% {transform: rotate(0deg);}
50.01% {transform: rotate(180deg);}
100% {transform: rotate(180deg);}
}
@media
not screen and (-webkit-min-device-pixel-ratio: 2),
not screen and (   min--moz-device-pixel-ratio: 2),
not screen and (     -o-min-device-pixel-ratio: 2/1),
not screen and (        min-device-pixel-ratio: 2),
not screen and (                min-resolution: 192dpi),
not screen and (                min-resolution: 2dppx) {

body {
/* -webkit-font-smoothing: antialiased; */
}

}

/*/////////////////////////////////
MEDIA QUERIES
/////////////////////////////////*/

@media only screen and (min-width: 1600px) {

/*/////////////////////////////////
BREAKPOINT D - beyond max
/////////////////////////////////*/

}

@media only screen and (max-width: 1280px) {

/*/////////////////////////////////
BREAKPOINT C
/////////////////////////////////*/
#form-section {
margin: 275px auto 0;
}

#hello {
margin-left: 11.375%;
}

#form {
margin: 0 0 135px 22.75%;
}

#submit {
margin: 0 0 0 11.375%;
}

/*/////////////////////////////////
Success Message
/////////////////////////////////*/

#success {
max-width: 465px;
}

#success h1 {
font-size: 140px;
line-height: 140px;
}

#success p {
width: 65%;
}
}

@media screen and (max-width : 1024px) {
/*/////////////////////////////////
Form Section
/////////////////////////////////*/
#form-section h1 span {
display: block;
margin: 45px 0 0 5px;
}

/*/////////////////////////////////
Error Message
/////////////////////////////////*/
#error h1 span {
display: block;
margin: 45px 0 0 10px;
}
#error h1 {
margin: 0 0 75px 60px;
}
#error p  {
margin: 0 0 0 70px;
}
}

@media screen and (max-width: 768px) {
/*/////////////////////////////////
Form Section
/////////////////////////////////*/
#form-section {
margin: 200px auto 100px;
}
#form-section h1 {
font-size: 96px;
line-height: 90px;
margin: 0 0 125px 0;
}
#form-section h1 span {
width: 115px;
}
#form {
font-size: 16px;
margin: 0 0 55px 0;
max-width: 100%;
}
#form > div {
margin: 0 0 35px;
}
#form textarea, #form input, #form select {
font-size: 16px;
}
#form h4 {
float: none;
margin: 0 0 5px 0;
}
#form span {
padding: 0;
}
#submit {
margin: 0 0 0 10px;
}
#submit h2 {
font-size: 32px;
margin: 20px 0 0 0;
}
#submit span {
width: 110px;
transform: translateX(-80px) scaleX(0.82);
}
#submit #arrow {
left: 100px;
height: 61px;
width: 100px;
}
#submit #arrow #point {
top: 124%;
right: 6px;
transform: rotate(45deg) translate(-85px, 85px);
}
#submit #circle {
left: 90px;
width: 76px;
height: 76px;
}
#submit.active > span {
transform: translateX(22px) scaleX(1);
}
#submit.active:hover > span {
transform: translateX(45px) scaleX(0.8);
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size: 16px;
}
::-moz-placeholder { /* Firefox 19+ */
font-size: 16px;
}
:-ms-input-placeholder { /* IE 10+ */
font-size: 16px;
}
:-moz-placeholder { /* Firefox 18- */
font-size: 16px;
}
/*/////////////////////////////////
Success Message
/////////////////////////////////*/
#success {
max-width: 305px;
margin: 0 auto 100px;
}
#success h1 {
font-size: 96px;
line-height: 90px;
margin: 0 0 45px 0;
}
#success h1 span {
width: 60px;
height: 60px;
margin: 0;
}
#success p {
width: 100%;
margin: 0 0 0 5px;
font-size: 16px;
}
/*/////////////////////////////////
Error Message
/////////////////////////////////*/
#error {
max-width: 100%;
margin: 230px 35px 100px 35px;
}
#error h1 {
font-size: 96px;
line-height: 96px;
margin: 0 0 45px 0;
}
#error h1 span {
width: 88px;
margin: 45px 0 0 5px;
}
#error p {
margin: 0 0 0 5px;
font-size: 16px;
}
}

@media only screen and (max-width: 580px) {
/*/////////////////////////////////
BREAKPOINT A
/////////////////////////////////*/
#form-section {
margin: 200px auto 150px;
}
}

@media only screen and (max-width: 400px) {

/*/////////////////////////////////
BREAKPOINT A - small
/////////////////////////////////*/

}

@media screen and (max-width: 374px) {
#success {
max-width: 255px;
}
#success h1 {
font-size: 76px;
line-height: 68px;
}
#success p {
font-size: 14px;
line-height: 25px;
}
}
.form-page.transitioning {
transition: opacity 0.75s, transform 0.75s;
}
.form-page.transition-in {
}
.form-page.transition-out {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
}
.listing {
position: relative;
padding-top: 275px;
}

.listing-title {
position: relative;
}

.listing-title h1 {
font-size: 120px;
line-height: 1.025em;
margin: 0 0 75px 8.4459%;
/* size of homepage title (adjusted for full width) * case study text height / homepage text height */
/* 40.87837838% * 299 / 179 */
width: 68.28287722%;
font-weight: 600;
}

.listing-title h2 {
position: absolute;
top: -41px;
margin: 0 0 0 8.4459%;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.031em;
font-family: "Financier Display", Georgia, sans-serif;
-webkit-font-smoothing: antialiased;
}

.listing-title span {
display: block;
margin: 0 0 0 8.4459%;
margin: 0 0 95px 8.4459%;
height: 4px;
width: 15.5405%;
background-color: #ac63ff ;
}

.listing .top-line {
position: relative;
display: flex;
margin-top: 100px;
}

.listing .top-line p {
font-size: 16px;
font-weight: 400;
line-height: 28px;
letter-spacing: 0.25px;
display: inline-block;
width: 23.9865%;
}

.listing .top-line p:first-child {
margin: 0 0 0 33.7839%;
}

.listing .top-line p:last-child {
margin: 0 0 0 1.35135%;
}

.section-list {
margin-top: 250px;
}

.section-title {
display: inline-block;
vertical-align: top;
width: 33.7878%;
margin: 0 0 0 8.4459%;
}

.section-list h2 {
margin: 0 0 24px 0;
font-size: 56px;
}

.section-list h3 {
display: inline-block;
margin: 0;
font-size: 16px;
line-height: 24px;
font-weight: 400;
padding-right: 16px;
}

.section-list ul {
display: inline-block;
vertical-align: top;
margin-left: 15.5405%;
width: 25.3378%;
}

.section-list li {
font-size: 16px;
font-weight: 400;
margin: 0 0 16px 0;
line-height: 24px;
letter-spacing: 0.25px;
padding-left: 5.3333%;
position: relative;
}

.section-list li::before {
content: "";
width: 12px;
height: 22px;
background: url(../images/list-bullet.svg) no-repeat center;
position: absolute;
top: 0;
left: 0;
}

.listing .perks {
position: relative;
font-size: 16px;
line-height: 28px;
margin-top: 240px;
margin-bottom: 165px;
}

.listing .perks h2 {
margin: 0;
margin-left: 42.22973%;
position: absolute;
top: 124px;
font-size: 56px;
line-height: 1em;
}

.listing .perks h2 span {
display: block;
}

.listing .perks h2 span:first-child {
display: none;
}

#svg-pe {
margin-left: 15.540541%;
margin-bottom: 200px;
width: 18.243243%;
height: auto;
fill: #1b1b1b;
}

#svg-rks {
margin-right: 15.3%;
width: 18.8%;
height: auto;
fill: #1b1b1b;
position: absolute;
bottom: 0;
right: 0;
}

.listing .tree-logo {
width: 106px;
position: absolute;
}

.perks .tree-logo {
left: 75.337838%;
top: 180px;
transform: translate(-50%, -50%);
}

.listing .perks-container {
width: 50.67568%;
margin-left: 16.89189%;
display: flex;
}

.listing .perks-container ul {
width: 47.3333%;
margin-right: 2.6667%;
line-height: 26px;
}

.listing .perks-container ul:last-child {
margin-right: 0;
}

.listing .perks-container ul li {
position: relative;
padding-bottom: 16px;
padding-left: 30px;
}

.listing .perks-container ul li::before {
content: "•";
content: var(--emoji, "•");
display: block;
position: absolute;
top: 0;
left: 0;
width: 21px;
text-align: center;
font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
}

.listing .mid-cta {
display: inline-block;
font-size: 16px;
line-height: 28px;
color: #1b1b1b;
letter-spacing: .5px;
margin-left: 16.89189%;
margin-bottom: 240px;
}

.listing .mid-cta a {
display: block;
text-decoration: none;
color: #1b1b1b;
color: var(--accent-color, #1b1b1b);
transition: color 0.25s linear;
}

.listing .mid-cta a:hover {
color: var(--accent-hover-color, #1b1b1b);
}

.listing .mid-cta a .arrow {
display: inline-block;
position: relative;
width: 27px;
height: 28px;
vertical-align: top;
margin-left: 6px;
transition: width 0.25s;
}

.listing .mid-cta a:hover .arrow {
width: 37px;
}

.listing .mid-cta a .arrow::before {
content: "";
display: block;
position: absolute;
top: 13px;
height: 2px;
left: 0;
right: 2px;
background-color: #1b1b1b;
background-color: var(--accent-color, #1b1b1b);
transition: background-color 0.25s linear;
}

.listing .mid-cta a:hover .arrow::before {
background-color: var(--accent-hover-color, #1b1b1b);
}

.listing .mid-cta a .arrow svg {
position: absolute;
top: 6px;
right: 0;
}

.listing .mid-cta a polygon {
transition: fill 0.25s linear;
fill: var(--accent-color, #1b1b1b);
}

.listing .mid-cta a:hover polygon {
fill: var(--accent-hover-color, #1b1b1b);
}

.working-at-rally {
padding-top: 235px;
}

.working-at-rally h2 {
position: relative;
z-index: 2;
font-size: 120px;
margin-top: 0;
margin-left: 8.4459459%;
width: 32.432432%;
}

.working-at-rally h3 {
font-size: 16px;
line-height: 1.5em;
font-weight: 400;
position: absolute;
top: 160px;
left: 8.4459459%;
margin: 0;
}

.working-at-rally .tree-logo {
left: 79.560811%;
top: 300px;
transform: translate(-50%, -50%);
}

.working-at-rally p {
font-size: 16px;
line-height: 28px;
width: 23.986486%;
margin-left: 8.4459459%;
margin-top: 220px;
}

.working-at-rally .photo-slider {
display: none;
}

.working-at-rally .photo-slider + p {
margin-left: 67.567568%;
margin-top: 392px;
}

.working-at-rally .photo-card {
position: absolute;
background: grey;
}

.working-at-rally .photo-wrapper {
position: absolute;
height: 100%;
}

.working-at-rally .photo-card::after {
content: "";
display: block;
}

.working-at-rally .photo-card.landscape::after {
padding-bottom: 58.878505%;
}

.working-at-rally .photo-card.portrait::after {
padding-bottom: 161.363636%;
}

.working-at-rally p + .photo-card {
width: 57.837838%;
top: 1104px;
right: 47.297297%;
z-index: 2;
}

.working-at-rally p + .photo-card + .photo-card {
width: 15.540541%;
top: 836px;
left: 42.22973%;
}

.working-at-rally p + .photo-card + .photo-card + .photo-card {
width: 23.986486%;
top: 721px;
right: 8.4459459%;
}

.working-at-rally p + .photo-card + .photo-card + .photo-card + .photo-card {
width: 31.621622%;
top: 1912px;
left: 79.864865%;
}

.dark .photo-wrapper::before {
background-color: #262626;
}

.emoji {
font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
}

.apply-button {
font-family: "Financier Display";
font-size: 20px;
line-height: 50px;
color: white;
letter-spacing: .5px;
width: 15.540541%;
margin: 240px auto;
display: block;
position: relative;
background-color: #1b1b1b;
background-color: var(--accent-color, #1b1b1b);
transition: background-color 0.25s linear;
}

.apply-button:hover {
background-color: var(--accent-hover-color, #1b1b1b);
}

.apply-button span {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}

.apply-button::after {
content: "";
display: block;
padding-bottom: 100%;
}

@media only screen and (max-width: 1280px) {
.listing-title h2 {
margin-left: 11.371528%;
}

.listing-title h1 {
font-size: 100px;
margin-left: 11.371528%;
}

.listing-title span {
margin-left: 11.371528%;
width: 20.399306%;
}

.listing .top-line p:first-child {
margin-left: 22.743056%;
}

.listing .top-line p:last-child {
margin-left: 2.34375%;
}

.listing .top-line p {
width: 31.770833%;
}

.section-title {
margin-left: 11.371528%;
width: 34.114583%;
}

.section-list ul {
margin-left: 9.0277778%;
width: 34.114583%;
}

.section-list li {
padding-left: 6.870229%;
}

#svg-pe {
margin-left: 11.371528%;
width: 20.399306%;
}

#svg-rks {
margin-right: 11.1%;
width: 20.899306%;
}

.listing .perks h2 {
margin-left: 45.486111%;
}

.perks .tree-logo {
left: 78.472222%;
top: 180px;
}

.listing .perks-container {
margin-left: 11.371528%;
width: 43.142361%;
}

.listing .perks-container ul {
width: 47.283702%;
margin-right: 5.4325956%;
}

.listing .mid-cta {
margin-left: 11.371528%;
}

.working-at-rally h2 {
margin-left: 11.371528%;
width: 43.142361%;
}

.working-at-rally h3 {
left: 11.371528%;
}

.working-at-rally .tree-logo {
left: 84.114583%;
}

.working-at-rally p {
margin-left: 11.371528%;
width: 31.770833%;
}

.working-at-rally .photo-slider + p {
margin-left: 68.229167%;
margin-top: 420px;
}

.working-at-rally p + .photo-card {
right: 43.142361%;
width: 75%;
}

.working-at-rally p + .photo-card + .photo-card {
left: 54.513889%;
width: 20.399306%;
}

.working-at-rally p + .photo-card + .photo-card + .photo-card {
right: auto;
left: 79.600694%;
width: 31%;
}

.working-at-rally p + .photo-card + .photo-card + .photo-card + .photo-card {
display: none;
}

.apply-button {
width: 18%;
}
}

@media only screen and (max-width: 1024px) {
.section-list ul {
margin-top: 84px;
}

.working-at-rally h2 {
width: 55%;
}

.apply-button {
width: 21.6%;
}
}

@media only screen and (max-width: 768px) {
.listing-title h2 {
margin-left: 0;
}

.listing-title h1 {
margin-left: 0;
font-size: 92px;
}

.listing-title span {
margin-left: 0;
width: 31.2%;
}

.listing .top-line p:first-child {
margin-left: 0;
}

.listing .top-line p:last-child {
margin-left: 3.2%;
}

.listing .top-line p {
width: 48.4%;
}

.section-title {
margin-left: 0;
width: 48.4%;
}

.section-title h2 {
font-size: 42px;
}

.section-list {
margin-top: 200px;
}

.section-list ul {
margin-left: 0;
margin-top: 0;
width: 51.6%;
}

.section-list li {
padding-left: 6.2015504%;
}

.listing .perks {
margin-top: 208px;
margin-bottom: 150px;
}

#svg-pe {
margin-left: -17.2%;
width: 48.4%;
margin-bottom: 104px;
}

#svg-rks {
margin-right: -17.2%;
width: 48.4%;
}

.listing .perks h2 {
margin-left: 41.4%;
top: 128px;
font-size: 42px;
}

.perks .tree-logo {
left: auto;
right: 0;
top: 170px;
transform: translateY(-50%);
}

.listing .perks-container {
margin-left: 0;
width: 65.6%;
}

.listing .perks-container ul {
width: 47.560976%;
margin-right: 4.8780488%;
}

.listing .mid-cta {
margin-left: 0;
margin-bottom: 222px;
}

.working-at-rally h2 {
margin-left: 0;
width: 72%;
}

.working-at-rally h3 {
left: 0;
}

.working-at-rally .tree-logo {
left: auto;
right: 0;
transform: translateY(-50%);
}

.working-at-rally p {
margin-left: 0;
width: 48.4%;
}

.working-at-rally .photo-slider + p {
margin-left: 51.6%;
margin-top: 385px;
width: 48.4%;
}

.working-at-rally p + .photo-card {
width: 90%;
right: 65.6%;
}

.working-at-rally p + .photo-card + .photo-card {
width: 34.4%;
left: 58.6%;
}

.working-at-rally p + .photo-card + .photo-card + .photo-card {
display: none;
}

.apply-button {
width: 31.2%;
margin: 172px auto 257px;
}
}

@media only screen and (max-width: 660px) {
.section-list ul {
margin-top: 70px;
}
}

@media only screen and (max-width: 580px) {
.listing {
padding-top: 240px;
}

.listing-title h1 {
font-size: 54px;
width: 100%;
margin-bottom: 36px;
}

.listing-title span {
margin-bottom: 0;
}

.listing .top-line {
display: block;
margin-top: 55px;
}

.listing .top-line p {
width: 100%;
}

.listing .top-line p:last-child {
margin-left: 0;
margin-top: 16px;
}

.section-list {
margin-top: 100px;
}

.section-title {
width: 100%;
}

.section-list ul {
width: 100%;
margin-top: 24px;
}

.listing .perks {
margin-top: 100px;
margin-bottom: 42px;
}

#svg-pe {
margin-bottom: 64px;
}

#svg-rks {
bottom: auto;
top: 234px;
}

.listing .perks h2 {
top: 60px;
margin-left: 41.4%;
}

.listing .tree-logo {
width: 30.864198%;
}

.perks .tree-logo {
left: 93.209877%;
top: 102px;
right: auto;
}

.listing .perks-container {
display: block;
}

.listing .perks-container ul {
width: 100%;
margin-right: 0;
}

.listing .mid-cta {
margin-bottom: 102px;
}

.working-at-rally {
padding-top: 164px;
}

.working-at-rally h2 {
width: 100%;
/* font-size: 92px; */
font-size: 68px;
margin-bottom: 0;
}

.working-at-rally h3 {
top: 95px;
}

.working-at-rally .tree-logo {
left: 93.209877%;
top: 242px;
}

.working-at-rally p {
width: 100%;
margin-top: 32px;
}

.working-at-rally .photo-slider {
display: block;
position: relative;
margin: 52px 0 32px;
white-space: nowrap;
}

.working-at-rally .photo-slider::before {
content: "";
display: block;
position: relative;
width: 100%;
padding-bottom: 130.960854%;
}

.working-at-rally .polaroids-wrapper {
position: absolute;
height: 100%;
width: 100%;
top: 0;
}

.polaroids-wrapper .flickity-page-dots {
display: none;
}

.working-at-rally .polaroid {
width: 89.323843%;
position: relative;
display: inline-block;
margin: 10.294118% 5.3380783% 0;
}

.working-at-rally .polaroid::before {
content: "";
position: absolute;
display: block;
width: 148.605578%;
height: 162.549801%;
left: -24.302789%;
top: -13.944223%;
background: url('../images/polaroid.png') no-repeat center;
background-size: contain;
}

.working-at-rally .polaroid::after {
content: "";
position: relative;
display: block;
padding-bottom: 100%;
}

.working-at-rally .polaroid img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}

.working-at-rally .photo-slider + p {
width: 100%;
margin-left: 0;
margin-top: 0;
}

.working-at-rally .photo-card {
display: none;
}

.apply-button {
width: 65.4320988%;
margin: 80px auto;
}
}
.listing.transitioning {
transition: opacity 0.75s, transform 0.75s;
}
.listing.transition-in {

}
.listing.transition-out {
/*opacity: 0;*/
transform: translate3d(0, 100vh, 0);
}

.listing .listing-title h2 {
transition: opacity 0.75s linear 0.7s,
transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.7s;
opacity: 1;
}

.listing.transition-in .listing-title h2 {
transition: none;
opacity: 0;
transform: translate3d(0, 20px, 0);
}

.listing .listing-title span {
transition: opacity 0.75s linear 0.85s,
transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.85s;
opacity: 1;
transform-origin: center left;
}

.listing.transition-in .listing-title span {
transition: none;
opacity: 0;
transform: translate3d(0, 20px, 0) scaleX(0);
}

.listing .top-line p:first-child {
transition: opacity 0.75s linear 1.0s,
transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1.0s;
opacity: 1;
}

.listing.transition-in .top-line p:first-child {
transition: none;
opacity: 0;
transform: translate3d(0, 20px, 0);
}

.listing .top-line p:last-child {
transition: opacity 0.75s linear 1.15s,
transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1.15s;
opacity: 1;
}

.listing.transition-in .top-line p:last-child {
transition: none;
opacity: 0;
transform: translate3d(0, 20px, 0);
}

.listing .section-list {
transition: opacity 0.75s linear 1.30s,
transform 0.75s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1.30s;
opacity: 1;
}

.listing.transition-in .section-list {
transition: none;
opacity: 0;
transform: translate3d(0, 20px, 0);
}
/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.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%}.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:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}