html {
scroll-behavior: smooth;
background: #070707;
font-family: 'Slabo 13px', serif;
color: #949494;
font-size: 18px;
}
body {
margin: 0;
}
body {
--sb-track-color: #151515;
--sb-thumb-color: #ff9736;
--sb-size: 13px;
scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
}
body::-webkit-scrollbar {
width: var(--sb-size) 
}
body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 13px;
}
body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 13px;
}
.m-by {
display: none !important;
} h1, h2, h3, h4, h5 {
font-family: 'Ultra', serif;
color: #fff;
margin: 0;
font-weight: 400;
line-height: 100%;
}
h1 {
font-size: 64px;;
}
h3 {
line-height: 120%;
}
a {
text-decoration: none;
color: #FF9736;
}
img {
border-radius: 30px;
object-fit: cover;
object-position: center;
display: block;
max-width: 100%;
}
ul {
list-style-type: circle;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: #FF9736;
}
a:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #FF9736;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
p {
line-height: 200%;
}
header {
position: fixed;
width: 100%;
box-sizing: border-box;
z-index: 100;
}
#main, footer {
background: #0C0C0C;
font-family: 'Ultra', serif;
padding: 30px 50px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
#main {
border-bottom: 1px solid #151515;
}
header a, footer a {
color: #fff;
}
footer {
border-top: 1px solid #151515;
}
nav {
font-family: 'Slabo 13px', serif;
font-size: 16px;
}
nav a {
margin: 0 0 0 30px;
}
.social-icons {
display: flex;
padding: 20px 50px 0;
justify-content: flex-end;
}
.social-icons a:after, #home-clients #client-container a:after {
background-color: transparent !important;
}
.social-icons img {
width: 24px;
height: auto;
margin: 0 0 0 15px;
}
footer p {
margin: 0;
}
hr {
height: 1px;
border: 0 none;
background-color: #151515;
} .container {
width: 90%;
max-width: 1440px;
margin: 0 auto;
z-index: 50;
}
.animation-container {
position: relative;
}
lottie-player {
top: 0;
position: absolute;
width: 60%;
}
lottie-player.left {
left: 0;
}
lottie-player.right {
right: 0;
}
.first-up {
padding: 100px 0 0;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; height: 0;
margin: 0 auto;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
audio {
width: 80%;
margin: 20px auto 30px;
clear: both;
}
.shadow-container {
background: #0C0C0C;
box-shadow: 0px 0px 50px 50px rgba(0, 0, 0, 0.5);
padding: 100px 0;
text-align: center;
}
#main-title {
font-size: 24px;;
}
#home-hero {
margin: 100px auto 170px;
display: flex;
flex-direction: row;
align-items: center;
}
#home-hero.page-hero {
margin: 100px auto 0 !important;
}
#home-hero.about-page {
align-items: start !important;
}
#home-hero h1 {
font-size: 96px;
}
#home-hero img {
width: 42%;
}
#home-hero span {
font-size: 36px;
font-family: 'Slabo 13px', serif;
color: #949494;
}
#home-hero ul {
display: flex;
flex-wrap: wrap;
padding: 30px 0 20px;
}
#home-hero li {
width: 35%;
margin: 0 0 10px;
}
#home-hero #link-container a {
font-family: 'Ultra', serif;
font-size: 36px;
color: #fff;
margin: 0 0 10px;
}
#home-video {
margin: 0 auto;
}
#home-video h2 {
font-size: 36px;
margin: 0 auto 30px;
}
#home-featured-projects {
padding: 170px 0 0;
}
.featured-project {
width: 55%;
margin: 0 0 120px 15%;
}
.right-col {
margin: 0 0 120px 30%;
}
.featured-project .title-container {
padding: 0 0 0 10%;
}
.featured-project .title-container h3 {
font-family: 'Slabo 13px', serif;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 2px;
margin: 0 0 10px
}
.featured-project .title-container span {
font-family: 'Ultra', serif;
font-size: 42px;
color: #fff;
margin: 0 0 30px;
display: block;
}
.featured-project .project-content {
display: flex;
flex-direction: row;
padding: 50px 0 0 10%;
justify-content: space-between;
}
.featured-project .project-content .primary {
width: 65%;
}
.featured-project .project-content .primary span {
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
}
.featured-project .project-content .additional {
width: 30%;
}
.featured-project .project-content .additional a.client-url {
line-height: 200%;
}
.featured-project .project-content .additional div {
line-height: 200%;
border-top: 1px solid #151515;
padding: 20px 0 0;
margin: 20px 0 0;
}
#home-clients h2 {
font-size: 36px;
margin: 0 auto 50px;
}
#home-clients #client-container {
width: 90%;
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
#home-clients #client-container div {
padding: 30px 30px 0;
}
#home-clients #client-container img {
max-height: 90px;
width: auto;
margin: 10px auto;
}
#home-blog, #home-event {
padding: 170px 0;
}
#home-blog {
border-bottom: 1px solid #151515;
}
#home-blog .inner, #home-event .inner {
width: 80%;
max-width: 800px;
margin: 0 auto;
}
#home-blog .inner span, #home-event .inner span {
text-transform: uppercase;
letter-spacing: 2px;
color: #FF9736;
display: block;
margin: 0 0 30px;
}
#home-blog .inner h3, #home-event .inner h3 {
font-size: 36px;
}
#newsletter {
background: #0C0C0C;
padding: 60px 20px;
text-align: center;
}
#newsletter #newsletter-container {
width: 90%;
max-width: 600px;
margin: 0 auto;
}
input[type="email"], input:-internal-autofill-selected  {
padding: 20px;
background-color: #070707 !important;
border: 1px solid #151515;
font-family: 'Slabo 13px', serif;
width: 90%;
font-size: 16px;
text-align: center;
color: #fff !important;
}
input[type="submit"] {
background: 0 none;
border: 0 none;
color: #fff;
font-size: 24px;
font-family: 'Ultra', serif;
margin: 20px auto 0;
cursor: pointer !important;
}
#mc_embed_signup div.mce_inline_error, #mce-success-response {
background: 0 none !important;
margin: 0 !important;
padding: 20px 0 0 !important;
}
#bio-container {
padding: 30px 60px 0 0;
}
#page-intro {
padding: 200px 40% 100px 15%;
border-bottom: 1px solid #151515;
}
#page-intro h1 {
margin: 0 0 60px;
}
#portfolio-featured-projects {
padding: 150px 0 0;
}
#about, #news {
padding: 200px 0 0;
}
#about h1 {
margin: 0 0 60px 15%;
}
#about .featured-project {
width: 65%;
}
#about .featured-project .project-content {
padding: 50px 0 0;
}
#about-social {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 30px 0 0;
list-style: none;
}
#about-social li {
width: 50%;
margin: 0 0 10px;
}
#news h1 {
width: 80%;
max-width: 800px;
margin: 0 auto;
}
.news-post-container {
padding: 0 0 40px;
margin: 0 0 80px;
border-bottom: 1px solid #151515;
}
.news-roll {
padding: 100px 0 !important;
}
#news-single {
padding: 200px 0 100px;
}
#news-single {
width: 80%;
max-width: 700px;
margin: 0 auto;
}
#news-single h1 {
margin: 0 0 40px;
}
#news-single img {
clear: both;
width: 100%;
margin: 40px auto;
}
#news-single li {
margin: 0 0 20px;
} @media only screen and (max-width: 1440px) {
#home-hero #left-content {
padding: 0 0 0 5%;
}
#home-hero h1 {
font-size: 64px;
}
#home-hero span {
font-size: 24px;
}
lottie-player {
width: 100%;
}
}
@media only screen and (max-width: 1200px) {
#home-hero {
margin: 100px auto;
}
h1, #home-hero h1 {
font-size: 48px;
}
#home-hero span {
font-size: 20px;
}
#home-hero li {
width: 50%;
}
#home-hero #link-container a {
font-size: 24px;
}
.video-container {
max-width: 800px;
}
.featured-project {
width: 65%;
margin: 0 0 120px 10%;
}
.right-col {
margin: 0 0 120px 25%;
}
.featured-project .title-container h3 {
font-size: 18px;
}
h2, .featured-project .title-container span {
font-size: 24px;
}
#home-clients #client-container {
max-width: 700px;
}
#home-blog, #home-event {
padding: 120px 0;
}
#home-blog .inner, #home-event .inner {
max-width: 700px;
margin: 0 auto;
}
#home-video h2, #home-clients h2, #home-blog .inner h3, #home-event .inner h3 {
font-size: 24px;
}
#page-intro {
padding: 200px 10% 100px;
}
#page-intro h1 {
margin: 0 0 40px;
}
#about .featured-project {
width: 80%;
}
#about h1 {
margin: 0 0 60px 10%;
}
#news h1 {
max-width: 700px;
}
.news-roll {
padding: 60px 0 !important;
}
}
@media only screen and (max-width: 1024px) {
.video-container {
max-width: 600px;
}
#about .featured-project .project-content {
flex-direction: column;
}
#about .featured-project .primary, #about .featured-project .additional {
width: 100%;
}
#about .featured-project .primary {
margin: 0 auto 50px;
}
}
@media only screen and (max-width: 820px) {
.social-icons {
display: none !important;
}
#main-title {
font-size: 20px;
}
html {
font-size: 16px;
}
h1, #home-hero h1 {
font-size: 36px;
}
#home-hero span {
font-size: 16px;
}
#home-hero ul {
flex-direction: column;
padding: 20px 0 10px;
}
.shadow-container {
padding: 60px 0;;
}
#home-featured-projects {
padding: 0;
}
.featured-project, .right-col {
width: 80%;
margin: 80px 10%;
}
#home-blog, #home-event {
padding: 80px 0;
}
#portfolio-featured-projects {
padding: 40px 0 0;
}
}
@media only screen and (max-width: 640px) {
#main {
flex-direction: column;
}
#main-title {
margin: 0 auto 20px
}
nav a {
margin: 0 10px;
}
.first-up {
padding: 120px 0 0;
}
#home-hero {
flex-direction: column-reverse;
}
#home-hero {
margin: 60px auto;
}
#home-hero img {
width: 90%;
max-width: 360px;
margin: 0 auto 30px;
}
#home-hero #left-content {
padding: 0 10%;
text-align: center;
}
#home-hero ul {
list-style-type: none;
}
#home-hero li {
width: 100%;
}
.featured-project .title-container h3 {
font-size: 16px;
}
.featured-project .project-content {
flex-direction: column;
padding: 50px 0 0 10%;
}
.featured-project .project-content .primary {
margin: 0 0 30px;
}
.featured-project .project-content .primary, .featured-project .project-content .additional {
width: 100%;
}
.featured-project .project-content .additional div {
line-height: 200%;
border-top: 0 none;
padding: 0;
margin: 0;
}
#home-clients #client-container img {
max-height: 60px;
}
}
@media only screen and (max-width: 480px) {
#main, footer {
padding: 30px 20px;
}
audio {
width: 100%;
}
.featured-project .title-container {
padding: 0;
}
.featured-project .project-content {
flex-direction: column;
padding: 40px 0 0;
}
#page-intro {
padding: 200px 10% 60px;
}
#portfolio-featured-projects {
padding: 0;
}
}