@import url(../../../../count/3c071a);
@font-face {
font-family: "FelixTitlingMTStd";
src: url(../../../themes/howard-design-studio/webFonts/FelixTitlingMTStd/font.woff2) format("woff2"), url(../../../themes/howard-design-studio/webFonts/FelixTitlingMTStd/font.woff) format("woff");
}
@font-face {
font-family: "EngraversGothicBT-Regular";
src: url(../../../themes/howard-design-studio/webFonts/EngraversGothicBT-Regular/font.woff2) format("woff2"), url(../../../themes/howard-design-studio/webFonts/EngraversGothicBT-Regular/font.woff) format("woff");
}
@font-face {
font-family: "CentaurMTStd";
font-style: normal;
src: url(../../../themes/howard-design-studio/webFonts/CentaurMTStd-Regular/font.woff2) format("woff2"), url(../../../themes/howard-design-studio/webFonts/CentaurMTStd-Regular/font.woff) format("woff");
}
@font-face {
font-family: "CentaurMTStd";
font-style: italic;
src: url(../../../themes/howard-design-studio/webFonts/CentaurMTStd-Italic/font.woff2) format("woff2"), url(../../../themes/howard-design-studio/webFonts/CentaurMTStd-Italic/font.woff) format("woff");
}   html {
font-size: 10px;
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
.site-main {
min-height: calc(100vh - 6.7em);
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
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 {
-webkit-box-sizing: content-box;
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"] {
-webkit-box-sizing: border-box;
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 #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}  .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; }
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
-webkit-clip-path: none;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; } #content[tabindex="-1"]:focus {
outline: 0;
} body,
button,
input,
select,
optgroup,
textarea {
color: #161514;
font-family: "CentaurMTStd", serif;
font-style: normal;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.5;
}
.close-button,
.grid-item figure a::after,
.project-nav,
.mobile-close-button,
.credits,
.scroll-instruct,
.page-indicator,
address,
h1,
h2,
h3,
h4,
h5,
h6,
nav {
font-family: "EngraversGothicBT-Regular", sans-serif;
clear: both;
text-transform: uppercase;
}
address {
font-size: 0.9em;
font-style: normal;
}
h1,
h2 {
font-family: "FelixTitlingMTStd", serif;
text-transform: uppercase;
font-size: 1.2em;
font-weight: 100;
letter-spacing: 0.1em;
margin: 0 auto;
}
h3 {
font-weight: 400;
font-size: 0.9em;
letter-spacing: 0.1em;
color: #867457;
margin: 0 auto;
}
h4 {
font-weight: 400;
font-size: 0.8em;
letter-spacing: 0.05em;
color: #867457;
margin: 0 auto;
}
@media screen and (min-width: 50em) {
h3 {
letter-spacing: 0.2em;
}
}
@media screen and (min-width: 60em) {
h1,
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1em;
}
}
p {
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
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;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
} html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after { -webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
background: #fff; }
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" "";
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 0 1.5em 3em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em;
}
img {
display: block;
height: auto; max-width: 100%; }
figure {
margin: 0; }
table {
margin: 0 0 1.5em;
width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
header {
position: relative;
}
::-moz-selection {
background-color: #d8d5cb;
}
::selection {
background-color: #d8d5cb;
}
.menu-toggle {
position: fixed;
top: 1em;
right: auto;
bottom: auto;
left: 0.75em;
width: 40px;
height: 32px;
border: 0;
outline: 0;
background: transparent;
padding: 5px;
cursor: pointer;
z-index: 1300;
}
.menu-toggle .line {
display: block;
margin: 5px auto 4px; height: 2px;
border-bottom: 1px solid #fff;
background-color: #666;
width: 100%;
pointer-events: none;
-webkit-transition: background-color 0.25s ease;
transition: background-color 0.25s ease;
}
.page-template-page-contact .menu-toggle .line {
background-color: #fff;
}
.toggled .menu-toggle .line {
background-color: #000;
}
.menu {
position: fixed;
top: 0;
right: auto;
bottom: 0;
left: 0;
padding: 4em 0.75em;
z-index: 500;
pointer-events: none;
font-size: 1.2em;
}
@media screen and (min-width: 45em) {
.menu {
font-size: 1em;
}
}
.menu li {
position: relative;
z-index: 10;
pointer-events: auto;
opacity: 0;
-webkit-transform: translate3d(-100vw, 0, 0);
transform: translate3d(-100vw, 0, 0);
-webkit-transition: opacity 0.35s ease-in-out, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
}
.menu .current_page_item:not(.page-item-2),
.toggled .menu li {
opacity: 0.88;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0s;
transition: opacity 0.8s ease-in-out, -webkit-transform 0s;
transition: opacity 0.8s ease-in-out, transform 0s;
transition: opacity 0.8s ease-in-out, transform 0s, -webkit-transform 0s;
}
@media screen and (max-width: 40em) {
.menu .current_page_item:not(.page-item-2) {
opacity: 0.88;
position: fixed;
top: 1em;
right: 0;
bottom: auto;
left: 5em;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0s;
transition: opacity 0.8s ease-in-out, -webkit-transform 0s;
transition: opacity 0.8s ease-in-out, transform 0s;
transition: opacity 0.8s ease-in-out, transform 0s, -webkit-transform 0s;
}
.toggled .menu li {
position: relative !important;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
}
}
.menu::after,
.menu::before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
pointer-events: none;
background: rgba(255, 255, 255, 1);
opacity: 0;
-webkit-transform: translate3d(-100vw, 0, 0);
transform: translate3d(-100vw, 0, 0);
-webkit-transition: opacity 0.35s ease-in-out, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
transition: opacity 0.35s ease-in-out, transform 0s 0.35s, -webkit-transform 0s 0.35s;
}
.menu::after {
z-index: 10;
pointer-events: none;
background: url(../../../themes/howard-design-studio/assets/hds-intro.png);
background-size: 120vh;
background-repeat: no-repeat;
background-position: 0% 50%;
}
@media screen and (min-width: 45em) {
.menu::after {
display: none;
}
.menu::before {
background: rgba(255, 255, 255, 0.85);
}
}
.toggled .menu::after,
.toggled .menu::before {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0s;
transition: opacity 0.8s ease-in-out, -webkit-transform 0s;
transition: opacity 0.8s ease-in-out, transform 0s;
transition: opacity 0.8s ease-in-out, transform 0s, -webkit-transform 0s;
}
.toggled .menu::after {
opacity: 0.15;
}
nav li {
font-size: 0.8em;
padding: 0.4em 0.2em;
}
@media screen and (min-width: 45em) {
nav li {
padding: 0.2em;
}
}
@media screen and (min-width: 90em) {
nav li {
font-size: 0.9em;
}
}
nav li a {
opacity: 0.4;
}
.home nav li a {
opacity: 1;
}
nav li a:hover {
opacity: 1;
}
.current_page_ancestor a,
.current_page_item a {
opacity: 1;
}
body:not(.below-fold) .main-navigation:not(.toggled) .menu li.current_page_item.page-item-9 {
color: #938f84;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} .image-holder img,
.image-holder img.image-loading {
opacity: 0;
-webkit-transition: opacity 0.35s ease-out;
transition: opacity 0.35s ease-out;
}
.image-holder img.image-loaded {
opacity: 1;
}
.image-holder img[data-ofi-src] {
pointer-events: none;
} address,
nav {
letter-spacing: 0.05em;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
@media screen and (min-width: 45em) {
.home .main-navigation {
display: none;
}
}  #intro {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
z-index: 9999999;
background-color: #f9f8f6;
}
.intro-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.centered-content p,
.intro-content .set-1 img {
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#intro.animation-ready {
opacity: 0;
pointer-events: none;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 1s 2s ease-in;
transition: opacity 1s 2s ease-in;
}
.centered-content {
position: absolute;
z-index: 10;
}
.centered-content p {
letter-spacing: 0.025em;
margin: 0 auto 0.8em;
font-size: calc(2vmin + 1.3em);
}
@media screen and (min-width: 45em) {
.centered-content p {
margin: 0 auto;
font-size: calc(2vmin + 1em);
}
}
.animation-ready .centered-content p {
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
transition: opacity 2s ease-in-out, transform 4s ease-out;
}
.botanical-set.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
pointer-events: none;
}
.projects .botanical-set.fixed {
opacity: 0.17;
}
.details .botanical-set.fixed {
display: block;
}
.botanical-set.fixed .title-container {
pointer-events: none;
font-size: 0.9em;
width: 100%;
max-width: 160vh;
height: 80vh;
text-align: center;
position: absolute;
height: 8em;
margin: auto;
top: calc(100vh - 8em);
bottom: auto;
right: 0;
left: 0;
}
.title-container .text-holder {
width: 100%;
padding: 0 1em;
position: relative;
margin: auto 0 auto auto;
}
.details .project-row .image-container img,
.details .project-row figure {
position: fixed;
width: 90%;
margin: auto;
height: 120vw;
padding: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: none;
}
.botanical-set.fixed figure,
.details .project-row .image-container img {
position: absolute;
margin: auto;
width: 100%;
max-width: 160vh;
height: 80vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.details .project-row .image-container {
position: relative;
height: 100vh;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.details .project-row figure,
.details .project-row .image-container img {
position: fixed;
top: calc(24.75vh - 5em);
right: 0;
bottom: auto;
left: 0;
width: calc(100% - 2em);
height: calc(131.1475vw - 1.59em);
max-height: calc(100vh - 15.525em);
max-height: calc(var(--vh, 1vh) * 100 - 11.64em);
max-width: calc(76.25vh - 12em);
max-width: calc(var(--vh, 1vh) * 76.25 - 9em);
margin: auto;
}
.botanical-set.fixed figure img {
display: none;
}
.botanical-set.set-detail figure {
opacity: 0.15;
max-height: 52vw;
}
@media screen and (min-width: 45em) {
.botanical-set.fixed figure img {
width: 50%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
font-family: "object-fit: contain;";
padding: 2%;
}
}
@media screen and (min-aspect-ratio: 5/9) {
.botanical-set.fixed .title-container {
top: calc(94vh - 7.5em);
top: calc(var(--vh, 1vh) * 100 - 6.35em);
}
.details .project-row figure,
.details .project-row .image-container img {
top: calc(4em + 2vh);
}
}
@media screen and (min-aspect-ratio: 1/1) and (min-width: 45em) {
.botanical-set.fixed figure img {
display: block;
}
.botanical-set.fixed .title-container {
width: 100%;
max-width: 160vh;
text-align: center;
position: absolute;
height: 6em;
margin: auto;
top: 0;
bottom: 0;
}
.title-container .text-holder {
width: 50%;
right: 0;
position: relative;
margin: auto 0 auto auto;
}
.details .project-row .image-container img,
.details .project-row figure {
width: 61vh;
height: 80vmin;
max-width: 40vw;
max-height: 52vw;
margin: auto 0 auto auto;
position: fixed;
padding: 0;
top: 0;
right: 50%;
bottom: 0;
background: none;
}
}
.botanical-set.fixed .title-container br {
display: none;
}
@media screen and (min-height: 30em) {
.botanical-set.fixed .title-container br {
display: block;
}
}
@media screen and (min-height: 40em) {
.botanical-set.fixed .title-container {
font-size: 1em;
}
}
.botanical-set.fixed.fixed-right figure img {
right: 0;
}
.botanical-set {
position: absolute;
height: 110vh;
width: 110vh;
top: -8vmin;
margin: auto;
bottom: 0;
}
@media screen and (min-width: 45em) {
.botanical-set {
position: absolute;
height: 110vmin;
width: 110vmin;
top: -5vmin;
margin: auto;
bottom: 0;
}
}
.botanical-set img {
opacity: 0.3;
position: absolute;
height: auto;
}
.animation-ready img {
opacity: 0.3;
}
.full-bleed-content {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
z-index: 11;
}
.full-bleed-content::before {
content: "";
position: fixed;
top: 50%;
right: 0;
bottom: 0;
left: 0;
opacity: 0.6;
z-index: -1;
background: -webkit-gradient(
linear,
left bottom,
left top,
from(hsl(135, 8.7%, 9.02%)),
color-stop(8.1%, hsla(135, 8.7%, 9.02%, 0.987)),
color-stop(15.5%, hsla(135, 8.7%, 9.02%, 0.951)),
color-stop(22.5%, hsla(135, 8.7%, 9.02%, 0.896)),
color-stop(29%, hsla(135, 8.7%, 9.02%, 0.825)),
color-stop(35.3%, hsla(135, 8.7%, 9.02%, 0.741)),
color-stop(41.2%, hsla(135, 8.7%, 9.02%, 0.648)),
color-stop(47.1%, hsla(135, 8.7%, 9.02%, 0.55)),
color-stop(52.9%, hsla(135, 8.7%, 9.02%, 0.45)),
color-stop(58.8%, hsla(135, 8.7%, 9.02%, 0.352)),
color-stop(64.7%, hsla(135, 8.7%, 9.02%, 0.259)),
color-stop(71%, hsla(135, 8.7%, 9.02%, 0.175)),
color-stop(77.5%, hsla(135, 8.7%, 9.02%, 0.104)),
color-stop(84.5%, hsla(135, 8.7%, 9.02%, 0.049)),
color-stop(91.9%, hsla(135, 8.7%, 9.02%, 0.013)),
to(hsla(135, 8.7%, 9.02%, 0))
);
background: linear-gradient(
to top,
hsl(135, 8.7%, 9.02%) 0%,
hsla(135, 8.7%, 9.02%, 0.987) 8.1%,
hsla(135, 8.7%, 9.02%, 0.951) 15.5%,
hsla(135, 8.7%, 9.02%, 0.896) 22.5%,
hsla(135, 8.7%, 9.02%, 0.825) 29%,
hsla(135, 8.7%, 9.02%, 0.741) 35.3%,
hsla(135, 8.7%, 9.02%, 0.648) 41.2%,
hsla(135, 8.7%, 9.02%, 0.55) 47.1%,
hsla(135, 8.7%, 9.02%, 0.45) 52.9%,
hsla(135, 8.7%, 9.02%, 0.352) 58.8%,
hsla(135, 8.7%, 9.02%, 0.259) 64.7%,
hsla(135, 8.7%, 9.02%, 0.175) 71%,
hsla(135, 8.7%, 9.02%, 0.104) 77.5%,
hsla(135, 8.7%, 9.02%, 0.049) 84.5%,
hsla(135, 8.7%, 9.02%, 0.013) 91.9%,
hsla(135, 8.7%, 9.02%, 0) 100%
);
}
.logo-holder {
display: block;
width: 60%;
max-width: 22em;
min-width: 16em;
margin: 0 auto;
padding-bottom: 2em;
opacity: 0;
}
.page-template-page-contact .logo-holder {
padding-bottom: 0.5em;
}
@media screen and (min-width: 45em) {
.logo-holder {
padding-bottom: 0;
}
}
.started-slideshow .logo-holder {
opacity: 1;
-webkit-transition: opacity 2s 2s ease-in-out;
transition: opacity 2s 2s ease-in-out;
}
.logo-holder svg {
width: 100%;
}
.full-bleed-content nav {
display: none;
}
.full-bleed-content address {
display: block;
margin: 0.5em auto 2em;
text-align: center;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #fff;
}
@media screen and (min-width: 45em) {
.full-bleed-content address {
margin: 2em auto;
}
}
.full-bleed-content address p {
letter-spacing: inherit;
margin: 0.25em auto 1em;
}
.full-bleed-content address ul {
padding-left: 0;
margin: 0;
}
.full-bleed-content address ul li {
letter-spacing: 0.1em;
}
@media screen and (min-width: 45em) {
.full-bleed-content nav {
display: block;
opacity: 0;
margin: 2em auto 2em;
text-align: center;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: #fff;
}
.full-bleed-content address ul li {
padding-left: 0;
margin: 0;
}
.full-bleed-content address ul li {
display: inline-block;
}
.full-bleed-content address ul li:not(:last-child)::after {
content: "|";
display: inline-block;
margin: 0 0.35em 0 0.45em;
}
}
.social-svg {
position: relative;
display: block;
margin: 0 auto;
width: 1.1em;
height: 1.1em;
}
.social-svg a,
.social-svg svg {
display: block;
width: 100%;
height: 100%;
}
.social-svg a {
opacity: 0.5;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.social-svg a:hover {
opacity: 1;
}
.social-svg path {
fill: #fff;
}
.started-slideshow .full-bleed-content nav {
opacity: 1;
-webkit-transition: opacity 1.8s 2.4s ease-in-out;
transition: opacity 1.8s 2.4s ease-in-out;
}
.full-bleed-content nav ul li {
display: inline-block;
letter-spacing: 0.2em;
}
.full-bleed-content nav ul li:not(:last-child)::after {
content: "|";
display: inline-block;
margin: 0 0.35em 0 0.45em;
}
.image-pool figure img {
display: none;
z-index: -1;
pointer-events: none;
}
.image-pool figure.image-chosen img {
display: block;
position: fixed;
pointer-events: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
} .page-template-page-landscapes {
height: 100vh;
overflow: hidden;
}
.page-template-page-landscapes footer {
display: none;
}
@media screen and (max-width: 45em) {
.page-template-page-detail footer {
display: none;
}
}
.projects {
position: relative;
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
overflow: scroll;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
.project-row {
scroll-snap-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
min-height: 100vh;
}
.details .project-row {
display: block;
scroll-snap-align: none;
}
.project-row a {
width: 100%;
}
body.page-template-page-landscapes {
overflow: hidden;
} @media screen and (min-aspect-ratio: 1/1) and (min-width: 45em) {
.projects {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body.page-template-page-landscapes {
overflow: visible;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
.project-row {
scroll-snap-align: none;
display: block;
min-height: 0;
}
.project-row a {
scroll-snap-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
min-height: 100vh;
}
}
.project-row .column {
width: 50%;
max-width: 80vh;
margin: auto 0;
padding: 10vh 0;
}
@media screen and (max-aspect-ratio: 1/1) {
.project-row a {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}
.botanical-set.fixed {
right: 0;
display: none;
}
.botanical-set.fixed figure img {
width: 100%;
}
.project-row {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
height: auto;
}
.project-row .column {
padding: 0;
margin: 1.5em auto -2em;
}
.project-row .column:last-child {
width: 100%;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
padding: 0;
margin: 0 auto;
}
.project-row .column.fade-up {
width: 100%;
z-index: 40;
}
.project-row .column .title-container {
width: 100%;
position: relative;
}
}
.title-container {
margin: 0 auto;
text-align: center;
}
.column .title-container,
.title-container h2 {
pointer-events: none;
}
.column .image-container {
width: 75%;
margin: 0 auto;
}
@media screen and (min-width: 40em) and (max-aspect-ratio: 1/1) {
.column .image-container {
max-width: 40vh;
}
}
.image-container .image-holder {
margin: 0 auto;
padding-top: 132%;
position: relative;
background: #f6f5f4;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.image-container .image-holder:hover {
opacity: 0.9;
}
.image-container 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;";
}
.mobile-close-button,
.project-nav,
.credits {
font-size: 0.8em;
margin: 1em auto 0;
text-align: center;
}
@media screen and (min-width: 40em) {
.project-nav,
.credits {
margin: 0 auto;
font-size: 0.9em;
}
}
.credits ul {
padding: 0;
margin: 0 auto;
list-style-type: none;
letter-spacing: 0.05em;
}
.project-nav {
cursor: pointer;
margin: 1em auto 1em;
text-align: center;
color: #938f84;
}
.mobile-close-button {
margin: 1em auto 0 0;
letter-spacing: 0.05em;
font-size: 0.9em;
text-align: left;
}  article {
padding: 4em;
}
@media screen and (max-width: 50em) {
article {
padding: 4em 1em;
}
}
article .hero {
width: 100%;
height: calc(100vh - 9.5em);
height: calc(var(--vh, 1vh) * 100 - 9.5em);
min-height: 40vw;
}
article .title-holder {
text-align: center;
margin: 1.6em auto 6vw;
}
article .title-holder h2 {
line-height: 1;
}
.hero figure {
position: relative;
height: 100%;
width: 100%;
}
.hero figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.project-image,
.project-intro {
display: block;
width: 100%;
margin: 0 auto 3vw;
}
.project-intro {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.project-intro .column {
width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.project-intro .column.description {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
width: 100%;
margin: 3vw 0;
}
.project-intro .column:last-child {
width: 100%;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.project-image figure img,
.project-intro figure img {
width: 100%;
}
.project-image figure {
position: relative;
}
.project-image figure[style^="padding-top"] img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.project-image.is-vertical figure,
.project-image.is-vertical figure img {
height: 100%;
}
.project-intro.is-vertical figure img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.project-intro .column .image-holder,
.project-intro .column .image-holder img {
height: 100%;
width: 100%;
}
.column .text-holder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #938f84;
padding: 2em;
text-align: justify;
width: 100%;
font-size: 1.1em;
line-height: 1.4;
}
.column .text-holder p {
padding: 0.5em 0;
margin: auto;
}
@media screen and (min-width: 45em) {
.project-intro .column,
.project-intro .column:last-child {
width: 48%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.project-intro .column.description {
margin: 3vw 0 0;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
}
@media screen and (min-width: 75em) {
.column .text-holder {
font-size: 1em;
line-height: 1.5;
}
.project-intro .column,
.project-intro .column:last-child,
.project-intro .column.description {
width: 31%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.project-intro .column.description {
margin: 0 auto;
}
.project-intro .column .image-holder img {
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.column .text-holder {
height: 100%;
padding: 3em 4vw;
}
.column .text-holder p {
font-size: calc(0.6em + 0.6vw);
}
.column .text-holder {
margin: 0;
}
}
.column .text-holder.fade-up p {
opacity: 0;
-webkit-transition: opacity 2s 0.35s ease-in-out;
transition: opacity 2s 0.35s ease-in-out;
}
.column .text-holder.fade-up.in-view p {
opacity: 1;
}
.fade-up {
opacity: 0;
-webkit-transition: opacity 1.2s ease-in-out;
transition: opacity 1.2s ease-in-out;
}
.fade-up.in-view {
opacity: 1;
}
.column .title-container {
position: fixed;
width: 50%;
max-width: 80vh;
top: calc(50% - 2em);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.project-row .column.fade-up {
opacity: 1;
}
.project-row .column.fade-up .title-container {
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
will-change: opacity;
}
.project-row .column.fade-up.in-view .title-container {
opacity: 1;
}
@media screen and (min-aspect-ratio: 1/1) and (min-width: 45em) {
.project-row .column.fade-up {
pointer-events: none;
}
.project-row .column.fade-up.in-view .title-container {
pointer-events: auto;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
}
.project-gallery {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
@media screen and (min-width: 65em) {
.project-gallery .project-image.is-vertical {
-webkit-box-flex: 1;
-ms-flex: 1 1 31%;
flex: 1 1 31%;
}
.project-image.is-vertical + .project-image.is-vertical {
margin-left: 3.333332%;
}
}  .page-template-page-studio .site {
padding-top: 4em;
}
.page-template-page-studio footer {
margin-top: -2.7em;
position: relative;
z-index: 99;
color: #fff;
}
.vision {
background: rgba(0, 0, 0, 0.88);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 2%;
color: #938f84;
position: fixed;
top: 0;
right: 0;
bottom: auto;
height: 100vh;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
padding: 5em 1em 5em;
left: 0;
z-index: 20;
pointer-events: none;
}
.vision .text-holder {
width: 90%;
max-width: 37em;
margin: 0;
font-size: 1.1em;
text-align: justify;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 35em) {
.vision .text-holder {
width: 80%;
}
}
.scroll-instruct {
display: block;
text-transform: uppercase;
font-size: 0.7em;
margin-top: 2em;
letter-spacing: 0.2em;
opacity: 0.7;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
@media screen and (min-width: 35em) {
.scroll-instruct {
margin-top: 6em;
}
}
.scrolled .scroll-instruct {
opacity: 0;
}
.details .scroll-instruct {
margin-top: 0.75em;
text-align: center;
}
@media screen and (min-width: 40em) {
.details .scroll-instruct {
margin-top: 2em;
}
}
.bios {
position: relative;
z-index: 5;
outline: 2px solid #fff;
}
.bio-gradient {
position: relative;
width: 100%;
height: 50vh;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(hsl(0, 0%, 100%)),
color-stop(8.1%, hsla(0, 0%, 100%, 0.987)),
color-stop(15.5%, hsla(0, 0%, 100%, 0.951)),
color-stop(22.5%, hsla(0, 0%, 100%, 0.896)),
color-stop(29%, hsla(0, 0%, 100%, 0.825)),
color-stop(35.3%, hsla(0, 0%, 100%, 0.741)),
color-stop(41.2%, hsla(0, 0%, 100%, 0.648)),
color-stop(47.1%, hsla(0, 0%, 100%, 0.55)),
color-stop(52.9%, hsla(0, 0%, 100%, 0.45)),
color-stop(58.8%, hsla(0, 0%, 100%, 0.352)),
color-stop(64.7%, hsla(0, 0%, 100%, 0.259)),
color-stop(71%, hsla(0, 0%, 100%, 0.175)),
color-stop(77.5%, hsla(0, 0%, 100%, 0.104)),
color-stop(84.5%, hsla(0, 0%, 100%, 0.049)),
color-stop(91.9%, hsla(0, 0%, 100%, 0.013)),
to(hsla(0, 0%, 100%, 0))
);
background: linear-gradient(
to bottom,
hsl(0, 0%, 100%) 0%,
hsla(0, 0%, 100%, 0.987) 8.1%,
hsla(0, 0%, 100%, 0.951) 15.5%,
hsla(0, 0%, 100%, 0.896) 22.5%,
hsla(0, 0%, 100%, 0.825) 29%,
hsla(0, 0%, 100%, 0.741) 35.3%,
hsla(0, 0%, 100%, 0.648) 41.2%,
hsla(0, 0%, 100%, 0.55) 47.1%,
hsla(0, 0%, 100%, 0.45) 52.9%,
hsla(0, 0%, 100%, 0.352) 58.8%,
hsla(0, 0%, 100%, 0.259) 64.7%,
hsla(0, 0%, 100%, 0.175) 71%,
hsla(0, 0%, 100%, 0.104) 77.5%,
hsla(0, 0%, 100%, 0.049) 84.5%,
hsla(0, 0%, 100%, 0.013) 91.9%,
hsla(0, 0%, 100%, 0) 100%
);
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.scrim[style="opacity: 0;"] + .bio-gradient {
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.bios .bios-div {
display: block;
width: 100%;
height: auto;
margin: calc(120vh - 10em) auto 0;
padding: 10em 1em 3em 1em;
max-width: 150vh;
}
@media screen and (min-width: 35em) {
.bios .bios-div {
margin: calc(100vh - 10em) auto 0;
margin: calc(var(--vh, 1vh) * 100 - 10em) auto 0;
}
}
@media screen and (min-height: 50em) {
.bios {
padding-top: 24vh;
}
}
.bios-container {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.bio-item {
width: 100%;
margin: 1% auto;
}
.bio-item .image-container {
background: #000;
}
.bio-item a:hover .image-container .image-holder {
opacity: 0.6;
}
@media screen and (min-width: 35em) {
.bios-container {
padding-left: 13em;
}
.bios {
padding: 10em 3em 3em 1em;
}
}
@media screen and (min-width: 50em) {
.bios {
padding: 10em 1em 3em 1em;
}
.bios-container {
padding-left: 8em;
}
.bio-item {
width: 26%;
margin: 1.5%;
}
.bio-item:nth-child(6n + 1) {
margin-left: 7%;
}
.bio-item:nth-child(6n + 2) {
margin-top: 17%;
}
.bio-item:nth-child(6n + 3) {
margin-top: 35%;
width: 32%;
}
.bio-item:nth-child(6n + 4) {
margin-top: -12.5%;
width: 32%;
}
.bio-item:nth-child(6n + 5) {
margin-top: 1%;
margin-left: 13%;
}
.bio-item:nth-child(6n + 6) {
width: 32%;
margin-top: -11%;
margin-left: 13%;
}
.bio-item:nth-child(6n + 3) .image-holder {
padding-top: 100%;
}
.bio-item:nth-child(6n + 4) .image-holder {
padding-top: 80%;
padding-top: 90%;
}
.bio-item:nth-child(6n + 6) .image-holder { padding-top: 100%;
}
}
@media screen and (min-width: 75em) {
.bios-container {
padding-left: 9em;
}
.bio-item {
width: 24%;
margin: 2%;
}
.bio-item:nth-child(6n + 1) {
margin-left: 10%;
}
} .people-nav {
display: none;
}
@media screen and (min-width: 35em) {
.people-nav {
display: block;
position: fixed;
top: 10em;
right: auto;
bottom: auto;
left: 0.75em;
color: #666;
z-index: 10;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.at-bottom.below-fold .people-nav {
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
}
@media screen and (min-height: 40em) {
.people-nav {
top: 24vh;
}
}
article .people-nav,
.below-fold .people-nav {
opacity: 1;
}
.people-nav li a {
opacity: 0.4;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.people-nav li.current a,
.people-nav li:hover a {
opacity: 1;
}
.bios.active .image-holder.overlay {
z-index: 5;
opacity: 1;
}
.bios.active .people-nav li.current a {
opacity: 1;
}
.bios.active + .vision {
opacity: 0 !important;
}
#studio-gallery {
height: 150vh;
height: calc(var(--vh, 1vh) * 150);
overflow: hidden;
position: relative;
z-index: 1;
clip-path: rect(0, 0, 0, 0);
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.gallery .heart-slideshow {
position: fixed;
z-index: -1;
pointer-events: none; }
.gallery .scrim {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
height: 100%;
width: 100%;
background: #fff;
opacity: 1;
}
.bios-single {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
background: #fff;
opacity: 0;
-webkit-transition: opacity 0.35s ease-in-out;
transition: opacity 0.35s ease-in-out;
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.bios-single.animate-out {
opacity: 0;
-webkit-transition: opacity 0.35s 0.15s ease-in-out, -webkit-transform 0s 0.5s;
transition: opacity 0.35s 0.15s ease-in-out, -webkit-transform 0s 0.5s;
-webkit-transition: opacity 0.35s 0.15s ease-in-out, -webkit-transform 0s 0.5s;
-webkit-transition: opacity 0.35s 0.15s ease-in-out, -webkit-transform 0s 0.5s;
-webkit-transition: opacity 0.35s 0.15s ease-in-out, -webkit-transform 0s 0.5s;
-webkit-transition: opacity 0.35s 0.15s ease-in-out, -webkit-transform 0s 0.5s;
transition: opacity 0.35s 0.15s ease-in-out, transform 0s 0.5s;
transition: opacity 0.35s 0.15s ease-in-out, transform 0s 0.5s, -webkit-transform 0s 0.5s;
transition: opacity 0.35s 0.15s ease-in-out, transform 0s 0.5s, -webkit-transform 0s 0.5s;
transition: opacity 0.35s 0.15s ease-in-out, transform 0s 0.5s, -webkit-transform 0s 0.5s;
transition: opacity 0.35s 0.15s ease-in-out, transform 0s 0.5s, -webkit-transform 0s 0.5s;
transition: opacity 0.35s 0.15s ease-in-out, transform 0s 0.5s, -webkit-transform 0s 0.5s;
}
.bios-single.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@media screen and (min-width: 50em) {
.bios-single {
padding-top: 4.7em;
}
} .single-profile {
margin: 0em auto 0;
padding: 0;
}
.bios-single .single-profile {
visibility: hidden;
opacity: 0;
}
.bios-single.content-added .single-profile.thumb-loaded {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.4s 0.15s ease-in-out;
transition: opacity 0.4s 0.15s ease-in-out;
}
.bios-single.animate-out .single-profile.thumb-loaded {
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
}
.parent-pageid-9 .site-main {
min-height: calc(100vh - 2.7em);
min-height: calc(var(--vh, 1vh) * 100 - 2.7em);
}
@media screen and (min-width: 35em) {
.single-profile {
margin: 4.5em auto 0;
padding: 2em 3em 3em 12em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
}
@media screen and (min-width: 80em) {
.single-profile {
padding: 2em 3em 3em 15em;
}
}
@media screen and (min-height: 40em) and (min-width: 35em) {
.single-profile {
margin: calc(24vh - 6em) auto 0;
max-width: 180vh;
}
}
@media screen and (min-height: 60em) {
.single-profile {
max-width: 140vh;
}
}
.single-profile .entry-content {
text-align: justify;
}
.single-profile .entry-content p {
max-width: 40em;
}
.profile-image .post-thumbnail {
position: relative;
width: 100%;
}
.profile-image .post-thumbnail[style^="padding-top"] img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.single-profile .profile-image.is-horizontal + .entry-content p {
max-width: 34em;
}
.single-profile .profile-image.is-square + .entry-content p {
max-width: 37em;
}
.single-profile .entry-content {
padding: 2em 0;
}
.single-profile h1 {
font-size: 1.2em;
}
.single-profile h2,
.single-profile h3 {
letter-spacing: 0.1em;
font-size: 0.9em;
}
.single-profile p {
opacity: 0.5;
}
.profile-image {
position: relative;
}
.close-button {
position: absolute;
z-index: 10;
color: transparent;
padding: 0.5em;
font-size: 1.4em;
line-height: 0.8;
margin: 0 0 1em;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 35em) {
.mobile-close-button {
display: none;
}
}
.close-button,
.close-button a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@media screen and (min-width: 35em) {
.close-button,
.close-button a {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
.close-button {
position: absolute;
padding: 0;
color: #000;
font-size: 1.4em;
line-height: 0.8;
-webkit-transform: translateX(-2.3em);
transform: translateX(-2.3em);
}
}
.profile-image {
width: 100%;
}
@media screen and (min-width: 50em) {
.profile-image {
width: 31%;
min-width: 15em;
-webkit-box-flex: 0;
-ms-flex: 0 1 31%;
flex: 0 1 31%;
margin: 0 5% 0 0;
}
.profile-image.is-horizontal {
width: 35%;
-webkit-box-flex: 0;
-ms-flex: 0 1 35%;
flex: 0 1 35%;
}
.profile-image.is-square {
width: 35%;
-webkit-box-flex: 0;
-ms-flex: 0 1 35%;
flex: 0 1 35%;
}
.single-profile .entry-content {
-webkit-box-flex: 1;
-ms-flex: 1 0 60%;
flex: 1 0 60%;
padding: 2em 0 0 0;
width: auto;
max-width: 32em;
}
.single-profile.john-howard .entry-content {
max-width: 50em;
}
}
@media screen and (min-width: 80em) {
.single-profile .entry-content {
padding-top: 5em;
}
}   .flex-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
padding: 0 1em 1em;
width: 100%;
margin: 4em 0 0 auto;
}
.grid-item {
position: relative;
width: 100%;
margin: 0 auto 2em;
}
.grid-item figure {
position: relative;
padding-top: 67.6665%;
margin-bottom: 0.5em;
background: #f1f0ed;
}
.grid-item .placeholder,
.grid-item 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;";
}
.grid-item .placeholder {
background: #000;
}
.grid-item figure a::after {
content: "View Project";
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.8em;
opacity: 0;
color: #ac9b7f;
background: rgba(0, 0, 0, 0.7);
display: block;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
}
.grid-item figure img,
.grid-item .info-holder a {
opacity: 1;
-webkit-transition: opacity 0.35s ease;
transition: opacity 0.35s ease;
}
.grid-item figure a:hover::after {
opacity: 1;
}
.grid-item .info-holder a:hover {
opacity: 0.3;
}
.grid-item .image-holder,
.grid-item .image-holder img {
width: 100%;
}
@media screen and (min-width: 40em) {
.grid-item {
width: 45%;
}
.flex-grid {
padding: 1em 1em 1em 8em;
}
}
@media screen and (min-width: 55em) {
.flex-grid {
padding: 1em 1em 1em 15em;
}
}
@media screen and (min-width: 70em) {
.grid-item {
width: 30%;
}
}
@media screen and (min-width: 90em) {
.grid-item {
width: 27%;
}
}  .full-bleed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.page-template-page-contact .full-bleed-content::before {
top: 35%;
opacity: 0.7;
}
.page-template-page-contact .b {
fill: rgba(255, 255, 255, 0.8);
}
@media screen and (min-width: 45em) {
.page-template-page-contact .full-bleed-content::before {
opacity: 0.6;
top: 50%;
}
}
.full-bleed .image-holder {
height: 100%;
width: 100%;
}
.full-bleed img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: "object-fit: cover;";
}
.page-template-page-contact .logo-holder,
.page-template-page-contact .full-bleed-content nav {
opacity: 1;
}
@media screen and (min-width: 45em) {
.page-template-page-contact .logo-holder {
padding-bottom: 0.9em;
}
}  .page-template-page-contact footer,
.home footer {
display: none;
}
.logo-type {
text-align: center;
padding: 1em;
font-size: 0.65em;
}   .heart-slideshow {
position: relative;
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] {
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);
}