:root {
--blue: #0000FF;
--padding: 24px;
--h2: 52px;
--h3: 26px;
--font-body: 26px;
--font-small: 16px;
--spacing-30: 30px;
--spacing-48: 48px;
--writings: 186.75px;
}
@media (min-width: 2560px) {
:root {
--padding: 36px;
--h2: 78px;
--h3: 39px;
--font-body: 23px;
--font-small: 23px;
--spacing-30: 48px;
--spacing-48: 72px;
--writings: 279.61px;
}
}
@media (max-width: 1366px) {
:root {
--padding: 24px;
--h2: calc(52px * 0.8);
--h3: calc(26px * 0.8);
--font-body: calc(26px * 0.8);
--font-small: 16px;
--spacing-30: 30px;
--spacing-48: 48px;
--writings: 149.61px;
}
}
@media (max-width: 991.98px) {
:root {
--padding: 16px;
--h2: 25px;
--h3: 16px;
--font-body: 16px;
--font-small: 12px;
--spacing-30: 16px;
--spacing-48: 32px;
--writings: auto;
}
}
.transition-main {
transition-property: opacity, transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transform: translateY(0);
opacity: 1;
}
html.is-animating .transition-main {
opacity: 0;
transform: translateY(-12px);
}
html.is-leaving .transition-main {
transform: translateY(24px);
}
html.is-animating.to-fade .transition-main {
opacity: 0;
transform: translateY(0);
}
html.is-leaving.to-fade .transition-main {
transform: translateY(0);
}
html.is-animating.to-left .transition-main {
opacity: 0;
transform: translateX(24px);
}
html.is-leaving.to-left .transition-main {
transform: translateX(-24px);
}
html.is-animating.to-right .transition-main {
opacity: 0;
transform: translateX(-24px);
}
html.is-leaving.to-right .transition-main {
transform: translateX(24px);
}
body, html {
background: #fff;
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
}
.white {
color: #fff;
}
.blue {
color: var(--blue);
}
/* GENERAL */
.uppercase {
text-transform: uppercase
}
/* TYPOGRAPHY */
h1, .h1 {
font-size: ;
line-height: ;
}
h2, .h2, .navbar-nav .nav-link {
font-size: var(--h2);
line-height: 0.9230769230769231em;
letter-spacing: -0.025em;
margin-top: -4px;
}
h3, .h3 {
font-size: var(--h3);
line-height: 1.2em;
}
h4, .h4 {
font-size: ;
line-height: ;
}
h5, .h5 {
font-size: ;
line-height: ;
}
body, html {
font-size: var(--font-body);
line-height: 1.2em;
color: #fff;
font-weight: 700;
}
small, .small {
font-size: var(--font-small);
line-height: var(--font-small);
}
.elementor-button, .btn.btn-default {
font-size: ;
line-height: ;
}
a, a:hover {
color: inherit;
text-decoration: none;
transition: all .3s ease;
}
a:hover {
color: var(--blue);
transition: all .3s ease;
}
/* END TYPOGRAPHY */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: var(--padding);
height: 100%;
background: #fff;
z-index: 9999;
}
body::after {
content: '';
position: fixed;
top: 0;
right: 0;
width: var(--padding);
height: 100%;
background: #fff;
z-index: 9999;
}
html::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--padding);
background: #fff;
z-index: 9999;
}
html::after {
content: '';
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: var(--padding);
background: #fff;
z-index: 9999;
}
#preloader-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: var(--padding);
background: #fff;
z-index: 9999;
}
/* HEADER */
#preloader .navbar-brand {
padding-left: 0 !important;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: var(--padding);
background: var(--blue);
z-index: 999;
margin-top: 4px;
padding-bottom: 9px;
transition: background .3s ease;
}
.navbar-brand {
padding-left: 15px !important;
}
.navbar, .navbar-brand, .nav-link {
padding: 0;
}
.navbar-dark .navbar-brand {
color: #fff;
}
.navbar-brand svg {
height: 87px;
}
.navbar-brand svg .cls-1 {
fill: white;
}
.menu-item {
xpadding-left: 100px;
}
.menu-item:first-of-type {
padding-left: 0;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
transition: color 0.3s ease;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
transition: all .3s ease;
}
#header-pattern-wrapper {
width: calc(100% - 33.333% - 640px);
height: 80px;
}
#preloader header, #preloader #preloader-image {
opacity: 0;
}
.page-loaded #preloader header, .page-loaded #preloader #preloader-image {
opacity: 1;
transition: all .3s ease;
}
#header-pattern-loader-wrapper {
width: calc(100% - 33.333% - 640px);
height: 80px;
}
#header-pattern {
position: absolute;
left: 600px;
top: 0;
height: 80px;
width: 100%;
background: url('data:image/svg+xml,') repeat-x left top;
}
#header-pattern-loader {
position: absolute;
right: 0;
top: 0;
height: 80px;
width: 100%;
background: url('data:image/svg+xml,') repeat-x right top;
}
.page-id-15 .menu-item-20 a, .page-id-17 .menu-item-19 a {
color: #fff !important;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 1px;
padding-left: 0;
}
#preloader header {
background: var(--blue) !important;
}
#preloader header .navbar-brand svg .cls-1 {
fill: #fff;
}
html.html-loaded::after {
opacity: 0;
transition: all .3s ease;
}
html.html-loaded.mobile-menu-opened::after {
opacity: 0;
transition: all .3s ease;
}
/* END HEADER */
/* CONTENT */
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--blue);z-index:9998;color: #fff;}
#preloader > header {
bottom: var(--padding);
top: auto;
padding-top: 4px;
}
#preloader-image {
width: 100%;
height: calc(100% - 100px - var(--padding));
background: url('img/792571809925ed1b9715007ba039a717.jpg') no-repeat center center;
background-size: cover;
position: relative;
overflow: hidden
}
#preloader-image .graphic img {
max-height: 30vh;
}
#preloader-image .graphic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#preloader-image .graphic.first {
position: absolute;
top: var(--padding);
left: 50%;
transform: translate(-50%, -50%);
}
#preloader-image .graphic.last {
position: absolute;
top: calc(100% - var(--padding));
left: 50%;
transform: translate(-50%, -50%);
}
#preloader header #header-pattern-loader-wrapper {
width: 100%;
}
main {
margin-top: 120px;
padding: var(--padding);
padding-top: 36px;
}
.mt-24 {
margin-top: var(--padding);
}
.mb-24 {
margin-bottom: var(--padding);
}
.mt-48 {
margin-top: var(--spacing-48);
}
.mb-48 {
margin-bottom: var(--spacing-48);
}
.footer-last {
margin-bottom: 18px;
}
.socials {
gap: var(--padding);
}
.list-inline {
margin-bottom: 0;
}
.list-inline-item:not(:last-child) {
margin-right: 100px !important;
text-align: left;
}
.list-inline-item{
xmargin-right: 0 !important;
}
.home main {
background: var(--blue);
color: #fff;
}
body:not(.home) main {
background: white;
color: #000;
}
body:not(.home) .list-inline a.back-to-top {
background: url('data:image/svg+xml,') no-repeat center right;
}
body:not(.home) .list-inline a.back-to-top:hover {
background: url('data:image/svg+xml,') no-repeat center right;
}
body.home .list-inline a.back-to-top:hover {
background: url('data:image/svg+xml,') no-repeat center right;
}
.back-to-top {
cursor: pointer;
}
.writing {
border-bottom: 1.5px solid #000;
margin-bottom: var(--padding);
padding-bottom: var(--spacing-48);
}
.single header, .mobile-menu-opened header {
background: #fff;
color: #000;
transition: background .3s ease;
}
.single header .navbar-brand svg .cls-1, body:not(.home) .social svg path, #mobile-nav .social svg path, .mobile-menu-opened header .navbar-brand svg .cls-1 {
fill: #000;
}
.single .navbar-dark .navbar-nav .nav-link {
color: #000;
transition: color 0.3s ease;
}
.single #header-pattern, .mobile-menu-opened #header-pattern {
background: url('data:image/svg+xml,') repeat-x left top;
xbackground-size: contain;
}
.sort {
cursor: pointer;
}
.apply-filter:hover, x.cat:hover, x.cat-year:hover, .filter-c:hover {
color: var(--blue);
}
.date-col {
width: calc(var(--writings) + 30px);
max-width: calc(var(--writings) + 30px);
}
.year-filter, .apply-filter {
width: var(--writings);
max-width: var(--writings);
margin-left: auto;
}
.list-inline a.back-to-top {
width: var(--writings);
display: inline-block;
text-align: left;
background: url('data:image/svg+xml,') no-repeat center right;
}
.image-2-col .col.image-2-col-left { padding-right: 6px;}
.image-2-col .col.image-2-col-right { padding-left: 6px;}
.single-project main .row p:last-child, .single-project main .row .h3 {
margin-bottom: 0;
}
.single-project .title-row {
position: sticky;
top: 135px;
z-index: 999;
}
img.img-16-9 {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.ratio-16-9 {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.ratio-3-2 {
aspect-ratio: 3 / 2;
object-fit: cover;
}
.ratio-4-3 {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.ratio-1-1 {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.ratio-9-16 {
aspect-ratio: 9 / 16;
object-fit: cover;
}
.full-img-section {
background: #dddddd;
}
.sort {
gap: 0 8px;
}
.cat, .cat-year {
cursor: pointer;
}
.cat.active, .cat-year.active {
color: var(--blue);
}
#filter-wrapper {
display: none;
}
.apply-filter, .filter-c {
cursor: pointer;
}
.filter-c {
text-transform: uppercase;
}
.clear-filters {
display: none;
}
.clear-filters a {
cursor: pointer;
}
html.editing-filter #filter-wrapper {
display: flex;
}
html.editing-filter .clear-filters {
display: block;
}
.sort.selected svg path {
fill: #0000FF;
}
.editing-filter .sort svg path {
fill: #cccccc;
}
.footer-section a:hover {
color: var(--blue);
}
.home .footer-section a:hover {
color: rgba(255,255,255,0.75)
}
.home .social:hover a svg path {
fill: rgba(255,255,255,0.75);
}
.project-summary-c {
margin-bottom: -24px;
display: none;
padding-top: var(--spacing-48);
}
.row.writing .col-lg-7, .close-summary {
cursor: pointer;
}
.row.writing:hover .col-lg-7 h2, .row.writing:hover .project-title-c, .row.writing:hover .right-col, .close-summary:hover {
color: var(--blue);
}
#mobile-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background: white;
z-index: 99;
color: #000;
overflow-y: auto;
display: none;
}
html.have-filters .filter-c {
color: var(--blue);
}
body.single .menu-item:hover a {
color: var(--blue) !important;
}
span.coma:last-child {
display: none;
}
@media (min-width: 1900px) and (max-width: 2559.98px) {
.right-col {
margin-left: auto !important;
max-width: 550px;
}
#header-pattern-wrapper {
width: calc(100% - 550px - 640px);
height: 80px;
}
#project-detail-c {
margin-left: auto !important;
max-width: 550px;
}
}
/* END CONTENT */
@media (hover: hover) and (pointer: fine) {
.social:hover a svg path, .sort .sort:hover svg path {
fill: var(--blue);
}
}
/* 2560 */
@media (min-width: 2559.98px) {
.navbar-brand svg {
height: 132px;
}
#header-pattern-wrapper, #header-pattern {
height: 120px;
}
#header-pattern-wrapper {
width: calc(100% - 33.333% - 940px);
}
#header-pattern {
background: url('data:image/svg+xml,') repeat-x left center;
left: auto;
background-size: 62px 120px;
}
.single #header-pattern {
background: url('data:image/svg+xml,') repeat-x left center;
background-size: 62px 120px;
}
main {
margin-top: 180px;
}
header-pattern-wrapper {
width: calc(100% - 33.333% - 840px);
height: 80px;
}
#preloader-image {
height: calc(100% - 145px - var(--padding));
}
#header-pattern-loader-wrapper, #header-pattern-loader {
height: 120px;
}
#header-pattern-loader {
background-size: 62px 120px;
}
} /* end 2560 */
.mobile, .mobile.d-flex { display: none; }
@media (max-width: 480px) {
#header-pattern, #header-pattern-wrapper {
width: 20px !important;
max-width: 20px !important;
}
#header-pattern-loader, #header-pattern-loader-wrapper {
}
}
@media (max-width: 991.98px) {
.mobile { display: block; }
.mobile.flex, .mobile.d-flex { display: flex; }
.desktop { display: none; }
.graphic-mobile.mobile-7 {
position: absolute;
xtop: var(--padding);
xtop: 0;
top: calc(12px - ((100% - 96px) / 7) / 2);
bottom: calc(12px - ((100% - 96px) / 7) / 2);
left: 0;
width: 100%;
xheight: calc(100% - var(--padding) - var(--padding));
xheight: calc(100% - 0px);
xheight: calc((100% - var(--padding) - var(--padding)) + 0px);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 0px;
grid-row-gap: 16px;
text-align: center;
}
.graphic-mobile.mobile-9 {
position: absolute;
xtop: var(--padding);
xtop: 0;
top: calc(12px - ((100% - 128px) / 9) / 2);
bottom: calc(12px - ((100% - 128px) / 9) / 2);
left: 0;
width: 100%;
xheight: calc(100% - var(--padding) - var(--padding));
xheight: calc(100% - 0px);
xheight: calc((100% - var(--padding) - var(--padding)) + ((100% - 128px) / 9));
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(9, 1fr);
grid-column-gap: 0px;
grid-row-gap: 16px;
text-align: center;
}
.graphic-mobile .graphic-m {
width: 100%;
height: 100%;
background: url('img/affect.png') no-repeat center center;
background-size: contain;
}
.navbar-brand svg {
height: 43px;
}
nav.justify-content-between {
justify-content: flex-start !important;
}
#header-pattern, #header-pattern-wrapper {
xwidth: 20px !important;
xmax-width: 20px !important;
height: 40px !important;
}
#header-pattern-loader, #header-pattern-loader-wrapper {
width: 100% !important;
max-width: calc(100% - 280px) !important;
height: 40px !important;
}
#header-pattern {
background: url('data:image/svg+xml,') no-repeat center left;
background-size: 20px auto;
}
#header-pattern-loader {
background: url('data:image/svg+xml,') space center center;
background-size: contain;
}
#header-pattern-wrapper {
position: relative;
}
#header-pattern {
left: 0;
}
main {
margin-top: 68px;
padding-top: 32px;
}
#preloader-image .graphic {
}
#preloader-image {
height: calc(100% - 56px - var(--padding));
}
}
@media (max-width: 991.98px) {
.graphic-mobile.mobile-7 {
opacity: 0;
}
.graphic-mobile.mobile-9 {
opacity: 1;
}
h3, .h3 {
line-height: 19.2px;
}
.socials {
margin-bottom: 32px;
}
.footer-last {
margin-bottom: 16px;
}
.list-inline a.back-to-top {
width: auto;
padding-right: 15px;
}
.writing {
padding-bottom: 0;
}
.writing h2 {
margin-bottom: var(--spacing-48)
}
.close-writing {
margin-top: calc(0px - var(--font-small));
}
.filter-c {
font-size: var(--h2);
line-height: 1em;
text-transform: capitalize;
}
.sort {
gap: 0 24px;
}
.sort svg {
width: 18px;
height: 18px;
}
.project-title-c {
width: calc(100% - 90px);
}
.project-summary-c {
margin-bottom: 16px;
display: none;
padding-top: 0;
}
.mobile-project-close-go {
gap: 30px
}
.single-project .title-row {
position: relative;
top: 0;
z-index: 999;
}
.image-2-col-left {
margin-bottom: 6px;
}
.clear-filters {
width: 55px;
margin-left: -30px;
}
.mobile-menu {
position: absolute;
right: 16px;
top: 3px;
}
.link-go-to {
color: #000;
margin-top: var(--spacing-48);
display: inline-block;
}
.go-to-icon a {
background: url('data:image/svg+xml,') no-repeat center right;
padding-right: 24px
}
#mobile-nav-wrapper {
margin-top: 68px;
padding-top: 32px;
padding-left: 16px;
padding-right: 16px;
}
#mobile-nav .link-go-to {
color: var(--blue);
margin-top: var(--spacing-48);
display: inline-block;
}
#mobile-nav .go-to-icon a {
background: url('data:image/svg+xml,') no-repeat center right;
padding-right: 24px
}
html.html-loaded::after {
opacity: 0;
transition: all .3s ease;
}
html.html-loaded.mobile-menu-opened::after {
opacity: 0;
transition: all .3s ease;
}
.social svg {
width: 24px;
height: 24px;
}.xtransition-main {
transition-property: opacity, transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transform: translateY(0);
opacity: 1;
}
.single #header-pattern, .mobile-menu-opened #header-pattern {
background-size: contain !important;
}
.xmobile-menu-opened body::before {
height: 100px;
transition: all .0s ease .2s;
}
.filter-c {
text-transform: uppercase;
}
a.back-to-top {
background-size: 9px !important;
background-position: top 1px right !important;
}
.mobile-menu-opened a.back-to-top {
background: url('data:image/svg+xml,') no-repeat center right !important;
background-size: 9px !important;
background-position: top 1px right !important;
}
.filter-c {
text-transform: capitalize !important;
}
body::before, body::after {height: 150vh;}
}
@media (max-width: 389.98px) {
.graphic-mobile.mobile-7 {
opacity: 1;
}
.graphic-mobile.mobile-9 {
opacity: 0;
}
header #header-pattern-wrapper {
display: none;
}
}
#preloader {
xdisplay: none !important;
}
@media (min-width: 480px) and (max-width: 991.98px) {
#header-pattern-wrapper {
width: calc(100% - 400px) !important;
max-width: 100% !important;
height: 40px !important;
}
#header-pattern {
width: 100% !important;
xmax-width: 100% !important;
background-repeat: repeat-x;
}
}
@media (min-width: 992px) {
#header-pattern-wrapper {
width: calc(100% - 33.333% - 600px);
height: 80px;
}
}