@font-face {
    font-family: 'OnsiteMonoTRIAL-Regular';
    src: url('../fonts/OnsiteMonoTRIAL-Regular.eot');
    src: url('../fonts/OnsiteMonoTRIAL-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OnsiteMonoTRIAL-Regular.woff2') format('woff2'),
         url('../fonts/OnsiteMonoTRIAL-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FKRomanStandardTrial-Regular';
    src: url('../fonts/FKRomanStandardTrial-Regular.eot');
    src: url('../fonts/FKRomanStandardTrial-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FKRomanStandardTrial-Regular.woff2') format('woff2'),
         url('../fonts/FKRomanStandardTrial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --black: #000;
    --poached: #fff;
    --poached: #FCF5D8;
    --coffee: #675434;
    --bluemonday: #85A9AD;
    --poached-darker: #FAEAB7;
    --sunrise: #ECC755;
    --sunset: #a25335;
    --toast: #7a4b2b;
    --pink: #D8A288;
    --gold: #A58D51;
}

body,td,th {
    font-family: 'OnsiteMonoTRIAL-Regular', 'Courier New', monospace, sans-serif;
    font-size:16px;
	line-height:1.2;
    margin:0;
    padding:0;
    background:var(--poached);
	color:var(--black);
	text-align:left;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background-color 0.2s ease;
    -moz-transition: background-color 0.2s ease;
    transition: background-color 0.4s ease;
    cursor: none!important;
}

.contact-block {padding:40px;background: var(--sunset);}

form {font-family: 'OnsiteMonoTRIAL-Regular', 'Courier New', monospace, sans-serif!important;line-height:1.2!important;font-size: 12px;letter-spacing: 1px;line-height: 1.2;text-transform: uppercase;}

body.dark {background-color:var(--coffee);color: var(--poached);}
body.dark a, body.dark #header a {color: var(--poached);}
body.dark a {border-bottom: 1px solid;}
body.dark a:hover {color: var(--poached);}
body.dark .line {border-bottom: 1px solid var(--poached);}
body.dark #header a:hover {border-bottom: 1px solid var(--poached);}
body.dark #header a.no-underline:hover {border-bottom: 1px solid transparent;}
body.dark .big-links a {border-bottom: 1px solid var(--poached);border: 1px solid var(--poached);color: var(--poached);}
body.dark .big-links a.active {background: var(--poached);color: var(--coffee);}
body.dark .big-links a:hover {background: var(--poached);color: var(--coffee);}
body.dark #header svg#anewday g {fill: var(--poached);}
body.dark #c .circle {background: var(--bluemonday);}
body.dark .brand {background: var(--gold);color: var(--poached);}
body.dark .hamburger-inner, body.dark .hamburger-inner::before, body.dark .hamburger-inner::after {background-color: var(--poached);}

body.dark.menu-open .hamburger-inner, body.dark.menu-open .hamburger-inner::before, body.dark.menu-open .hamburger-inner::after {background-color: var(--black);}
body.dark.menu-open #header {color: var(--black);}
body.dark.menu-open #header svg#anewday g {fill: var(--black);}

.basic-page {max-width: 500px;margin:0 auto;}
.basic-page strong {margin-top:2em;text-transform: uppercase;}
.basic-page p:has(strong) {
  padding-top: 30px;
}


#toggle:hover {}
#toggle span:hover {border-bottom: 1px solid;}

#cookie-banner {position:fixed; bottom:0; left:0;right:0; background:var(--poached); color:var(--black); padding:10px; text-align:center; z-index:5555;opacity: 0;pointer-events: none;transition: opacity 0.4s ease;border-top: 1px solid; }
button {text-transform: uppercase;color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 1;position: relative;border:1px solid var(--black);padding: 8px 10px;text-align: center;border-radius: 20px;min-width: 140px;background: transparent;font-size:12px;}
button:hover {color: var(--poached);background: var(--black);}
#cookie-banner a {border-bottom: 1px solid var(--black);color: var(--black);}
#cookie-banner a:hover {border-bottom: 1px solid transparent;}



/* Homepage Whit Text */
body.id-home #header, body.id-home #header a {color: var(--poached)!important;}
body.id-home #header a:hover {border-bottom: 1px solid var(--poached)!important;}
body.id-home #header a.no-underline{border-bottom: 1px solid transparent!important;}
body.id-home #header a.no-underline:hover {border-bottom: 1px solid transparent!important;}
body.id-home #header svg#anewday g, body.id-home #header svg#anewday-intro g {fill: var(--poached)!important;}
body.id-home .vis {color: var(--poached)!important;}
body.id-home .vis a {color: var(--poached)!important;}
body.id-home .vis a:hover {border-bottom: 1px solid var(--poached)!important;}
body.id-home .hamburger-inner, body.id-home .hamburger-inner::before, body.id-home .hamburger-inner::after {background-color: var(--poached)!important;}
body.id-home {background: #000;}
body.id-home #footer {background: var(--poached);margin:0px;padding:0px 10px;color: var(--black);}

/* Overide for Home Menu Open */
body.id-home.menu-open #header svg#anewday g, body.id-home.menu-open #header svg#anewday-intro g {fill: var(--black)!important;}
body.id-home.menu-open #header, body.id-home.menu-open #header a {color: var(--black)!important;}
body.id-home.menu-open #header a:hover {border-bottom: 1px solid var(--black)!important;}
body.id-home.menu-open #header a.no-underline{border-bottom: 1px solid transparent!important;}
body.id-home.menu-open .hamburger-inner, body.id-home.menu-open .hamburger-inner::before, body.id-home.menu-open .hamburger-inner::after {background-color: var(--black)!important;}



::selection {color:var(--black);background:var(--poached);}
::-moz-selection {color:var(--black);background:var(--bluemonday);}

b, strong, h1, h2, h3 {font-weight: normal;}

a {color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 1;position: relative;}
a:hover {color:var(--black);text-decoration:none;border-bottom:1px solid var(--black);opacity: 1;cursor: none!important;}

#header a.no-underline {color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 1;position: relative;}
#header a.no-underline:hover {color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 1;}

.underline a {color:var(--black);text-decoration:none;border-bottom:1px solid var(--black);opacity: 1;position: relative;}
.underline a:hover {color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 1;}

.big-links a {color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 1;position: relative;display:block;border:1px solid var(--black);padding: 8px 10px;text-align: center;border-radius: 20px;margin-bottom: 10px;min-width: 140px;}
.big-links a:hover {color:var(--black);text-decoration:none;border-bottom:1px solid var(--black);opacity: 1;background: var(--black);color: var(--poached);border:1px solid var(--black);}
.big-links a.active {color:var(--black);text-decoration:none;border-bottom:1px solid var(--black);opacity: 1;background: var(--black);color: var(--poached);border:1px solid var(--black);}

a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

p {margin: 0 0 1em;}
p:last-child {margin-bottom: 0;}

.t {display: table;height: 100%;margin: 0;}
.tc {vertical-align: middle;display: table-cell;}

.type-serif {font-family: 'FKRomanStandardTrial-Regular';}
.type-sans {font-family: 'OnsiteMonoTRIAL-Regular';}

.type-default {font-size: 12px;letter-spacing: 1px;line-height: 1.2;}
.type-body {font-size: 12px;letter-spacing: 0px;line-height: 1.2;}
.type-trans-uppercase {text-transform: uppercase;}

.type-size-h1 {font-size: 32px;line-height: 1.1;}
.type-size-h2 {font-size: 26px;line-height: 1.1;}

img, video {width: 100%;height: auto;}

.regLogo {max-width: 250px;height: auto;}
body.dark .regLogo {filter: invert(100);}

.col-parent {font-size: 0;line-height: 0;}
.col-1 {display: inline-block;width: 16.6666%;vertical-align: top;}
.col-2 {display: inline-block;width: 33.3333%;vertical-align: top;}
.col-3 {display: inline-block;width: 50%;vertical-align: top;}
.col-4 {display: inline-block;width: 66.6666%;vertical-align: top;}
.col-5 {display: inline-block;width: 83.3333%;vertical-align: top;}
.col-6 {display: inline-block;width: 100%;vertical-align: top;}

#header {position: fixed;top:0;left:0;right:0;z-index: 555;padding: 10px;}
#header #about {text-align: right;}
#header #menu-col {display: none;position: relative;}

#header #links {text-align: right;}
#header #links a {margin-left:40px;}

#header #toggle .inner .type-default {height: 15px;overflow: hidden;position: relative;}
.sunrise {position: absolute;top:0;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.sunset {position: absolute;top:-15px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

body.dark .sunrise {top:15px;}
body.dark .sunset {top:0;}

.align-right {text-align: right;}

.brand-vis {padding-top: 125%;position: relative;overflow: hidden;}
.brand-vis-s {position: absolute;top:0;left:0;right:0;bottom: 0;opacity: 0;
 -webkit-transition: opacity 0.8s ease-out;
-moz-transition: opacity 0.8s ease-out;
transition: opacity 0.8s ease-out;
}
.brand-vis-s.active {opacity: 1;}
.brand-vis-s img, .brand-vis-s video {object-fit: cover;height: 100%;width: 100%;}

/*
#header .inner {padding:20px 20px 0;}
#header .inner .list {position: relative;font-size: 0;line-height: 0;}
#header .inner .list .item {position: relative;display: inline-block;width:25%;background: pink;vertical-align: top;}
#header .inner .list .item.logo {width:33%;}
#header .inner .list .item.sunrise {width:33%;background: thistle;}
#header .inner .list .item.projects {width: 16.6%;background:peru;}
#header .inner .list .item.about {width: 16.6%;background: lightgreen;text-align: right;}
#header .inner .list .item {background: transparent!important;}
*/

#header svg {width: 250px;height: auto;}
#header svg#anewday-intro {position: fixed;left:20px;top:20px;z-index: 999;pointer-events: none;}
#header svg#anewday-intro g {fill: var(--black);}
#header svg#anewday-intro g#Slash_A, #header svg#anewday-intro g#Slash_B {opacity: 0;}

#header svg#anewday {}
#header svg#anewday g {fill: var(--black);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out ;}
#header svg#anewday g.hidden {opacity: 0;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out ;
}
#header svg#anewday g.slash-hidden {opacity: 1;
-webkit-transition: all 0.8s ease-out 0.2s;
-moz-transition: all 0.8s ease-out 0.2s;
transition: all 0.8s ease-out 0.2s;
}
#header svg#anewday:hover g.hidden {opacity: 1!important;
-webkit-transition: all 0.8s ease-out 0.2s;
-moz-transition: all 0.8s ease-out 0.2s;
transition: all 0.8s ease-out 0.2s;
}
#header svg#anewday:hover g.slash-hidden {opacity: 0;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

#header a, #header-mobile a {color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 1;position: relative;}
#header a:hover, #header-mobile a:hover  {color:var(--black);text-decoration:none;border-bottom:1px solid transparent;opacity: 0.5;}


.rel:hover .icon {opacity: 1;}
.icon {position: absolute;top:0;right:0;width:20px;height:20px;opacity: 0;background: var(--poached-darker);

-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.2s ease-out;
}
.icon:after {content: "";display: block;width: 1px;height:11px;background: var(--black);position: absolute;left:10px;top:5px;}
.icon:before {content: "";display: block;width: 11px;height:1px;background: var(--black);position: absolute;left:5px;top:10px;}

a.zoom-image .rel img {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.5s ease-out;
}

a.zoom-image .rel:hover img {transform: scale(1.02);}

/* Menu */
#menu {position: absolute;right: -5px;top:-5px;z-index: 666;text-align: right;}

.hamburger {
    display: inline-block;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible; 
    /* background: rgba(255,255,0,0.5); */
    padding: 10px;
}

.hamburger:hover {opacity: 1; }

.hamburger-box {
width: 20px;
height: 20px;
display: inline-block;
position: relative; 
transform: translateY(12px);
}

.hamburger-inner {
display: block;
top: 50%;
margin-top: -10px; 
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 20px;
    height: 1px;
    background-color: var(--black);;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; 
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; 
}

.hamburger-inner::before {
    top: -5px;
}

.hamburger-inner::after {
    bottom: -5px; 
}

.hamburger-inner {background:transparent}

.hamburger--spin .hamburger-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}

#header-mobile {background: var(--bluemonday);color: var(--black);position: fixed;top: -100vh;left:0;right:0;z-index: 444;pointer-events: none;opacity: 1;height:50vh;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in-out;
}

#header-mobile .list {position: absolute;bottom:20px;left:20px;right:20px;}

#main {margin: 160px 20px 40px;font-size: 0;line-height: 0;}

body.menu-open #header-mobile {opacity:1;pointer-events: all;top:0;}
body.menu-open {overflow: hidden;}

body.id-projects #link-projects {border-bottom: 1px solid;}
body.id-studio a#link-studio {border-bottom: 1px solid;}
body.id-press a#link-press {border-bottom: 1px solid;}
body.id-contact a#link-contact {border-bottom: 1px solid;}


#header .bk-header {
    /*background: linear-gradient(180deg,rgba(252, 245, 216, 1) 10%, rgba(252, 245, 216, 0.5) 60%, rgba(252, 245, 216, 0) 100%);*/
    background: var(--poached);
    position: absolute;top: 0;left:0;right:0; height: 55px;z-index: -1;
    display: none;
}
#header .bk-header-grad {
    background: linear-gradient(180deg,rgba(252, 245, 216, 1) 0%, rgba(252, 245, 216, 0) 100%);
    position: absolute;top: 55px;left:0;right:0; height: 10px;z-index: -1;
    display: none;
}



/* * * * * * * * * * * Projects * * * * * * * * * * */

ul#list-projects {list-style: none;margin: 0;padding: 0;}
ul#list-projects li {display: inline-block;}
ul#list-projects li div {display: inline;}
ul#list-projects li:after {content: ",";margin-right:0.2em;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
transition: opacity 0.4s ease-out;
}
ul#list-projects li:last-child:after {content: "";}
ul#list-projects li:last-child:before {content: "and ";margin-left:0.2em;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
transition: opacity 0.4s ease-out;
}
ul#list-projects li:nth-last-child(2):after {content: "";}

.projects-list ul#list-projects a {border-bottom: 0px solid;}
.projects-list ul#list-projects a:hover {border-bottom: 0px solid;}
.projects-list ul#list-projects:hover li a, ul#list-projects:hover li:after, ul#list-projects:hover li:last-child:before, .projects-list:hover li:last-child:after {opacity: 0.25;}
.projects-list ul#list-projects li a:hover {opacity: 1;}

.project-title {display: inline;}
.project-year {margin-left: 5px;vertical-align: top!important;display: inline-block!important;}


.counter {display: inline-block;}

#zoom {position: fixed;z-index: 1111;top:0;left:0;right: 0;bottom: 0;overflow-y: scroll;background: var(--poached);pointer-events: none;opacity: 0;font-size: 0;line-height: 0;
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center;  
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
#zoom img {width: 75%;height: auto;margin:0 auto;text-align: center;display: flex;z-index: 1;}
#zoom img.landscape {width: 100%;}
#zoom .top-right {position: fixed;right:20px;top:20px;z-index: 10;}

body.zoom-active #zoom {opacity: 1;pointer-events: all;}
body.zoom-active {overflow: hidden;}

.top-sec {}
.bottom-sec {}

.brand-text {position: absolute;left:20px;top:0;bottom: 0;z-index: 100;width: 40%;}
.brand-text-single {opacity: 0;
-webkit-transition: opacity 0.8s ease-out;
-moz-transition: opacity 0.8s ease-out;
transition: opacity 0.8s ease-out;
position: absolute;
left:0;
top:0;
bottom:0;
width:100%;
}
.brand-text-single.active {opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
transition: opacity 0.8s ease-out;
}

.block {position: relative;font-size: 0;line-height: 0;margin-top: 40px;}
.block-title {display: inline-block;width:33.333%;vertical-align: top;position: absolute;top:0;}
.block-body {display: inline-block;margin-left:33.333%;vertical-align: top;}

.float {display: inline-block;vertical-align: top;width: 45px;}
.margin-top {margin-top: 5px;}

.project-first, .projects-list {margin:0 -10px 40px;position: relative;}
.project-intro {}
.project-hero-visual {}
.project-meta {position: absolute;bottom: 0;left:0;}

body.template-project-page .projects-list {margin:80px -10px 80px;}
.roman-num {display: inline;}

.next {margin:0 -10px 40px;}
.brand {background: var(--bluemonday);margin:40px -10px 40px;position: relative;display: flex;}
.brand .brand-text-loop .inner {height:100%;}
.brand .brand-text-loop .inner .brand-text {width: 100%;left:10px;right:10px;}

#footer {margin: 0px 10px;font-size: 0;line-height: 0;}
#footer span:after {content: "\0020\2022\0020";}
#footer span:last-child:after {content: " ";}
#footer .col-2 a {margin-left:20px;}

.press-logo {z-index: 20;object-fit: contain!important;width: 100%!important;left:0!important;right: 0;top:0;bottom:0;background: rgba(0,0,0,0.3);position: absolute;}
.press-logo img {max-width: 170px;filter: invert(1);height: inherit!important;width: inherit!important;position: absolute;
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%);object-fit: contain;}

body.id-home #footer {margin-top: 100vh;}
body.id-home #main {margin:0;}

body.touch #c {display: none!important;}
#c {position: fixed;left:50%;top:50%;width:400px;height:200px;z-index: 6666;pointer-events: none;
    opacity: 0;
    -webkit-transition: all 0.0s ease-out;
    -moz-transition: all 0.0s ease-out;
    transition: all 0.0s ease-out;
}
#c .t {width: 100%;}
#c .t .tc {text-align: center;}
#c .circle {width: 12px;height: 12px;background: var(--sunset);border-radius: 100%;margin: 0 auto;
    -webkit-transition: all 0.0s ease-out;
    -moz-transition: all 0.0s ease-out;
    transition: all 0.2s ease-out;}

body.link-hover #c .circle {width: 20px;height:20px;}

.line {border-bottom: 1px solid var(--black);padding-bottom: 20px;margin-bottom: 20px;}

.project-images {font-size:0;line-height: 0;margin: 0 -10px 0;}
.project-images .single-item {width:20%;display: inline-block;vertical-align: top;}
.project-images .single-item.landscape {width: 60%;}
.project-images .single-item.portrait:nth-child(3n) {width:40%;}
.project-images .single-item.portrait:nth-child(6) {width:40%;}
.project-images .single-item.portrait:nth-child(7) {width:20%;}
.project-images .single-item.portrait:nth-child(9) {width:20%;}
.project-images .single-item.portrait:nth-child(9) {width:20%;}
.project-images .single-item.portrait:last-child {width:20%;}
.project-images .single-item.process {width: 100%;margin-bottom: 0px;}
.project-images .single-item.credits {width:40%;}
.project-images .single-item.credits .rel {background: var(--sunrise);}
.project-images .single-item.credits .rel .credits-text {position: absolute;top:0;bottom:0;left:0;right:0;}
.project-images .single-item.credits .rel .credits-text .credits-quote {padding:20px;}
.project-images .single-item.credits .rel .credits-text .credits-meta {position: absolute;bottom: 20px;left: 20px;right:20px;}

.project-images-list {font-size:0;line-height: 0;margin: 0 -10px 0;}

.project-images-overview .prod-code {padding-bottom:10px;}
.project-images-overview .link {padding-top:10px;}
.project-images-overview .col-1 {width: 20%;}

.inner {padding:10px;position: relative;}
.item .line {padding-bottom:0px;margin-bottom: 0px;}

.hide {display: none;}

.about-text {font-size:0;line-height: 0;margin: 80px -10px;}

.vis-colourshit-2 .rel:after, .vis-colourshit-2 .half:after {content: '';display: block;position: absolute;top:0;bottom: 0;left:0;right: 0;z-index: 444;background: rgba(236, 199, 85, 0.2);mix-blend-mode: overlay;pointer-events: none;}
.vis-colourshit-2 #content:after {content: '';display: block;position: fixed;top:0;bottom: 0;left:0;right: 0;z-index: 444;background: rgba(236, 199, 85, 0.2);mix-blend-mode: overlay;pointer-events: none;}



.press.project-images .single-item.portrait {width:20%!important;}

.rel.portrait {padding-top: 125%;}
.rel.square {padding-top: 125%;}
.rel.landscape {padding-top: 66.67%;}

.rel {position: relative;background:var(--bluemonday);overflow: hidden;
    display: flex;
    align-items: center;    /* Vertical center */
    justify-content: center; /* Horizontal center */
    height: 100%; }
.rel img, .rel video {object-fit: cover;height: 100%;width: 100%;position: absolute;left:0;top:0;}

/* * * * * * * * * * * Homepage Slider * * * * * * * * * * */
.vis {position: absolute;top: 0px;left:0px;right:0px;bottom: 0px;background: #000;z-index: 0;height: 100vh;}
/*
.vis .swiper-slide img, .vis .swiper-slide video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0px !important;
    padding: 0px !important;
    position: absolute;
}
    */

.vis .swiper-slide.count-1 .half {width: 100vw;height: 100vh;}
.vis .swiper-slide.count-2 .half.num-1 {width: 50vw;height: 100vh;position: absolute;left:0;width: 50%;}
.vis .swiper-slide.count-2 .half.num-2 {width: 50vw;height: 100vh;position: absolute;right:0;width: 50%;}
.vis .swiper-slide .half img, .vis .swiper-slide .half video {
    width: 100%;height: 100%;object-fit: cover;opacity: 0.85;
}



.swiper-horizontal {overflow: hidden!important;}
.swiper-hp {height: 100%;}
.swiper {width: 100vw;height: 100vh;}
.swiper-slide {width: 100vw;height: 100vh;position: relative;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    background: #000;
}



.wrap {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            
            /* Center the child within this offset box */
            display: flex;
            align-items: center;
            justify-content: center;
            
            /* Required for the 'cqw/cqh' logic below */
            container-type: size; 
        }

.child-4-5 {
            /* 1. Define the 4:5 Ratio (0.8) */
            aspect-ratio: 4 / 5;

            /* 2. Maximizing Logic:
               It looks at the parent's width (100cqw) and height (100cqh).
               It picks the smaller one to ensure it never overflows. */
            width: min(100cqw, calc(100cqh * 4 / 5));
            height: min(100cqh, calc(100cqw * 5 / 4));

            /* Visuals */
            display: flex;
            align-items: center;
            justify-content: center;
            object-fit: cover;
            overflow: hidden;
        }


.child-4-5 img {width:100%;height: auto;}

.child-4-5 video {width: 100%;height:auto;}

.swiper-pagination-bullet {background: rgba(255,255,255,0.25)!important;opacity: 1!important;}
.swiper-pagination-bullet-active {background: rgba(255,255,255,1)!important;opacity: 1!important;}

.swiper-pagination {position: relative!important;text-align: left!important;display: inline-block!important;}
.swiper-pagination-fraction {bottom: auto!important;top:auto!important;left:auto!important;width: inherit!important;}

.swiper-button-next {opacity: 1;height: 100vh;right:0px!important;width:10vw!important;margin-top:0px!important;top:0px!important;}
.swiper-button-prev {opacity: 1;height: 100vh;left:0px!important;width:10vw!important;margin-top:0px!important;top:0px!important;}

.hp-meta {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 20px;
    z-index: 100;
    text-transform: uppercase;
}
.hp-meta .swiper-pagination {margin-right:20px;display: none!important;}

#in-progress .col-1 .inner .b {background: var(--bluemonday);padding: 10px;position: absolute;top:0;left:0;right:0;}





/* Fade In */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation:fadeIn ease-in 1;
    	animation:fadeIn ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.4s;
    	-moz-animation-duration:0.4s;
    	animation-duration:0.6s;

        -webkit-animation-delay:0s;
        -moz-animation-delay:0s;
        -o-animation-delay:0s;
        animation-delay:0s;

}

/* HP Fade Out */
@-webkit-keyframes HPfadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes HPfadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes HPfadeOut { from { opacity:1; } to { opacity:0; } }
 
.hp-fade-out {
    	opacity:1;  /* make things invisible upon start */
    	-webkit-animation: HPfadeOut ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation: HPfadeOut ease-in 1;
    	animation: HPfadeOut ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.4s;
    	-moz-animation-duration:0.4s;
    	animation-duration:0.4s;

        -webkit-animation-delay:1s;
        -moz-animation-delay:1s;
        -o-animation-delay:1s;
        animation-delay:1s;

}

/* HP Fade In */
@-webkit-keyframes HPfadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes HPfadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes HPfadeIn { from { opacity:0; } to { opacity:1; } }
 
.hp-fade-in {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation: HPfadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation: HPfadeIn ease-in 1;
    	animation: HPfadeIn ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.4s;
    	-moz-animation-duration:0.4s;
    	animation-duration:0.4s;

        -webkit-animation-delay:1.2s;
        -moz-animation-delay:1.2s;
        -o-animation-delay:1.2s;
        animation-delay:1.2s;

}

/* Logo Fade Out */
@-webkit-keyframes logofadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes logofadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes logofadeOut { from { opacity:1; } to { opacity:0; } }
 
.logo-fade-out {
    	opacity:1;  /* make things invisible upon start */
    	-webkit-animation: logofadeOut ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation: logofadeOut ease-in 1;
    	animation: logofadeOut ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0.4s;
    	-moz-animation-duration:0.4s;
    	animation-duration:0.4s;

        -webkit-animation-delay:2s;
        -moz-animation-delay:2s;
        -o-animation-delay:2s;
        animation-delay:2s;

}

/* Logo Fade In */
@-webkit-keyframes logofadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes logofadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes logofadeIn { from { opacity:0; } to { opacity:1; } }
 
.logo-fade-in {
    	opacity:0;  /* make things invisible upon start */
    	-webkit-animation: logofadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    	-moz-animation: logofadeIn ease-in 1;
    	animation: logofadeIn ease-in 1;
 
    	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    	-moz-animation-fill-mode:forwards;
    	animation-fill-mode:forwards;
 
    	-webkit-animation-duration:0s;
    	-moz-animation-duration:0s;
    	animation-duration:0s;

        -webkit-animation-delay:1.5s;
        -moz-animation-delay:1.5s;
        -o-animation-delay:1.5s;
        animation-delay:1.5s;

}

/* * * * * * * * * * * @media Break Points * * * * * * * * * * */


@media screen and (max-width: 1250px) {
    /* 5 Col */
    .press-logo img {max-width: 120px;}
    .project-meta {position: relative;width: 100%;}
    .block-title {width:20%;}
    .block-body {margin-left:20%;}
    .bottom-sec .block:first-child {margin-top: 20px;}
    #header #logo {width: 40%;}
    #header #toggle {width: 20%;}
    #header #projects {width: 20%;}
    #header #about {width: 20%;}
    .projects-list .col-2 {width: 40%;}
    .projects-list .col-4 {width: 60%;}
    .col-1 {width: 20%;}
    .col-2 {width: 40%;}
    .col-3 {width: 60%;}
    .col-4 {width: 60%;}
    .col-5 {width: 80%;}
    .project-first .project-intro {width:60%;}
    .project-first .project-hero-visual {width:40%;}
    .project-first .project-meta.col-3 {width: 100%;}
    .project-images .single-item {width:25%;}
    .project-images .single-item.landscape {width: 75%;}
    .project-images .single-item.portrait:nth-child(3n) {width:25%;}
    .project-images .single-item.portrait:nth-child(6) {width:50%;}
    .project-images .single-item.portrait:nth-child(7) {width:50%;}
    .project-images .single-item.portrait:last-child {width:25%;}
    .project-images .single-item.portrait:nth-child(2) {width:50%;}
    .project-images .single-item.portrait:nth-child(4) {width:25%;}
    .project-images .single-item.portrait:nth-child(11) {width:50%;}
    .project-images .single-item.portrait:nth-child(15) {width:50%;}
    .press.project-images .single-item.portrait {width:25%!important;}
    .project-images .single-item.credits {width:50%;}
    .project-images-overview .num-5 {display:none;}
    .project-images-overview .col-1 {width: 25%;}
    .type-size-h1 {font-size: 25px;line-height: 1.1;}
    .type-size-h2 {font-size: 22px;line-height: 1.1;}
    .brand .col-3 {width: 40%;}
    .about-text .col-4 {width:80%;}
    #header #links a {margin-left:20px;}
    .big-links a {min-width: inherit;}
 
}

@media screen and (max-width: 1024px) {
    
}

@media screen and (max-width: 768px) {
    /* 4 Col */
    .press-logo img {max-width: 100px;}
    #header svg {width: 200px;height: auto;}
    .project-first .col-3 {width:100%;}
    #header #logo {width: 50%;}
    #header #toggle {width: 40%;}
    #header #projects {width: 25%;display: none;}
    #header #about {width: 25%;display: none;}
    #header #links {display: none;}
    #header #menu-col {width:10%;display: inline-block;}
    .projects-list .col-2 {width: 25%;}
    .projects-list .col-4 {width: 75%;}
    .project-intro, .project-hero-visual  {width: 100%;}
    .type-size-h1 {font-size: 20px;line-height: 1.1;}
    .type-size-h2 {font-size: 18px;line-height: 1.1;}
    .line {padding-bottom: 10px;margin-bottom: 10px;}
    #main {margin: 100px 20px 20px;}
    .project-images .single-item {width:33.3%;}
    .project-images .single-item.landscape {width: 66.6%;}
    .project-images .single-item.portrait:nth-child(3n) {width:33.3%;}
    .project-images .single-item.portrait:nth-child(3) {width:66.6%;}
    .project-images .single-item.portrait:nth-child(4) {width:33.3%;}
    .project-images .single-item.portrait:nth-child(6) {width:33.3%;}
    .project-images .single-item.portrait:nth-child(7) {width:33.3%;}
    .project-images .single-item.portrait:last-child {width:33.3%;}
    .project-images .single-item.portrait:nth-child(2) {width:66.6%;}
    .project-images .single-item.portrait:nth-child(9) {width:66.6%;}
    .project-images .single-item.portrait:nth-child(11) {width:66.6%;}
    .project-images .single-item.portrait:nth-child(12) {width:66.6%;}
    .project-images .single-item.portrait:nth-child(15) {width:66.6%;}
    .press.project-images .single-item.portrait {width:33.33%!important;}
    .project-images .single-item.credits {width:66.6%;}
    #zoom img {width: 100%;}
    
    .contact-block {padding:20px;margin-top:40px;}
    .project-images-list .col-1 {width: 25%;}
    .project-images-list .col-5 {width: 75%;}
    .project-images-overview .col-1 {width: 33.3%!important;}
    .project-images-overview .num-1 {width: 100%!important;}
    .project-images-overview .link {display:none;}

    #in-progress .col-1 {width: 33.3%!important;}
    #in-progress .num-4 {display:none;}
    
    .brand .col-2, .brand .col-4 {width: 50%;}

    #footer .col-2, #footer .col-4 {width: 100%;text-align: left;}
    .align-right {text-align: left;}
    #footer .col-2 a {margin-left:0px;margin-right: 20px;}
    #footer span {display: block;}
    #footer span:after {content: " ";}
    #footer span:last-child:after {content: " ";}
    .brand .col-1 {display: none;}
    .brand .col-3 {width: 50%;}
    .about-text .col-4 {width:75%;}
    .counter {display: inline-block;margin-right:0px;position: absolute;top:10px;}
    
    .hp-meta {top: inherit;left:0;bottom:0;}
     /*
    .hp-meta .swiper-pagination {display: inline-block!important;position: absolute;bottom:20px;right: 20px;}
    
    body.id-home .brand-text {bottom:auto;width: 100%;top:80px;display: none;}
    body.id-home .brand-text .brand-text-single {top:auto;bottom: auto;}
    body.id-home .brand-text .brand-text-single .t {height: inherit;}
    */
    .swiper-project {position: absolute;left: 20px;bottom:20px;}
    .swiper-wrapper {height: calc(100% - 30px)!important;}
    .brand-text {width: 80%;}
    
    /* .wrap {align-items:end;} */
    .mobileVis-1 .half.num-1 {width: 100vw!important;}
    .mobileVis-1 .half.num-2 {display: none;}
    .mobileVis-2 .half.num-2 {width: 100vw!important;}
    .mobileVis-2 .half.num-1 {display: none;}

}

@media screen and (max-width: 500px) {
    /* 3 Col */
    .block-title {width:100%;position: relative;}
    .block-body {margin-left:0%;}
    .project-images .col-1, .project-images .col-5 {width: 100%;}
    
    #header #logo {width: 50%;}
    #header #toggle {width: 40%;transform: translate(5px, 5px);}
    #header #toggle .sunrise, #header #toggle .sunset {right:0;}

    #header #menu-col {width:10%;display: inline-block;}
    .projects-list .col-2 {width: 100%;}
    .projects-list .col-4 {width: 100%;}
    
    .project-images-overview .col-1 {width: 33.3%;}
    .project-images-overview .num-1 {width: 100%!important;}
    .about-text .col-4 {width:100%;}
    .project-images-overview .link {display:none;}
    .project-images-list .col-1 {width: 100%;}
    .project-images-list .col-5 {width: 100%;}
    .project-images-overview .col-1 {width: 33.3%!important;}
    .project-images-overview .num-1 {width: 100%!important;}
    
    .inner {padding:6px;}
    #header svg#anewday-intro {left:16px;top:16px;}
    .brand-text {left:16px;}
    .swiper-project {left:16px;bottom:16px;}
    #cookie-banner {padding: 10px 20px;}
    #cookie-banner button {display: block;margin:10px auto;width:100%;margin:10px auto!important;}

    
}