#ff6920@charset "UTF-8";
/* .work .entry-content > div, .page-id-9 .entry-content > div {
width: 100vw;
max-width: 100vw;
margin: 0;
} */
h1, h2, h3, h4, h5, h6, .faux-heading {
letter-spacing: -1px;
}
/*
.work-grid-layout div {
display: flex;
opacity: 1;
height: auto;
outline: none;
flex-wrap: wrap;
} */
.item-title {
color: white;
bottom: 0px;
/* padding: 20px; */
z-index: 3;
}
.work-grid-layout .item-title.item-title-video {padding: 0px;}
.work-grid-layout .item-title {
position: relative;
color: white;
padding: 13px 18px 13px 0px;
}
.work-grid-layout .item-title .project-grid-title-container h3 {
width: 100%;
font-weight: 500;
color: white !important;
letter-spacing: -0.6px;
font-size: calc(3vw + 10px);
border: 1px solid white;
border-radius: 300px;
padding: 10px 18px;
}
.work-grid-layout .item-title .project-description-container {
position: absolute;
right: 15px;
top: 15px;
text-align: right
}
.work-grid-layout .project-client {
margin: 0;
font-size: 19px;
line-height: 1;
font-weight: 400;
color: #7D7D7D !important;
display: none;
}
@media (min-width: 500px) {
.work-grid-layout .project-client {
display: block
}
}
@media (min-width: 700px) {
.work-grid-layout .item-title .project-grid-title-container h3 {
font-size: 2vw
}
.work-grid-layout .project-client {
font-size: 20px;
}
}
.project-title.white,
.project-title.white .project-client {
color: black
}
.project-title.black,
.project-title.black .project-client {
color: black
}
.project-title,
.project-client {
font-weight: 500;
margin: 0;
line-height: 1;
color: #838383
}
.design-and-branding .project-title { font-size: clamp(20px, 5vw, 30px); color: black}
.design-and-branding .project-client { font-size: clamp(14px, 3.3vw, 19px);}
.MaA-project-title {
font-size: clamp(26px, 5.5vw, 70px);
font-weight: 500;
padding-bottom: 8px;
}
.MaA-item-title p {
font-size: clamp(16px, 3.5vw, 20px);
color: #A6A6A6;
font-weight: 300;
}
a.MaA-more-info {
color: white;
padding: 17px 26px;
border: 1px solid #616161;
display: inline-block;
margin-top: 20px;
margin-bottom: 70px;
font-family: 'Archivo', Arial, sans-serif;
font-size: 17px;
font-weight: 400;
transition: 0.4s ease;
}
a.MaA-more-info:hover {
background: #ffffff24;
transition: 0.2s ease
}
.project-title, .project-client {margin-bottom: 5px}
#ftwa {margin-top: -15vw}
#ftwa .item-title {
margin-bottom: -8vw;
display: flex;
flex-direction: column-reverse;
}
#belay.content-item a {
flex-direction: column-reverse;
display: flex;
}
#belay .item-title {
margin-bottom: -20vw;
margin-left: 15vw;
}
#pageturner a {
display: flex;
flex-direction: column-reverse;
}
#pageturner a .item-title {
margin-top: -5vw;
}
#ftwa a {
display: flex;
flex-direction: column-reverse;
}
#wiwh .item-title {
margin-left: 5vw;
margin-top: -7vw;
}
#harry-potter .item-title {
margin-top: -19vw;
transform: translateX(64.5vw);
}
@media(min-width: 440px) {
#ftwa .item-title { margin-bottom: -8vw;}
#pageturner .item-title { margin-bottom: -4vw;}
.project-title, .project-client {margin-bottom: 8px }
#harry-potter .item-title {
margin-top: -20.3vw;
transform: translateX(65vw);
}
}
@media (min-width: 500px) {
#belay .item-title {
margin-bottom: -18vw;
margin-left: 5vw;
}
}
@media (min-width: 768px) {
.project-title { font-size: clamp(20px, 3vw, 30px) }
.project-client { font-size: clamp(16px, 1.6vw, 25px); }
#ftwa .item-title { margin-top: -14vw;}
#ftwa a {
display: flex;
flex-direction: column;
}
#ftwa {margin-bottom: 30vw}
#belay .item-title {
margin-bottom: -19vw;
margin-left: 14vw
}
#wiwh .item-title {
margin-left: 21vw;
margin-top: -7vw;
}
#harry-potter .item-title {
margin-top: -17.5vw;
margin-left: -0.9vw;
transform: translateX(0vw);
}
.project-title, .project-client {margin-bottom: 10px}
.MaA-project-title { font-size: clamp(26px, 3.5vw, 35px); }
.MaA-item-title p { font-size: clamp(16px, 3.5vw, 20px); }
}
@media (min-width: 1100px) {
#belay .item-title {
margin-bottom: -17vw;
margin-left: 15vw;
}
#harry-potter .item-title {
margin-top: -15vw;
margin-left: 2vw;
transform: translateX(0vw);
}
}
@media (min-width: 1200px) {
#ftwa {margin-top: -100px; margin-bottom: 26vw}
#wiwh .item-title {
margin-left: 18.7vw;
margin-top: -7vw;
}
}
@media (min-width: 1250px) {
#belay .item-title {
margin-bottom: -17vw;
margin-left: 15vw;
}
}
@media (min-width: 1400px) {
#belay .item-title {
margin-bottom: -190px;
margin-left: 310px;
}
}
@media (min-aspect-ratio: 8/5) {
.project-list-item {
height: 75vh;
}
}
.item-title {
/* padding-left: 60px; */
}
/* Work */
li {
list-style: none;
}
.project-thumb {
width: 100%
}
.project-list-item {
margin: 0;
list-style: none;
position: relative;
}
/*
.work #ajax-load-more .content-item {
height: calc(100vw * 0.7);
min-height: calc(100vw * 0.5);
}
@media (min-width: 768px) {
.work #ajax-load-more .content-item {
height: 55vh
}
} */
@media (max-width: 999px) {
.project-list-item.first-item {
height: 80vh
}
/* #ajax-load-more .content-item .project-thumb {
object-fit: cover;
width: auto;
height: 100%;
min-width: 100%;
} */
.content-item a {
height: 100%
}
}
.project-list-item.first-item .project-thumb {
object-fit: cover;
width: auto;
height: 100%;
min-width: 100%
}
@media (min-width: 1000px) {
.project-list-item.first-item {
height: 92vh
}
/* .work #ajax-load-more .content-item {
height: 80vh
} */
}
/*
#ajax-load-more .content-item {
margin: 0;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 1000px) {
#ajax-load-more .content-item {
margin: 0;
height: unset;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
} */
/* @media (min-aspect-ratio: 10/5) {
#ajax-load-more .content-item {
max-height: unset;
}
}
#ajax-load-more .content-item a {
width: 100%;
height: 100%;
} */
.content-item img, .content-item video, .video_embedded {
width: 100%;
max-width: 100%;
height: 100%;
object-fit: cover;
}
.search .content-item img, .search .content-item video {
height: unset;
}
li.content-item {
margin: 0;
}
li.content-item,
li.content-item img,
li.content-item video,
.client-logo-grid .logo {
transition: all 0.4s cubic-bezier(0.18, 0.01, 0.09, 0.99);
}
li.content-item:hover img, li.content-item:hover video {
transform: scale(1)
}
/* #ajax-load-more li.content-item:hover img, #ajax-load-more li.content-item:hover video {
transform: scale(1.05)
} */
li.content-item.first-item:hover img, li.content-item.first-item:hover video {
transform: scale(1.05)
}
/* Archive layout */
.work #ajax-load-more { padding-top: 40px;
}
.work-grid-layout .content-item img, .work-grid-layout .content-item video {
height: 50vw;
border-radius: 20px;
}
/* .work-grid-layout li {
width: 100%;
margin: 20px 20px;
overflow: hidden;
}
@media (min-width: 700px) {
.work-grid-layout .content-item:hover {
transform: scale(1.05);
}
.work-grid-layout .content-item img, .work-grid-layout .content-item video {
height: 24vw;
}
.work-grid-layout li {
width: calc(50% - 60px);
margin: 50px 30px;
}
} */
@media (min-width: 1600px) {
.work-grid-layout .content-item img, .work-grid-layout .content-item video {
height: 400px;
}
.work-grid-layout .item-title .project-grid-title-container h3 {
font-size: 32px;
}
}
/*
@media (min-width: 700px) {
.work-grid-layout li { min-height: 350px }
}
@media (min-width: 850px) {
.work-grid-layout li { min-height: 370px }
}
@media (min-width: 1000px) {
.work-grid-layout li { min-height: 400px }
} */
/* @media (min-width: 1700px) {
.work-grid-layout.max-width li {
width: calc(33.3333% - 60px);
}
.work-grid-layout .content-item img, .work-grid-layout .content-item video {
height: 16vw;
}
.work-grid-layout .item-title .project-grid-title-container h3 {
font-size: calc(1vw + 8px);
}
} */
/* @media (min-width: 1800px) {
.work-grid-layout .content-item img, .work-grid-layout .content-item video {
height: 300px
}
} */
/* .work-grid-layout li:nth-of-type(1),
.work-grid-layout li:nth-of-type(2),
.work-grid-layout li:nth-of-type(3) {
width: 100%;
margin: 60px 20px;
overflow: hidden;
}
.work-grid-layout .content-item:nth-of-type(1) img, .work-grid-layout .content-item:nth-of-type(1) video,
.work-grid-layout .content-item:nth-of-type(2) img, .work-grid-layout .content-item:nth-of-type(2) video,
.work-grid-layout .content-item:nth-of-type(3) img, .work-grid-layout .content-item:nth-of-type(3) video {
height: auto;
border-radius: 40px
} */
/* Full-width Vimeo embed */
.page-template-work figure {
margin: 0;
}
.page-template-work .wp-block-embed__wrapper {
width: 100vw
}
.text-block {
padding: 30px 0 30px;
width: 100%;
}
@media (min-width: 768px) {
.text-block {
padding: 40px 0 40px;
}
}
@media (min-width: 1200px) {
.text-block {
padding: 50px 0 50px;
}
}
.container,
.alm-placeholder {
max-width: 1400px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
.motion-and-animation .alm-placeholder,
.motion-and-animation .work-grid-layout {
max-width: unset
}
.alm-placeholder,
.work-grid-layout {
max-width: 1600px
}
.alm-placeholder {
max-width: unset;
margin: 0 15px 70px;
width: calc(100vw - 30px);
overflow: hidden;
padding: 0 !important;
}
.alm-placeholder img {
width: 100%;
min-width: 400%;
transform: translate(-23%) scale(1.1);
max-width: 1000%;
}
.motion-and-animation #ajax-load-more li {
max-width: calc(100vw - 20px);
margin: 0 auto;
}
.MaA-item-container {
display: flex;
flex-direction: column;
width: 100%
}
.MaA-thumb-container {
width: 100%;
}
.MaA-item-title {
color: white
}
.MaA-thumb-container video, .MaA-thumb-container img {
width: 100%;
}
.MaA-description-container {
width: 100%;
padding: 15px 10px 10px 15px;
min-height: 23vw;
}
@media (min-width: 768px) {
.MaA-item-container {
flex-direction: row;
}
.MaA-description-container {
width: 33%;
max-width: 360px;
min-height: unset;
padding: 15px
}
.motion-and-animation #ajax-load-more li {
max-width: calc(100vw - 40px)
}
/* .MaA-item-container { background: red; order: 1 } */
.MaA-content-item:nth-of-type(even) .MaA-description-container { order: 1 }
.MaA-content-item:nth-of-type(even) .MaA-thumb-container {order: 2 }
#thirty-years .MaA-description-container { border-left: 1px solid #616161 }
}
@media (min-width: 1050px) {
.MaA-description-container {
padding: 20px
}
}
@media (min-width: 700px) {
.alm-placeholder {
margin: 0 40px 70px;
width: calc(100vw - 80px);
}
.alm-placeholder img {
width: 100%;
min-width: 200%;
transform: translate(-25%) scale(1);
}
}
@media (min-width: 700px) {
.alm-placeholder {
margin: 0 40px 70px;
width: calc(100vw - 80px);
}
.alm-placeholder img {
width: 100%;
min-width: 200%;
transform: translate(-25%);
}
}
@media (min-width: 1000px) {
.motion-and-animation #ajax-load-more li {
max-width: calc(100vw - 60px)
}
}
@media (min-width: 1400px) {
.alm-placeholder img {
width: 100%;
min-width: 133.33333%;
transform: translate(-25%);
}
.motion-and-animation #ajax-load-more li {
max-width: 1340px;
}
}
@media (min-width: 1800px) {
.alm-placeholder img {
width: 100%;
min-width: 100%;
transform: translate(0%);
}
}
.work-grid-layout.container.max-width,
.work-grid-layout.container {
padding-left: 0; padding-right: 0;
margin-bottom: 0px;
}
.search .work-grid-layout,
.archive .work-grid-layout {
padding-top: 5px
}
@media (min-width: 768px) {
.container,
.alm-placeholder {
padding-left: 50px;
padding-right: 50px;
}
.work-grid-layout.container.max-width,
.work-grid-layout.container {
margin-bottom: 0px;
}
.search .work-grid-layout,
.archive .work-grid-layout {
padding-top: 40px
}
}
@media (min-width: 1200px) {
.search .work-grid-layout,
.archive .work-grid-layout {
padding-top: 60px
}
}
/* .work #ajax-load-more .container,
.philosophy #ajax-load-more .container {
max-width: unset;
padding-left: 0px;
padding-right: 0px;
} */
.black-background {background: black; color: white; width: 100vw}
.white-background {background: white; color: black; width: 100vw}
.dark-grey-background {background: #121213; color: white; width: 100vw}
.grey-background {background: #c9c6c4; color: black; width: 100vw}
.text-block-headline {
font-weight: 800;
letter-spacing: -1.5px;
}
@media (min-width 768px) {
.text-block-headline {
font-weight: 800;
letter-spacing: -2.5px;
}
}
.text-block a {
color: #fb550d
}
.grey-background .text-block a {
color: #f56a16
}
.text-block p {
font-weight: 300;
margin-bottom: 10px;
margin-top: 3px;
font-size: 21px;
line-height: 1.2;
}
.text-block.contact-cta p {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.5px;
margin: 0
}
@media (min-width: 450px) {
.text-block.contact-cta p {
text-align: center;
padding: 20px 0
}
.text-block p {
margin-top: 5px;
}
}
@media (min-width: 700px) {
.text-block-headline {
font-size: 70px;
}
.text-block p {
font-size: 26px;
margin-bottom: 15px;
}
.text-block.contact-cta p {
font-size: 30px;
}
}
@media (min-width: 1000px) {
.text-block-headline {
font-size: 90px;
letter-spacing: -2.5px;
}
.text-block p {
font-size: 37px;
line-height: 1.2;
margin-bottom: 20px;
}
}
@media (min-width: 1200px) {
.text-block-headline {
font-size: 105px;
font-weight: 800;
letter-spacing: -2.5px;
}
.text-block p {
font-size: 42px;
line-height: 1.1;
margin-bottom: 25px;
margin-top: 25px;
padding-right: 0
}
.text-block {
padding-top: 60px;
padding-bottom: 50px;
}
.text-block.contact-cta p {
font-size: 40px;
}
}
.contact .text-block p {max-width: 810px}
.entry-header {
display: none;
}
#extended-title {display: none;}
@media (min-width: 1000px) {#extended-title {display: inline-block}}
header button {
margin-top: 18px;
}
button.search-untoggle { margin: auto
}
button.search-toggle {display: none !important}
.toggle svg {color: black}
.blackText .toggle svg {color: black}
.whiteText .toggle svg {color: white}
.toggle-text {display: none;}
.search-modal-inner {color: black; background: white}
.blackText .search-modal-inner {color: black; background: white}
.whiteText .search-modal-inner {color: white; background: black}
.whiteText .search-modal {background: rgb(255 255 255 / 20%);}
/* Nav styling */
.design-and-branding #site-header a {
color: black
}
#site-header a {
color: white;
transition: 0.3s ease;
position: relative;
z-index: 10;
}
.website-description {
font-family: 'Archivo', sans-serif;
font-weight: 400;
/* font-style: italic; */
font-size: 19px;
width: fit-content;
margin-left: 3px;
margin-top: -3px;
position: absolute;
display: none
}
.home .website-description {
display: block
}
@media (min-width: 768px) {
.website-description {
margin-left: 7px;
}
}
.single-projects #site-header a {
color: black;
}
.site-title a {
padding: 0px;
text-align: left;
font-family: 'pilowlavaregular';
display: block;
font-size: 23px;
margin-left: 5px;
}
@media(min-width: 500px) {
.site-title a {
font-size: 26px;
}
}
@media(min-width: 768px) {
.site-title a {
margin-left: -10px
}
}
@media(min-width: 1000px) {
.site-title a {
margin-left: 0px
}
}
@media(min-width: 1100px) {
.site-title a {
font-size: 30px;
}
}
.site-title a:hover,
.site-title a:focus {
text-decoration: none;
}
.primary-menu {
display: flex;
justify-content: flex-end;
}
.primary-menu a {
text-align: right;
font-size: 20px;
font-weight: 300;
}
.header-titles-wrapper {
width: 100%
}
.current_page_item {
border: 1px solid white;
border-radius: 40px;
}
.web-and-digital .current_page_item {
border: unset;
border-radius: unset;
}
.motion-and-animation .current_page_item {
border: unset;
border-radius: unset;
}
/* Mobile menu */
/* .blackText .menu-modal-inner,
.blackText .menu-modal-inner a {
background: white
}
.whiteText .menu-modal-inner,
.whiteText .menu-modal-inner a {
background: black
}
.menu-modal nav *,
.blackText .menu-modal nav * {
border-color: #dadada
}
.whiteText .modal-menu a {
color: white
}
*/
.menu-modal nav * {
border: none
}
.menu-modal nav * {
font-weight: 400
}
#site-header {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
/* height: 95px; */
text-align: center;
-webkit-transition: top 0.2s ease-in-out;
transition: top 0.2s ease-in-out;
}
@media (min-width: 1000px) {
#site-header {
/* height: 95px; */
}
}
#site-header {transition: 0.25s ease-out}
#site-header.whiteBg { background: white; }
#site-header.blackBg { background: black; }
#site-header.transparentBg { background: #00000000; }
.showing-modal #site-header.transparentBg.whiteText { background: black; transition: 0.25s ease-in }
.showing-modal #site-header.transparentBg.blackText { background: black; }
#site-header.scrolled { background: white; top:-12px }
@media (min-width: 768px) { #site-header.scrolled { background: white; top:-36px } }
@media (min-width: 1000px) { #site-header.scrolled { background: white; top:-45px } }
.motion-and-animation #site-header.scrolled { background: #00000054; }
.web-and-digital #site-header.scrolled { background: #0E22D2; }
.design-and-branding #site-header.scrolled { background: white; }
.about #site-header.scrolled { background: #121213; }
/* #site-header.scrolled.whiteBg { background: white; }
#site-header.scrolled.blackBg { background: black; }
#site-header.scrolled.transparentBg.blackText { background: white; }
#site-header.scrolled.transparentBg.whiteText { background: white; } */
#client-panel {
color: white;
}
.client-logo-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
max-width: 1400px;
margin: 0 auto
}
.client-logo-grid .logo {
width: 100%;
height: 200px;
padding: 10px;
position: relative;
margin-bottom: 0px
}
@media (min-width: 768px) {
.client-logo-grid .logo {
height: 250px;
}
}
.logo p:nth-of-type(1),
.logo p:before {
color: #ff6920;
font-size: 16px;
font-weight: 600;
margin-bottom: 10px
}
.logo p:nth-of-type(2) {
color: #999999;
font-size: 14px;
font-weight: 600;
margin-bottom: 0
}
.logo p:nth-of-type(1),
.logo p:nth-of-type(2) {
padding: 0 12px 0 20px;
}
.logo p:before {
content: '“';
position: absolute;
left: 1px;
top: -3px;
font-size: xx-large;
}
.testimonial-container,
.logo-img {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
}
.testimonial-container,
.logo-img {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
}
.testimonial-container {
background: #000000e3;
opacity: 0;
margin: auto;
transition: 0.6s cubic-bezier(0.29, 0, 0.16, 1);
margin-top: 50px;
}
@media (min-width: 450px) {
.logo p:nth-of-type(1) { font-size: 20px; margin-bottom: 10px }
.logo p:nth-of-type(2) { font-size: 18px }
.logo p:before { left: 7px; top: -1px; }
.logo p:nth-of-type(1),
.logo p:nth-of-type(2) { padding: 0 15px 0 25px; }
}
@media (min-width: 400px) {
.client-logo-grid .logo { margin-bottom: 70px; }
}
@media (min-width: 600px) {
.logo p:nth-of-type(1) { font-size: 16px }
.logo p:nth-of-type(2) { font-size: 14px }
.logo p:before { left: 7px; top: -3px; }
.logo p:nth-of-type(1),
.logo p:nth-of-type(2) { padding: 0 10px 0 5px; }
.client-logo-grid .logo { width: 50%; margin-bottom: 0px; }
.client-logo-grid .logo:last-of-type { display: block }
.testimonial-container { padding-left: 20px }
}
@media (min-width: 800px) {
.logo p:nth-of-type(1) { font-size: 18px }
.logo p:nth-of-type(2) { font-size: 16px }
.logo p:before { left: 7px; top: -3px; }
.logo p:nth-of-type(1),
.logo p:nth-of-type(2) { padding: 0 10px 0 5px; }
}
@media (min-width: 1000px) {
.client-logo-grid .logo { width: 33.3333%; }
.client-logo-grid .logo:last-of-type { display: none }
}
@media (min-width: 1200px) {
.client-logo-grid .logo { width: 25%; }
.client-logo-grid .logo:last-of-type { display: block }
.client-logo-grid .logo {height: 140px}
}
@media (min-width: 1200px) {
.logo p:nth-of-type(1) { font-size: 22px }
.logo p:nth-of-type(2) { font-size: 18px }
.logo p:before { left: 7px; top: -1px; }
.logo p:nth-of-type(1),
.logo p:nth-of-type(2) { padding: 0 10px 0 5px; }
.client-logo-grid .logo { margin-bottom: 60px; }
}
@media (min-width: 3000px) {
.client-logo-grid .logo { width: 25%; }
.client-logo-grid .logo:last-of-type { display: block }
}
.client-logo-grid > * {cursor: default}
.client-logo-grid .logo img { margin: 0 auto; width: 100%; padding: 20px 40px }
@media (min-width: 768px) {
.client-logo-grid .logo img { margin: 0 auto; width: 100%; padding: 40px }
}
.client-logo-grid .logo:hover {
transform: scale(1.1);
}
.black-bg, .black-background {
background: black;
color: white;
}
nav.primary-menu-wrapper {
/* margin-top: 18px; */
}
.full-width-video {
position: relative;
padding-bottom: 56.25%;
height: 0; overflow: hidden;
max-width: 100%; height: auto;
}
.full-width-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#homepage-video {
background: #0e0e0e;
}
.fullscreen-video-container {
height: auto;
overflow: hidden;
position: relative;
z-index: 5;
width: 100vw;
padding-bottom: 56.25%;
top:-50%
}
@media (min-width: 500px) {
.fullscreen-video-container {top:0%}
}
.fullscreen-video-inner {
/* left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%); */
height: 100%;
width: 100%;
}
.fullscreen-video-inner video {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
}
.fullscreen-video-container a:hover {
cursor: e-resize;
}
.delay-fade {
transition: 1s ease;
opacity: 1;
}
.faded {
opacity: 0;
}
.work .post-meta-wrapper {display:none}
#mobile_image {display: block}
#desktop_image {display: none}
@media (min-width: 550px) {
#mobile_image {display: none}
#desktop_image {display: block}
}
.fade {
animation: fadeIn 1s ease;
-webkit-animation: fadeIn 1s ease;
-moz-animation: fadeIn 1s ease;
-o-animation: fadeIn 1s ease;
-ms-animation: fadeIn 1s ease;
min-height: 1px;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
.pad-top {padding-top: 20px}
.pad-bottom {padding-top: 20px}
@media (min-width: 768px) {
.pad-top {padding-top: 40px}
.pad-bottom {padding-top: 40px}
}
/* Search results page */
.search-form-container {
padding-top: 120px;
padding-bottom: 80px
}
.container.search-form-container {
max-width: 800px
}
.search-form-container h3 {
text-align: center;
padding-bottom: 10px;
font-size: 35px;
}
@media (min-width: 1000px) {
.search-form-container {
padding-top: 180px;
padding-bottom: 100px;
}
.search-form-container h3 {
font-size: 45px;
}
}
@media (min-width: 1200px) {
.search-form-container {
padding-top: 200px;
padding-bottom: 140px;
}
.search-form-container h3 {
font-size: 55px;
}
}
.search-box {
height:45px;
}
.search-box input,
.search-box form,
.search-box input[type=submit] {
height: 100%;
}
.search-box input.search-submit {
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomright: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
margin: 0;
}
.search-box input.search-field {
font-size: 2rem;
padding-left: 2.1rem;
}
@media (min-width: 1000px) {
.search-box {
height:59px;
}
.search-box input.search-field {
font-size: 2.3rem;
padding-left: 2.4rem;
}
}
.search-box input.search-field {
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomleft: 50px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
#CTA-container {
text-align: center;
}
#CTA-container .container.search-form-container {max-width: 880px}
#CTA-container .text-block {padding-top: 25px;}
/* Homepage video */
.home #site-content {
display: flex;
height: 80vh;
flex-direction: column;
justify-content: flex-end;
}
.home #homepage-video {margin-top: auto}
@media (min-width: 768px) {
.home #site-content {height: 90vh}
}
@media (min-width: 1025px) {
.home #site-content {height: 100vh}
}
/* Search terms */
.modal-search-container {
display: flex;
flex-wrap: wrap;
}
.search-terms h2 {
display: none;
}
.search-terms a {
color: #fb550d;
font-size: 16px !important;
font-weight: 300;
border-bottom: 1px solid #fb550d;
}
.search-terms a:hover {
color: white;
border-bottom: 1px solid white;
text-decoration: none;
}
#cookie-law-info-bar {
box-shadow: none;
border-top: 1px solid #2d2d2d;
}
/* */
.alm-placeholder {padding-bottom: 50px; margin-top: -30px}
.alm-placeholder img {width: 100%}
/* @media (max-width: 700px) {
.alm-placeholder img {width: 213%; max-width: 1000%}
} */
.error404-content {
padding: 50px 0
}
@media (min-width: 768px) {
.error404-content {
padding: 50px 0 80px 0
}
}
.basic-page-template .entry-content {
padding-top: 110px;
max-width: 770px;
margin-left: auto;
margin-right: auto;
width: 100%
}
@media (min-width: 1000px) {
.basic-page-template .entry-content {
padding-top: 180px
}
}
.basic-page-template h1,
.basic-page-template h2,
.basic-page-template h3,
.basic-page-template h4,
.basic-page-template h5,
.basic-page-template h6 {
line-height: 1;
}
.basic-page-template .entry-content a {color: #fb550d}
.basic-page-template .entry-content li {list-style: square}
.basic-page-template h3 {margin-bottom: 30px}
.basic-page-template h5 {margin-bottom: 15px}
.basic-page-template h1:first-of-type {margin-bottom: 50px}
.single-projects .site-main {
padding-bottom: 50px
}
.project-title-container {
display: block;
}
.project-title-container .title-lockup {
width: 100%;
}
.project-title-container .project-intro-copy {
width: 100%;
margin-top: 20px;
}
@media (min-width: 1000px) {
.project-title-container {
display: flex;
}
.project-title-container .title-lockup {
width: 40%;
min-height:105px;
}
.project-title-container .project-intro-copy {
width: 50%;
margin-left:auto;
margin-top: 0px;
}
}
.project-page-title {
font-weight: 600;
font-size: clamp(28px, 6vw, 50px);
letter-spacing: -1.5px;
line-height: 1;
}
.project-page-description {
color: #838383;
font-size: clamp(14px, 2.5vw, 23px);
font-weight: 400;
margin-top: 7px;
}
.project-intro-copy {
font-weight: 500;
font-size: clamp(18px, 4vw, 28px);
}
@media (min-width: 1200px) {
.project-page-description {
margin-top: 14px;
}
}
.project-intro {
padding-top: 90px;
padding-bottom: 20px;
}
@media (min-width: 1000px) {
.project-intro {
padding-top: 130px;
padding-bottom: 20px;
}
}
.background_grad {
width: 100%;
height: 50%;
position: absolute;
z-index: 2;
/* background: unset; */
bottom: 0;
}
@media (min-width: 500px) {
.background_grad {
height: 60%;
}
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%
}
.embed-container#mobile-only {
padding-bottom: 120%;
}
.embed-container embed, .embed-container iframe, .embed-container object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
hr {
/* margin-bottom: 1.5em; */
box-sizing: content-box;
}
.section-divider {
width: 100vw;
height: 11px;
background: #C8C8C8;
border: 0;
margin-top: 0px;
margin-bottom: 15px;
}
@media (min-width:768px) {
.section-divider {
height: 22px;
}
}
.project-hero img {
object-fit: cover;
width: 100%;
}
.project-hero {
margin-bottom: 00px
}
@media (min-width: 768px) {
.project-hero {
margin-bottom: 00px
}
}
.hero {
position: absolute;
left: 0;
bottom: 0px;
overflow: hidden;
height: 50vh;
width: 100%;
}
/* @media screen and (min-height:768px) {
.hero {
bottom: 10px;
}
} */
@media screen and (max-width: 768px) and (min-height: 750px) {
.hero {
height: 55vh;
}
.hero .banner-image img.mobile-hero-image, .hero .banner-image img.hero-image {
height: 60vh !important;
max-height: 85vw
}
}
.hero .banner-image {
right: 0;
bottom: 0;
margin: auto;
z-index: 0;
overflow: hidden
}
.project-hero .banner-image {
right: 0;
bottom: 0;
margin: auto;
z-index: 0;
overflow: hidden
}
.hero .banner-image img.hero-image {
width: 100%;
max-height: 80vh;
object-fit: cover;
height: 50vh;
}
.hero .banner-image img.mobile-hero-image {
max-height: 80vh;
width: 100%;
object-fit: cover;
height: 50vh;
}
.project-hero .hero-image {
display: none
}
@media (min-width:600px) {
.hero .hero-image, .project-hero .hero-image {
display: block
}
.hero .mobile-hero-image, .project-hero .mobile-hero-image {
display: none
}
}
.royal-mail-collectables .project-hero {
margin-bottom: 0px;
}
.project-tagged {
bottom: 0;
width: 100%;
position: relative
}
@media (min-width:769px) {
.project-tagged {
position: absolute
}
}
.project-intro .project-title,
.project-intro .project-client {
font-size: 35px;
line-height: 1.2;
letter-spacing: -0.3px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.project-intro .project-copy {
color: black;
margin-bottom: 30px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 21px;
font-size: 20px;
font-weight: 400;
letter-spacing: -0.3px;
}
blockquote {
margin: 40px 0;
}
.single-post .copy-block .copy {
width: 100%
}
.single-bookmarks .project-copy p {
margin-bottom: 10px;
}
@media (min-width:768px) {
.project-intro .project-copy {
font-size: 26px;
line-height: 28px;
margin-bottom: 60px
}
}
@media (min-width:1140px) {
.project-intro .project-copy {
font-size: 38px;
line-height: 40px;
margin-bottom: 70px;
max-width: 1000px;
}
}
@media (min-width:1440px) {
.single-bookmarks .project-copy {
padding: 0 18%;
}
}
.project-intro .project-copy p:last-of-type {
margin-bottom: 0
}
.project-intro .text-content {
/* max-width: 1200px; */
margin: 0 auto;
}
.project-cats {
position: relative;
width: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility
}
@media (min-width:768px) {
.project-cats {
margin-bottom: 0;
width: 70%
}
}
.single-projects .project-cats {
display: none !important;
}
.project-cats .project-tags {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
line-height: 20px;
font-size: 17px;
}
@media screen and (min-width: 768px) {
.project-cats .project-tags {
font-size: 17px;
}
}
.project-cats li {
margin-right: .25em;
color: #6A6A6A;
}
.project-cats .tag:after {
content: ", "
}
.project-cats .tag:last-of-type:after {
content: ""
}
.project-cats a {
text-decoration: none;
color: #6A6A6A
}
.project-cats a:hover {
text-decoration: underline;
color: #e0dedf
}
.single-post-header {
display: inline-block;
top: 0;
position: relative;
z-index: 3;
height: 100vh;
/* max-height: 700px; */
width: 100vw;
}
.post-title-container {
padding-top: 102px;
}
@media (min-width:768px) {
.entry-header {
width: 100%
}
.single-post-header {
height: 100vh;
max-height: unset;
}
.post-title-container {
float: left;
padding-right: 0px !important;
display: inline-block;
width: 49%;
padding-left: 20px !important;
padding-top: 30px
}
.hero {
float: right;
width: 50%;
height: 100vh !important;
position: static;
display: inline-block;
position: static !important;
}
.hero .banner-image img.hero-image, .hero .banner-image img.mobile-hero-image {
height: 100vh;
max-height: 100vh;
}
}
.entry-content {
display: inline-block;
position: relative;
}
.single-post .entry-content {
padding-top: 20px;
}
@media (min-width:768px) {
.single-post .entry-content {
padding-top: 90px;
}
}
@media (min-width:1000px) {
.post-title-container {
padding-top: 75px;
}
}
@media (min-width:1140px) {
.single-post .entry-content {
padding-top: 150px;
}
}
@media screen and (min-width: 768px) and (max-aspect-ratio: 16/10) {
.single-post-header, .hero .banner-image img.hero-image, .hero {
height: 100vh;
max-height: calc(100vw * 0.6);
}
}
@media (min-width:1024px) {
.hero {
width: 50%;
}
}
@media (min-width:1200px) {
.hero {
width: 50%;
}
/* .entry-title, .author {
font-size: 50px;
line-height: 50px;
}
.feature-description {
font-size: 25px;
line-height: 25px;
} */
.post-title-container {
width: 40%;
}
}
@media (min-width:1400px) {
.mag-link:before {
content: ' ';
background-size: 130px 130px;
width: 130px;
height: 130px;
}
}
@media (min-width: 1600px) {
.container.post-title-container {
width: 45%;
}
/* .entry-title, .author {
font-size: 65px;
line-height: 65px;
}
.feature-description {
font-size: 26px;
line-height: 26px;
} */
}
.single-post .post-entry div:not( .copy-block, .copy) {
max-width: 1200px;
}
.single-post.single .pos-left {
float: left;
}
.single-post.single .pos-right {
float: right;
}
.single-post.single .pos-left, .single-post.single .pos-right {
width: 100%;
padding: 0;
}
.single-post.single .pos-left img, .single-post.single .pos-right img {
width: calc(100vw - 20px);
max-width: 100vw;
}
.single-post.single .pos-right img {
float: right;
}
.single-post.single .pos-left img {
float: left;
}
.caption {
font-weight: 600;
font-size: 23px;
line-height: 25px;
letter-spacing: -0.5px;
color: #fb550d;
max-width: 290px;
}
.pos-left.img-with-caption img, .pos-right.img-with-caption img, .pos-centre.img-with-caption img {
border-bottom: 3px solid #fb550d;
}
.pos-centre.img-with-caption img {
border-bottom: 3px solid #fb550d;
}
.single-post.single .pos-left .caption, .single-post.single .pos-right .caption {
width: calc(100vw - 40px);
padding-top: 10px;
}
.single-post.single .pos-right .caption {
float: right;
padding-right: 20px;
}
.single-post.single .pos-left .caption {
float: left;
padding-left: 20px;
}
.single-post.single .pos-centre .caption {
width: calc(100vw - 40px);
padding-top: 10px;
}
@media (min-width: 540px) {
.single-post.single .pos-left .caption {
padding-left: 10px;
padding-top: 10px;
}
}
.single-post.single .pos-centre .caption {
max-width: 350px;
}
.post-entry a {
transition: 0.2s;
border-bottom: 2px solid #000000;
background: #eaeaea;
padding: 0px 4px 0px 4px;
font-weight: 400;
color: #fb550d;
}
.post-entry a:hover {
background: black;
color: white;
}
.post-entry a:after {
display: inline-block;
content: ' ';
background-image: url(assets/images/link-arrow.svg);
background-size: 13.5px 13.5px;
height: 13.5px;
width: 13.5px;
margin-left: 4px;
}
@media (min-width: 1140px) {
.post-entry a:after {
display: inline-block;
content: ' ';
background-image: url(assets/images/link-arrow.svg);
background-size: 15px 15px;
height: 15px;
width: 15px;
margin-left: 3px;
}
}
@media screen and (max-width: 767px) and (min-width: 540px) {
.single-post.single .pos-left img, .single-post.single .pos-right img {
width: calc(((100vw - 500px) / 2) + 500px);
}
}
@media screen and (max-width: 1139px) and (min-width: 768px) {
.single-post.single .pos-left img, .single-post.single .pos-right img {
width: calc(((100vw - 760px) / 2) + 760px);
}
.caption {
max-width: 40vw;
}
}
@media (min-width:1140px) {
.single-post.single .pos-left img, .single-post.single .pos-right img {
width: calc(((100vw - 840px) / 2) + 840px);
}
}
@media (min-width:1250px) {
.single-post.single .pos-left img, .single-post.single .pos-right img {
width: calc(100vw - ((100vw - 850px) / 2));
max-width: 100vw;
}
.single-post.single .pos-left img {
float: left;
}
.single-post.single .pos-right img {
float: right;
}
.caption {
margin-top: -3px;
}
.single-post.single .pos-left .caption, .single-post.single .pos-right .caption {
padding-top: 0px;
}
.pos-left.img-with-caption img {
border-right: 3px solid #fb550d;
border-bottom: 0px;
}
.pos-right.img-with-caption img {
border-left: 3px solid #fb550d;
border-bottom: 0px;
}
.single-post.single .pos-left, .single-post.single .pos-right {
max-width: unset;
}
.single-post.single .pos-left .caption {
width: 15vw;
float: left;
padding-left: 12px;
}
.single-post.single .pos-right .caption {
width: 15vw;
float: right;
padding-right: 10px;
padding-left: 0px;
}
}
@media (min-width:1040px) {
.single-post .max-width-image,
.single-post .n-two-images,
.single-post .n-three-images-one-large,
.single-post .n-triptych,
.single-post .imageslider {
max-width: 860px;
}
}
@media (min-width: 1140px) {
.single-post .max-width-image,
.single-post .n-two-images,
.single-post .n-three-images-one-large,
.single-post .n-triptych,
.single-post .imageslider {
max-width: 950px;
}
}
/* PROJECT LAYOUTS */
.n-two-images, .n-three-images-one-large, .n-triptych, .n-three-images-one-large {
display: grid;
place-items: start;
grid-gap: 20px;
object-fit: cover;
grid-template-columns: 100%;
margin: 10px auto 10px auto;
}
.single-bookmarks .n-two-images, .single-bookmarks .n-three-images-one-large, .single-bookmarks .n-triptych, .single-bookmarks .n-three-images-one-large {
padding: 0;
}
.n-two-images > *, .n-three-images-one-large > *, .n-triptych > *, .n-three-images-one-large > * {
width: 100%;
}
.n-two-images img, .n-three-images-one-large img, .n-triptych img, .n-three-images-one-large img {
width: 100%;
height: auto;
min-width: auto;
overflow: hidden;
}
.n-two-images.n-layout-two-thirds-left .n-image-left, .n-two-images.n-layout-fifty-fifty .n-image-left, .n-two-images.n-layout-one-third-left .n-image-left, .n-triptych. .n-triptych-image-one {
grid-column-start:1;
grid-column-end: 2;
grid-row-start:1;
grid-row-end: 2;
}
.n-two-images.n-layout-two-thirds-left .n-image-right, .n-two-images.n-layout-fifty-fifty .n-image-right, .n-two-images.n-layout-one-third-left .n-image-right, .n-triptych. .n-triptych-image-two {
grid-column-start:1;
grid-column-end: 2;
grid-row-start:2;
grid-row-end: 3;
}
.n-triptych. .n-triptych-image-three {
grid-column-start:1;
grid-column-end: 2;
grid-row-start:3;
grid-row-end: 4;
}
@media screen and (min-width: 768px) {
.n-two-images div, .n-triptych div {
object-fit: cover;
height: 100%;
overflow: hidden;
}
.n-two-images, .n-three-images-one-large, .n-triptych, .n-three-images-one-large {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
margin: 20px auto 20px auto;
/* padding: 0 50px; */
}
.n-two-images.n-layout-two-thirds-left .n-image-left {
grid-column-start:1;
grid-column-end: 5;
grid-row-start:1;
grid-row-end: 2;
}
.n-two-images.n-layout-two-thirds-left .n-image-right {
grid-column-start:5;
grid-column-end: 7;
grid-row-start:1;
grid-row-end: 2;
}
.n-two-images.n-layout-fifty-fifty .n-image-left {
grid-column-start:1;
grid-column-end: 4;
grid-row-start:1;
grid-row-end: 2;
}
.n-two-images.n-layout-fifty-fifty .n-image-right {
grid-column-start:4;
grid-column-end: 7;
grid-row-start:1;
grid-row-end: 2;
}
.n-two-images.n-layout-one-third-left .n-image-left {
grid-column-start:1;
grid-column-end: 3;
grid-row-start:1;
grid-row-end: 2;
}
.n-two-images.n-layout-one-third-left .n-image-right {
grid-column-start:3;
grid-column-end: 7;
grid-row-start:1;
grid-row-end: 2;
}
.n-triptych .n-triptych-image-one {
grid-column-start:1;
grid-column-end: 3;
grid-row-start:1;
grid-row-end: 2;
}
.n-triptych .n-triptych-image-two {
grid-column-start:3;
grid-column-end: 5;
grid-row-start:1;
grid-row-end: 2;
}
.n-triptych .n-triptych-image-three {
grid-column-start:5;
grid-column-end: 7;
grid-row-start:1;
grid-row-end: 2;
}
}
.copy-and-awards, .copy-block {
color: black;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.copy-and-awards .copy {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
padding: 40px 0 40px 0;
margin: 0;
line-height: 21px;
font-size: 17px;
letter-spacing: -0.3px
}
.copy-block .copy {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
padding: 40px 0 40px 0;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* .single-post .copy-block .copy {
padding: 20px 0;
} */
.single-post .copy-block div.copy > * {
letter-spacing: -0.3px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
/* max-width: 500px; */
width: auto;
font-weight: 400;
line-height: 1.3;
}
.single-post .copy-block .copy p {width: 100%}
.single-post .post-entry div:not(.video-asset, .embed-container) {
padding-top: 20px;
padding-bottom: 20px;
}
@media (min-width: 768px) {
.single-post .post-entry div:not(.video-asset, .embed-container) {
padding-top: 30px;
padding-bottom: 30px;
}
}
.single-post .copy {padding-right: 0!important;}
.single-post .video-asset {padding}
.single-post .copy-block .copy p, .single-post .copy-block .copy ol {
font-size: 19px;
margin-bottom: 20px;
}
.single-post .copy-block .copy h1, .single-post .copy-block .copy h2 {
font-size: 23px;
margin-bottom: 22px;
}
.single-post .copy-block .copy h3, .single-post .copy-block .copy h4 {
font-size: 21px;
font-weight: 800;
margin-bottom: 16px;
}
.single-post .copy-block .copy h5, .single-post .copy-block .copy h6 {
font-size: 15px;
margin-bottom: 10px;
}
.single-projects dt, .single-projects dd {
line-height: 1;
}
@media (min-width:675px) {
.copy-block .copy {
font-size: 18px;
line-height: 1.4;
}
}
@media (min-width:768px) {
.copy_and_image {
display: flex;
align-items: center;
}
.copy_and_image .copy-block .copy {
padding: 0
}
.copy-and-awards .copy {
padding-top: 40px;
padding-right: 0;
padding-left: 50px;
padding-bottom: 40px;
font-size: 20px;
line-height: 1.4;
width: 66.66666%;
}
.copy-block .copy {
padding-top: 40px;
padding-right: 0;
padding-bottom: 40px;
font-size: 20px;
line-height: 1.4;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.single-post .copy-block .copy p, .single-post .copy-block .copy ol {
font-size: 21px;
line-height: 1.4
}
.single-post .copy-block .copy h1, .single-post .copy-block .copy h2 {
font-size: 26px;
}
.single-post .copy-block .copy h3, .single-post .copy-block .copy h4 {
font-size: 27px;
}
.single-post .copy-block .copy h5, .single-post .copy-block .copy h6 {
font-size: 18px;
}
/* .single-post .copy-block .copy {
padding: 40px 0 40px 0px
} */
.single-post .copy-block div.copy > * {
max-width: 800px;
}
}
@media (min-width:769px) {
.copy-block .copy {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 0;
width: 66.666666%;
}
}
.copy-block blockquote:last-of-type {
margin-bottom: 0px;
}
@media (min-width:1140px) {
/* .copy-and-awards .copy, .copy-block .copy {
padding: 80px 40px 80px 0px;
width: 50%;
} */
.single-post .copy-block .copy p, .single-post .copy-block .copy ol {
font-size: 21px;
}
.single-post .copy-block .copy h1, .single-post .copy-block .copy h2 {
font-size: 30px;
}
.single-post .copy-block .copy h3, .single-post .copy-block .copy h4 {
font-size: 32px;
line-height: 1.2;
margin-bottom: 20px;
}
.single-post .copy-block .copy h5, .single-post .copy-block .copy h6 {
font-size: 18px;
}
.single-post .copy-block div.copy > * {
padding: 0 0;
width: auto;
max-width: 800px;
}
}
.copy-and-awards .copy p, .copy-block .copy p {
margin-bottom: 20px
}
@media (min-width:1140px) {
.copy-and-awards .copy p, .copy-block .copy p {
margin-bottom: 1em
}
}
.copy-and-awards .copy p:last-of-type, .copy-block .copy p:last-of-type {
margin-bottom: 0
}
.single-post .copy-block .copy p:last-of-type + blockquote {
margin-top: 40px
}
@media (min-width:1200px) {
.copy-block .copy {
padding: 80px 0 80px 0px;
width: 66.666%;
font-size: 22px;
max-width: 790px;
}
}
.copy-and-awards .copy-and-awards-content {
margin: 0 auto 15px
}
@media (min-width:1140px) {
.copy-and-awards .copy {
float: left
}
}
.copy-and-awards .awards-list {
/* max-width: 1140px; */
margin: -0em auto 15px;
padding: 20px 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility
}
.copy-and-awards .awards-list p {
color: #000
}
.copy-and-awards .awards-list dt:nth-of-type(1),
.copy-and-awards .awards-list dd:nth-of-type(1) {
margin-top: 0
}
.copy-and-awards .awards-list dt,
.copy-and-awards .awards-list dd {
margin-top: 10px
}
@media (min-width:1140px) {
.copy-and-awards .awards-list p {
font-size: 21px;
line-height: 28px;
letter-spacing: .0015em
}
.copy-and-awards .awards-list dt,
.copy-and-awards .awards-list dd {
margin-top: 5px
}
}
@media (min-width:1140px) {
.copy-and-awards .awards-list {
margin-top: 0;
margin-left: 0;
padding: 80px 0 80px 0px;
width: 50%
}
}
.copy-and-awards .awards-list p {
margin-bottom: -12px;
}
.copy-and-awards dl {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility
}
.copy-and-awards dd, .copy-and-awards dt {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 50%
}
.copy-and-awards dt {
font-weight: 400;
padding-right: 20px;
max-width: 260px;
}
@media (min-width:1140px) {
.copy-and-awards dd, .copy-and-awards dt {
font-size: 19px;
line-height: 26px;
letter-spacing: .015em
}
}
.copy-and-awards dd {
margin: 0;
font-weight: 400;
}
.max-viewport-image img {
width: 100%;
max-width: unset
}
.max-width-image, .two-images, .video-asset, .video_embedded {
margin: 20px auto 20px;
}
.project-hero {
margin-bottom: 20px;
}
@media (min-width:768px) {
.max-width-image, .two-images, .video-asset, .video_embedded {
margin: 30px auto 30px;
}
.project-hero {
margin-bottom: 30px;
}
}
@media (min-width:1000px) {
.max-width-image, .two-images, .video-asset, .video_embedded {
margin: 50px auto 50px;
}
.project-hero {
margin-bottom: 50px;
}
}
.max-width-image img {
width: 100%;
max-width: unset
}
.bookmark .max-width-image {
padding-left: 0;
padding-right: 0;
}
.image-slider {
max-width: 1540px;
width: 100%;
margin: 10px auto 10px;
padding: 0 20px;
position: relative
}
@media (min-width:769px) {
.image-slider {
padding: 0 50px;
}
}
.image-slider .slider {
opacity: 0
}
.image-slider .slider.slick-initialized {
opacity: 1
}
.image-slider .arrows .next-slide, .image-slider .arrows .prev-slide {
border: 0;
border-radius: 0;
background-color: transparent;
position: absolute;
top: 50%;
background: url(assets/images/slider-arrow.svg) 50% no-repeat;
background-size: contain;
height: 0;
padding-top: 30px;
width: 12px;
overflow: hidden;
display: block;
line-height: 30px;
transition: all .2s;
-webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .25));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .25))
}
@media (min-width:768px) {
.image-slider .arrows .next-slide, .image-slider .arrows .prev-slide {
height: 42px;
width: 50px;
}
}
.image-slider .arrows .prev-slide {
left: 35px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%)
}
@media (min-width:768px) {
.image-slider .arrows .prev-slide {
left: 75px
}
}
.image-slider .arrows .prev-slide:hover {
-webkit-transform: translateY(-50%) translateX(-5px);
-ms-transform: translateY(-50%) translateX(-5px);
transform: translateY(-50%) translateX(-5px)
}
.image-slider .arrows .prev-slide:active {
-webkit-transform: translateY(-50%) translateX(-10px);
-ms-transform: translateY(-50%) translateX(-10px);
transform: translateY(-50%) translateX(-10px)
}
.image-slider .arrows .next-slide {
right: 35px;
-webkit-transform: rotate(180deg) translateY(50%);
-ms-transform: rotate(180deg) translateY(50%);
transform: rotate(180deg) translateY(50%)
}
@media (min-width:768px) {
.image-slider .arrows .next-slide {
right: 75px
}
}
.image-slider .arrows .next-slide:hover {
-webkit-transform: rotate(180deg) translateY(50%) translateX(-5px);
-ms-transform: rotate(180deg) translateY(50%) translateX(-5px);
transform: rotate(180deg) translateY(50%) translateX(-5px)
}
.image-slider .arrows .next-slide:active {
-webkit-transform: rotate(180deg) translateY(50%) translateX(-10px);
-ms-transform: rotate(180deg) translateY(50%) translateX(-10px);
transform: rotate(180deg) translateY(50%) translateX(-10px)
}
.bookmark .bookmarks-container .image-slider {
padding-left: 0;
padding-right: 0;
}
@media screen and (max-width: 799px) and (min-width: 600px) {
.image-slider.container {
padding-left: 30px;
padding-right: 30px;
}
.image-slider .arrows .prev-slide {
left: 45px
}
.image-slider .arrows .next-slide {
right: 45px
}
}
@media screen and (max-width: 1039px) and (min-width: 800px) {
.image-slider.container {
padding-left: 40px;
padding-right: 40px;
}
.image-slider .arrows .prev-slide {
left: 45px
}
.image-slider .arrows .next-slide {
right: 45px
}
}
@media (min-width:1040px) {
.image-slider.container {
padding: 0 50px;
}
.image-slider .arrows .prev-slide {
left: 55px
}
.image-slider .arrows .next-slide {
right: 55px
}
}
@media (min-width:1140px) {
.bookmark .image-slider.container {
padding: 0 calc(50px + 12vw);
}
.bookmark .image-slider .arrows .prev-slide {
left: calc(60px + 12vw);
}
.bookmark .image-slider .arrows .next-slide {
right: calc(60px + 12vw);
}
}
.two-images, .video-asset {
width: 100%
}
@media (min-width:769px) {
.two-images {
-webkit-columns: 6;
columns: 6;
display: -ms-grid;
display: grid;
rows: 1;
grid-gap: 15px;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
}
/* .two-images, .video-asset {
padding: 0 50px;
} */
}
@media (min-width:769px) {
.two-images.height-slim {
height: 320px
}
}
@media (min-width:769px) {
.two-images.height-square {
height: 490px
}
}
@media (min-width:769px) {
.two-images.height-tall {
height: 680px
}
}
@media (min-width:769px) {
.two-images.height-xtall {
height: 799.7654px
}
}
.two-images .image-left, .two-images .image-right {
max-width: 100%
}
@media (min-width:769px) {
.two-images .image-left, .two-images .image-right {
margin-bottom: 0;
position: relative;
margin: auto;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden
}
.two-images .image-left img, .two-images .image-right img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
vertical-align: bottom
}
}
.two-images .image-left {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 4
}
.two-images .image-right {
-ms-grid-column: 4;
grid-column-start: 4;
grid-column-end: 7
}
@media (min-width:769px) {
.two-images.layout-one-third-left .image-left {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 3
}
.two-images.layout-one-third-left .image-right {
-ms-grid-column: 3;
grid-column-start: 3;
grid-column-end: 7
}
.two-images.layout-two-thirds-left .image-left {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 5
}
.two-images.layout-two-thirds-left .image-right {
-ms-grid-column: 5;
grid-column-start: 5;
grid-column-end: 7
}
}
.two-images .image-left {
margin-bottom: 15px
}
@media (min-width:769px) {
.two-images .image-left {
margin-right: 20px;
margin-bottom: 0
}
}
.three-images-one-large {
max-width: 1200px;
padding: 0 30px;
margin: 0 auto
}
@media (min-width:769px) {
.three-images-one-large {
margin: 0 auto 15px;
height: 600px;
display: -ms-grid;
display: grid;
-webkit-columns: 2;
columns: 2;
rows: 2;
grid-gap: 15px;
width: 100%
}
}
.three-images-one-large .image-three, .three-images-one-large .image-two, .three-images-one-large .large-image {
width: 100%;
grid-gap: 10px
}
.three-images-one-large .image-three img, .three-images-one-large .image-two img, .three-images-one-large .large-image img {
margin-bottom: 20px
}
@media (min-width:769px) {
.three-images-one-large .image-three, .three-images-one-large .image-two, .three-images-one-large .large-image {
position: relative;
margin: auto;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
-ms-grid-column-align: stretch;
justify-items: stretch
}
.three-images-one-large .image-three img, .three-images-one-large .image-two img, .three-images-one-large .large-image img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
vertical-align: bottom;
margin-bottom: 0
}
}
@media (min-width:769px) {
.three-images-one-large.layout-large_left_fifty_fifty .large-image {
-ms-grid-column-span: 1;
-ms-grid-column: 1;
grid-column: 1/span 1;
-ms-grid-row-span: 2;
-ms-grid-row: 1;
grid-row: 1/span 2
}
.three-images-one-large.layout-large_left_fifty_fifty .image-two {
-ms-grid-column-span: 1;
-ms-grid-column: 2;
grid-column: 2/span 1;
-ms-grid-row-span: 1;
-ms-grid-row: 1;
grid-row: 1/span 1
}
.three-images-one-large.layout-large_left_fifty_fifty .image-three {
-ms-grid-column-span: 1;
-ms-grid-column: 2;
grid-column: 2/span 1;
-ms-grid-row-span: 1;
-ms-grid-row: 2;
grid-row: 2/span 1
}
}
@media (min-width:769px) {
.three-images-one-large.layout-large_left_thirty_sixty {
-webkit-columns: 2;
columns: 2;
rows: 3
}
.three-images-one-large.layout-large_left_thirty_sixty .large-image {
-ms-grid-column-span: 1;
-ms-grid-column: 1;
grid-column: 1/span 1;
-ms-grid-row-span: 3;
-ms-grid-row: 1;
grid-row: 1/span 3
}
.three-images-one-large.layout-large_left_thirty_sixty .image-two {
-ms-grid-column-span: 1;
-ms-grid-column: 2;
grid-column: 2/span 1;
-ms-grid-row-span: 1;
-ms-grid-row: 1;
grid-row: 1/span 1
}
.three-images-one-large.layout-large_left_thirty_sixty .image-three {
-ms-grid-column-span: 1;
-ms-grid-column: 2;
grid-column: 2/span 1;
-ms-grid-row-span: 2;
-ms-grid-row: 2;
grid-row: 2/span 2
}
}
@media (min-width:769px) {
.three-images-one-large.layout-large_right_fifty_fifty .large-image {
-ms-grid-column-span: 1;
-ms-grid-column: 2;
grid-column: 2/span 1;
-ms-grid-row-span: 2;
-ms-grid-row: 1;
grid-row: 1/span 2
}
.three-images-one-large.layout-large_right_fifty_fifty .image-two {
-ms-grid-column-span: 1;
-ms-grid-column: 1;
grid-column: 1/span 1;
-ms-grid-row-span: 1;
-ms-grid-row: 1;
grid-row: 1/span 1
}
.three-images-one-large.layout-large_right_fifty_fifty .image-three {
-ms-grid-column-span: 1;
-ms-grid-column: 1;
grid-column: 1/span 1;
-ms-grid-row-span: 1;
-ms-grid-row: 2;
grid-row: 2/span 1
}
}
@media (min-width:769px) {
.three-images-one-large.layout-large_right_thirty_sixty {
-webkit-columns: 2;
columns: 2;
rows: 3
}
.three-images-one-large.layout-large_right_thirty_sixty .large-image {
-ms-grid-column-span: 1;
-ms-grid-column: 2;
grid-column: 2/span 1;
-ms-grid-row-span: 3;
-ms-grid-row: 1;
grid-row: 1/span 3
}
.three-images-one-large.layout-large_right_thirty_sixty .image-two {
-ms-grid-column-span: 1;
-ms-grid-column: 1;
grid-column: 1/span 1;
-ms-grid-row-span: 1;
-ms-grid-row: 1;
grid-row: 1/span 1
}
.three-images-one-large.layout-large_right_thirty_sixty .image-three {
-ms-grid-column-span: 1;
-ms-grid-column: 1;
grid-column: 1/span 1;
-ms-grid-row-span: 2;
-ms-grid-row: 2;
grid-row: 2/span 2
}
}
.triptych {
/* max-width: 1200px; */
/* padding: 0 30px; */
margin: 0 auto;
width: 100%
}
@media (min-width:769px) {
.triptych {
margin-bottom: 15px
}
}
.triptych img {
max-width: none;
width: 100%
}
@media (min-width:768px) {
.triptych img {
max-width: 100%
}
}
@media (min-width:769px) {
.triptych.height-slim {
height: 320px
}
}
@media (min-width:769px) {
.triptych.height-default {
height: 490px
}
}
@media (min-width:769px) {
.triptych.height-tall {
height: 680px
}
}
@media (min-width:769px) {
.triptych.height-xtall {
height: 799.7654px
}
}
.triptych .image-one, .triptych .image-three, .triptych .image-two {
margin-bottom: 15px
}
@media (min-width:769px) {
.triptych .image-one, .triptych .image-three, .triptych .image-two {
margin-bottom: 0;
position: relative;
margin: auto;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden
}
.triptych .image-one img, .triptych .image-three img, .triptych .image-two img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
vertical-align: bottom
}
}
@media (min-width:769px) {
.triptych {
display: -ms-grid;
display: grid;
-webkit-columns: 3;
columns: 3;
rows: 1;
grid-gap: 15px;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr
}
.triptych .image-one {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 2
}
.triptych .image-two {
-ms-grid-column: 2;
grid-column-start: 2;
grid-column-end: 3
}
.triptych .image-three {
-ms-grid-column: 3;
grid-column-start: 3;
grid-column-end: 4
}
}
.project-seperator {
display: block
}
/* image slider start */
.slider {
margin: 0 auto;
width: 100%;
}
.slide_viewer {
overflow: hidden;
position: relative;
}
.slide_viewer, .slider-container {
height: calc((100vw - 40px) * 0.625);
max-height: 813px;
width: 100%;
margin: 0 auto;
}
.slider-container {
max-width: calc(100% - 40px);
}
@media (min-width: 768px) {
.slider-container {
max-width: calc(100% - 100px);
}
.slide_viewer, .slider-container {
height: calc((100vw - 100px) * 0.625);
}
}
@media (min-width: 1400px) {
.slider-container {
max-width: 1300px
}
}
.slide_group {
height: auto;
position: relative;
width: 100%;
}
.slide {
display: none;
height: auto;
max-height: 100%;
position: absolute;
width: 100%;
}
.slide:first-child {
display: block;
}
.slide img {
width: 100%;
height: auto;
display: block;
}
.slide:nth-of-type(1) {
background: #D7A151;
}
.slide:nth-of-type(2) {
background: #F4E4CD;
}
.slide:nth-of-type(3) {
background: #C75534;
}
.slide:nth-of-type(4) {
background: #D1D1D4;
}
.slide_buttons {
display: none;
left: 0;
position: absolute;
right: 0;
text-align: center;
margin-top: -50px;
}
a.slide_btn {
color: #929292;
font-size: 27px;
margin: 0 0.275em;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-box-shadow: 0px 0px 23px -5px #CECECE;
box-shadow: 0px 0px 23px -5px #CECECE;
}
.slide_btn.active, .slide_btn:hover {
color: white;
cursor: pointer;
}
.directional_nav {
height: 70px;
margin: 0 auto;
position: relative;
top: -69%
}
.previous_btn {
bottom: 0;
left: 0px;
margin: auto;
position: absolute;
top: 0;
}
.next_btn {
bottom: 0;
margin: auto;
position: absolute;
right: 0px;
top: 0;
}
.previous_btn svg {
transform: scale(0.35)
}
.next_btn svg {
transform: rotate(180deg) scale(0.35)
}
@media (min-width: 768px) {
.previous_btn svg {
transform: scale(0.4)
}
.next_btn svg {
transform: rotate(180deg) scale(0.4)
}
.directional_nav {
top: -57%
}
.previous_btn {
left: 20px;
}
.next_btn {
right: 20px;
}
}
.previous_btn, .next_btn {
cursor: pointer;
height: 60px;
opacity: 0.75;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
width: 50px;
}
.previous_btn:hover, .next_btn:hover {
opacity: 1;
}
.single-post hr {
width: 100%;
background: black;
height: 11px;
border: none;
margin: 100px 0 0 0
}
@media (min-width:1140px) {
.single-post hr {
height: 18px;
margin: 100px 0 30px 0
}
}
footer {
width: 100vw;
overflow: hidden;
}
footer .container { height: 300px; position: relative}
.footer-tree {
position: absolute;
bottom: 0px;
right: -70px;
width: 200px;
}
.footer-links {
padding: 20px 0;
max-width: 400px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
footer { transition: 3s ease}
footer a {
color: white;
}
footer a {
opacity: 1 !important
}
footer h2:hover, footer h3:hover, footer h4:hover {
opacity: 1 !important;
}
.footer-top-links *,
.footer-bottom-links * {
transition: .4s ease;
}
.footer-top-links.hovered *,
.footer-bottom-links.hovered * {
opacity: 0.3;
transition: .2s ease
}
footer h3, footer h4 {font-family: 'Archivo', Arial, sans-serif}
footer h2 {font-family: 'pilowlavaregular'}
footer h3 {font-weight: 500;}
footer h4 {font-weight: 200;}
footer h4 /* Projects */ {font-size: 16px; padding-bottom: 10px}
footer h3 /* Links */ {font-size: 26px; margin-bottom: 6px;}
footer h2 /* Tom Harrington */ {font-size: 19px;}
footer #footer-about {margin-top: 20px;}
#footer-projects::before {
content: "";
background-image: url('data:image/svg+xml,');
width: 15px;
height: 12px;
background-size: 15px 12px;
background-repeat: no-repeat;
padding-right: 20px;
display: inline-block;
}
li.menu-item-11728 > a::before {
content: "";
background-image: url('data:image/svg+xml,');
width: 17px;
height: 14px;
background-size: 19px 14px;
background-repeat: no-repeat;
padding-right: 24px;
display: inline-block;
animation: folder-animate 0.5s;
}
li.menu-item-11728.hovered .sub-menu a::before {
animation: unset;
}
@keyframes folder-animate {
0% { transform: translateY(0px); }
25% { transform: translateY(5px); }
100% { transform: translateY(0px); }
}
li.menu-item-11728.hovered .sub-menu {
display:block;
opacity: 1;
}
.motion-and-animation li.menu-item-11728 a::before,
.web-and-digital li.menu-item-11728 a::before,
.about li.menu-item-11728 a::before {
background-image: url('data:image/svg+xml,');
}
li.menu-item-11728 a::before {
top: 0px;
transition: 0.2s ease;
position: relative;
}
li.menu-item-11728.hovered > a::before {
top: -3px;
transition: 0.4s ease
}
#site-header {
border-top: 1px solid #00000000;
border-bottom: 1px solid #00000000;
transform: translate(0px, -1px);
}
.motion-and-animation #site-header {
border-top: 1px solid #616161;
border-bottom: 1px solid #616161;
transform: translate(0px, -1px);
}
#site-header { margin-top: 10px !important}
@media (min-width: 768px) {
#site-header { margin-top: 20px !important}
}
@media (min-width: 1000px) {
/* #site-header.scrolled { margin-top: -20px !important} */
#site-header { margin-top: 30px !important}
}
#site-header a,
#site-header .site-title a {
border: 1px dashed #ffffff00;
/* border: 1px dashed white; */
border-radius: 1000px;
padding: 6px 16px 7px 16px;
}
.homepage #site-header a,
.homepage #site-header .site-title a {
border: 1px dashed #ffffff00;
}
.motion-and-animation #site-header a,
.design-and-branding #site-header a {
border: 1px dashed #ffffff00;
}
#site-header .site-title a {
/* border: unset; */
padding: 0;
width: fit-content;
}
/* .sub-menu-background-container {
width: 480px;
height: 300px;
right: -50px;
z-index: 1;
position: absolute;
background: blue;
mask-image: linear-gradient(-90deg, rgba(255, 255, 255, 1) 54%, rgb(255 255 255 / 0%) 100%);
} */
.sub-menu-background {
width: 550px;
height: 550px;
right: -140px;
top: -170px;
z-index: 1;
position: absolute;
backdrop-filter: blur(13px);
mask-image: radial-gradient(circle, rgba(255, 255, 235, 1) 32%, rgb(255 255 255 / 0%) 70%);
}
.homepage .sub-menu::before,
.design-and-branding .sub-menu::before,
.about .sub-menu::before,
.single-projects .sub-menu::before {
content: '';
background: black;
display: block;
position:absolute;
width: 1px;
height: 100%;
left: -1px;
top: 0px;
z-index: 1;
}
.about .sub-menu::before {
background: white;
}
/* .sub-menu {
opacity: 1 !important;
display: block !important
} */
.homepage .sub-menu::after {
background: #f3f3f300
}
.sub-menu::after {
content: '';
display: block;
width: 247px;
height: 258px;
left: -30px;
top: -100px;
z-index: -1;
position: absolute;
/* backdrop-filter: blur(50px); */
pointer-events: none;
background: #f3f3f3;
/* border-bottom: 1px solid black; */
/* box-shadow: 0px 8px 22px 0px rgba(0, 0, 0, 0.05); */
}
.about .sub-menu::after {
background: #121213;
}
.design-and-branding .sub-menu::after {
background: #f3f3f300;
}
.design-and-branding .scrolled .sub-menu::after,
.single-projects .scrolled .sub-menu::after {
background: white;
}
.web-and-digital .sub-menu::after,
.motion-and-animation .sub-menu::after {
background: #f3f3f300;
}
/* .sub-menu::after {
content: '';
width: 550px;
height: 550px;
right: -140px;
top: -170px;
z-index: -1;
position: absolute;
backdrop-filter: blur(0px);
mask-image: radial-gradient(circle, rgba(255, 255, 235, 1) 32%, rgb(255 255 255 / 0%) 70%);
pointer-events: none;
opacity: 1;
transition: 1s ease;
}
.hovered .sub-menu::after {
content: '';
width: 550px;
height: 550px;
right: -140px;
top: -170px;
z-index: -1;
position: absolute;
backdrop-filter: blur(13px);
mask-image: radial-gradient(circle, rgba(255, 255, 235, 1) 32%, rgb(255 255 255 / 0%) 70%);
pointer-events: none;
opacity: 1;
transition: 1s ease;
} */
.motion-and-animation .sub-menu::after {
opacity: 0.5
}
.sub-menu li a::before {
content: unset;
background-image: unset
}
.sub-menu {
position: absolute;
margin-top: 30px;
}
body:not(.overlay-header) .primary-menu ul {
background: unset
}
.sub-menu li {
margin-left: 0 !important;
padding: 5px;
text-align: left;
width: fit-content;
}
.motion-and-animation .sub-menu {
/* opacity: 1;
display: block; */
margin-top: 20px;
margin-left: -14px;
width: 267px;
}
.motion-and-animation .sub-menu li {
background: #0000003d;
border: 1px solid #616161;
width: 100%;
margin-bottom: -1px;
}
.motion-and-animation .sub-menu li.current-menu-item a {
color: #00FFD1 !important;
font-style: italic;
}
.motion-and-animation .primary-menu li:hover,
.motion-and-animation .sub-menu li:hover,
.motion-and-animation .site-title a:hover {
background: #0000007d
}
/* .motion-and-animation .site-title a {background: green !important} */
.primary-menu li {
padding: 16px 13px;
border-left: 1px solid #61616100;
margin-right: -19px;
margin-left: 19px;
z-index: 10;
}
.motion-and-animation .primary-menu li {
border-left: 1px solid #616161;
}
.design-and-branding .sub-menu,
.homepage .sub-menu,
.about .sub-menu,
.single-projects .sub-menu {
/* border-left: 1px solid black; */
background: unset;
height: 125px;
padding-top: 25px;
margin-top: 5px;
transform: translate(26px, -15px);
}
.about .sub-menu {
border-left: 1px solid white;
}
/* .design-and-branding .sub-menu li a:hover {
letter-spacing: 2px;
} */
.design-and-branding .sub-menu .current_page_item {
border: unset;
}
.sub-menu /* not hovered */ {
display: none;
opacity: 0;
/* display: block;
opacity: 1; */
/* transition: all 2s !important */
}
.sub-menu.hover {
/* background: red !important */
display:block;
opacity: 1;
transition: all 2s !important
}
.design-and-branding .sub-menu li a::before,
.homepage .sub-menu li a::before,
.about .sub-menu li a::before,
.single-projects .sub-menu li a::before
{
content: "";
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
width: 15px;
height: 1px;
background-size: 36px 1.5px;
background-repeat: repeat;
padding-right: 20px;
transform: translate(-4px, -6px);
display: inline-block;
}
.about .sub-menu li a::before {
content: "";
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
.design-and-branding .sub-menu li,
.homepage .sub-menu li,
.about .sub-menu li,
.single-projects .sub-menu li {
padding: 10px 0px;
margin-left: -23px !important;
transform: translate(0px, -4px)
}
.web-and-digital .sub-menu li {
padding: 14px 0 14px 0;
}
.web-and-digital .sub-menu li a {
padding: 8px 16px 9px 16px !important;
letter-spacing: -0.4px;
}
.web-and-digital .sub-menu {
margin-top: 13px;
}
@media(min-width: 1100px) {
.primary-menu li {
padding: 19px 13px;
}
}
#site-header .site-title a {
padding: 9px 21px 9px 9px;
margin-left: -9px;
}
.motion-and-animation #site-header .site-title a {
border-right: 1px solid #61616100;
border-radius: unset;
}
.motion-and-animation #site-header .site-title a {
border-right: 1px solid #616161;
}
.sub-menu li {
border-left: unset
}
#footer-projects {cursor: default; pointer-events: none; }
@media (min-width: 768px) {
#site-header .site-title a {
margin-left: -19px;
padding: 9px 21px 9px 22px;
}
footer .container {height: 450px}
.footer-links {padding: 40px 0;}
.footer-tree {
width: 480px;
right: -70px;
}
footer h4 /* Projects */ {font-size: 21px; padding-bottom: 10px}
footer h3 /* Links */ {font-size: 40px; margin-bottom: 6px;}
footer h2 /* Tom Harrington */ {font-size: 30px;}
#footer-projects::before {
width: 18.24px;
height: 14px;
background-size: 18.24px 13.9px;
background-repeat: no-repeat;
padding-right: 23px;
display: inline-block;
}
}
/* Design and branding */
body.design-and-branding {
background: #F3F3F3
url(http://tomharrington-website.s3.eu-west-2.amazonaws.com/wp-content/uploads/2024/12/24162816/Grid-paper-background.png)
left top/cover repeat fixed;
background-size: 1440px, 1434px;
}
body.motion-and-animation {
background: black
}
body.web-and-digital {
background: #0E22D2
}
.design-and-branding #ajax-load-more {
background: unset
}
.design-and-branding .content-item {
margin-bottom: 20vw;
}
.flex {
display: flex;
flex-direction: column;
}
/* Rive */
canvas {height: auto}
canvas#canvas_getintouch {
width: 130px;
position: absolute;
z-index: 20;
left: 65vw;
margin-top: -40px;
}
@media (min-width: 768px) {
canvas#canvas_getintouch {
width: 308px;
left: 48vw;
margin-top: -75px;
}
}
canvas#canvas_getintouch_about {
width: 220px;
z-index: 20;
right: 20px;
margin-top: 10vh;
margin-left: auto;
display: block;
}
@media (min-width: 768px) {
canvas#canvas_getintouch_about {
width: 250px;
left: 48vw;
margin-top: -75px;
}
}
@media (min-width: 1000px) {
canvas#canvas_getintouch_about {
width: 290px;
margin-top: 0;
position: absolute;
right: 11vw;
bottom: unset;
top: unset;
left: unset;
transform: translateY(-198px);
}
}
@media (min-width: 1400px) {
canvas#canvas_getintouch_about {
width: 330px;
right: 10vw;
transform: translateY(-250px);
}
}
@media (min-width: 1600px) {
canvas#canvas_getintouch_about {
right: 20vw;
}
}
canvas#canvas_ftwa {
width: 114%;
transform: translate(-4vw, 27px);
}
canvas {width: 100%}
#ftwa {width: 100%; margin-right: auto}
#pageturner {width: 100%; margin-left: auto}
canvas#canvas_ironheart_mobile { width: 204vw; margin-left: -83vw;}
canvas#canvas_ironheart { width: 197vw; margin-left: -12.5vw;}
canvas#canvas_belay { width: 115vw; margin-left: -10vw }
canvas#canvas_harryPotter {width: 114vw; margin-left: -9.5vw}
canvas#canvas_wiwh {width: 100vw; margin-left: 0vw}
.the-comedy-store-dab-img {margin-bottom: 15px}
@media(min-width: 550px) {
canvas#canvas_belay { width: 102vw; margin-left: -4vw }
}
@media(min-width: 768px) {
canvas {width: 100%}
#ftwa {width: 90%;}
canvas#canvas_ftwa { width: 114%; transform: translate(-4vw, 5vw); }
canvas#canvas_belay { width: 100vw; margin-left: -7vw; }
#pageturner {width: 70%;}
canvas#canvas_harryPotter {width: 100vw; margin-left: -9.5vw}
canvas#canvas_wiwh {width: 80vw; margin-left: 17vw}
.the-comedy-store-dab-img {max-width: 80% !important}
}
@media(min-width: 1100px) {
canvas#canvas_belay { width: 90vw; margin-left: -5vw; }
canvas#canvas_harryPotter {width: 87vw; margin-left: -4.5vw}
.the-comedy-store-dab-img {max-width: 75% !important}
}
@media(min-width: 1400px) {
#ftwa {
width: 1100px;
margin-left: 5vw
}
#ftwa .item-title {
margin-top: -190px;
}
canvas#canvas_ftwa { transform: translate(-55px, 5vw) }
#pageturner {width: 935px; margin-right: 3vw }
canvas#canvas_belay { width: 1050px; margin-left: 5vw; }
canvas#canvas_wiwh {width: 1200px; margin-left: 20vw}
canvas#canvas_harryPotter {width: 1400px; margin-left: -4.5vw}
canvas#canvas_ironheart { width: 2000px; margin-left: -5vw;}
.the-comedy-store-dab-img {max-width: 75% !important}
}
/* Wish I Was Here */
.module {
--x: 0px;
--y: 0px;
/* background-image: url(https://images.unsplash.com/photo-1499162526249-f5b8b9ba9923?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=865bf5c0b77ceb22e88de9fd41c5a671); */
/* background-size: 1000px; */
/* background-position: var(--x) var(--y); */
/* border: 1px solid white; */
}
.module, .wiwh_image_container {
width: 100%;
height: 100%;
margin-left: 50px;
}
.wiwh_image_container {
position: absolute;
}
.wiwh_image_container.foreground {
transform: translate(100px, 60px);
z-index: 50
}
/*
body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(#666, #222);
} */
#wiwh {
width: calc((((100vw - 1400px ) / 2) + 1400px) * 0.5 );
height: calc(((((100vw - 1400px ) / 2) + 1400px) * 0.5 ) * 0.6666 );
}
#wiwh_module img {
position: relative;
width: 100%;
height: auto;
}
#wiwh_module .wiwh_background {
top: calc(var(--y) / 15);
left: calc(var(--x) / 15);
z-index: 10;
}
#wiwh_module .wiwh_foreground {
top: calc(var(--y) / 7.5);
left: calc(var(--x) / 7.5);
z-index: 8;
}
#wiwh_module img {
transition: 0s !important
}
/* end Wish I Was Here */
/*
.sub-menu {
opacity: 1 !important;
display: block !important
} */
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden; }
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.has-scroll-smooth body {
overflow: hidden; }
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh; }
[data-scroll-direction="horizontal"] [data-scroll-container] {
height: 100vh;
display: inline-block;
white-space: nowrap; }
[data-scroll-direction="horizontal"] [data-scroll-section] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
height: 100%; }
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0; }
.c-scrollbar:hover {
transform: scaleX(1.45); }
.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
opacity: 1; }
[data-scroll-direction="horizontal"] .c-scrollbar {
width: 100%;
height: 10px;
top: auto;
bottom: 0;
transform: scaleY(1); }
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
transform: scaleY(1.3); }
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab; }
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing; }
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
right: auto;
bottom: 0; }
/* */
/* .sub-menu {
display: block;
opacity: 1
} */
.hamburger-icon-contianer .line {
background: white;
height: 1px;
width: 17px;
margin-bottom: 6px;
}
.page-template-design-and-branding .hamburger-icon-contianer .line,
.page-template-homepage .hamburger-icon-contianer .line,
.single-projects .hamburger-icon-contianer .line {
background: black;
}
.mobile-nav-toggle.active .hamburger-icon-contianer .line {
background: white;
}
.line-1, .line-2, .line-3 {
transition: 0.4s ease;
transform: rotate(0deg);
translate: 0px 0px;
}
button.active .hamburger-icon-contianer .line-1 {
transform: rotate(45deg);
translate: 0px 7px;
}
button.active .hamburger-icon-contianer .line-2 {
opacity: 1;
}
button.active .hamburger-icon-contianer .line-3 {
transform: rotate(-45deg);
translate: 0px -7px;
}
button.active .hamburger-icon-contianer .line-2 {
opacity: 0
}
.nav-toggle .toggle-icon, .nav-toggle svg {
width: 30px !important;
height: 50px !important;
margin-top: -10px
}
.header-inner .toggle {
padding-right: 10px !important;
margin-left: auto !important;
justify-content: flex-end;
}
/* */