html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
margin: 0;
padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
text-decoration: none; }
* {
box-sizing: border-box; }
*:after, *:before {
box-sizing: inherit; }
img {
max-width: 100%; }
::-moz-selection {
background-color: rgba(25, 25, 25, 0.77);
color: #fff; }
::selection {
background-color: rgba(25, 25, 25, 0.77);
color: #fff; }
@font-face {
font-family: 'Butler';
src: url("../fonts/Butler-Light.woff2") format("woff2"), url("../fonts/Butler-Light.woff") format("woff"); }
@font-face {
font-family: 'Ogg';
src: url("../fonts/Ogg-Regular.woff2") format("woff2"), url("../fonts/Ogg-Regular.woff") format("woff"); }
/*********************
Variables
*********************/
/*********************
Mixins
*********************/
i {
display: block; }
i svg {
display: block;
margin: auto; }
.icon-twitter {
width: 23px;
height: 23px; }
.icon-instagram {
width: 23px;
height: 23px; }
.icon-facebook {
width: 23px;
height: 21px; }
.icon-pinterest {
width: 21px;
height: 21px; }
.icon-1stdibs {
width: 73px;
height: 23px; }
.h1 {
font-family: "Ogg", "serif";
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 34px;
line-height: 1.235;
letter-spacing: .017em; }
@media screen and (min-width: 640px) {
.h1 {
font-size: 52px; } }
@media screen and (min-width: 960px) {
.h1 {
font-size: 86px;
line-height: 1.162;
letter-spacing: .018em; } }
.m1 {
font-family: "Ogg", "serif";
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 34px;
line-height: 1.235;
letter-spacing: .017em; }
.h2 {
font-family: "Ogg", "serif";
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 34px;
line-height: 1.235;
letter-spacing: .017em; }
@media screen and (min-width: 640px) {
.h2 {
font-size: 52px; } }
@media screen and (min-width: 960px) {
.h2 {
font-size: 68px;
line-height: 1.08;
letter-spacing: .017em; } }
.h3 {
font-family: "Ogg", "serif";
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 22px;
line-height: 1.27;
letter-spacing: .027em; }
@media screen and (min-width: 640px) {
.h3 {
font-size: 26px; } }
@media screen and (min-width: 960px) {
.h3 {
font-size: 32px;
line-height: 1.1875;
letter-spacing: .01875em; } }
.p {
font-family: "Overpass", sans-serif;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 200;
font-size: 18px;
line-height: 1.666;
letter-spacing: .027em; }
.p + .p,
.p p + p {
margin-top: 1em; }
.cta {
display: inline-block;
font-family: "Helvetica Neue", "sans-serif";
font-style: normal;
font-weight: 200;
font-size: 18px;
line-height: 1.33;
letter-spacing: .0575em; }
html {
height: 100%; }
body {
display: flex;
flex-direction: column;
position: relative;
min-height: 100%; }
body:before {
content: '';
display: block;
position: fixed;
z-index: 9;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: #fff;
pointer-events: none; }
body.is-loading {
/* .main {
transform: translateY(40px);
opacity: 0;
transition: 1s;
} */ }
body.is-loading:before {
opacity: 1;
transition: opacity 0.75s cubic-bezier(1, 0.175, 0.165, 0.875); }
body.is-finished-loading {
/* .main {
transform: translateY(0px);
opacity: 1;
transition: 0s;
} */ }
body.is-finished-loading:before {
opacity: 0;
transition: opacity 0.75s cubic-bezier(1, 0.175, 0.165, 0.875); }
.main {
flex: 1;
overflow: hidden; }
.center {
margin-left: auto;
margin-right: auto;
padding: 0 20px; }
@media screen and (min-width: 480px) {
.center {
padding-left: 40px;
padding-right: 40px; } }
@media screen and (min-width: 640px) {
.center {
padding-left: 60px;
padding-right: 60px; } }
@media screen and (min-width: 768px) {
.center {
padding-left: 80px;
padding-right: 80px; } }
@media screen and (min-width: 960px) {
.center {
padding-left: 80px;
padding-right: 80px; } }
@media screen and (min-width: 1200px) {
.center {
padding-left: 120px;
padding-right: 120px; } }
@media screen and (min-width: 1280px) {
.center {
max-width: 1440px;
padding-left: 195px;
padding-right: 195px; } }
.center .full {
width: calc(100% + (20px * 2));
margin-left: -20px; }
@media screen and (min-width: 480px) {
.center .full {
width: calc(100% + (40px * 2));
margin-left: -40px; } }
@media screen and (min-width: 640px) {
.center .full {
width: calc(100% + (60px * 2));
margin-left: -60px; } }
@media screen and (min-width: 768px) {
.center .full {
width: calc(100% + (80px * 2));
margin-left: -80px; } }
@media screen and (min-width: 960px) {
.center .full {
width: calc(100% + (80px * 2));
margin-left: -80px; } }
@media screen and (min-width: 1200px) {
.center .full {
width: calc(100% + (120px * 2));
margin-left: -120px; } }
@media screen and (min-width: 1280px) {
.center .full {
width: calc(100% + (195px * 2));
margin-left: -195px; } }
img {
display: block; }
.p a {
position: relative; }
.p a:after {
top: 90%; }
.p a.no-underline:after {
content: none; }
.h1.observe,
.m1.observe,
.h2.observe,
.h3.observe,
.p.observe,
.text.observe,
.cta.observe,
.links.observe,
.share.observe {
transform: translateY(40px);
opacity: 0; }
.h1.observe.observed,
.m1.observe.observed,
.h2.observe.observed,
.h3.observe.observed,
.p.observe.observed,
.text.observe.observed,
.cta.observe.observed,
.links.observe.observed,
.share.observe.observed {
transform: translateY(0);
opacity: 1;
transition: .75s; }
.image.observe img {
transform: translateY(40px);
opacity: 0; }
.image.observe.observed img {
transform: translateY(0);
opacity: 1;
transition: .75s; }
a,
.button {
color: inherit; }
.underline {
display: inline;
position: relative;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 86%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: .35s; }
.underline.cta {
background-position: 0% 100%; }
.button {
display: inline-block;
position: relative;
transition: .35s; }
.button.observe.observed {
transition: all .75s, background .35s; }
.button.observe.observed:hover, .button.observe.observed:focus {
opacity: .7;
transition: .35s;
transition-delay: 0s; }
.button.observe.observed:active {
opacity: .5;
transition: .15s;
transition-delay: 0s; }
.button:hover, .button:focus {
opacity: .7; }
.button:active {
opacity: .5;
transition: .15s; }
.button.underline:hover, .button.underline:focus, .button.underline:active {
background-size: 100% 1px; }
.hoverunderline:hover .underline, .hoverunderline:focus .underline {
opacity: .7;
background-size: 100% 1px; }
.hoverunderline:active .underline {
opacity: .5;
background-size: 100% 1px;
transition: .15s; }
.hoverlogo .logo {
transition: .35s; }
.hoverlogo:hover .logo, .hoverlogo:focus .logo {
transform: scale(0.95);
opacity: .7; }
.hoverlogo:active .logo {
transform: scale(0.925);
opacity: .5;
transition: .15s; }
.hoverimage img {
transition: .35s; }
.hoverimage:hover img, .hoverimage:focus img {
transform: scale(0.95); }
.hoverimage:hover .image.observe.observed img, .hoverimage:focus .image.observe.observed img {
transform: scale(0.95);
transition: .35s; }
.hoverimage:active img {
transform: scale(0.925) translateY(1px);
transition: .15s; }
.hoverimage:active .image.observe.observed img {
transform: scale(0.925) translateY(1px); }
.full {
margin-left: auto;
margin-right: auto; }
.full.mobile + .full {
display: none; }
.full img {
width: 100%;
object-fit: cover; }
@media screen and (max-width: 639px) {
.full img {
height: 80vh; } }
@media screen and (min-width: 768px) {
.full.mobile {
display: none; }
.full.mobile + .full {
display: block; } }
.logo {
display: inline-block;
background-image: url(../images/png/logo.png);
background-blend-mode: multiply;
background-size: 100% 100%;
mix-blend-mode: multiply; }
footer {
padding-bottom: 43px;
background-color: #F8F6F4;
text-align: center; }
footer .logo {
width: 118px;
height: 137px;
margin: auto; }
footer .siteby {
display: none;
position: absolute;
bottom: 43px;
right: 22px;
font-size: 14px; }
@media screen and (min-width: 375px) {
footer .siteby {
right: 43px; } }
@media screen and (min-width: 960px) {
footer {
padding-bottom: 34px; }
footer .logo {
width: 172px;
height: 200px; } }
.about + footer .siteby {
display: block; }
.gallery {
margin-top: 120px;
padding-bottom: 120px; }
.gallery li + li {
margin-top: 120px; }
.gallery .image img {
margin: auto; }
.gallery .image.mobile + .image {
display: none; }
.gallery .image + .image {
margin-top: 50px; }
@media screen and (min-width: 640px) {
.gallery ul {
display: flex;
flex-direction: column; }
.gallery li {
display: flex;
align-items: flex-end; }
.gallery li.gap .image:nth-child(odd) {
padding-bottom: 39%; }
.gallery .image {
flex: 1; }
.gallery .image + .image {
margin-top: 0;
margin-left: 40px; }
.gallery .image:first-child img {
margin-left: 0; }
.gallery .image:last-child img {
margin-right: 0; }
.gallery .image:last-child:first-child img {
margin-left: auto;
margin-right: auto; } }
@media screen and (min-width: 768px) {
.gallery .image.mobile {
display: none; }
.gallery .image.mobile + .image {
display: block;
margin-left: 0; } }
@media screen and (min-width: 960px) {
.gallery {
margin-top: 90px; }
.gallery li + li {
margin-top: 140px; }
.gallery .image + .image {
margin-left: 60px; } }
@media screen and (min-width: 1024px) {
.gallery {
margin-top: 146px; } }
@media screen and (min-width: 1180px) {
.gallery li + li {
margin-top: 150px; } }
@media screen and (min-width: 1440px) {
.gallery .center {
padding-left: 167px;
padding-right: 167px; }
.gallery .center .full {
width: calc(100% + (167px * 2));
margin-left: -167px; }
.gallery li + li {
margin-top: 170px; } }
.glide {
position: relative;
width: 100%;
box-sizing: border-box; }
.glide * {
box-sizing: inherit; }
.glide__track {
overflow: hidden; }
.glide__slides {
position: relative;
width: 100%;
list-style: none;
backface-visibility: hidden;
transform-style: preserve-3d;
touch-action: pan-Y;
overflow: hidden;
padding: 0;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
will-change: transform; }
.glide__slides--dragging {
user-select: none; }
.glide__slide {
width: 100%;
height: 100%;
flex-shrink: 0;
white-space: normal;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent; }
.glide__slide a {
user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none; }
.glide__arrows {
-webkit-touch-callout: none;
user-select: none; }
.glide__bullets {
-webkit-touch-callout: none;
user-select: none; }
.glide--rtl {
direction: rtl; }
header {
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
pointer-events: none; }
header .eclipse-white .signature svg path {
fill: #fff; }
header .eclipse-white .hamburger {
color: #fff; }
header .inner {
display: flex;
justify-content: space-between;
width: 100%;
padding: 23px 20px; }
@media screen and (min-width: 640px) {
header .inner {
padding: 40px; } }
@media screen and (min-width: 960px) {
header .inner {
padding: 55px 53px; } }
header .hamburger {
position: relative;
width: 29px;
height: 22px;
color: #191919;
cursor: pointer;
pointer-events: all;
transition: .35s; }
header .hamburger:after,
header .hamburger .buns:before,
header .hamburger .buns:after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: currentColor;
transition: .35s; }
header .hamburger:after {
top: 50%;
margin-top: -1px; }
header .hamburger .buns {
display: block;
position: relative;
height: 100%;
width: 100%; }
header .hamburger .buns:before {
top: 0; }
header .hamburger .buns:after {
bottom: 0;
width: 57.77%; }
header .hamburger:hover, header .hamburger:focus {
opacity: .7; }
header .hamburger:hover:after,
header .hamburger:hover .buns:before,
header .hamburger:hover .buns:after, header .hamburger:focus:after,
header .hamburger:focus .buns:before,
header .hamburger:focus .buns:after {
transform: scale(0.9);
width: 100%; }
header .hamburger:active {
transform: translate3d(0, 1px, 0) scale(0.9);
transition: .15s; }
@media screen and (min-width: 960px) {
header .hamburger {
width: 40px;
height: 32px; } }
.instagram .feed {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 15px;
row-gap: 15px; }
.instagram .feed a {
display: block;
position: relative;
width: 100%; }
.instagram .feed a:before {
content: '';
display: block;
width: 100%;
height: 0;
padding-top: 100%; }
.instagram .feed a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; }
@media screen and (min-width: 768px) {
.instagram .feed {
grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media screen and (min-width: 1024px) {
.instagram .feed {
column-gap: 20px;
row-gap: 20px; } }
@media screen and (min-width: 1180px) {
.instagram .feed {
column-gap: 25px;
row-gap: 25px; } }
.fslightbox-slide-number-container.fslightbox-slide-number-container {
margin-top: 10px;
margin-left: 12px;
max-width: 45px; }
.fslightbox-slide-number-container.fslightbox-slide-number-container .fslightbox-flex-centered {
flex-direction: column;
justify-content: center;
position: relative;
width: 45px;
height: 45px;
padding-top: 5px;
font-family: "Butler", serif;
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 1.0;
color: #fff;
background-color: #000;
border-radius: 100px; }
.fslightbox-slide-number-container.fslightbox-slide-number-container .fslightbox-flex-centered:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) rotate(135deg);
width: 50%;
height: 1px;
background-color: currentColor; }
.fslightbox-slide-number-container.fslightbox-slide-number-container .fslightbox-slash {
display: none; }
.fslightbox-nav .fslightbox-toolbar-button,
.fslightbox-slide-btn-container .fslightbox-slide-btn {
position: relative;
background-color: #191919;
border-radius: 100px;
transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.fslightbox-nav .fslightbox-toolbar-button:before, .fslightbox-nav .fslightbox-toolbar-button:after,
.fslightbox-slide-btn-container .fslightbox-slide-btn:before,
.fslightbox-slide-btn-container .fslightbox-slide-btn:after {
content: '';
display: block;
transform: rotate(45deg);
position: absolute;
width: 1px;
height: 0;
background-color: currentColor;
opacity: 0;
transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.fslightbox-nav .fslightbox-toolbar-button:before,
.fslightbox-slide-btn-container .fslightbox-slide-btn:before {
top: 50%;
left: 50%;
transform-origin: top right; }
.fslightbox-nav .fslightbox-toolbar-button:after,
.fslightbox-slide-btn-container .fslightbox-slide-btn:after {
bottom: 50%;
right: calc(50% - 1px);
transform-origin: bottom left; }
.fslightbox-nav .fslightbox-toolbar-button:hover:before, .fslightbox-nav .fslightbox-toolbar-button:hover:after, .fslightbox-nav .fslightbox-toolbar-button:focus:before, .fslightbox-nav .fslightbox-toolbar-button:focus:after,
.fslightbox-slide-btn-container .fslightbox-slide-btn:hover:before,
.fslightbox-slide-btn-container .fslightbox-slide-btn:hover:after,
.fslightbox-slide-btn-container .fslightbox-slide-btn:focus:before,
.fslightbox-slide-btn-container .fslightbox-slide-btn:focus:after {
height: 75%;
opacity: 1; }
.fslightbox-nav .fslightbox-toolbar-button:active,
.fslightbox-slide-btn-container .fslightbox-slide-btn:active {
transform: scale(0.95);
transition: .15s; }
.fslightbox-nav .fslightbox-toolbar-button svg,
.fslightbox-slide-btn-container .fslightbox-slide-btn svg {
position: relative;
z-index: 2; }
.fslightbox-nav .fslightbox-toolbar-button svg path,
.fslightbox-slide-btn-container .fslightbox-slide-btn svg path {
fill: #fff; }
.fslightbox-nav .fslightbox-toolbar {
margin-top: 10px;
margin-right: 12px;
background: transparent; }
.fslightbox-nav .fslightbox-toolbar-button:first-child {
display: none; }
.overlay {
position: fixed;
z-index: 4;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
opacity: 0;
pointer-events: none;
transition: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.overlay.is-open {
background-color: #ECECEC;
opacity: 1;
pointer-events: all;
transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s; }
.overlay.is-open .menu li {
transform: translateY(0);
opacity: 1;
transition: .5s; }
.overlay.is-open .menu li:nth-child(1) {
transition-delay: .2s; }
.overlay.is-open .menu li:nth-child(2) {
transition-delay: .275s; }
.overlay.is-open .menu li:nth-child(3) {
transition-delay: .35s; }
.overlay.is-open .menu li:nth-child(4) {
transition-delay: .425s; }
.overlay.is-open .menu li:nth-child(5) {
transition-delay: .5s; }
.overlay.is-open .menu li:nth-child(6) {
transition-delay: .575s; }
.overlay.is-open .menu li:nth-child(7) { transition-delay: .65s; }
.overlay.is-open .footer {
transform: translateY(0);
opacity: 1;
transition: .5s linear .55s; }
.overlay nav {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 26px;
padding-bottom: 26px; }
@media screen and (min-height: 568px) {
.overlay nav {
padding-top: 52px; } }
@media screen and (min-height: 700px) {
.overlay nav {
padding-bottom: 52px; } }
@media screen and (min-width: 768px) {
.overlay nav {
align-items: center; } }
.overlay ul {
text-align: center; }
.overlay .menu {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1; }
.overlay .menu li {
display: inline-block;
transform: translateY(20px);
padding-top: 0;
opacity: 0;
transition: 0s linear .5s; }
.overlay .menu li a {
padding-top: .025em;
opacity: 1;
transition: .5s; }
.overlay .menu li a.is-active, .overlay .menu li a:hover, .overlay .menu li a:focus {
opacity: 1; }
.overlay .menu li.unhover a {
opacity: .4; }
.overlay .menu li + li {
margin-top: .75em; }
@media screen and (min-height: 660px) {
.overlay .menu li + li {
margin-top: 1.5em; } }
@media screen and (min-width: 640px) {
.overlay .menu li + li {
margin-top: .5em; } }
@media screen and (min-width: 960px) {
.overlay .menu li + li {
margin-top: .25em; } }
@media screen and (max-height: 719px) {
.overlay .menu .h1 {
font-size: 42px;
line-height: 1.235;
letter-spacing: .017em; }
.overlay .menu li + li {
margin-top: .5em; } }
@media screen and (max-height: 639px) {
.overlay .menu .h1 {
font-size: 26px;
line-height: 1.235;
letter-spacing: .017em; } }
@media screen and (min-width: 768px) {
.overlay .menu {
display: inline-flex;
align-items: flex-start;
text-align: left;
padding-bottom: 5vh; } }
@media screen and (min-width: 960px) and (min-height: 720px) {
.overlay .menu .h1 { font-size: 72px; }
}
@media screen and (min-width: 960px) and (max-width: 1023px) and (min-height: 720px) {
.overlay .menu {
padding-left: 154px; } }
@media screen and (min-width: 1024px) and (max-width: 1179px) and (min-height: 720px) {
.overlay .menu {
padding-left: 108px; } }
.overlay .footer {
transform: translateY(10px);
opacity: 0;
text-align: center;
transition: 0s linear .5s; }
.overlay .footer .logo {
margin: auto;
width: 118px;
height: 137px;
background-color: #ECECEC; }
@media screen and (min-width: 768px) {
.overlay .footer {
position: absolute;
bottom: 26px;
left: 26px; } }
@media screen and (min-width: 960px) {
.overlay .footer {
position: absolute;
bottom: 52px;
left: 52px; }
.overlay .footer .logo {
width: 172px;
height: 200px; } }
.cta + .links {
margin-top: 25px; }
.links {
display: flex; }
.links .part {
position: relative;
padding-left: 30px;
padding-right: 30px; }
.links .part:first-child {
padding-left: 0; }
.links .part:last-child {
padding-right: 0; }
.links .part + .part:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 0;
margin-top: -16px;
width: 1px;
height: 32px;
background-color: #979797;
opacity: .27; }
.links a {
display: inline-block;
transition: .35s; }
.links a:hover, .links a:focus {
opacity: .6; }
.links a:active {
opacity: .4;
transition: .15s; }
.social {
display: inline-flex;
align-items: center; }
.social a + a {
margin-left: 28px; }
.social i {
position: relative;
z-index: 2; }
.social svg {
position: relative;
z-index: 2;
max-height: 100%;
max-width: 100%; }
.social svg path {
fill: currentColor; }
body.splash-begin .splash:before {
width: 100%;
transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1); }
body.splash-begin .splash .top .logo {
transform: rotate(0deg) scale(1);
transition: 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s; }
body.splash-begin .splash .bottom .logo {
transform: translateY(0) scale(1);
transition: 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.75s; }
body.splash-begin .splash .logo {
opacity: 1; }
body.is-loaded .splash {
opacity: 0;
transition: 1s ease-out .35s;
pointer-events: none; }
body.is-loaded .splash .top,
body.is-loaded .splash .bottom {
transform: translateY(-20px);
opacity: 0;
transition: 1s cubic-bezier(0.22, 0.61, 0.36, 1); }
.splash {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden; }
.splash:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ECECEC; }
.splash .inner {
display: block;
position: relative;
z-index: 2;
width: 100%;
height: 100%; }
.splash .spinner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -164px;
margin-left: -140px;
width: 281px;
height: 328px; }
.splash .top,
.splash .bottom {
overflow: hidden;
background-color: #ECECEC; }
.splash .top {
height: 281px; }
.splash .top .logo {
transform: rotate(60deg) scale(0.9); }
.splash .bottom {
height: 47px; }
.splash .bottom .logo {
transform: translateY(20px) scale(0.9);
background-position: bottom; }
.splash .logo {
width: 100%;
height: 100%;
background-image: url(../images/png/logo-splash.png);
background-size: 100% auto;
opacity: 0; }
@media screen and (min-width: 640px) and (min-height: 640px) {
.splash .spinner {
width: 403px;
height: 467px;
margin-top: -233px;
margin-left: -201px; }
.splash .top {
height: 403px; }
.splash .bottom {
height: 64px; } }
.sticker {
position: fixed;
bottom: 0;
left: 0;
z-index: 3; }
.sticker.is-active a {
transform: translateY(0);
opacity: 1; }
.sticker a {
display: inline-block;
transform: translateY(100%);
padding: 12px 13px 11px 12px;
color: #fff;
background-color: #AAA495;
opacity: 0;
transition: .5s; }
.sticker a i {
transition: .35s; }
.sticker a:hover, .sticker a:focus {
background-color: #938c79; }
.sticker a:hover i, .sticker a:focus i {
transform: translateX(-4px); }
.sticker a:active {
background-color: #787261;
transition: .15s; }
.sticker i,
.sticker .p {
display: inline-block;
vertical-align: middle; }
.sticker i svg path {
fill: currentColor; }
.sticker i + .p {
margin-left: 6px; }
@media screen and (max-width: 639px) and (max-height: 639px) {
.sticker .p {
font-size: 16px; } }
@media screen and (min-width: 640px) and (min-height: 640px) {
.sticker a {
padding: 20px 21px 19px 20px; }
.sticker i + .p {
margin-left: 10px; } }
.trademark {
padding-bottom: 100px; }
@media screen and (min-width: 1024px) {
.trademark {
background-color: #ECECEC; } }
.trademark .text {
text-align: center; }
.trademark .text h3 + .p {
margin-top: 1em; }
.trademark .text .p {
font-size: 14px; }
.intro + .trademark {
padding-top: 100px; }
@media screen and (min-width: 1200px) {
.intro + .trademark {
padding-top: 160px; } }
.e404 {
background-color: #F8F6F4; }
.e404 .intro .center {
position: relative;
padding-top: 130px;
padding-bottom: 120px; }
.e404 .intro .center * {
position: relative;
z-index: 2; }
.e404 .intro .center:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background-color: #fff; }
.e404 .intro h1 + .p {
margin-top: 10px; }
.e404 .intro .p + .cta {
margin-top: 40px; }
@media screen and (min-width: 1024px) {
.e404 .intro .center {
padding-bottom: 140px; }
.e404 .intro .center:before {
left: 80px; }
.e404 .intro .text {
padding-left: 80px; }
.e404 .intro h1 + .p {
margin-top: 10px; }
.e404 .intro .p {
max-width: 780px; } }
@media screen and (min-width: 1180px) {
.e404 .intro .text {
padding-left: 100px; } }
@media screen and (min-width: 1200px) {
.e404 .intro .center:before {
left: 120px; } }
@media screen and (min-width: 1440px) {
.e404 .intro .center {
padding-left: 167px;
padding-right: 167px; }
.e404 .intro .center:before {
left: 167px; } }
.about {
padding-bottom: 120px;
background-color: #F8F6F4; }
@media screen and (min-width: 960px) {
.about {
padding-bottom: 162px; } }
@media screen and (max-width: 639px) {
.about .hero {
position: relative; }
.about .hero:before {
content: '';
display: block;
width: 100%;
height: 0;
padding-top: 100%; }
.about .hero img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; } }
@media screen and (min-width: 640px) {
.about .hero img {
margin-left: auto; } }
@media screen and (min-width: 960px) {
.about .hero {
max-width: 1440px;
margin-left: auto;
margin-right: auto; }
.about .hero img {
max-width: 80.3%; } }
.about .title {
padding-top: 120px; }
@media screen and (min-width: 1024px) {
.about .title {
padding-top: 160px; } }
@media screen and (min-width: 1180px) {
.about .title .center {
padding-left: 120px;
padding-right: 120px; } }
.about .bio {
padding-top: 100px;
overflow: hidden; }
.about .bio .center {
display: flex;
flex-direction: column; }
.about .bio .text {
order: 2;
position: relative;
padding-top: 80px;
padding-bottom: 100px; }
.about .bio .text:before {
content: '';
display: block;
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 400vh;
background-color: #fff; }
.about .bio .text * {
position: relative;
z-index: 2; }
.about .bio .text .m1 + .p {
margin-top: 20px; }
.about .bio .image {
order: 1;
position: relative;
z-index: 2; }
@media screen and (min-width: 768px) {
.about .bio {
padding-top: 200px; }
.about .bio .center {
flex-direction: row;
position: relative; }
.about .bio .text {
order: 1;
position: static;
width: 60%;
padding-right: 20px; }
.about .bio .text:before {
top: 0; }
.about .bio .image {
order: 2;
margin-top: -100px;
width: 40%; } }
@media screen and (min-width: 960px) {
.about .bio .text {
padding-right: 40px; } }
@media screen and (min-width: 1024px) {
.about .bio .text {
width: 61%;
padding-right: 60px;
padding-top: 120px;
padding-bottom: 120px; }
.about .bio .image {
width: 39%; } }
@media screen and (min-width: 1180px) {
.about .bio {
padding-top: 250px; }
.about .bio .center {
padding-left: 126px;
padding-right: 126px; }
.about .bio .text {
padding-right: 100px;
padding-top: 130px;
padding-bottom: 130px; }
.about .bio .image {
margin-top: -130px; } }
@media screen and (min-width: 1440px) {
.about .bio .text {
padding-right: 140px; } }
.about .who {
padding-top: 100px;
padding-bottom: 440px;
background-color: #ECECEC; }
.about .who .image {
margin-top: 40px; }
.about .who .text {
margin-top: 70px; }
.about .who .h3 + .p {
margin-top: 20px; }
@media screen and (min-width: 960px) {
.about .who {
padding-bottom: 300px; }
.about .who .image {
margin-left: 14%; }
.about .who .text {
margin-left: 28%; } }
@media screen and (min-width: 1024px) {
.about .who {
padding-top: 120px; }
.about .who .image {
margin-left: 12%;
margin-top: 50px; }
.about .who .text {
margin-left: 40%;
margin-top: 75px; } }
@media screen and (min-width: 1180px) {
.about .who {
padding-top: 160px;
padding-bottom: 310px; }
.about .who .center {
padding-left: 100px;
padding-right: 100px; }
.about .who .text {
margin-left: 44%;
padding-right: 60px; } }
.about .locations {
position: relative;
margin-top: -340px;
padding-top: 120px;
padding-bottom: 100px;
padding-left: 20px; }
.about .locations:before {
content: '';
display: block;
position: absolute;
right: -20px;
top: 0;
width: 100%;
height: 100%;
background-color: #fff; }
.about .locations .center {
position: relative;
z-index: 2; }
.about .locations ul {
margin-top: 40px; }
.about .locations li .text {
margin-top: 40px; }
.about .locations li .h3 + .p {
margin-top: 15px; }
.about .locations li + li {
margin-top: 75px; }
@media screen and (min-width: 768px) {
.about .locations {
padding-left: 80px; }
.about .locations:before {
right: -80px; } }
@media screen and (min-width: 960px) {
.about .locations {
margin-top: -150px;
padding-left: 0; }
.about .locations:before {
right: 40px; }
.about .locations ul {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 40px;
row-gap: 60px; }
.about .locations li + li {
margin-top: 0; } }
@media screen and (min-width: 1024px) {
.about .locations {
padding-bottom: 140px; }
.about .locations .text {
margin-top: 50px; } }
@media screen and (min-width: 1180px) {
.about .locations {
padding-top: 140px;
padding-bottom: 150px; }
.about .locations .center {
padding-left: 106px;
padding-right: 106px; }
.about .locations:before {
right: calc(50% - 450px); }
.about .locations ul {
column-gap: 70px;
row-gap: 100px; } }
@media screen and (min-width: 1440px) {
.about .locations ul {
column-gap: 94px; } }
.collection {
background-color: #F8F6F4; }
@media screen and (min-width: 1024px) {
.collection + footer {
background-color: #ECECEC; } }
.collection .intro .center {
position: relative;
padding-top: 130px;
padding-bottom: 120px; }
.collection .intro .center * {
position: relative;
z-index: 2; }
.collection .intro .center:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background-color: #fff; }
.collection .intro h1 + .p {
margin-top: 20px; }
.collection .intro .p.observe.observed {
transition-delay: .125s; }
@media screen and (min-width: 1024px) {
.collection .intro .center {
padding-bottom: 140px; }
.collection .intro .center:before {
left: 80px; }
.collection .intro .text {
padding-left: 80px; }
.collection .intro h1 + .p {
margin-top: 10px; }
.collection .intro .p {
max-width: 780px; } }
@media screen and (min-width: 1180px) {
.collection .intro .text {
padding-left: 100px; } }
@media screen and (min-width: 1200px) {
.collection .intro .center:before {
left: 120px; } }
@media screen and (min-width: 1440px) {
.collection .intro .center {
padding-left: 167px;
padding-right: 167px; }
.collection .intro .center:before {
left: 167px; } }
.collection .products {
padding-bottom: 90px; }
.collection .products li + li {
margin-top: 70px; }
.collection .products li.observe .image,
.collection .products li.observe .caption {
transform: translateY(10%);
opacity: 0; }
.collection .products li.observe.observed .image,
.collection .products li.observe.observed .caption {
transform: translateY(0);
opacity: 1;
transition: .75s; }
.collection .products li.observe.observed .caption {
transition-delay: .35s; }
.collection .products .image {
position: relative; }
.collection .products .image:before {
content: '';
display: block;
width: 100%;
height: 0;
padding-top: 127.021%; }
.collection .products .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; }
.collection .products .caption {
margin-top: 12px; }
@media screen and (min-width: 640px) {
.collection .products ul {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 70px; }
.collection .products li + li {
margin-top: 0; } }
@media screen and (min-width: 640px) {
.collection .products ul {
grid-column-gap: 30px; } }
@media screen and (min-width: 768px) {
.collection .products ul {
grid-column-gap: 40px; } }
@media screen and (min-width: 960px) {
.collection .products ul {
grid-column-gap: 80px;
row-gap: 80px; }
.collection .products .caption {
margin-top: 25px; } }
@media screen and (min-width: 1024px) {
.collection .products {
position: relative;
padding-bottom: 160px;
background-color: #ECECEC;
/* &:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 250px;
background-color: $cegg;
} */ }
.collection .products .center {
position: relative;
z-index: 2; } }
@media screen and (min-width: 1180px) {
.collection .products {
/* &:before {
height: 300px;
} */ }
.collection .products ul {
column-gap: 120px; } }
@media screen and (min-width: 1440px) {
.collection .products .center {
padding-left: 167px;
padding-right: 167px; }
.collection .products ul {
column-gap: 166px; } }
.contact {
padding-top: 130px;
background-color: #F8F6F4; }
@media screen and (min-width: 1180px) {
.contact {
padding-top: 220px; } }
.contact .intro {
position: relative;
z-index: 2; }
.contact .intro .image {
margin-top: 60px; }
@media screen and (min-width: 768px) {
.contact .intro .center {
display: flex; }
.contact .intro .text {
width: 60%;
padding-right: 40px;
padding-bottom: 160px; }
.contact .intro .image {
align-self: flex-end;
width: 40%; } }
@media screen and (min-width: 1180px) {
.contact .intro .text {
max-width: 633px;
padding-right: 80px; }
.contact .intro .image {
flex: 1;
margin-top: 110px; } }
@media screen and (min-width: 1200px) {
.contact .intro .center {
padding-left: 120px;
padding-right: 120px; } }
@media screen and (min-width: 1440px) {
.contact .intro .text {
padding-right: 140px; } }
.contact .content {
position: relative;
padding-top: 70px;
padding-bottom: 80px;
background-color: #fff; }
.contact .content .center:before {
content: '';
display: block;
position: absolute;
bottom: 100%;
right: 0;
width: 100%;
height: 290px;
background-color: #fff; }
.contact .content .body a {
display: inline-block; }
.contact .content .body a ~ a {
margin-top: 10px; }
.contact .content .body span {
display: block; }
.contact .content .body br {
display: none; }
.contact .content .visit {
margin-top: 40px; }
.contact .content .visit h2 + p {
margin-top: 15px; }
.contact .content .connect {
margin-top: 40px; }
@media screen and (min-width: 768px) {
.contact .content {
padding-bottom: 120px; }
.contact .content .center:before {
height: 80px; }
.contact .content .wrap {
display: flex;
flex-wrap: wrap; }
.contact .content .body {
width: 100%; }
.contact .content .body p + p {
margin-top: .5em; }
.contact .content .body a ~ a {
margin-top: 0; }
.contact .content .body span {
display: inline; }
.contact .content .body br {
display: inline; }
.contact .content .visit,
.contact .content .connect {
margin-top: 50px;
width: 50%; } }
@media screen and (min-width: 1180px) {
.contact .content {
margin-top: -100px;
background-color: transparent;
padding: 0; }
.contact .content .center {
position: relative;
padding: 160px 160px 170px; }
.contact .content .center:before {
right: 240px;
top: 0;
width: 100%;
height: 100%; }
.contact .content .wrap {
position: relative;
z-index: 2;
max-width: 740px; } }
@media screen and (min-width: 1280px) {
.contact .content {
margin-top: -160px; } }
@media screen and (min-width: 1440px) {
.contact .content {
margin-top: -215px; } }
.contact .instagram {
padding-top: 160px;
padding-bottom: 120px; }
@media screen and (min-width: 1200px) {
.contact .instagram {
padding-top: 170px;
padding-bottom: 170px; }
.contact .instagram .center {
padding-left: 120px;
padding-right: 120px; } }
.home + footer {
display: none; }
.home .hero {
background-color: #F8F6F4; }
.home .hero .fullmobile img {
height: auto; }
@media screen and (max-width: 639px) {
.home .hero .fullmobile {
display: none; } }
.home .hero .logo {
position: absolute;
top: 22px;
left: 50%;
/* margin-left: -46px;
width: 92px;
height: 107px; */
margin-left: -86px;
width: 173px;
height: 200px;
background-image: url(../images/png/logo-bigger.png); }
.home .hero .logo.observe {
transform: translateY(10%);
opacity: 0; }
.home .hero .logo.observe.observed {
transform: translateY(0);
opacity: 1;
transition: .75s; }
@media screen and (min-width: 500px) {
.home .hero .logo {
top: 33px;
/* margin-left: -66px;
width: 132px;
height: 154px; */ } }
@media screen and (min-width: 960px) {
.home .hero .logo {
top: 44px;
/* margin-left: -86px;
width: 172px;
height: 200px; */ } }
@media screen and (min-width: 1024px) {
.home .hero .logo {
top: 64px; } }
@media screen and (min-width: 1180px) {
.home .hero .logo {
top: 92px; } }
@media screen and (min-width: 1440px) {
.home .hero .logo {
top: 132px; } }
.home .roots {
padding-top: 85px;
padding-bottom: 121px;
background-color: #F8F6F4; }
.home .roots .text {
position: relative;
text-align: center; }
.home .roots .text h2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none; }
.home .roots .text h2.in .inner {
opacity: 1; }
.home .roots .text h2.out .inner {
opacity: 0; }
.home .roots .text h2 .inner {
display: block; }
.home .roots .text h2 .inner .word {
white-space: nowrap; }
.home .roots .text h2 .inner span {
display: block; }
.home .roots .text h2 .inner .char {
display: inline-block; }
.home .roots .text h2 .inner:first-child {
font-size: 29px; }
.home .roots .text h2 .inner:last-child {
font-size: 48px; }
.home .roots .text h2.is-active {
position: relative;
pointer-events: all; }
.home .roots .images {
margin-top: 40px; }
.home .roots .images .image:last-child {
display: none;
margin-left: 30px; }
@media screen and (min-width: 640px) {
.home .roots .text h2 .inner:first-child {
font-size: 42px;
margin-left: 40px; }
.home .roots .text h2 .inner:last-child {
font-size: 72px; } }
@media screen and (min-width: 768px) {
.home .roots .text {
position: relative;
z-index: 2; }
.home .roots .text h2 .inner:first-child {
margin-left: -20px; }
.home .roots .text h2 .inner:last-child {
margin-left: 100px; }
.home .roots .images {
display: flex;
align-items: baseline;
position: relative;
z-index: 1;
margin-top: -40px; }
.home .roots .images .image:last-child {
display: block; } }
@media screen and (min-width: 960px) {
.home .roots {
padding-top: 150px;
padding-bottom: 150px; }
.home .roots .images .image:last-child {
margin-left: 60px; } }
@media screen and (min-width: 1024px) {
.home .roots .text h2 .inner:first-child {
font-size: 68px;
margin-left: 20px; }
.home .roots .text h2 .inner:last-child {
font-size: 98px;
margin-left: 200px; }
.home .roots .images {
margin-top: -55px; }
.home .roots .images .image:last-child {
margin-left: 80px; } }
@media screen and (min-width: 1180px) {
.home .roots {
padding-bottom: 229px; }
.home .roots .text h2 .inner:first-child {
margin-left: -20px; }
.home .roots .text h2 .inner:last-child {
margin-left: 175px; }
.home .roots .images .image:last-child {
margin-left: 126px; } }
.home .work {
position: relative;
padding-top: 107px;
padding-bottom: 107px;
overflow: hidden; }
.home .work:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 173px;
width: 100%;
height: 100%;
background-color: #ECECEC; }
.home .work .selection {
position: relative;
z-index: 2; }
.home .work .selection.observe {
transform: translateY(40px);
opacity: 0;
transition: .75s; }
.home .work .selection.observe.observed {
transform: translateY(0);
opacity: 1; }
.home .work .glide__track,
.home .work .glide__slides {
overflow: visible; }
.home .work li.glide__slide--active .image {
transform: scale(1); }
.home .work li.glide__slide--active .image.observe {
transform: scale(1) translateY(40px); }
.home .work li.glide__slide--active .image.observe.observed {
transform: scale(1) translateY(0); }
.home .work li .image {
transform: scale(0.9);
transition: .15s; }
.home .work li .image.observe {
transform: scale(0.9) translateY(40px); }
.home .work li .image.observe.observed {
transform: scale(0.9) translateY(0); }
.home .work li .image {
position: relative; }
.home .work li .image:before {
content: '';
display: block;
width: 100%;
height: 0;
padding-top: 127.31%; }
.home .work li img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; }
.home .work .caption {
display: none; }
.home .work .text {
position: relative;
z-index: 2;
margin-top: 45px;
text-align: center; }
.home .work .text .cta {
margin-top: 10px; }
@media screen and (min-width: 500px) {
.home .work {
/* .selection {
margin-left: -25px;
} */
/* li {
&:nth-child(odd) {
.image {
transform: scale(.85);
&.observe {
transform: scale(.85) translateY(40px);
&.observed {
transform: scale(.85) translateY(0);
}
}
}
}
} */ }
.home .work:before {
top: 225px; } }
@media screen and (min-width: 768px) {
.home .work:before {
top: auto;
bottom: 0;
width: 80%;
height: 70%; }
.home .work .center {
padding-left: 60px;
padding-right: 60px; }
.home .work .selection {
margin-left: 0; }
.home .work ul {
align-items: center; }
.home .work li {
flex: .9; }
.home .work li a {
display: block;
position: relative; }
.home .work li a:hover .caption, .home .work li a:focus .caption {
transform: translateY(0);
opacity: 1; }
.home .work li:nth-child(2) {
flex: 1;
padding-left: 30px;
padding-right: 30px; }
.home .work li:nth-child(4), .home .work li:nth-child(5) {
display: none; }
.home .work li:nth-child(odd) .image {
transform: scale(1); }
.home .work li:nth-child(odd) .image.observe {
transform: scale(1) translateY(40px); }
.home .work li:nth-child(odd) .image.observe.observed {
transform: scale(1) translateY(0); }
.home .work .caption {
display: block;
position: absolute;
transform: translateY(10px);
top: 100%;
left: 0;
margin-top: 12px;
width: 100%;
opacity: 0;
text-align: center;
pointer-events: none;
transition: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.home .work .text {
margin-top: 60px;
text-align: left; } }
@media screen and (min-width: 960px) {
.home .work {
padding-top: 150px;
padding-bottom: 120px; }
.home .work .text {
margin-top: 70px; }
.home .work .text .cta {
margin-top: 15px; } }
@media screen and (min-width: 1024px) {
.home .work {
padding-top: 170px;
padding-bottom: 130px; }
.home .work:before {
height: 66%;
width: 82.5%; }
.home .work li:nth-child(2) {
padding-left: 40px;
padding-right: 40px; } }
@media screen and (min-width: 1180px) {
.home .work .center {
padding-left: 80px;
padding-right: 80px; }
.home .work .text {
margin-top: 90px; }
.home .work li {
flex: .8575; }
.home .work li:nth-child(2) {
padding-left: 56px;
padding-right: 56px; } }
@media screen and (min-width: 1440px) {
.home .work:before {
content: none;
height: 68%;
width: 80%; }
.home .work .center {
padding-left: 107px;
padding-right: 107px; }
.home .work .text {
z-index: 1; }
.home .work .text:before {
content: '';
display: block;
position: absolute;
right: 146px;
top: -442px;
width: 100vw;
height: 100vw;
background-color: #ECECEC; }
.home .work .text * {
position: relative;
z-index: 2; } }
.home .habout {
padding-top: 30px;
padding-bottom: 120px;
overflow: hidden;
background-color: #F8F6F4; }
.home .habout .center {
display: flex;
flex-direction: column; }
.home .habout .text {
order: 2;
position: relative;
margin-top: 55px; }
.home .habout .text:before {
content: '';
display: block;
position: absolute;
transform: translateX(-50%);
top: -200px;
left: 50%;
width: 100vw;
height: 500vw;
background-color: #fff; }
.home .habout .text * {
position: relative;
z-index: 2; }
.home .habout .text .h2 + .p {
margin-top: 10px; }
.home .habout .text .p + .cta {
margin-top: 45px; }
.home .habout .image {
order: 1;
position: relative;
z-index: 2; }
@media screen and (min-width: 500px) {
.home .habout {
padding-top: 60px; } }
@media screen and (min-width: 768px) {
.home .habout {
padding-top: 110px; }
.home .habout .center {
flex-direction: row;
align-items: center;
width: calc(100% + 40px); }
.home .habout .text {
order: 1;
margin-top: 0;
width: 50%;
padding-top: 60px;
padding-bottom: 60px;
padding-right: 40px; }
.home .habout .text:before {
transform: none;
top: 0;
left: -40px;
width: calc(100% + 40px);
height: 100%; }
.home .habout .image {
order: 2;
width: 50%; }
.home .habout .h2.observe.observed {
transition-delay: .1s; }
.home .habout .p.observe.observed {
transition-delay: .2s; }
.home .habout .cta.observe.observed {
transition: all .75s .275s, background .35s; }
.home .habout .cta.observe.observed:hover, .home .habout .cta.observe.observed:focus {
opacity: .7;
transition: .35s;
transition-delay: 0s; }
.home .habout .cta.observe.observed:active {
opacity: .5;
transition: .15s;
transition-delay: 0s; } }
@media screen and (min-width: 960px) {
.home .habout .center {
align-items: flex-end; } }
@media screen and (min-width: 1024px) {
.home .habout {
padding-top: 120px;
padding-bottom: 150px; }
.home .habout .text {
padding: 80px 60px 80px 20px; }
.home .habout .text .h2 + .p {
margin-top: 15px; } }
@media screen and (min-width: 1180px) {
.home .habout {
padding-top: 130px;
padding-bottom: 172px; }
.home .habout .center {
width: 100%;
padding-left: 134px;
padding-right: 134px; }
.home .habout .text {
padding: 100px 60px; }
.home .habout .text:before {
left: 0;
width: 100%; } }
@media screen and (min-width: 1440px) {
.home .habout .text {
padding: 140px 105px; } }
.home .hcollection {
padding-top: 180px;
background-color: #F8F6F4; }
@media screen and (max-width: 639px) {
.home .hcollection {
padding-top: 120px; } }
.home .hcollection .center {
display: flex;
flex-direction: column; }
.home .hcollection .headline {
order: 2;
margin-top: 30px; }
.home .hcollection .headline .char {
display: inline-block; }
.home .hcollection .text {
order: 3;
margin-top: 5px; }
.home .hcollection .text .p + .cta {
margin-top: 20px; }
.home .hcollection .image {
order: 1; }
@media screen and (min-width: 768px) {
.home .hcollection .center {
flex-direction: row;
flex-wrap: wrap;
align-items: center; }
.home .hcollection .headline {
order: 1;
position: relative;
z-index: 2;
margin-top: 0;
margin-bottom: 50px;
width: 100%;
text-align: center; }
.home .hcollection .text {
order: 2;
position: relative;
z-index: 2;
margin-top: 0;
width: 60%;
padding-right: 40px; }
.home .hcollection .image {
order: 3;
position: relative;
width: 40%; }
.home .hcollection .image:before {
content: '';
display: block;
transform: translate3d(0, -52.5%, 0);
position: absolute;
top: 50%;
right: 40%;
width: 100vw;
height: calc(100% + 140px);
background-color: #ECECEC; }
.home .hcollection .image img {
position: relative;
z-index: 2; }
.home .hcollection .p.observe.observed {
transition-delay: .1s; }
.home .hcollection .cta.observe.observed {
transition: all .75s .2s, background .35s; }
.home .hcollection .cta.observe.observed:hover, .home .hcollection .cta.observe.observed:focus {
opacity: .7;
transition: .35s;
transition-delay: 0s; }
.home .hcollection .cta.observe.observed:active {
opacity: .5;
transition: .15s;
transition-delay: 0s; } }
@media screen and (min-width: 960px) {
.home .hcollection .text {
padding-right: 60px; }
.home .hcollection .text .p {
max-width: 420px; }
.home .hcollection .image:before {
transform: none;
right: 25%;
top: auto;
bottom: -64px;
height: calc(100% + 276px); } }
@media screen and (min-width: 1024px) {
.home .hcollection .image:before {
right: 30%; } }
@media screen and (min-width: 1180px) {
.home .hcollection .image:before {
right: 40%; } }
@media screen and (min-width: 1440px) {
.home .hcollection .image:before {
right: 43%; } }
.home .hcontact {
padding-top: 115px;
padding-bottom: 140px;
background-color: #F8F6F4; }
.home .hcontact .image {
position: relative; }
.home .hcontact .image:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 200vh;
background-color: #ECECEC; }
.home .hcontact .image img {
position: relative;
z-index: 2; }
.home .hcontact .text {
position: relative;
z-index: 2;
margin-top: 50px; }
.home .hcontact .text .h2 + .p {
margin-top: 5px; }
.home .hcontact .text .p + .cta {
margin-top: 15px; }
.home .hcontact .links {
margin-top: 55px; }
@media screen and (min-width: 768px) {
.home .hcontact {
padding-top: 277px;
padding-bottom: 127px; }
.home .hcontact .center {
display: flex;
align-items: center; }
.home .hcontact .text {
margin-top: 0;
width: 60%;
padding-left: 40px; }
.home .hcontact .image {
width: 40%; }
.home .hcontact .image:before {
top: -80px;
left: 75%;
transform: none;
height: 200%; }
.home .hcontact .h2.observe.observed {
transition-delay: .1s; }
.home .hcontact .p.observe.observed {
transition-delay: .2s; }
.home .hcontact .cta.observe.observed {
transition: all .75s .275s, background .35s; }
.home .hcontact .cta.observe.observed:hover, .home .hcontact .cta.observe.observed:focus {
opacity: .7;
transition: .35s;
transition-delay: 0s; }
.home .hcontact .cta.observe.observed:active {
opacity: .5;
transition: .15s;
transition-delay: 0s; }
.home .hcontact .links.observe.observed {
transition-delay: .325s; } }
@media screen and (min-width: 960px) {
.home .hcontact .text {
padding-left: 60px;
padding-bottom: 40px; }
.home .hcontact .text .h2 + .p {
margin-top: 15px; }
.home .hcontact .text .p + .cta {
margin-top: 25px; } }
@media screen and (min-width: 1180px) {
.home .hcontact .center {
padding-left: 110px;
padding-right: 110px; }
.home .hcontact .image {
width: 35%; }
.home .hcontact .text {
width: 65%;
padding-left: 110px;
padding-right: 50px; } }
.interiors {
padding-top: 130px;
padding-bottom: 84px;
background-color: #F8F6F4;
/* @media screen and (min-width: 1180px) {
.projects {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
} */ }
.interiors .projects {
margin-top: 50px; }
.interiors .projects .noclick {
pointer-events: none;
cursor: default; }
.interiors .projects .noclick:focus img {
transform: none; }
.interiors .projects .noclick:hover img {
transform: scale(0.95); }
.interiors .projects li + li {
margin-top: 50px; }
.interiors .projects li.observe .image {
transform: translateY(10%);
opacity: 0; }
.interiors .projects li.observe.observed .image {
transform: translateY(0);
opacity: 1;
transition: .75s; }
@media screen and (max-width: 1023px) {
.interiors .projects li.observe .caption {
transform: translateY(10%);
opacity: 0; }
.interiors .projects li.observe.observed .caption {
transform: translateY(0);
opacity: 1;
transition: .75s;
transition-delay: .35s; } }
.interiors .projects .image {
position: relative; }
.interiors .projects .image:before {
content: '';
display: block;
width: 100%;
height: 0;
padding-top: 127.33%; }
.interiors .projects .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; }
.interiors .projects .caption {
margin-top: 12px;
text-align: center; }
@media screen and (min-width: 500px) {
.interiors .center {
padding-left: 30px;
padding-right: 30px; }
.interiors .projects {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 30px; }
.interiors .projects li + li {
margin-top: 0; } }
@media screen and (min-width: 640px) {
.interiors .projects {
grid-column-gap: 30px; } }
@media screen and (min-width: 768px) {
.interiors .projects {
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px; } }
@media screen and (min-width: 960px) {
.interiors {
padding-top: 170px;
padding-bottom: 134px; }
.interiors .center {
padding-right: 40px;
padding-left: 40px; }
.interiors .projects {
margin-top: 90px;
grid-column-gap: 30px; } }
@media screen and (min-width: 1024px) {
.interiors .center {
padding-right: 54px;
padding-left: 54px; }
.interiors .projects {
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 44px;
grid-row-gap: 80px; }
.interiors .projects li {
position: relative; }
.interiors .projects li a.noclick:focus .caption {
transform: none;
opacity: 0; }
.interiors .projects li a.noclick:hover .caption {
transform: translateY(0);
opacity: 1; }
.interiors .projects li a:hover .caption, .interiors .projects li a:focus .caption {
transform: translateY(0);
opacity: 1; }
.interiors .projects .caption {
position: absolute;
transform: translateY(10px);
top: 100%;
left: 0;
margin-top: 6px;
width: 100%;
opacity: 0;
pointer-events: none;
transition: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } }
.press {
padding-top: 130px;
padding-bottom: 84px;
background-color: #F8F6F4; }
.press .articles {
margin-top: 50px; }
.press .articles li + li {
margin-top: 50px; }
.press .articles li.observe .image,
.press .articles li.observe .caption {
transform: translateY(10%);
opacity: 0; }
.press .articles li.observe.observed .image,
.press .articles li.observe.observed .caption {
transform: translateY(0);
opacity: 1;
transition: .75s; }
.press .articles li.observe.observed .caption {
transition-delay: .35s; }
.press .articles .caption {
margin-top: 12px;
text-align: center; }
@media screen and (min-width: 500px) {
.press .center {
padding-left: 30px;
padding-right: 30px; }
.press .articles {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 50px; }
.press .articles li + li {
margin-top: 0; } }
@media screen and (min-width: 640px) {
.press .articles {
grid-column-gap: 30px; } }
@media screen and (min-width: 960px) {
.press {
padding-top: 170px;
padding-bottom: 180px; }
.press .center {
padding-right: 40px;
padding-left: 40px; }
.press .articles {
margin-top: 90px;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 30px; } }
@media screen and (min-width: 1024px) {
.press .center {
padding-right: 54px;
padding-left: 54px; }
.press .articles {
grid-template-columns: 1fr 1fr 1fr; } }
@media screen and (min-width: 1180px) {
.press .articles {
grid-column-gap: 45px; } }
.product {
background-color: #ECECEC; }
.product + footer {
background-color: #ECECEC; }
.product .intro {
background-color: #F8F6F4; }
.product .intro .center {
position: relative;
padding-top: 100px;
padding-bottom: 120px; }
.product .intro .center * {
position: relative;
z-index: 2; }
.product .intro .center:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background-color: #fff; }
.product .intro .image {
width: calc(100% + 20px); }
.product .intro .text {
margin-top: 70px; }
.product .intro h1 + .p {
margin-top: 20px; }
.product .intro .p + .cta {
margin-top: 50px; }
@media screen and (min-width: 480px) {
.product .intro .image {
width: calc(100% + 40px); } }
@media screen and (min-width: 640px) {
.product .intro .image {
width: 100%; }
.product .intro .image img {
width: 100%; } }
@media screen and (min-width: 768px) {
.product .intro .center {
display: flex; }
.product .intro .image {
margin-left: -40px;
width: 45%; }
.product .intro .text {
flex: 1;
margin-top: 0;
padding-left: 40px; }
.product .intro .h2.observe.observed {
transition-delay: .1s; }
.product .intro .p.observe.observed {
transition-delay: .2s; }
.product .intro .cta.observe.observed {
transition: all .75s .275s, background .35s; }
.product .intro .cta.observe.observed:hover, .product .intro .cta.observe.observed:focus {
opacity: .7;
transition: .35s;
transition-delay: 0s; }
.product .intro .cta.observe.observed:active {
opacity: .5;
transition: .15s;
transition-delay: 0s; } }
@media screen and (min-width: 960px) {
.product .intro .center {
padding-top: 130px;
padding-bottom: 140px; }
.product .intro .center:before {
left: 170px; }
.product .intro .image {
margin-left: -27px; } }
@media screen and (min-width: 1024px) {
.product .intro .center {
padding-bottom: 0; }
.product .intro .text {
padding-top: 100px;
padding-bottom: 120px;
padding-left: 80px; }
.product .intro .p {
max-width: 780px; }
.product .intro .p + .cta {
margin-top: 30px; } }
@media screen and (min-width: 1180px) {
.product .intro .text {
padding-left: 100px; } }
@media screen and (min-width: 1200px) {
.product .intro .center {
padding-top: 150px; }
.product .intro .image {
margin-left: -67px;
margin-bottom: -90px;
width: 50%; } }
@media screen and (min-width: 1280px) {
.product .intro .center {
padding-top: 40px; } }
@media screen and (min-width: 1440px) {
.product .intro .center {
padding-left: 167px;
padding-right: 167px; }
.product .intro .center:before {
left: 167px; }
.product .intro .image {
margin-left: -114px;
margin-bottom: -90px;
width: 613px; }
.product .intro .text {
padding-top: 150px;
padding-bottom: 170px;
padding-left: 100px; } }
@media screen and (min-width: 1280px) {
.product .gallery {
margin-top: 260px; } }
.product .intro .image.smaller { max-width: 100%; margin-left: 0; }
@media screen and (min-width: 1024px) {
.product .intro .image.smaller { margin-left: 90px; width: 40%; }
}
@media screen and (min-width: 1200px) {
.product .intro .image.smaller { margin-left: 50px; }
}
@media screen and (min-width: 1280px) {
.product .intro .image.smaller { margin-left: -25px; }
}
@media screen and (min-width: 1440px) {
.product .intro .image.smaller { margin-left: 0; width: 499px; }
}
.inquire {
position: fixed;
top: 0;
right: 0;
z-index: 4;
width: 100%;
max-width: 530px;
height: 100%;
max-height: 100%;
overflow: scroll;
color: #fff;
background-color: transparent;
opacity: 0;
pointer-events: none;
transition: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.inquire.is-open {
background-color: #AAA495;
opacity: 1;
pointer-events: all;
transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s; }
.inquire.is-open .center {
transform: translateY(0);
opacity: 1;
transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s; }
.inquire.is-open .close {
transform: translateY(0);
opacity: 1;
transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s; }
@media screen and (min-width: 640px) {
.inquire {
height: auto; } }
@media screen and (min-width: 1024px) {
.inquire {
max-width: 716px; } }
.inquire .center {
transform: translateY(20px);
padding-top: 80px;
padding-bottom: 60px;
opacity: 0;
transition: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media screen and (min-width: 768px) {
.inquire .center {
padding-top: 60px; } }
@media screen and (min-width: 1024px) {
.inquire .center {
padding: 50px 122px 70px; } }
.inquire .title + .form {
margin-top: 40px; }
.inquire .form {
max-width: 370px;
color: #fff; }
.inquire .p {
font-size: 16px; }
.inquire .close {
position: absolute;
transform: translateY(20px);
top: 23px;
right: 23px;
opacity: 0;
transition: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.inquire .close i {
transition: .35s; }
.inquire .close:hover i, .inquire .close:focus i {
transform: scale(0.9);
opacity: .7; }
.inquire .close:active i {
transform: translate3d(0, 1px, 0) scale(0.9);
transition: .15s; }
@media screen and (min-width: 640px) {
.inquire .close {
top: 40px;
right: 32px; } }
@media screen and (min-width: 960px) {
.inquire .close {
top: 30px; } }
.form button {
padding: 0;
background-color: transparent;
border: 0;
color: #fff;
appearance: none;
outline: none; }
.form.is-submitting .formBlock {
opacity: .5;
pointer-events: none; }
.form.is-submitted .formSuccess {
display: block;
margin-top: 40px;
opacity: 1; }
.formBlock {
transition: .35s; }
.formBlock + .formBlock {
margin-top: 50px; }
.formSuccess {
display: none;
color: #403A30;
overflow: hidden;
opacity: 0;
transition: .35s; }
.formSuccess + .formBlock {
margin-top: 40px; }
.textbox label + input {
margin-top: 15px; }
.textbox input {
display: block;
width: 100%;
padding: 0;
background-color: transparent;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.43);
color: #fff;
appearance: none;
outline: none; }
.textarea label + textarea {
margin-top: 15px; }
.textarea textarea {
display: block;
width: 100%;
height: 120px;
padding: 12px;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.43);
color: #fff;
appearance: none;
outline: none; }
.project {
padding-bottom: 110px;
background-color: #F8F6F4; }
.project .full img {
margin-left: auto;
margin-right: auto;
width: auto; }
@media screen and (min-width: 1024px) {
.project {
padding-bottom: 170px; } }
.project .hero {
position: relative;
z-index: 2; }
@media screen and (max-width: 639px) {
.project .hero img {
height: 50vh; } }
.project .intro .center {
position: relative;
padding-top: 100px;
padding-bottom: 120px; }
.project .intro .center * {
position: relative;
z-index: 2; }
.project .intro .center:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background-color: #fff; }
.project .intro h1 + .p {
margin-top: 20px; }
.project .intro .p + .share {
margin-top: 50px; }
@media screen and (min-width: 1024px) {
.project .intro .center {
padding-top: 130px;
padding-bottom: 140px; }
.project .intro .center:before {
left: 80px; }
.project .intro .text {
padding-left: 80px; }
.project .intro h1 + .p {
margin-top: 10px; }
.project .intro .p {
max-width: 780px; } }
@media screen and (min-width: 1180px) {
.project .intro .text {
padding-left: 100px; } }
@media screen and (min-width: 1200px) {
.project .intro .center {
padding-top: 150px;
padding-bottom: 170px; }
.project .intro .center:before {
left: 120px; } }
@media screen and (min-width: 1440px) {
.project .intro .center {
padding-left: 167px;
padding-right: 167px; }
.project .intro .center:before {
left: 167px; } }
.project .intro.alt {
background-color: #F8F6F4; }
.project .intro.alt .center {
position: relative;
padding-top: 100px;
padding-bottom: 120px; }
.project .intro.alt .center * {
position: relative;
z-index: 2; }
.project .intro.alt .center:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background-color: #fff; }
.project .intro.alt .image {
width: calc(100% + 20px); }
.project .intro.alt .text {
margin-top: 70px; }
.project .intro.alt h1 + .p {
margin-top: 20px; }
.project .intro.alt .p + .cta {
margin-top: 50px; }
@media screen and (min-width: 480px) {
.project .intro.alt .image {
width: calc(100% + 40px); } }
@media screen and (min-width: 640px) {
.project .intro.alt .image {
width: 100%; }
.project .intro.alt .image img {
width: 100%; } }
@media screen and (min-width: 768px) {
.project .intro.alt .center {
display: flex; }
.project .intro.alt .image {
margin-left: -40px;
width: 45%; }
.project .intro.alt .text {
flex: 1;
margin-top: 0;
padding-left: 40px; }
.project .intro.alt .h2.observe.observed {
transition-delay: .1s; }
.project .intro.alt .p.observe.observed {
transition-delay: .2s; }
.project .intro.alt .cta.observe.observed {
transition: all .75s .275s, background .35s; }
.project .intro.alt .cta.observe.observed:hover, .project .intro.alt .cta.observe.observed:focus {
opacity: .7;
transition: .35s;
transition-delay: 0s; }
.project .intro.alt .cta.observe.observed:active {
opacity: .5;
transition: .15s;
transition-delay: 0s; } }
@media screen and (min-width: 960px) {
.project .intro.alt .center {
padding-top: 130px;
padding-bottom: 140px; }
.project .intro.alt .center:before {
left: 170px; }
.project .intro.alt .image {
margin-left: -27px; } }
@media screen and (min-width: 1024px) {
.project .intro.alt .center {
padding-bottom: 0; }
.project .intro.alt .text {
padding-top: 100px;
padding-bottom: 120px;
padding-left: 80px; }
.project .intro.alt .p {
max-width: 780px; }
.project .intro.alt .p + .cta {
margin-top: 30px; } }
@media screen and (min-width: 1180px) {
.project .intro.alt .text {
padding-left: 100px; } }
@media screen and (min-width: 1200px) {
.project .intro.alt .center {
padding-top: 150px; }
.project .intro.alt .image {
margin-left: -67px;
margin-bottom: -90px;
width: 50%; } }
@media screen and (min-width: 1280px) {
.project .intro.alt .center {
padding-top: 40px; } }
@media screen and (min-width: 1440px) {
.project .intro.alt .center {
padding-left: 167px;
padding-right: 167px; }
.project .intro.alt .center:before {
left: 167px; }
.project .intro.alt .image {
margin-left: -114px;
margin-bottom: -90px;
width: 613px; }
.project .intro.alt .text {
padding-top: 150px;
padding-bottom: 170px;
padding-left: 100px; } }
@media screen and (min-width: 768px) {
.project .gallery {
padding-bottom: 0; } }
@media screen and (min-width: 1180px) {
.project .gallery li + li {
margin-top: 150px; } }
@media screen and (min-width: 1440px) {
.project .gallery li + li {
margin-top: 170px; } }
.project .next {
padding-bottom: 80px;
background-color: #F8F6F4;
overflow: hidden; }
.project .next a {
pointer-events: none; }
.project .next a img,
.project .next a .cta,
.project .next a .h2 {
pointer-events: all; }
.project .next .image {
position: relative;
margin-left: -20px;
max-width: 80%; }
.project .next .image:before {
content: '';
display: block;
width: 100%;
height: 0;
padding-top: 66.101%; }
.project .next .image:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 20px;
width: 100vw;
height: 200vh;
background-color: #fff; }
.project .next .image img {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover; }
.project .next .text {
position: relative;
z-index: 2;
margin-top: 80px;
padding-left: 40px; }
.project .next .text .cta + .h2 {
margin-top: 20px; }
@media screen and (min-width: 480px) {
.project .next .image {
margin-left: -40px; }
.project .next .image:after {
left: 40px; }
.project .next .text {
padding-left: 80px; } }
@media screen and (min-width: 640px) {
.project .next .image {
margin-left: -60px; }
.project .next .image:after {
left: 60px; } }
@media screen and (min-width: 768px) {
.project .next {
padding-top: 250px;
padding-bottom: 127px; }
.project .next a {
display: flex;
align-items: center; }
.project .next .text {
margin-top: 0;
width: 60%; }
.project .next .image {
margin-left: 0;
width: 40%; }
.project .next .image:after {
top: -50%;
left: 75%;
height: 200%; } }
@media screen and (min-width: 1024px) {
.project .next {
padding-top: 320px; } }
@media screen and (min-width: 1180px) {
.project .next .center {
padding-left: 110px;
padding-right: 110px; }
.project .next .image {
width: 35%; }
.project .next .text {
width: 65%;
padding-left: 110px;
padding-right: 50px; } }