@font-face {
font-family: "ABCDiatype";
src: url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-Regular.woff2) format("woff2"), url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-Regular.woff) format("woff");
font-display: fallback;
}
@font-face {
font-family: "ABCDiatype";
src: url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-RegularItalic.woff2) format("woff2"), url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-RegularItalic.woff) format("woff");
font-style: italic;
font-display: fallback;
}
@font-face {
font-family: "ABCDiatype";
src: url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-Light.woff2) format("woff2"), url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-Light.woff) format("woff");
font-weight: 300;
font-display: fallback;
}
@font-face {
font-family: "ABCDiatype";
src: url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-LightItalic.woff2) format("woff2"), url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-LightItalic.woff) format("woff");
font-weight: 300;
font-style: italic;
font-display: fallback;
}
@font-face {
font-family: "ABCDiatype";
src: url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-Thin.woff2) format("woff2"), url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-Thin.woff) format("woff");
font-weight: 100;
font-display: fallback;
}
@font-face {
font-family: "ABCDiatype";
src: url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-ThinItalic.woff2) format("woff2"), url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/ABCDiatype-ThinItalic.woff) format("woff");
font-weight: 100;
font-style: italic;
font-display: fallback;
}  @font-face {
font-family: "Heldane";
src: url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/heldane-text-regular.woff2) format("woff2");
font-display: fallback;
}
@font-face {
font-family: "Heldane";
src: url(//ramsahouses.com/wp-content/themes/ramsa_houses/fonts/ramsa-2025/heldane-text-regular-italic.woff2) format("woff2");
font-style: italic;
font-display: fallback;
}html {
font-size: 10px;
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scrollbar-gutter: stable;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: 400;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #666;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: 700;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
:root {
--ramsa-red: #d24f39;
--warm-grey: #a9a49f;
--warm-grey-dark: #776f67;   --sans-serif: "ABCDiatype", "Helvetica Neue", Helvetica, Arial, sans-serif;
--serif: "Heldane", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}
body,
button,
input,
optgroup,
select,
textarea {
color: #666;
font-family: var(--sans-serif);
font-style: normal;
font-weight: 300;
font-size: 1.6rem;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 auto;
line-height: 1.3;
font-family: var(--serif);
font-weight: 400;
font-style: normal;
clear: both;
text-transform: uppercase;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.serif {
line-height: 1.3;
font-family: var(--serif);
font-weight: 400;
font-style: normal;
}
.page-books h4,
.sans-serif {
font-family: var(--sans-serif);
font-weight: 100;
font-style: normal;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h1.sans-serif {
font-weight: 100;
}
h3 {
text-align: center;
font-family: var(--sans-serif);
font-weight: 100;
font-size: 2em;
letter-spacing: 0em;
}
.page-books h4 strong {
font-weight: 400;
}
.hero h4 {
margin: 1em auto 0;
font-size: 1.1em;
letter-spacing: 0.1em;
}
p {
font-family: inherit;
margin-bottom: 1.5em;
}
.text-row.serif:last-child p {
font-family: var(--sans-serif);
font-weight: 100;
font-style: normal;
text-transform: uppercase;
font-size: 0.75em;
margin: 0 auto 0.5em 0;
color: #8c8c8c;
letter-spacing: 0.05em;
}
.text-row.serif:last-child {
padding-bottom: 8%;
}
@media screen and (max-width: 40em) {
.text-row.serif:last-child {
margin-top: 4%;
}
.text-row.serif:last-child p {
text-align: center;
}
}
cite,
dfn,
em,
i {
font-style: italic;
}
blockquote {
margin: 0.25em auto 0.5em;
font-size: 1.1em;
line-height: 1.6;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.entry-content blockquote {
font-size: 1.1em;
}
.project-info blockquote {
font-size: 1.4em;
}
@media screen and (min-width: 50em) {
blockquote {
font-size: 1.4em;
}
.entry-content blockquote {
font-size: calc(0.6vh + 0.85em);
}
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
ins,
mark {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
html {
box-sizing: border-box;
}
*,
:after,
:before {
box-sizing: inherit;
}
body {
position: relative;
background: #fff;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: "";
}
blockquote,
q {
quotes: "" "";
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ol,
ul {
margin: 0 0 1.5em 3em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ol {
list-style: decimal;
}
li > ol,
li > ul {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
}
img {
height: auto;
max-width: 100%;
}
figure {
margin: 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: #666;
}
.skip-link {
position: absolute;
top: -100px;
background-color: #f1f1f1;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
color: #21759b;
display: block;
font-family: sans-serif;
font-size: 14px;
font-weight: 700;
height: auto;
left: 6px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
width: auto;
z-index: 100000;
-webkit-transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition: -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.skip-link:focus {
color: #21759b;
-webkit-transform: translateY(105px);
transform: translateY(105px);
-webkit-transition: transform 0s;
-webkit-transition: -webkit-transform 0s;
transition: -webkit-transform 0s;
transition: transform 0s;
transition: transform 0s, -webkit-transform 0s;
}
.image-holder img,
.image-holder img.image-loading {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.65s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: opacity 0.65s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.image-holder[style^="padding-top:"] {
position: relative;
}
.image-holder[style^="padding-top:"] img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-holder img.image-loaded {
visibility: visible;
opacity: 1;
}
.image-holder img[data-ofi-src] {
pointer-events: none;
}
.site-header {
position: fixed;
z-index: 600;
font-size: 0.85em;
top: 0;
right: 0;
bottom: auto;
left: 0;
background: #fff;
padding: 1em 0 0.5em;
}
@media screen and (min-width: 40em) {
.site-header {
padding: 1.2em 0 0.5em;
}
#site-navigation {
transition: opacity 0.15s 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.site-header,
.site-branding {
transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.scrolled.scrolling-down .site-header:not(:hover) {
transform: translateY(-2.5em);
}
.scrolled.scrolling-down .site-header:not(:hover) #site-navigation {
transition: opacity 0.15s cubic-bezier(0.445, 0.05, 0.55, 0.95);
opacity: 0;
}
.scrolled.scrolling-down .site-header:not(:hover) .site-branding {
transform: translateY(2.2em);
}
}
.site-main {
padding-top: 4.7em;
min-height: calc(100vh - 4.7em);
}
.content-area {
opacity: 1;
position: relative;
z-index: 10;
-webkit-transition: opacity 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: opacity 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.content-area.hidden {
max-height: 0;
overflow: hidden;
}
.content-area.hidden,
.transition-out .content-area,
.transition-out footer {
opacity: 0;
-webkit-transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.transition-out.transition-to-child .content-area {
-webkit-transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: opacity 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.transition-out.transition-back-to-parent .content-area {
-webkit-transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.page-inquire #masthead {
position: relative;
}
.page-inquire .site-main {
padding-top: 5em;
min-height: calc(var(--vh, 1vh) * 100);
min-height: calc(100vh - 6em);
min-height: calc(100svh - 6em);
}
.hero.hero--opener {
height: calc(100vh - 5.5em);
min-height: calc(100vmin - 5.5em);
}
.home .hero.hero--opener {
height: 100vmin;
max-height: calc(100vh - 5em);
}
.inquire {
display: block;
height: 100%;
}
.page-inquire .hero.hero--opener {
position: fixed;
top: 0;
bottom: auto;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
max-height: 100%;
min-height: 24em;
}
.hero.hero--opener + .hero.hero--opener {
height: 105vmin;
min-height: 60vh;
}
@media screen and (min-width: 50em) and (min-height: 30em) {
.site-header {
font-size: 0.9em;
}
.site-main {
padding-top: 5.2em;
min-height: calc(100vh - 5.2em);
}
.hero.hero--opener {
height: 120vmin;
max-height: calc(100vh - 5.2em);
}
}
@media screen and (min-width: 70em) and (min-height: 40em) {
.site-header {
font-size: 1em;
}
.site-main {
padding-top: 5.8em;
min-height: calc(100vh - 5.8em);
}
.hero.hero--opener {
height: calc(100vh - 5.8em);
min-height: calc(100vh - 5.8em);
}
}
.site-branding {
display: block;
position: relative;
margin: 0 auto 0.35em;
width: 94%;
}
.site-branding .logo-holder a {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
margin: 0 auto;
width: 100%;
height: 100%;
max-width: 18em;
max-height: 2.125em;
}
.logo-holder svg {
display: block;
width: 100%;
height: 100%; max-width: 17em;
max-height: 1.7em;
margin: 0 auto 0.3em;
}
svg path {
transition: fill 0.5s ease;
}
.logo-holder a:hover + svg .logo-path-ramsa {  fill: #acacac;
}
.logo-holder a:hover + svg .logo-path-houses {  fill: #d1d1d1;
}
.site-description,
.site-title {
display: none;
}
nav {
display: block;
-webkit-box-flex: 1;
flex: 1 0 100%;
text-align: center;
margin: 0 auto 0.1rem;
}
nav.main-navigation .menu-nested-pages-container {
position: fixed;
min-height: calc(100vh + 10em);
top: 7rem;
left: 0;
right: 0;
bottom: -5em;
padding: 2em 0 10em;
z-index: 1;
background: #fff;
font-size: 1.1em;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-flex-align: center;
align-items: center;
-webkit-transform: translate3d(0, -200vh, 0);
transform: translate3d(0, -200vh, 0);
opacity: 0;
-webkit-transition: opacity 0s 0.6s, transform 0s 0.6s;
-webkit-transition: opacity 0s 0.6s, -webkit-transform 0s 0.6s;
transition: opacity 0s 0.6s, -webkit-transform 0s 0.6s;
transition: opacity 0s 0.6s, transform 0s 0.6s;
transition: opacity 0s 0.6s, transform 0s 0.6s, -webkit-transform 0s 0.6s;
}
nav.main-navigation .menu-nested-pages-container ul {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
nav.main-navigation.toggled .menu-nested-pages-container ul {
opacity: 1;
-webkit-transition: none;
transition: none;
}
nav.main-navigation.toggled .menu-nested-pages-container {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
nav ul {
padding: 0;
margin: 0.5em auto;
list-style-type: none;
text-transform: uppercase;
font-size: 1em;
letter-spacing: 0.05em;
}
nav.main-navigation ul {
margin: 0.5em auto 10em;
font-size: 1.2em;
}
nav ul li {
display: inline-block;
padding: 0.25em;
}
nav.main-navigation ul li {
display: block;
padding: 0.5em;
}
button.menu-toggle {
position: relative;
z-index: 99999;
border: 0;
background: 0 0;
outline: 0;
font-size: 0;
text-indent: -99rem;
color: #fff;
overflow: hidden;
height: 2.5rem;
width: 4.8rem;
padding: 0.75rem 0;
}
.menu-toggle::after,
.menu-toggle::before {
content: "";
display: block;
height: 1px;
width: 3rem;
margin: 0 auto;
background: #666058;
}
.menu-toggle::before {
margin-bottom: 0.5rem;
}
@media screen and (min-width: 40em) {
nav.main-navigation .menu-nested-pages-container ul {
opacity: 1;
margin: 0.6em auto 0;
font-size: 0.78em;
letter-spacing: 0.075em;
min-height: 3rem;
}
.menu-toggle {
display: none;
}
nav.main-navigation .menu-nested-pages-container {
opacity: 1;
display: block;
height: auto;
min-height: 0;
padding-bottom: 0;
padding: 0;
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: 0 0;
-webkit-transform: none;
transform: none;
}
nav ul {
margin: 0 auto;
font-size: 0.8em;
}
nav.main-navigation ul li {
display: inline-block;
padding: 0.25em 1.1em;
}
}
nav ul li a {
transition: color 0.35s ease;
color: #8c8c8c;
}
a.current-page { color: #d24f39;
}
nav.sub-nav ul li button {
font-size: inherit;
text-transform: inherit;
letter-spacing: inherit;
background: 0 0;
border: none;
outline: 0;
padding: 0;
color: var(--warm-grey);
-webkit-transition: color 0.15s ease-out;
transition: color 0.15s ease-out;
}
nav ul li a:hover,
nav ul li button:hover,
nav.sub-nav ul li .is-active,
nav.sub-nav[data-filterby="all"] ~ .sub-nav li:nth-child(1) a,
nav.sub-nav[data-filterby="city"] ~ .sub-nav li:nth-child(2) a,
nav.sub-nav[data-filterby="coast"] ~ .sub-nav li:nth-child(4) a,
nav.sub-nav[data-filterby="country"] ~ .sub-nav li:nth-child(3) a {
color: #d24f39;
}
section {
position: relative;
}
.hero {
display: block;
position: relative;
width: 100%;
height: 100vh;
height: calc(var(--vh, vh) * 100);
min-height: 100vh;
min-height: calc(var(--vh, vh) * 100);
}
.hero .heart-slideshow {
position: relative;
height: 100%;
min-height: inherit;
}
.hero > figure {
height: 100%;
min-height: inherit;
}
.hero > figure img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
min-height: inherit;
height: 100%;
width: 100%;
display: block;
}
.hero__inner {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: column nowrap;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-flex-align: center;
align-items: center;
color: #fff;
}
.home .hero__inner {
pointer-events: none;
background: #a9a398;
opacity: 0;
-webkit-transition: opacity 3s ease-out;
transition: opacity 3s ease-out;
}
.scroll-to-view {
position: absolute;
top: auto;
right: 0;
bottom: 5%;
left: 0;
text-align: center;
display: block;
text-transform: uppercase;
color: #fff;
letter-spacing: 0.15em;
font-size: 0.7em;
font-weight: 300;
z-index: 12;
}
@media screen and (max-width: 40em) {
.home .hero__inner {
position: fixed;
bottom: auto;
height: 120vh;
height: calc(var(--vh, 1vh) * 120);
padding-bottom: 20vh;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.home .scroll-to-view {
display: none;
}
}
.home .scroll-to-view {
opacity: 0;
-webkit-transition: opacity 0.5s 0.25s ease;
transition: opacity 0.5s 0.25s ease;
}
.home .scroll-to-view.visible {
opacity: 1;
}
.home .hero__inner.active {
opacity: 1;
}
.hero__inner--align-top {
padding-top: calc(8vh + 5.5em);
color: #fff;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
text-align: center;
}
.warm-bg {
background: #e5e6e3;
min-height: 100%;
display: block;
position: relative;
min-height: calc(100vh - 6.5em);
overflow: hidden;
}
.hero__inner--warm-bg {
background: rgba(169, 164, 159, 0.69);
}
.hero h1,
.hero h2 {
margin: 0 auto;
text-align: center;
}
.hero h2 {
padding: 0 1em;
font-size: 0.8em;
letter-spacing: 0.1em;
line-height: 1.6;
margin-bottom: 2em;
}
.hero h2 em {
letter-spacing: 0;
}
@media screen and (min-width: 35em) {
.hero h2 {
font-size: 1.1em;
}
}
@media screen and (min-width: 50em) {
.hero h2 {
font-size: 1.5em;
letter-spacing: 0.1em;
}
.home .hero h2 {
margin-bottom: 7.6em;
}
}
.hero h2 em {
text-transform: none;
}
.hero--opener h1 {
width: 100%;
max-width: 6.3em;
max-width: 10ch;
font-weight: 100;
letter-spacing: 0.05em;
font-size: 2em;
font-size: calc(10vmin + 1em);
margin: 0 auto;
line-height: 1;
}
.page-process .hero--opener h1 {
margin-bottom: 7vh;
}
.home .hero--opener h1,
.inquire .hero--opener h1 {
font-size: calc(16vmin + 1em);
}
@media screen and (min-width: 50em) {
.home .hero--opener h1,
.inquire .hero--opener h1 {
font-size: calc(17vmin + 2em);
}
}
.hero--opener h3 {
letter-spacing: 0.075em;
width: 96%;
margin: 0 auto;
}
@media screen and (min-aspect-ratio: 7/5) {
.hero--opener h1 {
font-size: calc(10vmin + 2em);
}
}
.post-8 .hero + .hero .hero__inner {
-webkit-box-pack: end;
justify-content: flex-end;
padding-bottom: 3vh;
}
.hero--opener .hero__inner h3:only-child {
font-size: 1.5em;
}
@media screen and (min-width: 40em) {
.hero--opener .hero__inner h3:only-child {
font-size: 2em;
}
.post-8 .hero + .hero .hero__inner {
padding-bottom: 5vh;
}
}
.post-8 .hero + .hero img {
-o-object-position: 50% 80%;
object-position: 50% 80%;
font-family: "object-fit: cover;object-position: 50% 80%;";
}
.hero--opener h3 em {
letter-spacing: 0;
text-transform: none;
}
.hero--opener h1 + h3 {
font-size: calc(1.3vmin + 0.7em);
letter-spacing: -0.015em;
font-family: var(--serif);
font-style: italic;
font-size: 1.3em;
letter-spacing: 0;
text-transform: none;
font-weight: 300;
max-width: 17em;
margin: 1em auto 2em;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media screen and (min-aspect-ratio: 7/5) {
.hero--opener h1 + h3 {
font-size: calc(1.3vmin + 0.8em);
}
}
section.featured {
margin: 0 auto;
width: 92%;
max-width: 160vh;
padding: 0 0 8em;
}
.featured h3 {
color: var(--warm-grey); padding: 1em 0 0;
}
@media screen and (min-width: 50em) {
.featured h3 {
padding: 4em 0 0;
}
}
.featured p {
max-width: 40em;
text-align: center;
margin: 1em auto 2em;
font-weight: 100;
}
.wp-block-image {
max-width: 35em;
margin: 0 auto;
position: relative;
}
.wp-block-image figure.aligncenter {
display: block;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.wp-block-image figure.aligncenter img {
margin: 0 auto;
}
@media screen and (min-width: 60em) {
.wp-block-image {
max-width: 40em;
margin: 0 auto;
position: relative;
}
}
@media screen and (min-width: 80em) and (min-height: 50em) {
.wp-block-image {
max-width: 50em;
margin: 0 auto;
position: relative;
}
}
.featured .wp-block-image figcaption {
font-weight: 100;
text-align: center;
margin: 0 auto;
line-height: 1;
padding: 0.75em 0 1.5em;
color: var(--warm-grey);
font-size: 1.4em;
display: block !important;
}
.image-holder img,
.wp-block-image a,
.wp-block-image img {
display: block;
}
.home .wp-block-image > a,
.home .wp-block-image > figure > a {
width: 100%;
}
.wp-block-columns {
width: 100%;
max-width: 50em;
margin: 0 auto;
}
.featured .wp-block-columns.has-3-columns figure {
width: 80%;
margin: 0 auto;
}
@media screen and (min-width: 40em) {
.featured .wp-block-columns.has-3-columns figure {
width: 100%;
}
.wp-block-columns {
width: 85%;
max-width: 80em;
}
.featured .wp-block-image figcaption {
font-size: 2em;
}
}
.wp-block-columns .wp-block-image {
width: 100%;
margin: 0 auto;
}
.featured .wp-block-columns .wp-block-image img {
padding: 0.5em;
outline: 1px solid gray;
}
article {
padding: 4em 0 2em;
}
article {
padding: 0;
}
.entry-content p {
max-width: 40em;
margin: 0 auto 1em;
}
section.grid,
section.people {
max-width: 82em;
margin: 3% auto;
padding: 0 2%;
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
}
.grid__item,
.people-item {
-webkit-box-flex: 0;
flex: 0 1 auto;
width: 100%;
margin-bottom: 2%;
text-align: center;
}
@media screen and (min-width: 45em) {
.grid__item,
.people-item {
width: 48%;
}
}
@media screen and (min-width: 60em) {
.grid__item {
width: 31%;
}
}
.grid__item a,
.people-item a {
display: block;
}
a.anchor {
display: block;
position: relative;
top: -7.5em;
visibility: hidden;
}
.grid__item.placeholder {
position: relative;
overflow: hidden;
}
.grid__item.placeholder::after {
content: "";
padding-top: 70%;
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
display: block;
}
.grid__item .grid__image {
opacity: 0;
}
.grid__item .grid__image.image-loaded {
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.grid__item .grid__image.no-image-found {
opacity: 1;
outline: 1px solid #c8c1bb;
}
.grid__item .grid__image,
.people-item .image-holder {
position: relative;
padding-top: 84%;
}
.page-people .people:not(#senior-team) .people-item .image-holder {
padding-top: 124%;
}
.grid__item .grid__image {
padding-top: 70%;
}
.grid__item .grid__image img,
.people-item .image-holder img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 0.5em solid #e5e6e3;
outline: 1px solid #c8c1bb;
-webkit-transition: opacity 0.65s cubic-bezier(0.455, 0.03, 0.515, 0.955), outline 0.3s ease;
transition: opacity 0.65s cubic-bezier(0.455, 0.03, 0.515, 0.955), outline 0.3s ease;
}
.grid__item h4 {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: auto;
}
.description-holder {
padding: 0 5%;
text-align: center;
color: var(--warm-grey);
width: 100%;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 1s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: max-height 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.sub-nav:not([data-filterby="all"]) + .description-holder {
max-height: 13em;
}
.description-holder .description {
padding-top: 2em;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.35s 0.25s ease-out;
transition: opacity 0.35s 0.25s ease-out;
}
.sub-nav:not([data-filterby="all"]) + .description-holder .description {
position: absolute;
}
.sub-nav[data-filterby="all"] + .description-holder .description:first-child {
position: relative;
}
.sub-nav[data-filterby="city"] + .description-holder .description[data-category="city"],
.sub-nav[data-filterby="coast"] + .description-holder .description[data-category="coast"],
.sub-nav[data-filterby="country"] + .description-holder .description[data-category="country"] {
position: relative;
visibility: visible;
opacity: 1;
}
.sub-nav[data-filterby="city"] ~ .grid .grid__item:not([data-category="city"]),
.sub-nav[data-filterby="coast"] ~ .grid .grid__item:not([data-category="coast"]),
.sub-nav[data-filterby="country"] ~ .grid .grid__item:not([data-category="country"]) {
display: none;
}
.grid__item.placeholder {
display: block !important;
}
body.is-animating .grid__item,
body.is-animating .grid__item.placeholder {
display: none;
visibility: hidden;
}
.description-holder .description p {
max-width: 32em;
color: #4c4034;
margin: 1em auto 2em;
font-weight: 100;
}
.description-holder .description p:first-child {
font-family: var(--sans-serif);
font-weight: 100;
font-style: normal;
letter-spacing: 0.05em;
margin: 0 auto;
color: inherit;
line-height: 1.3;
font-style: normal;
font-size: 1.5em;
clear: both;
text-transform: uppercase;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
h4.small-header { padding: 1.5rem 1rem;
text-transform: none;
color: #4c4034;
font-family: var(--serif);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; color: #020101;
opacity: 0.6;
line-height: 1.5;
-webkit-transition: opacity 50ms ease;
transition: opacity 50ms ease;
}
.featured-item_thumb .image-holder img,
.grid__item:hover .image-holder img,
.people-item:hover .image-holder img {
outline: 1px solid var(--warm-grey);
}
.grid__item:hover h4,
.people-item:hover h4 {
opacity: 1;
}
.page-people article,
.page-people article {
padding-bottom: 4em;
}
.page-people article .wp-block-image,
.page-people article .wp-block-image {
max-width: 40em;
width: 90%;
margin: 0 auto;
}
.page-people article .wp-block-image figure,
.page-people article .wp-block-image figure {
position: relative;
padding-top: 74.5%;
padding-top: 60.5%;
width: 100%;
margin: 4em auto 2em;
display: block;
background: #c7c7c7;
overflow: hidden;
}
.page-people article .wp-block-image.people-banner,
.page-people article .wp-block-image.people-banner {
max-width: 66em;
margin: 0 auto;
position: relative;
}
@media screen and (min-width: 60em) {
.page-people article .wp-block-image.people-banner,
.page-people article .wp-block-image.people-banner {
max-width: 102vmin;
}
}
.people-banner + p strong {
font-weight: 300;
}
.page-people article .wp-block-image img,
.page-people article .wp-block-image img {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 90%;
object-position: 50% 90%;
font-family: "object-fit: cover;object-position: 50% 90%;";
}
.page-people article .entry-content p,
.page-people article .entry-content p {
padding: 0 5%;
line-height: 1.8;
max-width: 79rem;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.parent-people,
.parent-people {
background: #e5e6e3;
color: #666058;
min-height: 100vh;
font-family: var(--serif);
font-weight: 400;
font-style: normal;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
-webkit-transition: opacity 0.35s ease-out, transform 0 0.35s;
-webkit-transition: opacity 0.35s ease-out, -webkit-transform 0 0.35s;
transition: opacity 0.35s ease-out, -webkit-transform 0 0.35s;
transition: opacity 0.35s ease-out, transform 0 0.35s;
transition: opacity 0.35s ease-out, transform 0 0.35s, -webkit-transform 0 0.35s;
}
.parent-people .entry-content,
.parent-people .entry-content {
margin: 0 auto;
padding: 2em 1em 2em;
}
.parent-people .entry-content p,
.parent-people .entry-content p {
margin-left: 0;
margin-right: 0;
}
@media screen and (min-width: 50em) {
.parent-people .entry-content,
.parent-people .entry-content {
padding: 4em 5% 2em;
}
}
.parent-people .wp-block-columns,
.parent-people .wp-block-columns {
width: 96%;
margin: 0 auto;
max-width: 80em;
}
.parent-people .wp-block-columns .wp-block-column,
.parent-people .wp-block-columns .wp-block-column {
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
.parent-people .wp-block-columns .wp-block-column:first-child,
.parent-people .wp-block-columns .wp-block-column:first-child {
-webkit-box-ordinal-group: 3;
order: 2;
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
align-content: flex-start;
max-width: 40em;
flex-basis: calc(40% - 16px);
}
.parent-people .wp-block-columns figure,
.parent-people .wp-block-columns figure {
width: 100%;
max-width: none;
padding-top: 84%;
position: relative;
margin-bottom: 1em;
background: rgba(140, 140, 140, 0.1);
}
.parent-people .wp-block-columns figure {
padding-top: 124%;
}
@media screen and (min-width: 599px) {
.parent-people .wp-block-columns .wp-block-column:first-child,
.parent-people .wp-block-columns .wp-block-column:first-child {
-webkit-box-ordinal-group: 2;
order: 1;
}
.parent-people .wp-block-columns figure,
.parent-people .wp-block-columns figure {
margin-bottom: 1em;
}
}
.parent-people .wp-block-columns figure img,
.parent-people .wp-block-columns figure img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
border: 0.5em solid #e5e6e3;
outline: 1px solid gray;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.parent-people .wp-block-columns .wp-block-column p:empty,
.parent-people .wp-block-columns .wp-block-column p:empty {
display: none;
}
.parent-people .wp-block-columns .wp-block-column blockquote,
.parent-people .wp-block-columns .wp-block-column blockquote {
width: 100%;
max-width: 100%;
margin: 0.25em 0 1.5em;
}
.parent-people .wp-block-columns .wp-block-column:nth-child(2) blockquote,
.parent-people .wp-block-columns .wp-block-column:nth-child(2) blockquote {
font-family: var(--sans-serif);
font-weight: 100;
color: #000;
font-style: italic;
font-size: 1em;
width: 100%;
max-width: 100%;
}
.parent-people .wp-block-columns .wp-block-column blockquote cite,
.parent-people .wp-block-columns .wp-block-column blockquote cite {
font-size: inherit;
font-style: italic;
}
.parent-people .wp-block-column h3,
.parent-people .wp-block-column h3 {
font-size: 1.4em;
color: var(--warm-grey-dark);
}
.parent-people .wp-block-column h3,
.parent-people .wp-block-column h3,
.parent-people .wp-block-column h4,
.parent-people .wp-block-column h4 {
text-align: left;
font-style: normal;
margin: 3rem auto 0.4em;
font-family: var(--sans-serif);
font-weight: 100;
font-style: normal;
}
.parent-people.active,
.parent-people.active {
-webkit-transform: none;
transform: none;
opacity: 1;
-webkit-transition: opacity 0.35s ease-out, transform 0s;
-webkit-transition: opacity 0.35s ease-out, -webkit-transform 0s;
transition: opacity 0.35s ease-out, -webkit-transform 0s;
transition: opacity 0.35s ease-out, transform 0s;
transition: opacity 0.35s ease-out, transform 0s, -webkit-transform 0s;
}
.parent-people .return-button,
.parent-people .return-button {
position: relative;
z-index: 10;
color: #666;
}
.return-icon {
display: none;
}
@media screen and (min-width: 60em) {
.parent-people .return-button,
.parent-people .return-button {
opacity: 0;
position: fixed;
z-index: 10;
top: 10em;
right: auto;
bottom: auto;
left: 2%;
border: none;
outline: 0;
background: 0 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
body:not-2(.transition-out) .parent-people .return-button,
body:not(.transition-out) .parent-people .return-button {
opacity: 1;
-webkit-transition: opacity 0.15s 0.4s;
transition: opacity 0.15s 0.4s;
}
.return-icon {
display: block;
}
.return-text {
display: none;
}
}
.parent-people h1,
.parent-people h1 {
color: #666;
text-transform: none;
margin: 0 0 0.25em;
}
@media screen and (min-width: 50em) {
.parent-people h1,
.parent-people h1 {
margin: 0 0 0.67em;
}
}
.parent-people h1 em,
.parent-people h1 em {
font-size: 70%;
opacity: 0.6;
font-style: normal;
}
.parent-people h1 ~ p,
.parent-people h1 ~ p {
color: #666;
font-size: 1.1em;
}
.parent-people .entry-content blockquote,
.parent-people .entry-content blockquote {
-webkit-box-flex: 2;
flex: 2 1 50%;
margin: 0 1em 0.5em 0;
max-width: 16em;
min-width: 0;
font-size: 1.3em;
line-height: 1.8;
opacity: 0.6;
padding: 0;
}
.parent-people ul,
.parent-people ul {
font-family: var(--sans-serif);
font-weight: 100;
font-style: normal;
font-size: 0.9em;
line-height: 1.6;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-box-flex: 1;
flex: 1 1 auto;
width: auto;
margin: 0 0 1em;
}
@media screen and (min-width: 50em) {
.parent-people .entry-content blockquote,
.parent-people .entry-content blockquote {
margin: 0 1em 2em 0;
}
.parent-people ul,
.parent-people ul {
margin: 0;
}
}
.the-studio {
width: 96%;
margin: 0 auto;
padding: 2em 0 0;
}
.featured-members,
.the-studio {
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
max-width: 80em;
}
.the-studio .column {
padding-bottom: 2em;
}
@media screen and (min-width: 60em) {
.the-studio {
padding: 4em 0 0;
}
.the-studio .column {
width: 50%;
-webkit-box-flex: 1;
flex: 1 1 auto;
}
.the-studio .column:first-child {
max-width: 23em;
}
}
.the-studio h2 {
margin: 0 0 0.75em;
}
.the-studio p {
color: #666;
margin: 0 0 1.5em;
font-size: 0.85em;
}
.featured-members {
margin-bottom: 1em;
}
.featured-members .member {
overflow: hidden;
position: relative;
-webkit-box-flex: 0;
flex: 0 1 49%;
width: 0%;
}
@media screen and (min-width: 40em) {
.featured-members .member {
-webkit-box-flex: 0;
flex: 0 1 32%;
width: 0%;
}
}
.featured-members .member figure {
position: relative;
padding-top: 125%;
}
.featured-members .member figure img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.member.placeholder figure {
display: block;
width: 100%;
position: absolute;
z-index: 0;
pointer-events: none;
background: #cdc7c2;
}
.member p {
padding-top: 1em;
}
.the-studio .gallery .image-holder {
padding-top: 2em;
}
.the-studio .gallery .image-holder img {
width: 100%;
}
.the-studio img[srcset*="placeholder-"] {
opacity: 0.15;
}
.sub-pages {
background: #fff;
display: block;
position: relative;
z-index: 10;
width: 100%;
margin: 0 auto;
}
#process-intro .hero__inner {
color: #666;
color: #5f5f60;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: transform 50ms ease-out;
-webkit-transition: -webkit-transform 50ms ease-out;
transition: -webkit-transform 50ms ease-out;
transition: transform 50ms ease-out;
transition: transform 50ms ease-out, -webkit-transform 50ms ease-out;
}
#process-intro .hero__inner[style*="opacity: 0;"] {
display: none;
}
#process-intro .hero__inner h1 span,
#process-intro .hero__inner h1:not(.anime-start),
#process-intro .hero__inner h3 {
opacity: 0;
}
#process-intro .hero__inner h3 {
position: absolute; bottom: 2.5vh;
left: 0;
right: 0;
}
.page-process .site-main {
overflow: hidden;
padding: 0 0 4%;
padding: 0;
background: #fff;
}
#primary.page-process::before {
content: "";
position: relative;
height: 100vh;
width: 100%;
display: block;
background: 0 0;
}
.page-process section:not(:first-of-type) {
margin-bottom: 2em;
}
.page-process .site-main p {
font-size: 1.3em;
line-height: 1.6;
max-width: 35em;
color: #3b3733;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: var(--serif);
font-weight: 400;
font-style: normal;
padding: 0 5%;
}
@media screen and (max-width: 50em) {
.slide-up-slow {
margin-top: 100px;
}
.page-process article:first-child .entry-content {
padding: 0 5%;
}
.page-process .site-main p {
padding: 0;
}
}
.page-process .site-main blockquote p {
padding: 0;
}
.entry-content blockquote {
color: #3b3733;
}
.entry-content blockquote cite {
color: inherit;
}
article.parent-process {
padding-bottom: 2em;
width: 90%;
margin: 0 auto;
max-width: 170vh;
}
article.parent-process .wp-block-group__inner-container {
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
width: 100%;
}
article.parent-process.post-8 {
width: 100%;
max-width: none;
display: block;
}
.page-process h2 {
font-size: 2.5em;
color: var(--warm-grey); padding: 1em 3% 1em;
text-align: center;
}
article.parent-process.post-8 p {
padding: 0 3%;
}
.entry-content .image-set {
padding: 0;
}
@media screen and (max-width: 50em) {
.page-process h2 {
font-size: 1.8em;
}
.image-set {
width: 100% !important;
}
.wp-block-media-text .wp-block-media-text__content,
.wp-block-media-text .wp-block-media-text__content p {
padding: 0;
}
}
.light-text,
.light-text p {
color: var(--warm-grey) !important;
}
@media screen and (min-width: 70em) {
.wp-block-group__inner-container {
-webkit-box-flex: 0;
flex: 0 1 100%;
}
.entry-content .align-left {
margin-left: 0 !important;
}
.entry-content .push-left {
margin-left: -5%;
}
.entry-content .align-right {
margin-right: 0 !important;
}
.entry-content .push-right {
margin-right: -5%;
}
}
.image-holder.align-top img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center top;
object-position: center top;
font-family: "object-fit: cover; object-position: center top;";
}
.image-holder.align-upper-middle img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 20%;
object-position: center 20%;
font-family: "object-fit: cover; object-position: center 20%;";
}
.image-holder.align-lower-middle img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center 70%;
object-position: center 70%;
font-family: "object-fit: cover; object-position: center 70%;";
}
.image-holder.align-bottom img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center bottom;
object-position: center bottom;
font-family: "object-fit: cover; object-position: center bottom;";
}
figure.process-animation {
background: #e5e6e3;
}
figure.process-animation img {
-webkit-transition: unset;
transition: unset;
}
section.hero.fixed-section figure.process-animation img:first-child {
z-index: 5;
opacity: 0;
-webkit-transform-origin: 50% 75%;
transform-origin: 50% 75%;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}
section.hero.fixed-section figure.process-animation img:last-child {
opacity: 0;
z-index: 3;
}
section.hero.fixed-section figure.process-animation img:last-child.reveal {
opacity: 1;
-webkit-transition: opacity 0s 3.5s;
transition: opacity 0s 3.5s;
}
section.hero.fixed-section figure.process-animation img:first-child.reveal {
opacity: 1;
-webkit-transition: opacity 2s 1.4s ease-out;
transition: opacity 2s 1.4s ease-out;
}
section.hero.fixed-section {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: auto;
left: 0;
width: 100%;
height: 100vh;
height: calc(var(--vh, vh) * 100);
min-height: 100vh;
min-height: calc(var(--vh, vh) * 100);
z-index: -1;
}
section.hero.fixed-section .hero__inner {
position: fixed;
top: 2em;
height: 100vh;
height: inherit;
min-height: 100vh;
min-height: inherit;
}
section.hero.fixed-section figure img {
position: fixed;
z-index: 0;
top: 7rem;
right: 0;
bottom: auto;
left: 0;
height: 100vh;
height: calc(var(--vh, vh) * 100);
min-height: 100vh;
min-height: calc(var(--vh, vh) * 100);
}
section.hero.fixed-section figure img:first-child {
opacity: 0;
}
section.hero.fixed-section figure img.hidden {
display: none;
}
.page-process .entry-content blockquote {
max-width: 100%;
}
#roger-and-grant .wp-block-image:nth-child(2) {
margin: 1em auto;
}
@media screen and (min-width: 50em) {
.page-process .entry-content blockquote {
font-size: calc(0.85em + 1vh);
max-width: 36em;
}
.page-process .entry-content blockquote.light-text {
font-size: calc(0.85em + 0.6vh);
max-width: 35em;
}
#basis-of-experience .wp-block-image {
-webkit-box-flex: 1;
flex: 1 1 40%;
position: relative;
z-index: -1;
-webkit-box-ordinal-group: 0;
order: -1;
width: 50%;
margin: -5% 2em -4vmin 0;
}
#basis-of-experience blockquote {
margin: 4% 0 2%;
}
#envision-a-project {
padding: 2em 0;
}
#envision-a-project > p {
padding-right: 4em;
}
#envision-a-project blockquote {
max-width: 70%;
}
#roger-and-grant .wp-block-image:first-child {
width: 60%;
-webkit-box-flex: 0;
flex: 0 0 90%;
max-width: 90%;
position: relative;
z-index: -1;
height: 48vmin;
margin: -10% 0 -8em 15%;
}
#roger-and-grant .wp-block-image:first-child img {
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
height: 100%;
width: 100%;
}
#roger-and-grant .wp-block-image:nth-child(2) {
width: 40%;
margin: 0 0 3% auto;
}
#roger-and-grant .wp-block-image:nth-child(2) img {
width: 100%;
}
#roger-and-grant blockquote {
max-width: 34em;
-webkit-box-flex: 1;
flex: 1 0 60%;
margin: 2% auto 0 0;
padding-left: 2em;
align-self: flex-end;
}
#roger-and-grant blockquote.light-text {
font-size: calc(0.85em + 1vh);
}
#roger-and-grant blockquote:last-of-type {
max-width: 34em;
-webkit-box-flex: 1;
flex: 1 0 60%;
margin: 0 auto 0;
align-self: flex-start;
}
#range-of-style blockquote {
font-size: calc(0.6em + 1vh);
margin-top: 22%;
max-width: 23%;
padding-right: 0;
}
#range-of-style .wp-block-image:nth-child(2) {
margin-right: -10%;
position: relative;
z-index: 9;
margin-top: 22%;
padding-left: 2%;
}
#range-of-style .wp-block-image:nth-child(3) {
width: 40%;
-webkit-box-flex: 1;
flex: 1 1 40%;
}
#knowledge {
width: 80%;
margin: 0 auto;
margin: 0 auto 5%;
}
#knowledge blockquote {
font-size: calc(0.6em + 1vh);
margin: -2% auto 0;
padding-right: 0;
}
#knowledge .image-set .image-holder:first-child img {
-webkit-transform: translateY(-15%);
transform: translateY(-15%);
}
.entry-content .has-medium-font-size {
max-width: 26em;
font-size: 1.4em;
}
}
@media screen and (min-width: 70em) {
#basis-of-experience {
margin-bottom: -20%;
}
#basis-of-experience blockquote {
-webkit-box-flex: 1;
flex: 1 0 100%;
max-width: 35%;
}
#knowledge blockquote {
margin: -5% 0 0 13%;
max-width: 29%;
min-width: 12em;
padding-right: 0;
}
}
.slide-up,
.slide-up-slow {
opacity: 0;
}
.sub-pages .image-set figure:nth-child(2) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.sub-pages .image-set figure:nth-child(3) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.sub-pages .fade-in-element,
.sub-pages .fade-in-element blockquote,
.sub-pages .fade-in-element figure,
.sub-pages .fade-in-element p {
opacity: 1;
}
.image-set.pin-to-top {
position: relative;
padding-top: 100vh;
padding-top: calc(100vh - 5.5em);
}
@media screen and (max-width: 55em) {
.image-set.pin-to-top {
left: 0 !important;
padding-top: calc(100vh - 4.8em);
}
}
.image-set.pin-to-top figure {
height: 100%;
width: 100vw;
position: absolute;
top: 4.8em;
right: 0;
bottom: auto;
left: 50%;
margin: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
padding: 0;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
@media screen and (min-width: 50em) {
.image-set.pin-to-top figure {
top: 5.5em;
}
}
.pin-to-top figure img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 30% 50%;
object-position: 30% 50%;
font-family: "object-fit: cover;object-position: 30% 50%;";
}
.scrollmagic-pin-spacer + div {
position: relative;
}
.full-height {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-flex-align: center;
align-items: center;
height: 100vh;
height: calc(100vh - 17em);
}
.grid--is-visible {
visibility: visible;
opacity: 1;
}
.grid:not(.grid--is-visible) {
visibility: hidden;
opacity: 0;
position: absolute;
}
article.project {
width: 92%;
margin: 0 auto;
max-width: 140vh;
min-width: 50vw;
color: var(--warm-grey);
}
article.project[data-layout="layout-dynamic-wide"] {
max-width: 170vh;
}
article.project[data-layout="layout-full"] {
max-width: none;
min-width: 0;
}
article.project[data-layout="layout-compact"] {
max-width: 60em;
min-width: 0;
}
@media screen and (min-width: 40em) {
article.project {
width: 96%;
}
}
.layout-options {
display: none;
text-align: center;
padding: 1em 0 5em;
font-size: 0.85em;
}
@media screen and (min-width: 45em) {
.layout-options {
display: block;
}
}
.layout-options p {
letter-spacing: 0;
}
.layout-options button {
text-transform: uppercase;
font-size: 0.8em;
background: 0 0;
letter-spacing: 0.05em;
border-radius: 0.3em;
border: 1px solid #d4d2ce;
-webkit-transition: border 0.35s ease;
transition: border 0.35s ease;
display: inline-block;
margin: 0 1em 0 0;
padding: 0.5em 1em;
}
.layout-options button:hover,
article[data-layout="layout-compact"] + .layout-options button.layout-compact,
article[data-layout="layout-dynamic-wide"] + .layout-options button.layout-dynamic-wide,
article[data-layout="layout-dynamic"] + .layout-options button.layout-dynamic,
article[data-layout="layout-full"] + .layout-options button.layout-full {
border: 1px solid #000;
}
.button-descriptions p {
display: none;
}
article[data-layout="layout-compact"] + .layout-options .button-descriptions .compact,
article[data-layout="layout-dynamic-wide"] + .layout-options .button-descriptions .dynamic-wide,
article[data-layout="layout-dynamic"] + .layout-options .button-descriptions .dynamic,
article[data-layout="layout-full"] + .layout-options .button-descriptions .full {
display: block;
}
.project-header {
position: relative;
width: 100%;
margin: 0 auto;
}
.project-header h1 {
text-align: center;
width: 100%;
position: relative;
font-size: 1.4em;
font-weight: 100;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 45em) {
.project-header h1 {
text-align: center;
width: 100%;
position: relative;
z-index: 99;
font-size: calc(3vmin + 1em);
font-weight: 100;
}
}
@media screen and (min-width: 70em) and (max-aspect-ratio: 10/3) {
.project-header h1 {
-webkit-transform: translateY(200%);
transform: translateY(200%);
color: #fff;
margin: 0 auto;
}
.project-header figure img + .gradient {
height: 40%;
position: absolute;
z-index: 2;
top: 0;
right: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.7s ease-out;
transition: opacity 0.7s ease-out;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#020202),
color-stop(8.1%, hsla(0, 0%, 1%, 0.987)),
color-stop(15.5%, hsla(0, 0%, 1%, 0.951)),
color-stop(22.5%, hsla(0, 0%, 1%, 0.896)),
color-stop(29%, hsla(0, 0%, 1%, 0.825)),
color-stop(35.3%, hsla(0, 0%, 1%, 0.741)),
color-stop(41.2%, hsla(0, 0%, 1%, 0.648)),
color-stop(47.1%, hsla(0, 0%, 1%, 0.55)),
color-stop(52.9%, hsla(0, 0%, 1%, 0.45)),
color-stop(58.8%, hsla(0, 0%, 1%, 0.352)),
color-stop(64.7%, hsla(0, 0%, 1%, 0.259)),
color-stop(71%, hsla(0, 0%, 1%, 0.175)),
color-stop(77.5%, hsla(0, 0%, 1%, 0.104)),
color-stop(84.5%, hsla(0, 0%, 1%, 0.049)),
color-stop(91.9%, hsla(0, 0%, 1%, 0.013)),
to(hsla(0, 0%, 1%, 0))
);
background: linear-gradient(
to bottom,
#020202 0,
hsla(0, 0%, 1%, 0.987) 8.1%,
hsla(0, 0%, 1%, 0.951) 15.5%,
hsla(0, 0%, 1%, 0.896) 22.5%,
hsla(0, 0%, 1%, 0.825) 29%,
hsla(0, 0%, 1%, 0.741) 35.3%,
hsla(0, 0%, 1%, 0.648) 41.2%,
hsla(0, 0%, 1%, 0.55) 47.1%,
hsla(0, 0%, 1%, 0.45) 52.9%,
hsla(0, 0%, 1%, 0.352) 58.8%,
hsla(0, 0%, 1%, 0.259) 64.7%,
hsla(0, 0%, 1%, 0.175) 71%,
hsla(0, 0%, 1%, 0.104) 77.5%,
hsla(0, 0%, 1%, 0.049) 84.5%,
hsla(0, 0%, 1%, 0.013) 91.9%,
hsla(0, 0%, 1%, 0) 100%
);
}
}
.project-header figure img.image-loaded + .gradient {
visibility: visible;
opacity: 0.3;
}
.image-set {
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
margin: 0 auto;
padding: 0;
width: 100%;
}
@media screen and (min-width: 40em) {
.image-set {
padding: 6% 0;
}
.project-header + .project-info + .image-set {
padding-bottom: 0;
}
}
.project-info {
margin: 0;
max-width: 58em;
padding: 0 0 3%;
}
.project-info + .image-set {
padding-top: 0;
}
.text-row {
padding: 0 0 3%;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
}
.image-set figure {
position: relative;
width: 0%;
margin: 2.5% 0;
-webkit-box-flex: 1;
flex: 1 0 auto;
}
@media screen and (min-width: 40em) {
.text-row {
margin: -3% auto 0;
}
.image-set figure {
margin: 0;
}
}
.spacer[style*="padding-top"] {
position: relative;
}
.image-set figure .spacer[style*="padding-top"] img {
position: absolute;
top: 0;
right: 0;
left: 0;
}
.image-set figure img {
width: 100%;
}
.spacer img {
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.spacer img.lazyloaded {
visibility: visible;
opacity: 1;
}
.image-set figure.video-holder {
-webkit-box-flex: 1.77776;
flex: 1.77776 1 auto;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container embed,
.embed-container iframe,
.embed-container object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 50em) {
.image-set figure {
width: 100%;
}
}
.image-set figure figcaption {
padding: 1em 0 1em;
color: var(--warm-grey);
font-size: 0.85em;
}
figure:hover figcaption {
color: #777470;
}
@media screen and (min-width: 50em) {
.image-set figure:not(:last-child) {
margin-right: 2%;
}
}
.project-header .image-holder,
.project-header img {
display: block;
width: 100%;
}
.project-info .partners,
blockquote {
width: 50%;
min-width: 14em;
max-width: 18em;
padding: 0 3% 4% 0;
margin: 0;
}
.project-info blockquote {
width: 100%;
min-width: 0;
max-width: 100%;
}
article .entry-content blockquote {
display: block;
margin: 0 auto;
width: 100%;
max-width: 26em;
}
blockquote {
line-height: 1.5;
font-family: var(--serif);
font-weight: 400;
font-style: normal;
color: var(--warm-grey);
}
.is-quote {
text-indent: -0.35em;
}
@supports (hanging-punctuation: first) {
.is-quote {
text-indent: 0;
hanging-punctuation: first;
}
}
.entry-content blockquote p,
blockquote p {
margin: 0;
}
.project-info blockquote p {
margin: 1.2em 0;
}
.project-info blockquote.italic {
font-style: italic;
}
blockquote cite {
text-align: left !important;
font-family: inherit;
display: block;
margin: 0.5em 0 0;
text-indent: 0;
font-size: 0.9em;
letter-spacing: 0;
color: inherit;
white-space: nowrap;
font-style: normal;
}
blockquote cite::before {
content: "— ";
}
blockquote cite em {
letter-spacing: 0;
}
.project-info .description,
.text-row p {
margin: 0;
color: inherit;
line-height: 1.5;
max-width: none;
font-size: 1.3em;
padding: 0;
font-weight: 100;
hanging-punctuation: first;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.project-info .description br {
margin-bottom: 1em;
}
@media screen and (min-height: 40em) {
.project-info .description,
.text-row p {
font-size: 1.3em;
line-height: 1.8;
}
}
.text-row p {
-webkit-columns: initial;
-moz-columns: initial;
columns: initial;
max-width: 40em;
text-align: left;
}
.text-row blockquote {
font-size: 1em;
max-width: none;
width: 100%;
}
.text-row blockquote p {
color: var(--warm-grey);
}
.project-info .partners {
font-family: var(--sans-serif);
font-weight: 100;
font-style: normal;
letter-spacing: 0.05em;
font-size: 0.9em;
color: var(--warm-grey);
opacity: 1;
-webkit-box-flex: 1;
flex: 1 1 auto;
padding-right: 0;
opacity: 0.8;
}
.project-info .partners h4 {
font-family: inherit;
color: inherit;
font-size: 1em;
opacity: 0.9;
}
.sub-nav .next::before,
.sub-nav .previous::after {
content: "|";
display: inline-block;
padding: 0 0.35em 0 1.5em;
}
.sub-nav .next::before {
padding: 0 1.5em 0 0.35em;
}
.sub-nav .filter-list {
line-height: 2;
padding: 0.5em 5%;
}
@media screen and (max-width: 40em) {
.sub-nav .filter-list {
font-size: 0.85em;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
}
.single-portfolio .filter-list {
padding: 2em 5% 6%;
}
.sub-nav .filter-list::before {
content: "";
width: 100%;
-webkit-box-flex: 1;
flex: 1 0 100%;
-webkit-box-ordinal-group: 1;
order: 0;
}
.filter-list li {
padding: 0 0.5em;
}
.filter-list .next,
.filter-list .previous {
width: auto;
}
.filter-list .previous {
-webkit-box-ordinal-group: -1;
order: -2;
}
.filter-list .previous::after {
display: none;
}
.sub-nav .next::before {
padding: 0 1em 0 0;
}
.filter-list .next {
-webkit-box-ordinal-group: 0;
order: -1;
}
}
.featured-item.opener p {
text-align: justify;
font-size: 1.1em;
line-height: 1.5;
color: #666;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.featured-item > h3 {
margin: 0 auto 1em;
}
.featured-info {
padding: 1em 0;
color: #666;
}
.featured-info p {
margin-top: 0.25em;
line-height: 1.4;
font-weight: 300;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.read-more {
font-size: 0.8em;
color: var(--warm-grey);
cursor: pointer;
padding: 0.5em 0 2em;
background: 0 0;
border: 0;
outline: 0;
text-transform: uppercase;
font-size: 0.7em;
letter-spacing: 0.1em;
color: #666;
}
.read-more:hover {
opacity: 0.3;
}
.read-more.toggled,
.read-more ~ p {
display: none;
visibility: hidden;
opacity: 0;
}
.read-more.toggled ~ p {
display: block;
visibility: visible;
opacity: 1;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
@media screen and (min-width: 50em) {
.read-more {
display: none;
}
.read-more.read-more ~ p {
display: block;
visibility: visible;
opacity: 1;
}
}
.studio-content p {
font-size: 1em;
}
.studio-content p {
max-width: 100%;
margin-bottom: 3em;
}
.studio-content figure,
.studio-content img {
display: block;
width: 100% !important;
max-width: 100%;
}
.parent-people .entry-content .studio-content blockquote,
.parent-people .entry-content .studio-content blockquote {
max-width: 26em;
margin-bottom: 2em;
}
.page-books article {
padding: 0 5%;
}
.page-books h4 {
padding: 1em 0;
}
.page-books .wp-block-columns {
max-width: 70em;
margin: 3em auto;
}
.page-books .wp-block-columns .wp-block-column {
padding-bottom: 2em;
}
.featured-item.books .featured-image_thumb {
width: 100%;
}
@media screen and (min-width: 60em) {
.featured-item.books .featured-image_thumb {
width: 31%;
}
}
.page-books h4 {
line-height: 1.6;
max-width: 25em;
margin: 0 auto 0 0;
letter-spacing: 0.05em;
}
.page-books p {
font-size: 0.9em;
color: #8a8580;
font-weight: 300;
line-height: 1.8;
}
.page-books .wp-block-image {
background: rgba(95, 95, 96, 0.219);
outline: 0;
padding: 120% 0 0 0;
position: relative;
overflow: hidden;
}
.page-books .wp-block-image img {
position: absolute;
margin-right: 0;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.wp-block-image img {
opacity: 0;
}
.wp-block-image img.image-loaded {
opacity: 1;
-webkit-transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.inquire .text-holder p:first-of-type {
margin-top: 1em;
}
@media screen and (min-height: 40em) and (min-width: 40em) {
.inquire .text-holder p:first-of-type {
margin-top: 3em;
}
}
.inquire .text-holder p {
text-align: center;
margin-top: 1em;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.image-selection {
height: 100vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.image-selection .image-holder {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.image-selection .image-holder img.image-loaded {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.inquire .hero__inner {
padding-top: 5em;
opacity: 0;
-webkit-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
.inquire .hero__inner--warm-bg {
background: rgba(138, 133, 124, 0.86);
}
@media screen and (min-width: 45em) {
.inquire .hero__inner--warm-bg {
background: rgba(169, 163, 152, 0.86);
}
}
.inquire .hero__inner.active {
opacity: 1;
visibility: visible;
}
.image-selection figure {
visibility: hidden;
opacity: 0;
}
footer {
position: relative;
text-align: center; background: #b2b2b2;
color: #666;
padding: 1em 2%;
font-size: 1.2em;
z-index: 900;
}
footer a,
footer span {
display: inline-block;
white-space: nowrap;
margin: 0 0.5em;
}
.home-logo a {
height: 1.25em;
padding: 0.25em;
display: block;
}
.footer div {
display: block;
margin: 0 auto;
}
.footer .social svg {
margin: 1em auto;
}
.page-inquire footer {
display: none;
}
.page-inquire .footer {
color: #666;
margin: 0 auto;
text-align: center;
opacity: 0;
-webkit-animation: fadeIn 1.5s 3.5s forwards 1 ease-in-out;
animation: fadeIn 1.5s 3.5s forwards 1 ease-in-out;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.footer svg,
footer svg {
width: auto;
height: 1.1em;
width: 100%;
max-width: 11.4em;
display: block;
margin: 0 auto 0.5em;
}
footer svg .logo-path-ramsa {
fill: #fff;
}
footer svg .logo-path-houses {
fill: #fff; } footer .ext-link {
display: inline-block;
margin: 0 auto;
line-height: 1;
}
.social {
height: 1.5em;
max-width: 1.5em;
}
.social a {
display: block;
margin: 0;
height: 100%;
}
.social svg {
margin: 0 auto; fill: #ffffffb0;
}
footer .contact-info {
width: 100%;
margin-top: 0;
-webkit-box-flex: 1;
flex: 1 0 100%;
}
.contact-info p {
color: #666;
color: #fff;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
footer .contact-info p {
font-size: 0.7em;
}
.project-footer {
text-align: center;
padding: 0 2% 1.5%;
}
.project-footer ul li {
color: var(--warm-grey);
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.8em;
display: inline-block;
}
.project-footer ul li:not(:last-child)::after {
content: "|";
display: inline-block;
margin: 0 1em 0 1.25em;
}
.heart-slideshow {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
z-index: 10;
}
.heart-slideshow .heart-slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0;
-webkit-transition: opacity 0s 3s;
transition: opacity 0s 3s;
}
.heart-slide .image-holder {
height: 100%;
width: 100%;
margin: 0;
}
.heart-slide img {
display: block;
height: 100%;
width: 100%;
visibility: hidden;
}
.heart-slide img[src],
.heart-slide img[srcset] {
opacity: 1;
visibility: visible;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.heart-slide.active {
opacity: 1;
z-index: 20;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transition: opacity 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: opacity 3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#credit svg svg.d path,
#credit svg svg.siteby path,
#credit svg svg.therest path {
fill: #000;
}
#credit svg svg.siteby,
#credit svg svg.therest {
opacity: 0;
-webkit-transition: opacity 0.75s ease, filter 0.75s ease;
-webkit-transition: opacity 0.75s ease, -webkit-filter 0.75s ease;
transition: opacity 0.75s ease, -webkit-filter 0.75s ease;
transition: opacity 0.75s ease, filter 0.75s ease;
transition: opacity 0.75s ease, filter 0.75s ease, -webkit-filter 0.75s ease;
}
#credit {
opacity: 0;
margin: 2em 0 0;
padding: 0;
overflow: hidden;
display: block;
position: fixed;
top: auto;
right: auto;
bottom: 2em;
left: 2em;
width: 200px;
height: 12px;
max-width: 10px;
-webkit-transition: max-width 0.75s ease, opacity 0.5s ease-in;
transition: max-width 0.75s ease, opacity 0.5s ease-in;
z-index: 99999;
}
#credit.show {
opacity: 1;
}
#credit svg {
height: 100%;
position: absolute;
left: 0;
right: auto;
}
#credit > a {
display: block;
position: relative;
margin: 0 !important;
padding: 0 !important;
height: 12px;
width: 200px;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
-webkit-transition: transform 0.75s ease;
-webkit-transition: -webkit-transform 0.75s ease;
transition: -webkit-transform 0.75s ease;
transition: transform 0.75s ease;
transition: transform 0.75s ease, -webkit-transform 0.75s ease;
}
#credit:hover {
max-width: 200px;
}
#credit:hover > a {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#credit:hover svg svg.siteby,
#credit:hover svg svg.therest {
opacity: 1;
} .page-id-3601 section.people {
min-height: 0;
max-width: 170vh;
margin: 2em auto 5%;
padding: 0 2%;
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
}
#senior-team.people { } @media screen and (min-width: 45em) {
#senior-team.people {  }
#senior-team.people .people-item img {
border: 0.35em solid #e5e6e3;
}
.page-id-3601 .people-item {
width: 48%;
margin: 0 1% 3%;
}
}
@media screen and (min-width: 55em) {
#senior-team .people-item {
width: 31.333333%;
}
}
@media screen and (min-width: 70em) {
.page-id-3601 .people-item {
width: 31.333333%;
}
#senior-team .people-item {
width: 23%;
}
}