.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}html, body {
font-family: "Public Sans", sans-serif;
font-weight: 100;
font-size: 24px;
line-height: 140%;
margin: 0;
padding: 0;
color: #1A1B1B;
background: #F8D810;
}
a {
color: #fff;
text-decoration: none;
transition-property: all;
transition-duration: 0.5s;
}
img {
display: block;
object-fit: cover;
width: 100%;
object-position: top center;
}
h1, h2, h3, h4, h5 {
font-family: "Special Gothic Expanded One", sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
p {
margin: 0 0 30px;
line-height: 140%;
}
nav {
position: fixed;
background: #1A1B1B;
padding: 40px 30px;
display: flex;
justify-content: space-between;
bottom: 0;
width: 100%;
box-sizing: border-box;
z-index: 1000;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
nav ul a {
display: block;
margin: 0 0 0 30px;
color: #E0E5E5;
font-family: "Special Gothic Expanded One", sans-serif;
text-transform: uppercase;
}
nav:first-of-type ul a {
margin: 0 30px 0 0;
}
nav ul a:hover {
color: #F8D810;
}
iframe {
display: block;
width: 100%;
height: 65vh;
border: 0;
}
input[type="submit"] {
font-family: "Special Gothic Expanded One", sans-serif;
background: none;
border: none;
text-transform: uppercase;
padding: 0;
font-size: 24px;
width: 100%;
margin: 30px auto 0;
cursor: pointer !important;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
font-family:  'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: none;
font-size: 16px;
box-sizing: border-box;
padding: 15px 20px;
border: 1px solid #1A1B1B;
user-select: text;
border-radius: 10px;
width: 100%;
margin: 0;
}
textarea {
height: 320px;
}
::placeholder {
color: #1A1B1B;
} #intro {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3vh 1vw;
height: 90vh;
box-sizing: border-box;
margin: 0 0 700px;
}
#intro div {
position: relative;
overflow: hidden;
flex: 1;
margin: 3vh 0;
box-sizing: border-box;
animation: revealDown 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
background: #000;
}
@keyframes revealDown {
from {
clip-path: inset(-0.15em 0 100% 0);
opacity: 0;
}
to {
clip-path: inset(-0.15em 0 -0.15em 0);
opacity: 1;
}
}
#intro div iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: 177.78vh;
min-height: 56.25vw;
transform: translate(-50%, -50%) scale(1.1);
border: 0;
opacity: 0;
transition: opacity 1.2s ease;
}
#intro h2:last-child {
align-self: flex-end;
}
@media only screen and (max-height: 900px) {
#intro {
height: 85vh;
}
}
.animate-on-load {
animation: revealDown 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.animate-on-scroll {
clip-path: inset(-0.15em 0 100% 0);
transition: clip-path 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.visible {
clip-path: inset(-0.15em 0 -0.15em 0);
}
#overlay {
position: fixed;
inset: 0;
background: #1A1B1B;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
z-index: 100;
}
#overlay.visible {
opacity: 1;
}
#specialty {
position: relative;
z-index: 200; 
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100vh;
color: #E0E5E5;
text-align: center;
box-sizing: border-box;
} 
#specialty #ticker {
border: 1px solid #F8D810;
border-radius: 10px;
text-transform: uppercase;
margin: 30px auto;
font-size: 36px;
overflow: hidden;
height: 1.2em;
padding: 30px 50px;
box-sizing: content-box;
}
#ticker {
border: 1px solid #F8D810;
border-radius: 10px;
text-transform: uppercase;
text-align: center;
margin: 30px auto;
font-size: 36px;
overflow: hidden;
height: 1.2em;
padding: 30px 50px;
box-sizing: border-box;
}
#ticker-inner {
position: relative;
}
#ticker-inner .sizer {
visibility: hidden;
white-space: nowrap;
display: block;
height: 0;
overflow: hidden;
}
#ticker-inner span:not(.sizer) {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
white-space: nowrap;
opacity: 0;
clip-path: inset(-0.15em 0 100% 0);
transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#ticker-inner span.active {
opacity: 1;
clip-path: inset(-0.15em 0 -0.15em 0);
}
#horizontal-wrapper {
height: 600vh; }
#horizontal-scroll {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
background: #1A1B1B;
z-index: 300;
}
#horizontal-track {
display: flex;
height: 100%;
will-change: transform;
}
.panel {
min-width: 100vw;
height: 100%;
box-sizing: border-box;
}
#services {
display: flex;
align-items: center;
justify-content: space-between;
color: #E0E5E5;
padding: 60px 120px 60px 60px;
width: 70vw;
}
#services div {
font-size: 36px;
width: 50%;
padding: 0 100px 0 0;
line-height: 140%;
}
#services ul {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 80px;
}
.scroll-horizontal {
transform: translateX(100vw);
animation: slideIn linear;
animation-timeline: view();
animation-range: entry 0% entry 50%;
}
@keyframes slideIn {
from { transform: translateX(100vw); }
to { transform: translateX(0); }
}
#about {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
color: #E0E5E5;
width: 100vw;
}
#about-container {
margin: 0 0 0 10%;
}
#about-intro {
width: 60%;
font-size: 24px;
margin: 0 0 30px;
}
#role-container {
width: 80%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
#role-container img {
height: 50vh;
margin: 0 0 20px;
}
#role-container h3 {
font-size: 16px;
color: #F8D810;
}
#role-container span {
font-size: 14px;
}
#work {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 200px 0;
background: #E0E5E5;
z-index: 400;
}
#work h2 {
text-align: center;
margin: 0 auto 40px;
}
#thumbnail-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
#thumbnail-container a {
display: inline-block;
margin: 0 0 30px;
width: 49%;
color: #1A1B1B;
font-size: 16px;
transition: all 1.2s ease;
}
#thumbnail-container a:hover {
scale: 1.01;
}
#thumbnail-container a img {
border-radius: 10px;
margin: 0 0 20px;
}
#connect {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 200px 0 300px;
background: #F8D810;
z-index: 500;
}
#connect-container {
width: 40%;
margin: 0 auto;
text-align: center;
}
#connect-container h2 {
margin: 0 auto 30px;
}
#connect-container p {
margin: 0;
} #video-modal iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video-modal > div {
position: relative;
width: 80%;
max-width: 900px;
aspect-ratio: 16/9;
} @media only screen and (max-width: 1200px) {
nav {
display: none;
}
#intro {
padding: 3vh 2vw;
margin: 0 0 300px;
height: 90vh;
}
#specialty {
height: auto;
margin: 0 auto 200px;
}
#horizontal-scroll {
position: relative;
height: auto;
}
#horizontal-track {
height: auto;
flex-direction: column;
transform: none !important;
}
.panel {
min-width: 0;
height: auto;
}
#services {
flex-direction: column;
padding: 0 60px 80px;
width: 100%;
text-align: center;
}
#services div {
width: 80%;
padding: 0 0 60px;
}
#about-container {
margin: 0;
padding: 0 60px 120px;
text-align: center;
}
#about-intro {
width: 80%;
margin: 0 auto 30px;
}
#role-container {
width: 100%;
}
#work {
padding: 100px 0;
}
#connect {
padding: 100px 0;
}
#connect-container {
width: 70%;
}
}
@media only screen and (max-width: 800px) {
h1, h2 {
font-size: 24px;
}
#intro {
padding: 40px 2vw;
margin: 0 0 300px;
height: 95vh;
}
#intro div {
margin: 10px 0;
}
#intro {
margin: 0 0 200px;
height: 95vh;
}
#specialty {
margin: 0 auto 100px;
}
#specialty #ticker {
font-size: 16px;
padding: 5px 20px 20px;
}
#services {
padding: 0 20px 60px;
}
#services div {
font-size: 28px;
width: 100%;
padding: 0 0 50px;
}
#services ul {
columns: 1;
}
#about-container {
margin: 0;
padding: 0 20px 80px;
text-align: center;
}
#about-intro {
width: 100%;
margin: 0 auto 30px;
}
#role-container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
#role-container img {
height: 30vh;
}
#thumbnail-container {
width: 80%;
text-align: center;
}
#thumbnail-container a {
width: 100%;
}
#work {
padding: 80px 0 60px;
}
#connect {
padding: 100px 0 60px;
}
#connect-container {
width: 90%;
}
}