/** * felicitymccabe - Felicity McCabe WordPress Theme * @author Simon van Stipriaas * @build Tue, Jun 30, 2026 2:31 PM ET * @release 0c250df5af97d317998aae074d5f0fa953d13385 [master] * @copyright Copyright (c) 2026, svsdesign * @version v2.0.0 * @link https://www.felicitymccabe.com */ @charset "UTF-8"; /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /* Grid Items */ /* Gallery Grid Configuration */ /* example this from anothe site: $breakpoints: ( xs: 0px, sm: 320px, md: 480px, lg: 800px, xl: 1600px, xxl: 3200px ); $gutter: ( xs: 8px, sm: 8px, md: 8px, lg: 8px, xl: 16px, xxl:32px ); $offsetgutter: ( xs: -8px, sm: -8px, md: -8px, lg: -8px, xl: -16px, xxl:-32px ); */ /* vw no good $width1:25vw; $width2:50vw; $width3:75vw; $width4:100vw;*/ /*! Flickity v2.2.1 https://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; } /* ---- flickity-button ---- */ .flickity-button { position: absolute; background: hsla(0, 0%, 100%, 0.75); border: none; color: #333; } .flickity-button:hover { background: white; cursor: pointer; } .flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; } .flickity-button:active { opacity: 0.6; } .flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; } .flickity-button-icon { fill: currentColor; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { opacity: 1; } /* flickity-fade */ .flickity-enabled.is-fade .flickity-slider > * { pointer-events: none; z-index: 0; } .flickity-enabled.is-fade .flickity-slider > .is-selected { pointer-events: auto; z-index: 1; } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } /* // ---- // libsass (v3.3.6) // ---- // ========================================================================= // // PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS // --------------------------------------------------- // Indrek Paas @indrekpaas // // Inspired by Mike Riethmuller's Precise control over responsive typography // http://madebymike.com.au/writing/precise-control-responsive-typography/ // // `strip-unit()` function by Hugo Giraudel // // 11.08.2016 Remove redundant `&` self-reference // 31.03.2016 Remove redundant parenthesis from output // 02.10.2015 Add support for multiple properties // 24.04.2015 Initial release // // ========================================================================= */ @keyframes slideIn { 0% { opacity: 0; transform: translateX(-20%); } to { opacity: 1; transform: translateX(0); } } @keyframes slideOut { 0% { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20%); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0.9; } 100% { opacity: 1; } } @keyframes transform-in { 0% { transform: matrix(1, 0, 0, 1, 0, 200); } 20% { transform: matrix(1, 0, 0, 1, 0, 100); } 100% { transform: matrix(1, 0, 0, 1, 0, 0); } } @keyframes pulse-scale { 0% { transform: translate(-50%, -50%) scale(0.2); } 50% { transform: translate(-50%, -50%) scale(1.8); } 100% { transform: translate(-50%, -50%) scale(0.2); } } @keyframes fade-pulse { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } } /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0); } body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, figure, table, th, td, caption, hr { margin: 0; padding: 0; } .t-lead { margin: 0 0 0.625rem 0; font-size: calc(21px / 16px * 1rem); line-height: 1.4; font-style: normal; text-transform: none; font-weight: normal; } @media screen and (min-width: 48.0625em) { .t-lead { margin: 0 0 0.9375rem 0; font-size: calc(32px / 16px * 1rem); line-height: 1.2; } } .gallery-focus-title, body.error404[data-gallery-active=true] h1, table th, table td, p, .t-para, li, button, .logo-text, cite, address { font-size: clamp(12px, 12px + 6 * (100vw - 0px) / 2000, 18px); line-height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); word-wrap: break-word; } h1, .t-h1, h2, .t-h2, h3, .t-h3, h4, .t-h4 { font-size: clamp(12px, 12px + 6 * (100vw - 0px) / 2000, 18px); line-height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); } /* %h2 { @extend %font-stack-display; @include margin(0 0 $bsu--x-small 0); @include font-size(56px, 1.1); @include bp($small) { @include margin(0 0 $bsu--small 0); @include font-size(88px, 1.17); } @include bp($medium) { @include margin(0 0 $bsu--small 0); @include font-size(120px, 1.19); } } %h3 { @extend %font-stack-display; @include margin(0 0 $bsu--x-small 0); @include font-size(48px, 1.2); @include bp($small) { @include margin(0 0 $bsu--small 0); @include font-size(72px, 1.2); } @include bp($medium) { @include margin(0 0 $bsu--small 0); @include font-size(96px, 1.19); } } %h4 { @extend %font-stack-display; @include margin(0 0 $bsu--x-small 0); @include font-size(40px, 1.2); @include bp($small) { @include margin(0 0 $bsu--small 0); @include font-size(56px, 25px); } @include bp($medium) { @include margin(0 0 $bsu--small 0); @include font-size(72px, 25px); } } */ h5, .t-h5 { margin: 0 0 0.625rem 0; font-size: calc(32px / 16px * 1rem); line-height: 1.2; } @media screen and (min-width: 48.0625em) { h5, .t-h5 { margin: 0 0 0.9375rem 0; font-size: calc(40px / 16px * 1rem); line-height: 1.2; } } @media screen and (min-width: 62em) { h5, .t-h5 { margin: 0 0 0.9375rem 0; font-size: calc(48px / 16px * 1rem); line-height: 1.2; } } h6, .t-h6 { margin: 0 0 0.625rem 0; font-size: calc(26px / 16px * 1rem); line-height: 1.2; } @media screen and (min-width: 48.0625em) { h6, .t-h6 { margin: 0 0 0.9375rem 0; font-size: calc(30px / 16px * 1rem); line-height: 1.2; } } @media screen and (min-width: 62em) { h6, .t-h6 { margin: 0 0 0.9375rem 0; font-size: calc(34px / 16px * 1rem); line-height: 1.2; } } h1, .t-h1, h2, .t-h2, h3, .t-h3, h4, .t-h4, h5, .t-h5 { font-family: inherit; } body, .t-lead, h6, .t-h6 { font-family: inherit; } table th, table td { text-align: left; } .c-button, .button { text-align: center; } .t-uppercase { text-transform: uppercase; } .t-normal { font-weight: normal; } cite { display: block; } .c-button, .button { display: inline-block; } body.error404[data-gallery-active=true] h1, [data-gallery-enabled=true] .information-text-block .title, body .c-header .head-holder .logo-container .logo-item a .logo-text, li, button, .logo-text { letter-spacing: 1px; } :root { --site-height: 100%; --active-color: white; --header-height: 35px; } html { box-sizing: border-box; width: 100%; min-height: var(--site-height); -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: clamp(12px, 12px + 2 * (100vw - 0px) / 769, 14px); line-height: clamp(14px, 14px + 2 * (100vw - 0px) / 769, 16px); height: auto; } body { height: 100%; min-height: -webkit-fill-available; min-height: var(--site-height); } body main { height: auto; padding-top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); position: relative; } body.home[data-gallery-active=true] main { padding-top: 0; } html, body { -webkit-overflow-scrolling: touch; } body.single-projects main { height: var(--full-height); } *, *:before, *:after { box-sizing: inherit; } hr { width: 100%; height: auto; border-top-width: 1px; border-bottom-width: 1px; border-top-style: dashed; border-bottom-style: dashed; } ::-moz-selection { background: #464646; color: rgb(255, 255, 255); text-shadow: none; } ::selection { background: #464646; color: rgb(255, 255, 255); text-shadow: none; } @font-face { font-family: "goodsans-light"; src: url("../fonts/goodsans-light.woff") format("woff"), url("../fonts/goodsans-light.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "goodsans-reg"; src: url("../fonts/goodsans-reg.woff") format("woff"), url("../fonts/goodsans-reg.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "gt-america-standard"; src: url("../fonts/gt-america-standard-light.woff") format("woff"), url("../fonts/gt-america-standard-light.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "gt-america-standard"; src: url("../fonts/gt-america-standard-regular-italic.woff") format("woff"), url("../fonts/gt-america-standard-regular-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; } @font-face { font-family: "gt-america-standard"; src: url("../fonts/gt-america-standard-bold.woff") format("woff"), url("../fonts/gt-america-standard-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "gt-america-standard"; src: url("../fonts/gt-america-standard-bold-italic.woff") format("woff"), url("../fonts/gt-america-standard-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; } @font-face { font-family: "gt-america-std-light"; src: url("../fonts/gt-america-standard-light.woff") format("woff"), url("../fonts/gt-america-standard-light.woff2") format("woff2"); font-weight: 300; font-style: normal; } body { font-family: "gt-america-std-light"; transition: background-color 1s ease-in-out; } h1.mobile-page-header, .t-h1.mobile-page-header { position: sticky; z-index: 9; top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.5); padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); } @media (min-width: 48.0625em) { h1.mobile-page-header, .t-h1.mobile-page-header { display: none; } } h1.mobile-page-header.white-bg, .t-h1.mobile-page-header.white-bg { background-color: rgb(255, 255, 255); } h3, .t-h3 { padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); } .t-link { color: inherit; cursor: pointer; transition: all 0.25s ease-out; } small, .t-small { font-size: calc(14px / 16px * 1rem); line-height: normal; } address { font-style: normal; } abbr { cursor: help; } strong, b, .t-bold { font-weight: bold; } sub, sup { font-size: 50%; } sup { top: -0.7em; } sub { bottom: 0; } p { opacity: 0.5; } p.full-opacity { opacity: 1; } mark { background: none; color: inherit; } a { color: inherit; text-decoration: none; cursor: pointer; transition: background-color 0.25s ease-out, border 0.25s ease-out, color 0.25s ease-out, opacity 0.25s ease-out; } a:hover, a:focus, a:active { outline: none; } a, button, input, select, textarea, label, summary { touch-action: manipulation; } .fcm-block a { text-decoration: underline; } svg { display: inline-block; fill: inherit; transition: inherit; width: inherit; height: inherit; transition: fill 0.25s ease-out; } body:not(.wp-admin) .svg-icon { width: 100%; float: left; display: block; } body:not(.wp-admin) .svg-icon svg { width: 100%; height: 100%; } img { max-width: 100%; vertical-align: middle; height: auto; } img[src*=".svg"] { width: 100% \9 ; } a img { border: none; } _::-ms-reveal, img[src*=".svg"] { width: 100%; } audio, canvas, iframe, video, svg { vertical-align: middle; } iframe, object { width: 100%; margin: 0; padding: 0; border: 0; outline: none; background-color: transparent; } q { font-style: italic; quotes: "‘" "’"; } q:before { content: open-quote; } q:after { content: close-quote; } blockquote { margin: 0; quotes: "“" "”"; } blockquote p:before { content: open-quote; position: absolute; left: 5px; top: 0; } blockquote p:after { content: no-close-quote; } blockquote p:last-of-type:after { content: close-quote; } table { height: 100%; width: auto; border-collapse: collapse; } table th, table td { height: auto; width: auto; padding: 0.625rem; } table th { border-bottom: 1px solid; font-weight: bold; } table td { border-bottom: 1px solid; } body .c-header { background-color: #f2f2ee; height: auto; z-index: 99; width: 100%; position: fixed; top: 0; height: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } @media (min-width: 769px) { body .c-header { overflow: visible; } } body .c-header .site-grid-container { height: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } body .c-header .head-holder { position: relative; border-bottom: 1px solid; border-color: rgba(0, 0, 0, 0.5); height: inherit; transition: border 0.2s ease; } body .c-header .head-holder .logo-container { margin: auto; } body .c-header .head-holder .logo-container .logo-item { height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); width: auto; margin: auto; position: relative; z-index: 9; overflow: hidden; } body .c-header .head-holder .logo-container .logo-item a { display: block; outline: none; width: auto; height: 100%; white-space: nowrap; } body .c-header .head-holder .logo-container .logo-item a .svg-icon.logo { height: 100%; float: none; display: block; width: auto; margin: auto; } body .c-header .head-holder .logo-container .logo-item a .svg-icon.logo svg { width: 100%; height: 100%; margin: auto; display: block; } body .c-header .head-holder .logo-container .logo-item a .svg-icon.logo path, body .c-header .head-holder .logo-container .logo-item a .svg-icon.logo polygon { fill: var(--active-color); } body .c-header .head-holder .logo-container .logo-item a .logo-text { display: flex; text-transform: uppercase; text-align: center; align-items: center; } body .c-header .head-holder .c-btn--burger { position: absolute; top: 0px; right: 0px; bottom: 0px; display: flex; cursor: pointer; height: auto; } @media (min-width: 769px) { body .c-header .head-holder .c-btn--burger { display: none; } } body .c-header .head-holder .c-btn--burger .c-burger-icon { width: 100%; max-width: 20px; max-height: 20px; float: right; margin: auto; height: 100%; position: relative; transform: rotate(0deg); transition: 0.5s ease-in-out; max-width: 15px; max-height: 15px; overflow: hidden; } @media (min-width: 480px) { body .c-header .head-holder .c-btn--burger .c-burger-icon { max-width: 20px; max-height: 20px; } } body .c-header .head-holder .c-btn--burger .c-burger-icon .c-burger-line { display: block; position: absolute; height: 1px; width: 100%; background: rgb(0, 0, 0); opacity: 1; left: 0; transform: rotate(0deg); transition: 0.25s ease-in-out; } body .c-header .head-holder .c-btn--burger .c-burger-icon .c-burger-line:nth-child(1) { top: 33.33%; transform-origin: left; } body .c-header .head-holder .c-btn--burger .c-burger-icon .c-burger-line:nth-child(2) { top: 66.66%; transform-origin: left; } body .c-header .c-nav { height: 0; text-align: center; overflow: hidden; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } @media (min-width: 769px) { body .c-header .c-nav { height: auto; position: absolute; top: 0px; left: 0px; transform: initial; width: 100%; } } body .c-header .c-nav .c-nav__items { list-style: none; } body .c-header .c-nav .c-nav__items li.menu-item a { color: rgb(255, 255, 255); } @media (min-width: 769px) { body .c-header .c-nav .c-nav__items li.menu-item a { color: rgb(0, 0, 0); } } body .c-header .c-nav .c-nav__items li.menu-item.current-menu-item a { opacity: 0.5; } body .c-header .c-nav .c-nav__items li.menu-item.current-menu-item li a { opacity: 1; } @media (min-width: 769px) { body .c-header .c-nav .c-nav__items li.menu-item:nth-child(1) { float: left; text-align: left; } } @media (min-width: 769px) { body .c-header .c-nav .c-nav__items li.menu-item:nth-child(2) { float: left; text-align: left; margin-right: auto; } } @media (min-width: 769px) { body .c-header .c-nav .c-nav__items li.menu-item:nth-child(3) { float: right; text-align: right; } } @media (min-width: 769px) { body .c-header .c-nav .c-nav__items li.menu-item:nth-child(4) { float: right; text-align: right; } } body .c-header .c-nav .c-nav__items li.menu-item ul { list-style: none; display: none; } @media (min-width: 769px) { body .c-header .c-nav .c-nav__items li.menu-item ul li { display: none; } } body.home .c-header { background-color: transparent; } body.home .c-header .head-holder { border-color: transparent; background-color: transparent; } body.home .c-header .head-holder .logo-container .logo-item a .svg-icon.logo path, body.home .c-header .head-holder .logo-container .logo-item a .svg-icon.logo polygon { fill: var(--active-color); transition: fill 0.2s ease; } body.home .c-header .head-holder .c-btn--burger .c-burger-icon .c-burger-line { background: var(--active-color); } body.home .c-header .head-holder .gallery-filter-backdrop-wrapper { position: absolute; top: 0px; bottom: 0px; opacity: 0; pointer-events: none; } body.home .c-header .head-holder .gallery-filter-backdrop-wrapper .gallery-filter-backdrop { position: relative; top: 0; background-color: var(--gallery-bg-color); width: 100%; height: calc(110% * var(--filter-count)); } body.home .c-header .c-nav .c-nav__items { list-style: none; } body.home .c-header .c-nav .c-nav__items li.menu-item a { color: rgb(255, 255, 255); } @media (min-width: 769px) { body.home .c-header .c-nav .c-nav__items li.menu-item a { color: var(--active-color); } } body.nav-on { overflow: hidden; } @media (min-width: 769px) { body.nav-on { overflow: initial; } } body.nav-on .c-header { background-color: rgba(44.5, 44.5, 44.5, 0.8); text-align: left; position: fixed; height: 100%; width: 100%; top: 0px; bottom: 0px; } @media (min-width: 769px) { body.nav-on .c-header { background-color: initial; height: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } } @media (max-width: 769px) { body.nav-on .c-header .head-holder { border-color: transparent; } } @media (max-width: 769px) { body.nav-on .c-header .head-holder .logo-container .logo-item .svg-icon.logo path, body.nav-on .c-header .head-holder .logo-container .logo-item .svg-icon.logo polygon { fill: rgb(255, 255, 255); } } body.nav-on .c-header .head-holder button.c-btn--burger .c-burger-icon .c-burger-line { background-color: rgb(255, 255, 255); width: 141.42136%; } body.nav-on .c-header .head-holder button.c-btn--burger .c-burger-icon .c-burger-line:nth-child(1) { transform: rotate(45deg); top: 0; left: 0%; } body.nav-on .c-header .head-holder button.c-btn--burger .c-burger-icon .c-burger-line:nth-child(2) { transform: rotate(135deg); top: 100%; left: 0; } body.nav-on .c-header .c-nav { height: auto; } body.nav-on .c-header .c-nav .c-nav__items { color: rgb(255, 255, 255); } @media (min-width: 769px) { body.nav-on .c-header .c-nav .c-nav__items { color: rgb(0, 0, 0); } } body.home.nav-on { overflow: hidden; } @media (min-width: 769px) { body.home.nav-on { overflow: initial; } } body.home.nav-on .c-header { background-color: rgba(44.5, 44.5, 44.5, 0.8); text-align: left; position: fixed; height: 100%; width: 100%; top: 0px; bottom: 0px; } @media (min-width: 769px) { body.home.nav-on .c-header { height: auto; position: relative; background-color: initial; top: initial; bottom: initial; } } @media (max-width: 769px) { body.home.nav-on .c-header .head-holder { border-color: transparent; } } @media (max-width: 769px) { body.home.nav-on .c-header .head-holder .logo-container .logo-item .svg-icon.logo path, body.home.nav-on .c-header .head-holder .logo-container .logo-item .svg-icon.logo polygon { fill: rgb(255, 255, 255); } } body.home.nav-on .c-header .head-holder button.c-btn--burger .c-burger-icon .c-burger-line { background-color: rgb(255, 255, 255); width: 141.42136%; } body.home.nav-on .c-header .head-holder button.c-btn--burger .c-burger-icon .c-burger-line:nth-child(1) { transform: rotate(45deg); top: 0; left: 0%; } body.home.nav-on .c-header .head-holder button.c-btn--burger .c-burger-icon .c-burger-line:nth-child(2) { transform: rotate(135deg); top: 100%; left: 0; } body.home.nav-on .c-header .c-nav { height: auto; } body.home.nav-on .c-header .c-nav .c-nav__items { color: rgb(255, 255, 255); } @media (min-width: 769px) { body.home.nav-on .c-header .c-nav .c-nav__items { color: rgb(0, 0, 0); } } body.home.nav-on main { margin-top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } body.single-projects .c-header { background-color: initial; } body.single-projects.nav-on .c-header { background-color: rgba(44.5, 44.5, 44.5, 0.8); } @media (min-width: 769px) { body.single-projects.nav-on .c-header { background-color: initial; } } body.page-id-102, body.page-id-409, body.post-type-archive-projects { background-color: #f2f2ee; } body.page-id-102 .c-header, body.page-id-409 .c-header, body.post-type-archive-projects .c-header { background-color: inherit; } body.page-id-102 .mobile-page-header, body.page-id-409 .mobile-page-header, body.post-type-archive-projects .mobile-page-header { background-color: #f2f2ee; } body.page-id-102.nav-on .c-header, body.page-id-409.nav-on .c-header, body.post-type-archive-projects.nav-on .c-header { background-color: rgba(44.5, 44.5, 44.5, 0.8); } @media (min-width: 769px) { body.page-id-102.nav-on .c-header, body.page-id-409.nav-on .c-header, body.post-type-archive-projects.nav-on .c-header { background-color: #f2f2ee; } } @media (max-width: 769px) { body.page-id-102.nav-on .mobile-page-header, body.page-id-409.nav-on .mobile-page-header, body.post-type-archive-projects.nav-on .mobile-page-header { display: none; } } body.page-id-120.nav-on main { margin-top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } @media (min-width: 769px) { body.page-id-120.nav-on main { margin: 0; } } @media (max-width: 640px) { body.page-id-120.nav-on .grid-toggles { display: none; } } @media (max-width: 769px) { body.page-id-120.nav-on .dev-layout-grid-toggle-wrap { display: none; } } body[data-gallery-active=true] .c-header { text-transform: uppercase; background-color: var(--gallery-bg-color); } body[data-gallery-active=true] .c-header .head-holder { border-bottom: none; justify-content: space-between; } body[data-gallery-active=true] .c-header .head-holder .logo-container { margin: 0; display: flex; flex-wrap: nowrap; } body[data-gallery-active=true] .c-header .head-holder .logo-container .logo-item { height: auto; margin: 0; } body[data-gallery-active=true] .c-header .head-holder .logo-container .logo-item a { display: flex; } body[data-gallery-active=true] .c-header .head-holder .logo-container .logo-item .logo-text { color: var(--gallery-text-color); } body[data-gallery-active=true] .c-header .head-holder .c-nav { position: relative; transform: initial; top: initial; left: 0; height: auto; overflow: auto; justify-content: flex-end; align-items: center; display: flex; } body[data-gallery-active=true] .c-header .head-holder .c-nav a { color: var(--gallery-text-color) !important; justify-content: flex-end; align-items: flex-end; display: flex; } body[data-gallery-active=true] .mobile-page-header { display: none; } body.home[data-filter-open=true] .c-header .head-holder .c-nav { z-index: 1; } body.home[data-filter-open=true] .c-header .head-holder .gallery-filter-backdrop-wrapper { z-index: 0; opacity: 1; } /** * Padding ratios to mimic images: Padding Bottom = (Image Height / Image Width) * 100% */ .c-buttons .c-button { margin: 0 0 1.25rem 0; width: 100%; } @media screen and (min-width: 62em) { .c-buttons .c-button { margin: 0 1.25rem 0 0; width: calc(33.33% - 14px); float: left; min-width: 0; } } @media screen and (min-width: 63.75em) { .c-buttons .c-button { width: auto; min-width: 13.125rem; } } .c-buttons .c-button:last-child { margin-bottom: 0; } @media screen and (min-width: 40em) { .c-buttons .c-button:last-child { margin: 0; } } .c-button, .button { margin: 0; padding: 0.8125rem 0.75rem; height: auto; width: 0.9375rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-width: 1px; border-style: solid; background-color: transparent; cursor: pointer; font-size: 1.125rem; line-height: normal; transform: translateZ(0); transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out, opacity 0.25s ease-out; vertical-align: middle; } .c-button[disabled], .button[disabled] { opacity: 0.2; pointer-events: none; } .c-button svg, .button svg { height: 1.75rem; width: 1.75rem; fill: currentColor; } .c-button--auto, .button--auto { min-width: 0; } .c-button--full, .button--full { min-width: 0; width: 100%; } .c-button--text, .button--text { border: none; } .c-button--text:hover, .c-button--text:active, .c-button--text:focus, .button--text:hover, .button--text:active, .button--text:focus { background-color: transparent; color: inherit; } .c-button--submit, .button--submit { width: 100%; } @media screen and (min-width: 48.0625em) { .c-button--submit, .button--submit { width: auto; } } .c-button--submit.is-success, .button--submit.is-success { pointer-events: none; } .c-button--submit.is-success:hover, .c-button--submit.is-success:focus, .button--submit.is-success:hover, .button--submit.is-success:focus { background: none; } /** * Custom Cursor Follower * Dot cursor that scales on interactive elements */ .custom-cursor { --cursor-scale: 0.4; position: fixed; top: 0; left: 0; pointer-events: none; display: none; opacity: 0.8; z-index: 9998; overflow: hidden; transform: translate(-50%, -50%) scale(var(--cursor-scale)); transition: transform 0.4s ease-out, opacity 0.4s ease-out; height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); width: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); } .custom-cursor svg { width: 100%; height: 100%; } .custom-cursor svg circle { fill: var(--cursor-color); } .custom-cursor.scale-up { --cursor-scale: 1; } .custom-cursor.hide { --cursor-scale: 0; } .custom-cursor.dot--loading { animation: pulse-scale 3s ease-in-out infinite, fade-pulse 4s ease-in-out infinite; } html[data-gallery-enabled=true] * { cursor: none !important; } html[data-gallery-enabled=true] .is-touch .custom-cursor.dot--loading { display: block; top: 50%; left: 50%; } body:has(.gallery-wrapper[data-gallery-loaded=false]) .custom-cursor { animation: pulse-scale 3s ease-in-out infinite, fade-pulse 4s ease-in-out infinite; } body.is-touch:has(.gallery-wrapper[data-gallery-loaded=false]) .custom-cursor { display: block; top: 50%; left: 50%; } .b-image { height: 100%; width: auto; position: relative; } .information-text-block { font-family: "gt-america-std-light"; width: 100%; } .information-text-block .site-grid-item .title { text-transform: uppercase; padding-bottom: clamp(3.5px, 3.5px + 1.5 * (100vw - 0px) / 769, 5px); } .information-text-block .site-grid-item .text-area { font-family: "gt-america-std-light"; } .information-text-block .site-grid-item .text-area p { opacity: 0.5; } [data-gallery-enabled=true] .information-text-block { color: var(--gallery-text-color); } [data-gallery-enabled=true] .information-text-block .title { text-transform: uppercase; font-weight: normal; padding-bottom: clamp(14px, 14px + 6 * (100vw - 0px) / 769, 20px); } [data-gallery-enabled=true] .information-text-block .text-area { font-family: "gt-america-std-light"; } [data-gallery-enabled=true] .information-text-block .text-area p { opacity: 1; } /*TO DO: - MOVE these mixins to appropriate place */ .repeater-wrap { width: 100%; position: relative; } /* ---- grid options (top) ---- */ .grid-options-wrap { display: none; position: sticky; z-index: 89; top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); background-color: rgb(255, 255, 255); border-bottom: 1px solid; border-color: rgba(0, 0, 0, 0.5); background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); } @media (min-width: 480px) { .grid-options-wrap .grid-options .btn { text-align: left; } } .grid-options-wrap .grid-options .response-message-wrap { pointer-events: none; position: absolute; opacity: 0; display: block; right: 0; left: 0; text-align: center; } .grid-options-wrap .grid-options .response-message-wrap .response-message { color: rgb(236, 68, 17); } .grid-options-wrap .grid-options .response-message-wrap.response-message-active { opacity: 1; } /* ---- grid toggle ---- */ .grid-toggles { background: rgb(255, 255, 255); width: 100%; height: auto; position: sticky; pointer-events: none; z-index: 29; text-align: center; border-bottom: 1px solid; border-color: rgba(0, 0, 0, 0.5); height: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); line-height: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } @media (min-width: 640px) { .grid-toggles { border-bottom: none; background: transparent; height: 100%; position: absolute; top: 0; bottom: 0; } } @media (min-width: 769px) { .grid-toggles { display: block; } } .grid-toggles .toggle-list .grid-toggle { pointer-events: initial; display: block; width: 100%; cursor: pointer; position: relative; margin: auto; } @media (max-width: 640px) { .grid-toggles .toggle-list { margin-top: 0px !important; } } @media (min-width: 640px) { .grid-toggles .toggle-list { position: fixed; top: 50%; width: 100%; } .grid-toggles .toggle-list .grid-toggle { width: initial; font-size: clamp(24px, 24px + 12 * (100vw - 0px) / 2000, 36px); line-height: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } } .grid-toggles.toggles-active .toggle-button { display: none; } .grid-toggles.toggles-active .toggle-list .grid-toggle { pointer-events: initial; position: relative; display: none; } .grid-toggles.toggles-active .toggle-list .grid-toggle.active-layer { display: inline-block; } .grid-toggles.toggles-active.toggles-on, .grid-toggles.toggles-on { bottom: 0; height: var(--site-height); } @media (min-width: 769px) { .grid-toggles.toggles-active.toggles-on, .grid-toggles.toggles-on { height: auto; } } .grid-toggles.toggles-active.toggles-on, .grid-toggles.toggles-on { display: flex; flex-direction: column; position: fixed; border-bottom: 0px; } .grid-toggles.toggles-active.toggles-on .toggle-list, .grid-toggles.toggles-on .toggle-list { height: inherit; display: block; position: relative; overflow: hidden; } .grid-toggles.toggles-active.toggles-on .toggle-list .grid-toggle, .grid-toggles.toggles-on .toggle-list .grid-toggle { pointer-events: initial; display: block; position: relative; clear: both; width: -moz-fit-content; width: fit-content; position: relative; } @media (max-width: 640px) { .grid-toggles.toggles-active.toggles-on .toggle-list .grid-toggle, .grid-toggles.toggles-on .toggle-list .grid-toggle { border-bottom: 1px solid; border-color: rgba(0, 0, 0, 0.5); width: 100%; height: 33.33%; line-height: calc(var(--site-height) / 3); font-size: clamp(24px, 24px + 12 * (100vw - 0px) / 2000, 36px); } } .grid-toggles.toggles-active.toggles-on .toggle-list .grid-toggle.active-layer, .grid-toggles.toggles-on .toggle-list .grid-toggle.active-layer { opacity: 0.5; } .grid-toggles.toggles-active.toggles-on .toggle-list .grid-toggle:last-of-type, .grid-toggles.toggles-on .toggle-list .grid-toggle:last-of-type { border-bottom: 0px; } .grid-toggles.toggles-hover-active .toggle-list .grid-toggle.active-layer.toggle-hover-active, .grid-toggles.toggles-hover-active .toggle-list .grid-toggle.toggle-hover-active { opacity: 0.5; } .grid-toggles.toggles-hover-active .toggle-list .grid-toggle.active-layer:not(.toggle-hover-active) { opacity: 1; } /* ---- grid layers ---- */ .grid-layers { position: relative; width: 100%; } .grid-layers .grid-layer { position: fixed; opacity: 0; width: 100%; height: inherit; display: block; } .grid-layers .grid-layer form { position: relative; } .grid-layers .grid-layer .layer-title { display: none; } @media (min-width: 640px) { .grid-layers .grid-layer .layer-title { display: block; } } .grid-layers .grid-layer.active-layer { z-index: 9; opacity: 1; display: block; position: relative; } body.toggles-on { overflow: hidden; } /* ---- grid ---- */ .grid { background: rgb(255, 255, 255); max-width: 100%; width: 100%; overflow: hidden; margin: 0; } /* clear fix */ .grid:after { content: ""; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-sizer { width: 100%; height: auto; } @media (min-width: 640px) { .grid-sizer { width: 25%; height: 25vw; } } .item-z-index-1 .inner-grid-item { z-index: 1; } .item-z-index-2 .inner-grid-item { z-index: 2; } .item-z-index-3 .inner-grid-item { z-index: 3; } .item-z-index-4 .inner-grid-item { z-index: 4; } .item-z-index-5 .inner-grid-item { z-index: 5; } .item-z-index-6 .inner-grid-item { z-index: 6; } .item-z-index-7 .inner-grid-item { z-index: 7; } .item-z-index-8 .inner-grid-item { z-index: 8; } .item-z-index-9 .inner-grid-item { z-index: 9; } .item-z-index-10 .inner-grid-item { z-index: 10; } .item-z-index-11 .inner-grid-item { z-index: 11; } .item-z-index-12 .inner-grid-item { z-index: 12; } .item-z-index-13 .inner-grid-item { z-index: 13; } .item-z-index-14 .inner-grid-item { z-index: 14; } .item-z-index-15 .inner-grid-item { z-index: 15; } .item-z-index-16 .inner-grid-item { z-index: 16; } .item-z-index-17 .inner-grid-item { z-index: 17; } .item-z-index-18 .inner-grid-item { z-index: 18; } .item-z-index-19 .inner-grid-item { z-index: 19; } .item-z-index-20 .inner-grid-item { z-index: 20; } .item-z-index-21 .inner-grid-item { z-index: 21; } .item-z-index-22 .inner-grid-item { z-index: 22; } .item-z-index-23 .inner-grid-item { z-index: 23; } .item-z-index-24 .inner-grid-item { z-index: 24; } .item-z-index-25 .inner-grid-item { z-index: 25; } .item-z-index-26 .inner-grid-item { z-index: 26; } .item-z-index-27 .inner-grid-item { z-index: 27; } .item-z-index-28 .inner-grid-item { z-index: 28; } .item-z-index-29 .inner-grid-item { z-index: 29; } .item-z-index-30 .inner-grid-item { z-index: 30; } .item-z-index-31 .inner-grid-item { z-index: 31; } .item-z-index-32 .inner-grid-item { z-index: 32; } .item-z-index-33 .inner-grid-item { z-index: 33; } .item-z-index-34 .inner-grid-item { z-index: 34; } .item-z-index-35 .inner-grid-item { z-index: 35; } .item-z-index-36 .inner-grid-item { z-index: 36; } .item-z-index-37 .inner-grid-item { z-index: 37; } .item-z-index-38 .inner-grid-item { z-index: 38; } .item-z-index-39 .inner-grid-item { z-index: 39; } .item-z-index-40 .inner-grid-item { z-index: 40; } .item-z-index-41 .inner-grid-item { z-index: 41; } .item-z-index-42 .inner-grid-item { z-index: 42; } .item-z-index-43 .inner-grid-item { z-index: 43; } .item-z-index-44 .inner-grid-item { z-index: 44; } .item-z-index-45 .inner-grid-item { z-index: 45; } .item-z-index-46 .inner-grid-item { z-index: 46; } .item-z-index-47 .inner-grid-item { z-index: 47; } .item-z-index-48 .inner-grid-item { z-index: 48; } .item-z-index-49 .inner-grid-item { z-index: 49; } .item-z-index-50 .inner-grid-item { z-index: 50; } .item-z-index-51 .inner-grid-item { z-index: 51; } .item-z-index-52 .inner-grid-item { z-index: 52; } .item-z-index-53 .inner-grid-item { z-index: 53; } .item-z-index-54 .inner-grid-item { z-index: 54; } .item-z-index-55 .inner-grid-item { z-index: 55; } .item-z-index-56 .inner-grid-item { z-index: 56; } .item-z-index-57 .inner-grid-item { z-index: 57; } .item-z-index-58 .inner-grid-item { z-index: 58; } .item-z-index-59 .inner-grid-item { z-index: 59; } .item-z-index-60 .inner-grid-item { z-index: 60; } .item-z-index-61 .inner-grid-item { z-index: 61; } .item-z-index-62 .inner-grid-item { z-index: 62; } .item-z-index-63 .inner-grid-item { z-index: 63; } .item-z-index-64 .inner-grid-item { z-index: 64; } .item-z-index-65 .inner-grid-item { z-index: 65; } .item-z-index-66 .inner-grid-item { z-index: 66; } .item-z-index-67 .inner-grid-item { z-index: 67; } .item-z-index-68 .inner-grid-item { z-index: 68; } .item-z-index-69 .inner-grid-item { z-index: 69; } .item-z-index-70 .inner-grid-item { z-index: 70; } .item-z-index-71 .inner-grid-item { z-index: 71; } .item-z-index-72 .inner-grid-item { z-index: 72; } .item-z-index-73 .inner-grid-item { z-index: 73; } .item-z-index-74 .inner-grid-item { z-index: 74; } .item-z-index-75 .inner-grid-item { z-index: 75; } .item-z-index-76 .inner-grid-item { z-index: 76; } .item-z-index-77 .inner-grid-item { z-index: 77; } .item-z-index-78 .inner-grid-item { z-index: 78; } .item-z-index-79 .inner-grid-item { z-index: 79; } .item-z-index-80 .inner-grid-item { z-index: 80; } .item-z-index-81 .inner-grid-item { z-index: 81; } .item-z-index-82 .inner-grid-item { z-index: 82; } .item-z-index-83 .inner-grid-item { z-index: 83; } .item-z-index-84 .inner-grid-item { z-index: 84; } .item-z-index-85 .inner-grid-item { z-index: 85; } .item-z-index-86 .inner-grid-item { z-index: 86; } .item-z-index-87 .inner-grid-item { z-index: 87; } .item-z-index-88 .inner-grid-item { z-index: 88; } .item-z-index-89 .inner-grid-item { z-index: 89; } .item-z-index-90 .inner-grid-item { z-index: 90; } .item-z-index-91 .inner-grid-item { z-index: 91; } .item-z-index-92 .inner-grid-item { z-index: 92; } .item-z-index-93 .inner-grid-item { z-index: 93; } .item-z-index-94 .inner-grid-item { z-index: 94; } .item-z-index-95 .inner-grid-item { z-index: 95; } .item-z-index-96 .inner-grid-item { z-index: 96; } .item-z-index-97 .inner-grid-item { z-index: 97; } .item-z-index-98 .inner-grid-item { z-index: 98; } .item-z-index-99 .inner-grid-item { z-index: 99; } .grid-item { width: 100%; height: auto; overflow: visible; } @media (max-width: 640px) { .grid-item { transform: none !important; width: 100% !important; height: auto !important; position: relative; overflow: hidden; top: 0px !important; padding-left: clamp(8px, 8px + 8 * (100vw - 0px) / 2000, 16px); padding-right: clamp(8px, 8px + 8 * (100vw - 0px) / 2000, 16px); padding-bottom: clamp(8px, 8px + 8 * (100vw - 0px) / 2000, 16px); } .grid-item a { overflow: hidden; display: block; } .grid-item a img.place-holder { display: none !important; } .grid-item:last-of-type { padding-bottom: 0px; } } .grid-item .grid-item-options-toggle { display: none; cursor: pointer; position: absolute; width: 100%; height: 100%; padding: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); z-index: 4; } .grid-item .grid-item-options { display: none; position: fixed; width: 100%; left: 0; top: initial; bottom: 0px; right: initial; z-index: 99999; background: rgb(255, 255, 255); font-size: clamp(9px, 9px + 4.5 * (100vw - 0px) / 2000, 13.5px); line-height: clamp(10.5px, 10.5px + 4.5 * (100vw - 0px) / 2000, 15px); border-top: 1px solid rgba(0, 0, 0, 0.5); } .grid-item .grid-item-options label { display: inherit; } .grid-item .grid-item-options .input-id, .grid-item .grid-item-options .input-height, .grid-item .grid-item-options .input-width, .grid-item .grid-item-options .input-z-index { width: 100%; float: left; padding: clamp(3.5px, 3.5px + 1.5 * (100vw - 0px) / 2000, 5px); font-size: clamp(24px, 24px + 12 * (100vw - 0px) / 2000, 36px); line-height: clamp(38.5px, 38.5px + 16.5 * (100vw - 0px) / 2000, 55px); } .grid-item .grid-item-options .input-id { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); } .grid-item .grid-item-options .input-image-position-x, .grid-item .grid-item-options .input-image-position-y, .grid-item .grid-item-options .input-image-scale { width: 100%; } .grid-item .grid-item-options .grid-item-options-item { border-bottom: 1px solid rgb(0, 0, 0); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); } @media (min-width: 769px) { .grid-item .grid-item-options .grid-item-options-item { border-bottom: 0px; } } .grid-item .grid-item-options .grid-item-options-item .options-item-title { width: 100%; clear: both; color: rgba(0, 0, 0, 0.2); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); } .grid-item .grid-item-options .grid-item-options-item .options-item-title.sub-title { color: rgb(0, 0, 0); padding-bottom: clamp(3.5px, 3.5px + 1.5 * (100vw - 0px) / 2000, 5px); } .grid-item .grid-item-options .grid-item-options-item.image-options-item { order: 1; } @media (min-width: 992px) { .grid-item .grid-item-options .grid-item-options-item.image-options-item { order: 1; } } .grid-item .grid-item-options .grid-item-options-item.item-options-item { order: 2; } @media (min-width: 992px) { .grid-item .grid-item-options .grid-item-options-item.item-options-item { order: 2; } } .grid-item .grid-item-options .grid-item-options-item.item-options-item .label-wrapper { flex-direction: row; display: flex; } .grid-item .grid-item-options .grid-item-options-item.item-options-item .label-wrapper label { display: flex; flex-direction: column; flex-grow: 1; } .grid-item .grid-item-options .grid-item-options-item.item-options-item .post-options-item { padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); } .grid-item .grid-item-options .grid-item-options-item.item-options-item .post-options-item .options.post-object { flex-direction: row; display: flex; } .grid-item .grid-item-options .grid-item-options-item.item-options-item .post-options-item .options.post-object label { display: flex; flex-direction: column; } .grid-item .grid-item-options .grid-item-options-item.item-options-item .post-options-item .options.post-object label #acf-post-object { display: flex; flex-direction: column; flex-grow: 1; } .grid-item .grid-item-options .grid-item-options-item.button-options-item { order: 3; } @media (min-width: 640px) { .grid-item .grid-item-options .grid-item-options-item.button-options-item { display: flex; } } @media (min-width: 769px) { .grid-item .grid-item-options .grid-item-options-item.button-options-item { flex-flow: column; } } .grid-item .grid-item-options .grid-item-options-item.button-options-item .btn { width: 100%; padding: clamp(3.5px, 3.5px + 1.5 * (100vw - 0px) / 2000, 5px); line-height: clamp(21px, 21px + 9 * (100vw - 0px) / 2000, 30px); height: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); margin-bottom: clamp(3.5px, 3.5px + 1.5 * (100vw - 0px) / 2000, 5px); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); } .grid-item .grid-item-options .grid-item-options-item.button-options-item .btn.remove-row { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); } .grid-item .grid-item-options .grid-item-options-item.button-options-item .btn:last-of-type { margin-bottom: 0px; } .grid-item .grid-item-options .grid-item-options-item .options.post-object { width: 100%; } .grid-item .inner-grid-item { width: 100%; height: 100%; position: relative; box-sizing: border-box; display: flex; justify-content: center; align-items: center; pointer-events: none; text-align: center; } @media (max-width: 640px) { .grid-item .inner-grid-item { transform: none !important; } } .grid-item .inner-grid-item .text-wrap { opacity: 0; z-index: 3; color: rgb(255, 255, 255); text-align: center; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } @media (max-width: 992px) { .grid-item .inner-grid-item .text-wrap { font-size: clamp(14.4px, 14.4px + 7.2 * (100vw - 0px) / 2000, 21.6px); line-height: clamp(16.8px, 16.8px + 7.2 * (100vw - 0px) / 2000, 24px); } } @media (max-width: 640px) { .grid-item .inner-grid-item .text-wrap .title { transform: scale(1) !important; } } .grid-item .inner-grid-item .image-wrap { position: relative; width: 100%; height: 100%; float: left; pointer-events: all; } @media (max-width: 640px) { .grid-item .inner-grid-item .image-wrap { transform: none !important; width: 100% !important; height: auto !important; } } .grid-item .inner-grid-item .image-wrap img { display: block; margin: auto; position: absolute; z-index: 1; top: 0px; bottom: 0px; left: 0px; right: 0px; } @media (max-width: 640px) { .grid-item .inner-grid-item .image-wrap img { transform: none !important; width: 100% !important; height: auto !important; position: relative; } } .grid-item .inner-grid-item .image-wrap img.place-holder { top: 0px; z-index: 2; opacity: 0; position: absolute; left: 0px; right: 0px; bottom: 0px; } .grid-item .inner-grid-item .image-wrap:hover .text-wrap { opacity: 1; color: rgb(0, 0, 0); } .grid-item .inner-grid-item .image-wrap:hover img { opacity: 0.4; } @media (max-width: 640px) { .grid-item.blank-item { padding-bottom: 0px; } } .grid-item.vertical-item .inner-grid-item .image-wrap img.horizontal-image { width: 100%; height: auto; margin: auto; } .grid-item.vertical-item .inner-grid-item .image-wrap img.vertical-image { width: 100%; height: auto; } .grid-item.vertical-item .inner-grid-item .image-wrap img.square-image { width: 100%; height: auto; } .grid-item.horizontal-item .inner-grid-item .image-wrap img.horizontal-image { width: 100%; height: auto; } .grid-item.horizontal-item .inner-grid-item .image-wrap img.vertical-image { width: auto; height: 100%; } .grid-item.horizontal-item .inner-grid-item .image-wrap img.square-image { width: auto; height: 100%; } .grid-item.horizontal-item.image-larger-than-item .inner-grid-item .image-wrap img.horizontal-image { width: auto; height: 100%; } .grid-item.square-item .inner-grid-item .image-wrap img.horizontal-image { width: 100%; height: auto; } .grid-item.square-item .inner-grid-item .image-wrap img.vertical-image { width: 100%; height: auto; } .grid-item.square-item .inner-grid-item .image-wrap img.square-image { width: 100%; height: auto; } .grid-item.square-item.image-larger-than-item .inner-grid-item .image-wrap img.vertical-image { width: auto; height: 100%; } .grid-item.item-added .inner-grid-item { border: 1px solid #464646; } .grid-item.fade-in .inner-grid-item .image-wrap { animation: fade-in 0.5s ease-in 0s 1 normal forwards, transform-in 0.5s ease-in 0s 1 normal forwards; } .grid-item .grid-item-link { display: inline-block; height: 100%; width: 100%; margin: 0 auto; } .grid-item.is-dragging .grid-item-options, .grid-item.is-positioning-post-drag .grid-item-options { display: none !important; } @media (max-width: 640px) { .blur .grid-layer { opacity: 0 !important; } } .blur .grid-item { filter: blur(1px); /* Blur with 8px radius */ } .is-touch .blur .grid-item { filter: none; /* Blur with 8px radius */ } @media (min-width: 640px) { .grid-item { width: 25%; height: 25vw; } .grid-item-width-2 { width: 50%; } .grid-item-height-3 { height: 75vw; } .grid-item-height-2 { height: 50vw; } .grid-item-height-3 { height: 75vw; } .grid-item-width-3 { width: 75%; } .grid-item-height-4 { height: 100vw; } .grid-item-width-4 { width: 100%; } } body:not(.images-loaded) img { opacity: 0; } @media (min-width: 769px) { body.logged-in.is-not-touch .grid-item:hover { cursor: initial; } } body.logged-in.is-not-touch .grid-item:hover .inner-grid-item .grid-item-link { display: block; z-index: 9; pointer-events: initial; position: absolute; } @media (min-width: 769px) { body.logged-in.is-not-touch .grid-item:hover .inner-grid-item .grid-item-link img { cursor: pointer; } } @media (min-width: 769px) { body.logged-in.is-touch .grid-item { cursor: initial; } } body.logged-in.is-touch .grid-item .inner-grid-item .grid-item-link { display: block; z-index: 9; pointer-events: initial; position: absolute; } @media (min-width: 769px) { body.logged-in.is-touch .grid-item .inner-grid-item .grid-item-link img { cursor: pointer; } } body.logged-in .dev-layout-grid-toggle-wrap { pointer-events: none; position: sticky; z-index: 90; background-color: rgb(255, 255, 255); border-bottom: 1px solid rgba(0, 0, 0, 0.5); display: none; top: clamp(63px, 63px + 27 * (100vw - 0px) / 2000, 90px); } @media (min-width: 640px) { body.logged-in .dev-layout-grid-toggle-wrap { display: block; top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } } body.logged-in .dev-layout-grid-toggle-wrap .dev-layout-grid-toggle { pointer-events: none; line-height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); text-align: center; height: inherit; } @media (min-width: 480px) { body.logged-in .dev-layout-grid-toggle-wrap .dev-layout-grid-toggle { text-align: right; } } body.logged-in .dev-layout-grid-toggle-wrap .dev-layout-grid-toggle .is-on, body.logged-in .dev-layout-grid-toggle-wrap .dev-layout-grid-toggle .is-off { cursor: pointer; pointer-events: initial; float: right; } body.logged-in .dev-layout-grid-toggle-wrap .dev-layout-grid-toggle .is-on { display: none; } body.logged-in .dev-layout-grid-toggle-wrap .dev-layout-grid-toggle .is-off { display: block; } body.logged-in.dev-layout-grid-on .grid-toggles { display: none; } body.logged-in.dev-layout-grid-on .grid-options-wrap { display: block; } body.logged-in.dev-layout-grid-on .grid-options-wrap .grid-options .coordinates { width: 100%; } body.logged-in.dev-layout-grid-on .grid-item { border: 1px solid rgba(0, 0, 0, 0.5); } body.logged-in.dev-layout-grid-on .grid-item .grid-item-options-toggle { display: none; z-index: 80; } body.logged-in.dev-layout-grid-on .grid-item .grid-item-options-toggle .is-on { display: none; } body.logged-in.dev-layout-grid-on .grid-item .grid-item-options-toggle .is-off { display: block; } body.logged-in.dev-layout-grid-on .grid-item .grid-item-link { display: none; } body.logged-in.dev-layout-grid-on .grid-item:hover .grid-item-link { pointer-events: none; } @media (min-width: 769px) { body.logged-in.dev-layout-grid-on .grid-item:hover { cursor: move; } } body.logged-in.dev-layout-grid-on .grid-item:hover .grid-item-options-toggle { display: block; } body.logged-in.dev-layout-grid-on .grid-item:hover .grid-item-options-toggle:hover { color: rgb(236, 68, 17); } body.logged-in.dev-layout-grid-on .grid-item.item-edit-active { border: 1px solid rgb(236, 68, 17); } body.logged-in.dev-layout-grid-on .grid-item.item-edit-active .grid-item-options-toggle { display: block; color: rgb(236, 68, 17); z-index: 80; } body.logged-in.dev-layout-grid-on .grid-item.item-edit-active .grid-item-options-toggle .is-on { display: block; } body.logged-in.dev-layout-grid-on .grid-item.item-edit-active .grid-item-options-toggle .is-off { display: none; } body.logged-in.dev-layout-grid-on .grid-item.item-edit-active .grid-item-options { flex-wrap: inherit; display: flex; flex-flow: row wrap; justify-content: space-around; } body.logged-in.dev-layout-grid-on .dev-layout-grid-toggle-wrap { position: fixed; z-index: 99; color: rgb(255, 255, 255); background-color: transparent; top: 0px; border-bottom: none; } @media (min-width: 640px) { body.logged-in.dev-layout-grid-on .dev-layout-grid-toggle-wrap { top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } } @media (min-width: 769px) { body.logged-in.dev-layout-grid-on .dev-layout-grid-toggle-wrap { top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } } body.logged-in.dev-layout-grid-on .dev-layout-grid-toggle-wrap .dev-layout-grid-toggle .is-on { display: block; } body.logged-in.dev-layout-grid-on .dev-layout-grid-toggle-wrap .dev-layout-grid-toggle .is-off { display: none; } body:not(.logged-in) img { pointer-events: initial; cursor: inherit; } /* conditional CSS - https://adactio.com/journal/5429 */ body:after { content: "default"; display: block; visibility: hidden; height: 0; } /* widescreen */ @media (min-width: 640px) { body:after { content: "widescreen"; } } /* Author: Simon van Stipriaan Author URI: http://svs.design */ @media (min-width: 0px) { .site-grid-xxxs-1 { flex: 0 0 6.25%; width: 6.25%; } } @media (min-width: 0px) { .push-left-xxxs-1 { margin-left: 6.25%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-2 { flex: 0 0 12.5%; width: 12.5%; } } @media (min-width: 0px) { .push-left-xxxs-2 { margin-left: 12.5%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-3 { flex: 0 0 18.75%; width: 18.75%; } } @media (min-width: 0px) { .push-left-xxxs-3 { margin-left: 18.75%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-4 { flex: 0 0 25%; width: 25%; } } @media (min-width: 0px) { .push-left-xxxs-4 { margin-left: 25%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-5 { flex: 0 0 31.25%; width: 31.25%; } } @media (min-width: 0px) { .push-left-xxxs-5 { margin-left: 31.25%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-6 { flex: 0 0 37.5%; width: 37.5%; } } @media (min-width: 0px) { .push-left-xxxs-6 { margin-left: 37.5%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-7 { flex: 0 0 43.75%; width: 43.75%; } } @media (min-width: 0px) { .push-left-xxxs-7 { margin-left: 43.75%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-8 { flex: 0 0 50%; width: 50%; } } @media (min-width: 0px) { .push-left-xxxs-8 { margin-left: 50%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-9 { flex: 0 0 56.25%; width: 56.25%; } } @media (min-width: 0px) { .push-left-xxxs-9 { margin-left: 56.25%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-10 { flex: 0 0 62.5%; width: 62.5%; } } @media (min-width: 0px) { .push-left-xxxs-10 { margin-left: 62.5%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-11 { flex: 0 0 68.75%; width: 68.75%; } } @media (min-width: 0px) { .push-left-xxxs-11 { margin-left: 68.75%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-12 { flex: 0 0 75%; width: 75%; } } @media (min-width: 0px) { .push-left-xxxs-12 { margin-left: 75%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-13 { flex: 0 0 81.25%; width: 81.25%; } } @media (min-width: 0px) { .push-left-xxxs-13 { margin-left: 81.25%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-14 { flex: 0 0 87.5%; width: 87.5%; } } @media (min-width: 0px) { .push-left-xxxs-14 { margin-left: 87.5%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-15 { flex: 0 0 93.75%; width: 93.75%; } } @media (min-width: 0px) { .push-left-xxxs-15 { margin-left: 93.75%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 0px) { .site-grid-xxxs-16 { flex: 0 0 100%; width: 100%; } } @media (min-width: 0px) { .push-left-xxxs-16 { margin-left: 100%; } } @media (min-width: 0px) { .hide-xxxs { display: none; } } @media (min-width: 0px) { .show-xxxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-1 { flex: 0 0 6.25%; width: 6.25%; } } @media (min-width: 480px) { .push-left-xxs-1 { margin-left: 6.25%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-2 { flex: 0 0 12.5%; width: 12.5%; } } @media (min-width: 480px) { .push-left-xxs-2 { margin-left: 12.5%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-3 { flex: 0 0 18.75%; width: 18.75%; } } @media (min-width: 480px) { .push-left-xxs-3 { margin-left: 18.75%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-4 { flex: 0 0 25%; width: 25%; } } @media (min-width: 480px) { .push-left-xxs-4 { margin-left: 25%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-5 { flex: 0 0 31.25%; width: 31.25%; } } @media (min-width: 480px) { .push-left-xxs-5 { margin-left: 31.25%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-6 { flex: 0 0 37.5%; width: 37.5%; } } @media (min-width: 480px) { .push-left-xxs-6 { margin-left: 37.5%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-7 { flex: 0 0 43.75%; width: 43.75%; } } @media (min-width: 480px) { .push-left-xxs-7 { margin-left: 43.75%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-8 { flex: 0 0 50%; width: 50%; } } @media (min-width: 480px) { .push-left-xxs-8 { margin-left: 50%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-9 { flex: 0 0 56.25%; width: 56.25%; } } @media (min-width: 480px) { .push-left-xxs-9 { margin-left: 56.25%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-10 { flex: 0 0 62.5%; width: 62.5%; } } @media (min-width: 480px) { .push-left-xxs-10 { margin-left: 62.5%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-11 { flex: 0 0 68.75%; width: 68.75%; } } @media (min-width: 480px) { .push-left-xxs-11 { margin-left: 68.75%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-12 { flex: 0 0 75%; width: 75%; } } @media (min-width: 480px) { .push-left-xxs-12 { margin-left: 75%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-13 { flex: 0 0 81.25%; width: 81.25%; } } @media (min-width: 480px) { .push-left-xxs-13 { margin-left: 81.25%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-14 { flex: 0 0 87.5%; width: 87.5%; } } @media (min-width: 480px) { .push-left-xxs-14 { margin-left: 87.5%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-15 { flex: 0 0 93.75%; width: 93.75%; } } @media (min-width: 480px) { .push-left-xxs-15 { margin-left: 93.75%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 480px) { .site-grid-xxs-16 { flex: 0 0 100%; width: 100%; } } @media (min-width: 480px) { .push-left-xxs-16 { margin-left: 100%; } } @media (min-width: 480px) { .hide-xxs { display: none; } } @media (min-width: 480px) { .show-xxs { display: block; } } @media (min-width: 640px) { .site-grid-xs-1 { flex: 0 0 6.25%; width: 6.25%; } } @media (min-width: 640px) { .push-left-xs-1 { margin-left: 6.25%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-2 { flex: 0 0 12.5%; width: 12.5%; } } @media (min-width: 640px) { .push-left-xs-2 { margin-left: 12.5%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-3 { flex: 0 0 18.75%; width: 18.75%; } } @media (min-width: 640px) { .push-left-xs-3 { margin-left: 18.75%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-4 { flex: 0 0 25%; width: 25%; } } @media (min-width: 640px) { .push-left-xs-4 { margin-left: 25%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-5 { flex: 0 0 31.25%; width: 31.25%; } } @media (min-width: 640px) { .push-left-xs-5 { margin-left: 31.25%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-6 { flex: 0 0 37.5%; width: 37.5%; } } @media (min-width: 640px) { .push-left-xs-6 { margin-left: 37.5%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-7 { flex: 0 0 43.75%; width: 43.75%; } } @media (min-width: 640px) { .push-left-xs-7 { margin-left: 43.75%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-8 { flex: 0 0 50%; width: 50%; } } @media (min-width: 640px) { .push-left-xs-8 { margin-left: 50%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-9 { flex: 0 0 56.25%; width: 56.25%; } } @media (min-width: 640px) { .push-left-xs-9 { margin-left: 56.25%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-10 { flex: 0 0 62.5%; width: 62.5%; } } @media (min-width: 640px) { .push-left-xs-10 { margin-left: 62.5%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-11 { flex: 0 0 68.75%; width: 68.75%; } } @media (min-width: 640px) { .push-left-xs-11 { margin-left: 68.75%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-12 { flex: 0 0 75%; width: 75%; } } @media (min-width: 640px) { .push-left-xs-12 { margin-left: 75%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-13 { flex: 0 0 81.25%; width: 81.25%; } } @media (min-width: 640px) { .push-left-xs-13 { margin-left: 81.25%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-14 { flex: 0 0 87.5%; width: 87.5%; } } @media (min-width: 640px) { .push-left-xs-14 { margin-left: 87.5%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-15 { flex: 0 0 93.75%; width: 93.75%; } } @media (min-width: 640px) { .push-left-xs-15 { margin-left: 93.75%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 640px) { .site-grid-xs-16 { flex: 0 0 100%; width: 100%; } } @media (min-width: 640px) { .push-left-xs-16 { margin-left: 100%; } } @media (min-width: 640px) { .hide-xs { display: none; } } @media (min-width: 640px) { .show-xs { display: block; } } @media (min-width: 769px) { .site-grid-sm-1 { flex: 0 0 6.25%; width: 6.25%; } } @media (min-width: 769px) { .push-left-sm-1 { margin-left: 6.25%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-2 { flex: 0 0 12.5%; width: 12.5%; } } @media (min-width: 769px) { .push-left-sm-2 { margin-left: 12.5%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-3 { flex: 0 0 18.75%; width: 18.75%; } } @media (min-width: 769px) { .push-left-sm-3 { margin-left: 18.75%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-4 { flex: 0 0 25%; width: 25%; } } @media (min-width: 769px) { .push-left-sm-4 { margin-left: 25%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-5 { flex: 0 0 31.25%; width: 31.25%; } } @media (min-width: 769px) { .push-left-sm-5 { margin-left: 31.25%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-6 { flex: 0 0 37.5%; width: 37.5%; } } @media (min-width: 769px) { .push-left-sm-6 { margin-left: 37.5%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-7 { flex: 0 0 43.75%; width: 43.75%; } } @media (min-width: 769px) { .push-left-sm-7 { margin-left: 43.75%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-8 { flex: 0 0 50%; width: 50%; } } @media (min-width: 769px) { .push-left-sm-8 { margin-left: 50%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-9 { flex: 0 0 56.25%; width: 56.25%; } } @media (min-width: 769px) { .push-left-sm-9 { margin-left: 56.25%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-10 { flex: 0 0 62.5%; width: 62.5%; } } @media (min-width: 769px) { .push-left-sm-10 { margin-left: 62.5%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-11 { flex: 0 0 68.75%; width: 68.75%; } } @media (min-width: 769px) { .push-left-sm-11 { margin-left: 68.75%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-12 { flex: 0 0 75%; width: 75%; } } @media (min-width: 769px) { .push-left-sm-12 { margin-left: 75%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-13 { flex: 0 0 81.25%; width: 81.25%; } } @media (min-width: 769px) { .push-left-sm-13 { margin-left: 81.25%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-14 { flex: 0 0 87.5%; width: 87.5%; } } @media (min-width: 769px) { .push-left-sm-14 { margin-left: 87.5%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-15 { flex: 0 0 93.75%; width: 93.75%; } } @media (min-width: 769px) { .push-left-sm-15 { margin-left: 93.75%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 769px) { .site-grid-sm-16 { flex: 0 0 100%; width: 100%; } } @media (min-width: 769px) { .push-left-sm-16 { margin-left: 100%; } } @media (min-width: 769px) { .hide-sm { display: none; } } @media (min-width: 769px) { .show-sm { display: block; } } @media (min-width: 992px) { .site-grid-md-1 { flex: 0 0 6.25%; width: 6.25%; } } @media (min-width: 992px) { .push-left-md-1 { margin-left: 6.25%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-2 { flex: 0 0 12.5%; width: 12.5%; } } @media (min-width: 992px) { .push-left-md-2 { margin-left: 12.5%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-3 { flex: 0 0 18.75%; width: 18.75%; } } @media (min-width: 992px) { .push-left-md-3 { margin-left: 18.75%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-4 { flex: 0 0 25%; width: 25%; } } @media (min-width: 992px) { .push-left-md-4 { margin-left: 25%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-5 { flex: 0 0 31.25%; width: 31.25%; } } @media (min-width: 992px) { .push-left-md-5 { margin-left: 31.25%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-6 { flex: 0 0 37.5%; width: 37.5%; } } @media (min-width: 992px) { .push-left-md-6 { margin-left: 37.5%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-7 { flex: 0 0 43.75%; width: 43.75%; } } @media (min-width: 992px) { .push-left-md-7 { margin-left: 43.75%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-8 { flex: 0 0 50%; width: 50%; } } @media (min-width: 992px) { .push-left-md-8 { margin-left: 50%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-9 { flex: 0 0 56.25%; width: 56.25%; } } @media (min-width: 992px) { .push-left-md-9 { margin-left: 56.25%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-10 { flex: 0 0 62.5%; width: 62.5%; } } @media (min-width: 992px) { .push-left-md-10 { margin-left: 62.5%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-11 { flex: 0 0 68.75%; width: 68.75%; } } @media (min-width: 992px) { .push-left-md-11 { margin-left: 68.75%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-12 { flex: 0 0 75%; width: 75%; } } @media (min-width: 992px) { .push-left-md-12 { margin-left: 75%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-13 { flex: 0 0 81.25%; width: 81.25%; } } @media (min-width: 992px) { .push-left-md-13 { margin-left: 81.25%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-14 { flex: 0 0 87.5%; width: 87.5%; } } @media (min-width: 992px) { .push-left-md-14 { margin-left: 87.5%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-15 { flex: 0 0 93.75%; width: 93.75%; } } @media (min-width: 992px) { .push-left-md-15 { margin-left: 93.75%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 992px) { .site-grid-md-16 { flex: 0 0 100%; width: 100%; } } @media (min-width: 992px) { .push-left-md-16 { margin-left: 100%; } } @media (min-width: 992px) { .hide-md { display: none; } } @media (min-width: 992px) { .show-md { display: block; } } @media (min-width: 1020px) { .site-grid-lg-1 { flex: 0 0 6.25%; width: 6.25%; } } @media (min-width: 1020px) { .push-left-lg-1 { margin-left: 6.25%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-2 { flex: 0 0 12.5%; width: 12.5%; } } @media (min-width: 1020px) { .push-left-lg-2 { margin-left: 12.5%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-3 { flex: 0 0 18.75%; width: 18.75%; } } @media (min-width: 1020px) { .push-left-lg-3 { margin-left: 18.75%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-4 { flex: 0 0 25%; width: 25%; } } @media (min-width: 1020px) { .push-left-lg-4 { margin-left: 25%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-5 { flex: 0 0 31.25%; width: 31.25%; } } @media (min-width: 1020px) { .push-left-lg-5 { margin-left: 31.25%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-6 { flex: 0 0 37.5%; width: 37.5%; } } @media (min-width: 1020px) { .push-left-lg-6 { margin-left: 37.5%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-7 { flex: 0 0 43.75%; width: 43.75%; } } @media (min-width: 1020px) { .push-left-lg-7 { margin-left: 43.75%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-8 { flex: 0 0 50%; width: 50%; } } @media (min-width: 1020px) { .push-left-lg-8 { margin-left: 50%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-9 { flex: 0 0 56.25%; width: 56.25%; } } @media (min-width: 1020px) { .push-left-lg-9 { margin-left: 56.25%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-10 { flex: 0 0 62.5%; width: 62.5%; } } @media (min-width: 1020px) { .push-left-lg-10 { margin-left: 62.5%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-11 { flex: 0 0 68.75%; width: 68.75%; } } @media (min-width: 1020px) { .push-left-lg-11 { margin-left: 68.75%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-12 { flex: 0 0 75%; width: 75%; } } @media (min-width: 1020px) { .push-left-lg-12 { margin-left: 75%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-13 { flex: 0 0 81.25%; width: 81.25%; } } @media (min-width: 1020px) { .push-left-lg-13 { margin-left: 81.25%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-14 { flex: 0 0 87.5%; width: 87.5%; } } @media (min-width: 1020px) { .push-left-lg-14 { margin-left: 87.5%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-15 { flex: 0 0 93.75%; width: 93.75%; } } @media (min-width: 1020px) { .push-left-lg-15 { margin-left: 93.75%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1020px) { .site-grid-lg-16 { flex: 0 0 100%; width: 100%; } } @media (min-width: 1020px) { .push-left-lg-16 { margin-left: 100%; } } @media (min-width: 1020px) { .hide-lg { display: none; } } @media (min-width: 1020px) { .show-lg { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-1 { flex: 0 0 6.25%; width: 6.25%; } } @media (min-width: 1430px) { .push-left-xxl-1 { margin-left: 6.25%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-2 { flex: 0 0 12.5%; width: 12.5%; } } @media (min-width: 1430px) { .push-left-xxl-2 { margin-left: 12.5%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-3 { flex: 0 0 18.75%; width: 18.75%; } } @media (min-width: 1430px) { .push-left-xxl-3 { margin-left: 18.75%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-4 { flex: 0 0 25%; width: 25%; } } @media (min-width: 1430px) { .push-left-xxl-4 { margin-left: 25%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-5 { flex: 0 0 31.25%; width: 31.25%; } } @media (min-width: 1430px) { .push-left-xxl-5 { margin-left: 31.25%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-6 { flex: 0 0 37.5%; width: 37.5%; } } @media (min-width: 1430px) { .push-left-xxl-6 { margin-left: 37.5%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-7 { flex: 0 0 43.75%; width: 43.75%; } } @media (min-width: 1430px) { .push-left-xxl-7 { margin-left: 43.75%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-8 { flex: 0 0 50%; width: 50%; } } @media (min-width: 1430px) { .push-left-xxl-8 { margin-left: 50%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-9 { flex: 0 0 56.25%; width: 56.25%; } } @media (min-width: 1430px) { .push-left-xxl-9 { margin-left: 56.25%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-10 { flex: 0 0 62.5%; width: 62.5%; } } @media (min-width: 1430px) { .push-left-xxl-10 { margin-left: 62.5%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-11 { flex: 0 0 68.75%; width: 68.75%; } } @media (min-width: 1430px) { .push-left-xxl-11 { margin-left: 68.75%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-12 { flex: 0 0 75%; width: 75%; } } @media (min-width: 1430px) { .push-left-xxl-12 { margin-left: 75%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-13 { flex: 0 0 81.25%; width: 81.25%; } } @media (min-width: 1430px) { .push-left-xxl-13 { margin-left: 81.25%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-14 { flex: 0 0 87.5%; width: 87.5%; } } @media (min-width: 1430px) { .push-left-xxl-14 { margin-left: 87.5%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-15 { flex: 0 0 93.75%; width: 93.75%; } } @media (min-width: 1430px) { .push-left-xxl-15 { margin-left: 93.75%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 1430px) { .site-grid-xxl-16 { flex: 0 0 100%; width: 100%; } } @media (min-width: 1430px) { .push-left-xxl-16 { margin-left: 100%; } } @media (min-width: 1430px) { .hide-xxl { display: none; } } @media (min-width: 1430px) { .show-xxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-1 { flex: 0 0 6.25%; width: 6.25%; } } @media (min-width: 2000px) { .push-left-xxxl-1 { margin-left: 6.25%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-2 { flex: 0 0 12.5%; width: 12.5%; } } @media (min-width: 2000px) { .push-left-xxxl-2 { margin-left: 12.5%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-3 { flex: 0 0 18.75%; width: 18.75%; } } @media (min-width: 2000px) { .push-left-xxxl-3 { margin-left: 18.75%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-4 { flex: 0 0 25%; width: 25%; } } @media (min-width: 2000px) { .push-left-xxxl-4 { margin-left: 25%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-5 { flex: 0 0 31.25%; width: 31.25%; } } @media (min-width: 2000px) { .push-left-xxxl-5 { margin-left: 31.25%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-6 { flex: 0 0 37.5%; width: 37.5%; } } @media (min-width: 2000px) { .push-left-xxxl-6 { margin-left: 37.5%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-7 { flex: 0 0 43.75%; width: 43.75%; } } @media (min-width: 2000px) { .push-left-xxxl-7 { margin-left: 43.75%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-8 { flex: 0 0 50%; width: 50%; } } @media (min-width: 2000px) { .push-left-xxxl-8 { margin-left: 50%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-9 { flex: 0 0 56.25%; width: 56.25%; } } @media (min-width: 2000px) { .push-left-xxxl-9 { margin-left: 56.25%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-10 { flex: 0 0 62.5%; width: 62.5%; } } @media (min-width: 2000px) { .push-left-xxxl-10 { margin-left: 62.5%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-11 { flex: 0 0 68.75%; width: 68.75%; } } @media (min-width: 2000px) { .push-left-xxxl-11 { margin-left: 68.75%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-12 { flex: 0 0 75%; width: 75%; } } @media (min-width: 2000px) { .push-left-xxxl-12 { margin-left: 75%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-13 { flex: 0 0 81.25%; width: 81.25%; } } @media (min-width: 2000px) { .push-left-xxxl-13 { margin-left: 81.25%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-14 { flex: 0 0 87.5%; width: 87.5%; } } @media (min-width: 2000px) { .push-left-xxxl-14 { margin-left: 87.5%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-15 { flex: 0 0 93.75%; width: 93.75%; } } @media (min-width: 2000px) { .push-left-xxxl-15 { margin-left: 93.75%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } @media (min-width: 2000px) { .site-grid-xxxl-16 { flex: 0 0 100%; width: 100%; } } @media (min-width: 2000px) { .push-left-xxxl-16 { margin-left: 100%; } } @media (min-width: 2000px) { .hide-xxxl { display: none; } } @media (min-width: 2000px) { .show-xxxl { display: block; } } /* body, body.white-scheme, body.black-scheme { *, *::before, *::after { box-sizing: border-box; } }*/ .site-grid-container { width: 100%; margin-right: auto; margin-left: auto; padding-left: clamp(8px, 8px + 8 * (100vw - 0px) / 2000, 16px); padding-right: clamp(8px, 8px + 8 * (100vw - 0px) / 2000, 16px); } .site-grid-row-holder { display: flex; flex-wrap: wrap; overflow: visible; /* so nav toggle shows through */ flex: 1; margin-left: clamp(-16px, -8px + -8 * (100vw - 0px) / 2000, -8px); margin-right: clamp(-16px, -8px + -8 * (100vw - 0px) / 2000, -8px); } .site-grid-item { float: left; padding: clamp(8px, 8px + 8 * (100vw - 0px) / 2000, 16px); } .site-grid-item.align-center { margin: auto; } /*Dev Grid */ .dev-site-grid-toggle { display: block; position: fixed; background-color: rgb(0, 0, 0); width: 20px; height: 20px; z-index: 999; cursor: pointer; } @media (min-width: 640px) { .dev-site-grid-toggle { right: 8px; bottom: 8px; } } @media (min-width: 769px) { .dev-site-grid-toggle { right: 8px; bottom: 8px; } } .dev-site-grid { opacity: 0; pointer-events: none; height: var(--site-height); position: fixed; z-index: 99; top: clamp(98px, 98px + 42 * (100vw - 0px) / 2000, 140px); left: 0px; right: 0px; } @media (min-width: 640px) { .dev-site-grid { top: clamp(70px, 70px + 30 * (100vw - 0px) / 2000, 100px); } } .dev-site-grid .site-grid-row-holder { height: inherit; } .dev-site-grid .site-grid-item { opacity: 0.4; border: 1px dotted rgba(0, 0, 0, 0.2); border-right: 0px; } .dev-site-grid .site-grid-item .inner { opacity: 0.5; border: 1px solid rgb(0, 0, 0); height: 100%; } /* .dev-base-lines{ position: absolute; z-index: 99; width: 100%; top: 100vh;// start at the text - because 100vh space above left: 0px; right: 0px; opacity: 0; pointer-events:none; margin-top:-1px;// visually align baseline to type .base-line{ @include fluid-type(height, map.get($breakpoints, xs), map.get($breakpoints, lg), map.get($baselineheight, xs), map.get($baselineheight, lg)); // fixed sizing @include fluid-type(height, map.get($breakpoints, lg), map.get($breakpoints, xxl), map.get($baselineheight, lg), map.get($baselineheight, xxl)); // viewport sizing border-top: 1px solid $devcolor20pc; width: 100%; } } // .dev-base-lines */ body.dev-site-grid-on .dev-site-grid { opacity: 1; } body.dev-site-grid-on { /* .dev-base-lines{ opacity: 1; }*/ } /*End Dev Grid */ .attachments-browser .media-toolbar-secondary { display: none; } .screen-reader-text { visibility: hidden; } body.post-type-archive-projects .mobile-page-header, body.post-type-archive-projects.tile-view .mobile-page-header { position: sticky; top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); height: auto; z-index: 9; background-color: rgb(255, 255, 255); border-bottom: 1px solid rgba(0, 0, 0, 0.5); } @media (min-width: 769px) { body.post-type-archive-projects .mobile-page-header, body.post-type-archive-projects.tile-view .mobile-page-header { display: none; } } body.post-type-archive-projects .mobile-page-header h1, body.post-type-archive-projects.tile-view .mobile-page-header h1 { position: relative; width: 100%; z-index: 9; text-align: center; padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); } body.post-type-archive-projects .mobile-page-header #project-archive-items-toggle, body.post-type-archive-projects.tile-view .mobile-page-header #project-archive-items-toggle { padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); position: absolute; top: 0px; z-index: 10; } body.post-type-archive-projects .mobile-page-header #project-archive-items-toggle .view-container .view-thumb, body.post-type-archive-projects.tile-view .mobile-page-header #project-archive-items-toggle .view-container .view-thumb { cursor: pointer; display: block; width: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); } body.post-type-archive-projects .mobile-page-header #project-archive-items-toggle .view-container .view-thumb.view-thumb-list, body.post-type-archive-projects.tile-view .mobile-page-header #project-archive-items-toggle .view-container .view-thumb.view-thumb-list { float: right; opacity: 0.5; } body.post-type-archive-projects .mobile-page-header #project-archive-items-toggle .view-container .view-thumb.view-thumb-tiles, body.post-type-archive-projects.tile-view .mobile-page-header #project-archive-items-toggle .view-container .view-thumb.view-thumb-tiles { float: left; } body.post-type-archive-projects #project-archive-items .project-archive-item, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item { position: relative; display: flex; margin-bottom: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); padding-bottom: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } @media (min-width: 769px) { body.post-type-archive-projects #project-archive-items .project-archive-item, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item { height: 25vw; margin-bottom: 12.5vw; padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); } body.post-type-archive-projects #project-archive-items .project-archive-item:nth-child(3n), body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item:nth-child(3n) { margin-left: 12.5%; } body.post-type-archive-projects #project-archive-items .project-archive-item:nth-child(3n-1), body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item:nth-child(3n-1) { margin-left: 12.5%; } } body.post-type-archive-projects #project-archive-items .project-archive-item .project-thumb-wrap, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-thumb-wrap { position: relative; overflow: hidden; width: 100%; height: 100%; display: flex; } body.post-type-archive-projects #project-archive-items .project-archive-item .project-thumb-wrap img, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-thumb-wrap img { position: relative; display: flex; align-self: flex-end; opacity: 0; } @media (min-width: 769px) { body.post-type-archive-projects #project-archive-items .project-archive-item .project-thumb-wrap img, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-thumb-wrap img { position: absolute; bottom: 0px; } } body.post-type-archive-projects #project-archive-items .project-archive-item .project-thumb-wrap img.vertical-image, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-thumb-wrap img.vertical-image { margin: 0 auto 0 auto; height: auto; width: 100%; position: relative; } @media (min-width: 769px) { body.post-type-archive-projects #project-archive-items .project-archive-item .project-thumb-wrap img.vertical-image, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-thumb-wrap img.vertical-image { height: 100%; width: auto; } } body.post-type-archive-projects #project-archive-items .project-archive-item .project-thumb-wrap img.square-image, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-thumb-wrap img.square-image { width: 100%; height: auto; } body.post-type-archive-projects #project-archive-items .project-archive-item .project-thumb-wrap img.horizontal-image, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-thumb-wrap img.horizontal-image { width: 100%; height: auto; bottom: 0px; } body.post-type-archive-projects #project-archive-items .project-archive-item .project-thumb-wrap img.place-holder, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-thumb-wrap img.place-holder { width: 100%; height: auto; } body.post-type-archive-projects #project-archive-items .project-archive-item .project-title-wrap, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-title-wrap { text-align: center; position: relative; left: 0px; right: 0px; position: absolute; bottom: 0px; } @media (min-width: 769px) { body.post-type-archive-projects #project-archive-items .project-archive-item .project-title-wrap, body.post-type-archive-projects.tile-view #project-archive-items .project-archive-item .project-title-wrap { position: absolute; top: 25vw; } } body.post-type-archive-projects.list-view #project-archive-items-toggle .view-container .view-thumb.view-thumb-list, body.post-type-archive-projects.tile-view.list-view #project-archive-items-toggle .view-container .view-thumb.view-thumb-list { opacity: 1; } body.post-type-archive-projects.list-view #project-archive-items-toggle .view-container .view-thumb.view-thumb-tiles, body.post-type-archive-projects.tile-view.list-view #project-archive-items-toggle .view-container .view-thumb.view-thumb-tiles { opacity: 0.5; } body.post-type-archive-projects.list-view #project-archive-items .project-archive-item, body.post-type-archive-projects.tile-view.list-view #project-archive-items .project-archive-item { width: 100%; flex: 0 0 100%; } @media (min-width: 769px) { body.post-type-archive-projects.list-view #project-archive-items .project-archive-item, body.post-type-archive-projects.tile-view.list-view #project-archive-items .project-archive-item { width: 25%; flex: 0 0 25%; } } body.post-type-archive-projects.images-loaded img, body.post-type-archive-projects.tile-view.images-loaded img { animation: fade-in 1s ease-in 0s 1 normal forwards; } /* body.post-type-archive-projects, body.post-type-archive-projects.archive-view{ //default view */ body.single-projects { max-height: var(--full-height); overflow: hidden; } body.single-projects .mobile-page-header { display: block; height: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } @media (min-width: 769px) { body.single-projects .mobile-page-header { display: none; } } body.single-projects .slide-nav { height: inherit; width: 100%; pointer-events: none; position: absolute; bottom: 0px; top: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } body.single-projects .slide-nav .slide-nav-item { pointer-events: initial; height: 100%; width: 25vw; cursor: pointer; z-index: 98; position: relative; border: none; } body.single-projects .slide-nav .slide-nav-item .nav-text { opacity: 0; z-index: inherit; position: absolute; width: 0px; height: 0px; top: 50%; right: 50%; } body.single-projects .slide-nav .slide-nav-item .nav-text .inner-wrap { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently*/ text-align: center; position: relative; } body.single-projects .slide-nav .slide-nav-item:hover .nav-text { opacity: 1; } body.single-projects .slide-nav .slide-nav-item.previous-item { float: left; } body.single-projects .slide-nav .slide-nav-item.next-item { float: right; } body.single-projects .slide-nav .slide-nav-item[disabled=disabled] { pointer-events: none; } body.single-projects .slide-nav .slide-nav-item[disabled=disabled] .nav-text { opacity: 0; } body.single-projects .slide-container { position: absolute; bottom: 0px; width: 100%; opacity: 0; top: clamp(63px, 63px + 27 * (100vw - 0px) / 2000, 90px); } @media (min-width: 769px) { body.single-projects .slide-container { top: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } } body.single-projects .slide-container .slide-wrapper { text-align: center; width: 100%; height: 100%; position: relative; } body.single-projects .slide-container .slide-wrapper .slide-item { width: 100%; height: inherit; touch-action: pan-y; } body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item { width: inherit; height: inherit; } body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item .image-wrap { position: relative; width: inherit; height: inherit; } body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item .image-wrap img { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); cursor: zoom-in; cursor: url("../png/expand.png") 0 0, pointer; /* Legacy */ cursor: url("../svg/expand.svg") 0 0, pointer; /* FF */ cursor: -webkit-image-set(url("../png/expand.png") 1x, url("../png/expand@2.png") 2x) 0 0, pointer; /* Webkit */ } body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item .video-wrap { height: inherit; padding-top: 50.625vw; position: relative; width: 90vw; margin: 0 auto; } body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item .video-wrap iframe { position: absolute; top: 50%; left: 0; right: 0; height: 50.625vw; transform: translateY(-50%); } @media (min-width: 1020px) { body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item .video-wrap { width: 100%; height: 100%; display: flex; margin: auto; padding-top: 0; } body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item .video-wrap iframe { height: auto; position: relative; display: flex; height: auto; padding-bottom: 10vh; padding-top: 10vh; transform: initial; top: initial; } } body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item .video-wrap video { width: 100%; height: auto; } body.single-projects .slide-container .slide-wrapper .slide-item .inner-slide-item .video-wrap video.vertical-image { width: auto; height: 100%; } body.single-projects .slide-container .slide-wrapper .slide-item .slide-title { position: absolute; bottom: 0px; width: 100%; left: 0px; height: auto; } body.single-projects .slide-container .slide-wrapper .slide-item .slide-title .title { padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); } body.single-projects .slide-container .slide-wrapper .slide-item.hide-slide-mobile { opacity: 0; } @media (min-width: 769px) { body.single-projects .slide-container .slide-wrapper .slide-item.hide-slide-mobile { opacity: 1; } } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=title] .title { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); font-size: clamp(24px, 24px + 12 * (100vw - 0px) / 2000, 36px); line-height: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=image] { padding-top: 5vw; padding-right: 5vw; padding-left: 5vw; transition: padding 0.25s ease; padding-bottom: clamp(56px, 56px + 24 * (100vw - 0px) / 2000, 80px); } @media (min-width: 769px) { body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=image] { padding: 7vw; } } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=description] { overflow-x: hidden; overflow-y: auto; display: flex; align-items: center; } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=description] .description-wrap { touch-action: pan-y; padding: 0px; height: inherit; align-items: center; display: block; overflow-y: scroll; overflow-x: hidden; font-family: "gt-america-std-light"; } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=description] .description-wrap .site-grid-row-holder { min-height: var(--mobile-site-height); width: 100%; margin: 0; } @media (min-width: 769px) { body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=description] .description-wrap .site-grid-row-holder { min-height: var(--site-height); } } @media (min-width: 769px) { body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=description] .description-wrap { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=description] .description-wrap .slide-title { position: relative; } @media (min-width: 769px) { body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=description] .description-wrap .slide-title { position: absolute; } } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=related] .related-items-wrap { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=related] .related-items-wrap .related-item { position: relative; padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); font-size: clamp(24px, 24px + 12 * (100vw - 0px) / 2000, 36px); line-height: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=related] .related-items-wrap .related-item .related-item-title { position: relative; z-index: 4; } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=related] .related-items-wrap .related-item .related-item-image { position: absolute; height: clamp(112px, 112px + 48 * (100vw - 0px) / 2000, 160px); top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); opacity: 0; z-index: 3; } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=related] .related-items-wrap .related-item .related-item-image img { top: 50%; left: 50%; position: relative; transform: translate(-50%, -50%); max-width: clamp(112px, 112px + 48 * (100vw - 0px) / 2000, 160px); display: block; } body.single-projects .slide-container .slide-wrapper .slide-item[data-slide-type=related] .related-items-wrap .related-item:hover .related-item-image { opacity: 1; animation: fade-in 0.25s ease-in-out 0s 1 normal forwards; } body.single-projects .slide-container .slide-wrapper .slide-item.vertical-item .inner-slide-item .image-wrap img.horizontal-image { width: 100%; height: auto; margin: auto; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } body.single-projects .slide-container .slide-wrapper .slide-item.vertical-item .inner-slide-item .image-wrap img.vertical-image { width: 100%; height: auto; } body.single-projects .slide-container .slide-wrapper .slide-item.vertical-item .inner-slide-item .image-wrap img.square-image { width: 100%; height: auto; } body.single-projects .slide-container .slide-wrapper .slide-item.vertical-item.image-larger-than-item .inner-slide-item .image-wrap img.vertical-image { width: auto; height: 100%; } body.single-projects .slide-container .slide-wrapper .slide-item.horizontal-item .inner-slide-item .image-wrap img.horizontal-image { width: 100%; height: auto; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } body.single-projects .slide-container .slide-wrapper .slide-item.horizontal-item .inner-slide-item .image-wrap img.vertical-image { width: auto; height: 100%; } body.single-projects .slide-container .slide-wrapper .slide-item.horizontal-item .inner-slide-item .image-wrap img.square-image { width: auto; height: 100%; } body.single-projects .slide-container .slide-wrapper .slide-item.horizontal-item.image-larger-than-item .inner-slide-item .image-wrap img.horizontal-image { width: auto; height: 100%; } body.single-projects .slide-container .slide-wrapper .slide-item.square-item .inner-slide-item .image-wrap img.horizontal-image { width: 100%; height: auto; } body.single-projects .slide-container .slide-wrapper .slide-item.square-item .inner-slide-item .image-wrap img.vertical-image { width: 100%; height: auto; } body.single-projects .slide-container .slide-wrapper .slide-item.square-item .inner-slide-item .image-wrap img.square-image { width: 100%; height: auto; } body.single-projects .slide-container .slide-wrapper .slide-item.square-item.image-larger-than-item .inner-slide-item .image-wrap img.vertical-image { width: auto; height: 100%; } body.single-projects .slide-title.fixed-slide-title { position: fixed; bottom: 0px; right: 0px; left: 0px; text-align: center; width: 100%; } body.single-projects .slide-title.fixed-slide-title .title { padding-top: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-bottom: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); max-width: 90%; margin: auto; } body.single-projects .slide-title.fixed-slide-title .counter { font-size: clamp(9.6px, 9.6px + 4.8 * (100vw - 0px) / 2000, 14.4px); } body.single-projects.slider-loaded .slide-container { opacity: 1; transition: opacity 0.6s ease-in-out; } body.single-projects.full-screen-slide { background: rgb(255, 255, 255); top: 0; } body.single-projects.full-screen-slide .c-header { opacity: 0.1; pointer-events: none; z-index: 0; } body.single-projects.full-screen-slide main { margin-top: 0px; margin-bottom: 0px; height: var(--full-height); } body.single-projects.full-screen-slide main .slide-container { bottom: clamp(35px, 35px + 15 * (100vw - 0px) / 2000, 50px); } body.single-projects.full-screen-slide .mobile-page-header { opacity: 0.1; z-index: -1; margin-top: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } body.single-projects.full-screen-slide .slide-container .slide-wrapper .flickity-viewport .slide-item[data-slide-type=image] { transition: padding 0.25s ease; padding-left: clamp(31.5px, 31.5px + 13.5 * (100vw - 0px) / 2000, 45px); padding-right: clamp(31.5px, 31.5px + 13.5 * (100vw - 0px) / 2000, 45px); padding-top: 0px; padding-bottom: 0px; /* @include fluid-type( padding-bottom, map.get($breakpoints, xxxs), map.get($breakpoints, xxxl), calc(map.get($lineheight, xxxs) * 3.25), calc(map.get($lineheight, xxxl) * 3.25) );*/ cursor: zoom-out; cursor: url("../png/close.png") 0 0, pointer; /* Legacy */ cursor: url("../svg/close.svg") 0 0, pointer; /* FF */ cursor: -webkit-image-set(url("../png/close.png") 1x, url("../png/close@2.png") 2x) 0 0, pointer; /* Webkit */ } body.single-projects.full-screen-slide .slide-container .slide-wrapper .flickity-viewport .slide-item[data-slide-type=image] img { cursor: inherit; } body.single-projects.full-screen-slide .slide-container .slide-wrapper .flickity-viewport .slide-item[data-slide-type=image] .slide-title.image-item-info-wrap { opacity: 0.1; z-index: -1; } body.single-projects.full-screen-slide .slide-container .slide-wrapper .flickity-viewport .slide-item[data-slide-type=image].horizontal-item.image-larger-than-item .inner-slide-item .image-wrap img.horizontal-image { height: 100%; width: auto; } body.single-projects.full-screen-slide .slide-container .slide-wrapper .flickity-viewport .slide-item[data-slide-type=image].square-item.image-larger-than-item .inner-slide-item .image-wrap img.vertical-image { width: auto; height: 100%; } body.single-projects.full-screen-slide .slide-title.fixed-slide-title { opacity: 0.1; z-index: -1; } body.single-projects.full-screen-slide .slide-nav { pointer-events: none; opacity: 0; } body.single-projects.full-screen-slide .slide-nav .slide-nav-item { pointer-events: none; } body.single-projects.is-touch .slide-nav .slide-nav-item { width: 12.5vw; } body.single-projects.is-touch .slide-nav .slide-nav-item .nav-text { display: none !important; } /*TO DO - remove unneeded rules, that have come across from different page/styleshet */ body.home { overflow: hidden; } body.home[data-gallery-active=true] { overflow: auto; background-color: var(--gallery-bg-color, #f1f2ed); } body.home .flickity-page-dots { bottom: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } body.home .slide-container { position: fixed; top: 0px; bottom: 0px; width: 100%; opacity: 0; } @media (min-width: 769px) { body.home .slide-container { top: 0px; } } body.home .slide-container .slide-wrapper { text-align: center; width: 100%; height: 100%; position: relative; } body.home .slide-container .slide-wrapper .slide-item { width: 100%; height: var(--full-height); } body.home .slide-container .slide-wrapper .slide-item .inner-slide-item { width: inherit; height: inherit; } body.home .slide-container .slide-wrapper .slide-item .inner-slide-item .image-wrap { width: inherit; height: inherit; background-size: cover; background-repeat: no-repeat; background-position: center; } body.home .slide-container .slide-wrapper .slide-item .slide-title { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } body.home .slide-container .slide-wrapper .slide-item .slide-title .title { color: var(--active-color); font-size: clamp(48px, 48px + 24 * (100vw - 0px) / 2000, 72px); } body.home .slide-container .slide-wrapper .slide-item.vertical-item .inner-slide-item .image-wrap img.horizontal-image { width: 100%; height: auto; margin: auto; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } body.home .slide-container .slide-wrapper .slide-item.vertical-item .inner-slide-item .image-wrap img.vertical-image { width: 100%; height: auto; } body.home .slide-container .slide-wrapper .slide-item.vertical-item .inner-slide-item .image-wrap img.square-image { width: 100%; height: auto; } body.home .slide-container .slide-wrapper .slide-item.vertical-item.image-larger-than-item .inner-slide-item .image-wrap img.vertical-image { width: auto; height: 100%; } body.home .slide-container .slide-wrapper .slide-item.horizontal-item .inner-slide-item .image-wrap img.horizontal-image { width: 100%; height: auto; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } body.home .slide-container .slide-wrapper .slide-item.horizontal-item .inner-slide-item .image-wrap img.vertical-image { width: auto; height: 100%; } body.home .slide-container .slide-wrapper .slide-item.horizontal-item .inner-slide-item .image-wrap img.square-image { width: auto; height: 100%; } body.home .slide-container .slide-wrapper .slide-item.horizontal-item.image-larger-than-item .inner-slide-item .image-wrap img.horizontal-image { width: auto; height: 100%; } body.home .slide-container .slide-wrapper .slide-item.square-item .inner-slide-item .image-wrap img.horizontal-image { width: 100%; height: auto; } body.home .slide-container .slide-wrapper .slide-item.square-item .inner-slide-item .image-wrap img.vertical-image { width: 100%; height: auto; } body.home .slide-container .slide-wrapper .slide-item.square-item .inner-slide-item .image-wrap img.square-image { width: 100%; height: auto; } body.home .slide-container .slide-wrapper .slide-item.square-item.image-larger-than-item .inner-slide-item .image-wrap img.vertical-image { width: auto; height: 100%; } body.home .slide-container .slide-wrapper { /* ---- page dots ---- TOD O - sort these measuerments out */ } body.home .slide-container .slide-wrapper .flickity-page-dots { position: absolute; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } body.home .slide-container .slide-wrapper .flickity-rtl .flickity-page-dots { direction: rtl; } body.home .slide-container .slide-wrapper .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; border-radius: 50%; opacity: 1; cursor: pointer; border: 1px solid var(--active-color); background: transparent; } body.home .slide-container .slide-wrapper .flickity-page-dots .dot.is-selected { opacity: 1; background: var(--active-color); } body.home.slider-loaded .slide-container { animation: fade-in 1s ease-in 0s 1 normal forwards; } body.home { /* &.images-loaded{ img { animation: fade-in 1s ease-in 0s 1 normal forwards //, transform-in 0.5s ease-in 0s 1 normal forwards; } }//body.images-loaded */ } a.full-page-link { display: flex; width: 100%; height: 100%; } body.error404 h1 { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); width: 100%; text-align: center; font-size: clamp(24px, 24px + 12 * (100vw - 0px) / 2000, 36px); line-height: clamp(28px, 28px + 12 * (100vw - 0px) / 2000, 40px); } body.error404[data-gallery-active=true] { background-color: var(--gallery-bg-color); color: var(--gallery-text-color); } body.error404[data-gallery-active=true] main { min-height: var(--site-height); } body.error404[data-gallery-active=true] h1 { text-transform: uppercase; } .page-id-102, .page-id-409 { max-height: var(--site-height); } .page-id-102 main, .page-id-409 main { display: flex; flex-direction: column; min-height: var(--site-height); } .page-id-102 .wrapper, .page-id-409 .wrapper { margin-top: auto; margin-bottom: auto; } .page-id-102[data-gallery-active=true], .page-id-409[data-gallery-active=true] { max-height: -moz-min-content; max-height: min-content; } .page-id-102[data-gallery-active=true] main .inner-wrapper, .page-id-409[data-gallery-active=true] main .inner-wrapper { display: block; } @media (min-width: 480px) { .page-id-102[data-gallery-active=true] main .inner-wrapper, .page-id-409[data-gallery-active=true] main .inner-wrapper { -moz-column-count: 2; column-count: 2; -moz-column-gap: 1rem; column-gap: 1rem; } } @media (min-width: 769px) { .page-id-102[data-gallery-active=true] main .inner-wrapper, .page-id-409[data-gallery-active=true] main .inner-wrapper { -moz-column-count: 3; column-count: 3; -moz-column-gap: 1rem; column-gap: 1rem; } } .page-id-102[data-gallery-active=true] main .inner-wrapper .fcm-block, .page-id-409[data-gallery-active=true] main .inner-wrapper .fcm-block { -moz-column-break-inside: avoid; break-inside: avoid; } @media (min-width: 480px) { .page-id-102[data-gallery-active=true] main .inner-wrapper .fcm-block:nth-of-type(3), .page-id-409[data-gallery-active=true] main .inner-wrapper .fcm-block:nth-of-type(3) { -moz-column-break-after: column; break-after: column; } } @media (min-width: 769px) { .page-id-102[data-gallery-active=true] main .inner-wrapper .fcm-block:nth-of-type(3), .page-id-409[data-gallery-active=true] main .inner-wrapper .fcm-block:nth-of-type(3) { -moz-column-break-after: column; break-after: column; } } @media (min-width: 769px) { .page-id-102[data-gallery-active=true] main .inner-wrapper .fcm-block:nth-of-type(5), .page-id-409[data-gallery-active=true] main .inner-wrapper .fcm-block:nth-of-type(5) { -moz-column-break-after: column; break-after: column; } } .page-id-102[data-gallery-active=true] main .inner-wrapper .fcm-block .site-grid-item, .page-id-409[data-gallery-active=true] main .inner-wrapper .fcm-block .site-grid-item { flex-grow: 0; width: 80%; flex-basis: 80%; min-height: 25vh; } @media (min-width: 480px) { .page-id-102[data-gallery-active=true] main .inner-wrapper .fcm-block .site-grid-item, .page-id-409[data-gallery-active=true] main .inner-wrapper .fcm-block .site-grid-item { width: 100%; flex-basis: 100%; min-height: 20vh; } } @media (min-width: 1020px) { .page-id-102[data-gallery-active=true] main .inner-wrapper .fcm-block .site-grid-item, .page-id-409[data-gallery-active=true] main .inner-wrapper .fcm-block .site-grid-item { flex-basis: 80%; width: 80%; } } /** * Gallery Homepage Styles * * Grid ↔ Focus states, animations, responsive layout * * KEY PRINCIPLE: Control the layout via row height + gap * Row height determines how many items fit per row naturally (based on aspect ratios) * Gap determines spacing between items */ .gallery-wrapper { width: 100%; } .gallery-header { display: flex; justify-content: flex-start; align-items: center; height: var(--header-height); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; position: sticky; top: 0; z-index: 101; } .gallery-header .site-grid-row-holder { height: 100%; } [data-gallery-loaded=true] .gallery-header { opacity: 1; } [data-gallery-loaded=true] .gallery-header .gallery-filter-reset, [data-gallery-loaded=true] .gallery-header .gallery-filter-wrapper { pointer-events: auto; } .gallery-filter-container { width: 100%; display: flex; position: relative; justify-content: flex-start; margin: auto; margin: auto; height: 100%; } .gallery-filter-container .gallery-filter-reset { display: none; } .gallery-filter-container .gallery-filter-reset .reset-button { border: 0; outline: none; color: var(--gallery-text-color); text-transform: uppercase; will-change: opacity; opacity: 1; transition: opacity 0.3s ease; } .gallery-filter-container .gallery-filter-reset .reset-button[data-filters-active=true] { opacity: 0.4; transition: opacity 0.3s ease; } .gallery-filter-container .gallery-filter-select { display: none; } .gallery-filter-container .gallery-filter-wrapper { position: relative; display: flex; text-transform: uppercase; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle { height: 100%; border: none; outline: none; cursor: pointer; background-color: var(--gallery-bg-color); color: var(--gallery-text-color); display: flex; align-items: center; padding: 0; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle .filter-label { text-transform: uppercase; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle .filter-label .filter-label-text { display: none; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle .filter-label .filter-label-text.\--base { display: flex; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle .filter-name { display: none; text-transform: uppercase; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle .filter-name::before { content: "-"; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle:focus { outline: none; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle[aria-expanded=true] .postioner { transform: rotate(45deg); transition: transform 0.3s ease-in-out; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-toggle[data-filter-active=true] .postioner { transform: rotate(45deg); transition: transform 0.3s ease-in-out; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-dropdown { position: absolute; top: 0; left: 100%; right: 0; background-color: var(--gallery-bg-color); border-top: none; display: flex; flex-direction: column; z-index: 100; overflow-y: auto; width: -moz-max-content; width: max-content; bottom: 0; justify-content: center; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-dropdown .gallery-filter-option { display: none; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-dropdown .gallery-filter-option.is-active { display: flex; opacity: 1; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-dropdown .gallery-filter-option.is-active::before { content: ""; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-dropdown.open { bottom: initial; display: flex; height: calc(100% * var(--filter-count)); justify-content: flex-start; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-dropdown.open .gallery-filter-option { display: flex; align-content: center; flex-wrap: wrap; height: calc(100% / var(--filter-count)); } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-dropdown.open .gallery-filter-option.is-active { opacity: 0.3; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-dropdown.open .gallery-filter-option.is-active::before { content: "-"; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-option { padding-left: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); padding-right: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); position: relative; text-transform: uppercase; border: none; display: none; background: none; color: var(--gallery-text-color); text-align: left; cursor: pointer; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-option::before { content: "-"; position: absolute; left: 0; width: clamp(7px, 7px + 3 * (100vw - 0px) / 2000, 10px); bottom: 0; height: 100%; align-content: center; align-items: center; justify-content: center; display: flex; flex-wrap: wrap; } .gallery-filter-container .gallery-filter-wrapper .gallery-filter-option:focus { outline: none; } .gallery-container { position: relative; width: 100%; min-height: var(--site-height); transition: all 0.3s ease; } .gallery-container.gallery-grid { display: block; } .gallery-container.gallery-grid .gallery-focus-view { display: none; } .gallery-container.gallery-focus { display: flex; justify-content: center; align-items: center; min-height: var(--site-height); padding: 2rem; } .gallery-container.gallery-focus .gallery-grid-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .gallery-container.gallery-focus .gallery-focus-view { display: flex; flex-direction: column; position: fixed; top: calc(50% + var(--header-height) / 2); left: 50%; transform: translate(-50%, -50%); z-index: 10; opacity: 0; animation: fade-in 0.5s ease-in 0.1s forwards; } .gallery-grid-view { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; align-items: flex-start; padding: var(--gallery-gutter); width: 100%; -moz-column-gap: var(--gallery-horizontal-gap); column-gap: var(--gallery-horizontal-gap); row-gap: var(--gallery-vertical-gap); line-height: 0; font-size: 0; margin: 0; box-sizing: border-box; } @media (max-width: 479px) { .gallery-grid-view { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xxs; } } @media (min-width: 480px) { .gallery-grid-view { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xxs; } } @media (min-width: 640px) { .gallery-grid-view { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xs; } } @media (min-width: 769px) { .gallery-grid-view { --gallery-row-height: 16vw; --gallery-gap: 3vw; --gallery-vertical-gap: 3vw; --gallery-horizontal-gap: 3vw; --gallery-gutter: 3vw; --gallery-breakpoint-name: sm; } } @media (min-width: 992px) { .gallery-grid-view { --gallery-row-height: 14vw; --gallery-gap: 2.5vw; --gallery-vertical-gap: 2.5vw; --gallery-horizontal-gap: 2.5vw; --gallery-gutter: 2.5vw; --gallery-breakpoint-name: md; } } @media (min-width: 1020px) { .gallery-grid-view { --gallery-row-height: 12vw; --gallery-gap: 2vw; --gallery-vertical-gap: 2vw; --gallery-horizontal-gap: 2vw; --gallery-gutter: 2vw; --gallery-breakpoint-name: lg; } } @media (min-width: 1430px) { .gallery-grid-view { --gallery-row-height: 8vw; --gallery-gap: 1vw; --gallery-vertical-gap: 1vw; --gallery-horizontal-gap: 2.5vw; --gallery-gutter: 1vw; --gallery-breakpoint-name: xxl; } } @media (min-width: 2000px) { .gallery-grid-view { --gallery-row-height: 6vw; --gallery-gap: 1vw; --gallery-vertical-gap: 1vw; --gallery-horizontal-gap: 2vw; --gallery-gutter: 1vw; --gallery-breakpoint-name: xxxl; } } .gallery-item { position: relative; overflow: hidden; cursor: pointer; background-color: var(--gallery-bg-color); transition: transform 0.2s ease, opacity 0.3s ease; display: flex; align-items: center; justify-content: flex-start; padding: 0; margin: 0; box-sizing: border-box; min-width: 0; min-height: 0; max-width: -moz-fit-content; max-width: fit-content; flex-shrink: 0; line-height: 0; font-size: 0; } .gallery-item.fallback-assigned { border-top: 0px solid rgba(255, 255, 255, 0); } .gallery-item img { width: auto; height: 100%; aspect-ratio: auto; -o-object-fit: contain; object-fit: contain; display: block; transition: opacity 0.3s ease; background-color: var(--gallery-bg-color); } .gallery-item.image-loading img { opacity: 0; } .gallery-item.image-loading[data-video=true]::after { content: ""; position: absolute; top: 50%; left: 50%; height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); width: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); margin-top: clamp(-10px, -7px + -3 * (100vw - 0px) / 2000, -7px); margin-left: clamp(-10px, -7px + -3 * (100vw - 0px) / 2000, -7px); border: 1px solid color-mix(in srgb, var(--cursor-color) 20%, transparent); border-top-color: var(--cursor-color); border-right-color: var(--cursor-color); border-radius: 50%; animation: spin 1s linear infinite; pointer-events: none; z-index: 10; } .gallery-item.image-loaded img { animation: fade-in 1s ease-in forwards; } .gallery-item:hover { transform: scale(1.02); } .gallery-item:active { transform: scale(1.02); } .gallery-item.gallery-item-hidden { display: none !important; } .gallery-item.gallery-video iframe { pointer-events: none; } .gallery-no-results { flex-basis: 100%; text-align: center; background-color: var(--gallery-bg-color); } .gallery-no-results p { color: var(--gallery-text-color); } .gallery-no-results a { display: inline-block; background-color: var(--gallery-text-color); color: var(--gallery-bg-color); text-decoration: none; transition: background-color 0.2s ease; } .gallery-focus-view { position: relative; width: 100%; height: var(--site-height); display: flex; align-items: center; justify-content: center; } .gallery-focus-content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: calc(var(--gallery-gutter) / 1); padding-right: calc(var(--gallery-gutter) / 1); padding-bottom: var(--header-height); } @media (max-width: 479px) { .gallery-focus-content { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xxs; } } @media (min-width: 480px) { .gallery-focus-content { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xxs; } } @media (min-width: 640px) { .gallery-focus-content { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xs; } } @media (min-width: 769px) { .gallery-focus-content { --gallery-row-height: 16vw; --gallery-gap: 3vw; --gallery-vertical-gap: 3vw; --gallery-horizontal-gap: 3vw; --gallery-gutter: 3vw; --gallery-breakpoint-name: sm; } } @media (min-width: 992px) { .gallery-focus-content { --gallery-row-height: 14vw; --gallery-gap: 2.5vw; --gallery-vertical-gap: 2.5vw; --gallery-horizontal-gap: 2.5vw; --gallery-gutter: 2.5vw; --gallery-breakpoint-name: md; } } @media (min-width: 1020px) { .gallery-focus-content { --gallery-row-height: 12vw; --gallery-gap: 2vw; --gallery-vertical-gap: 2vw; --gallery-horizontal-gap: 2vw; --gallery-gutter: 2vw; --gallery-breakpoint-name: lg; } } @media (min-width: 1430px) { .gallery-focus-content { --gallery-row-height: 8vw; --gallery-gap: 1vw; --gallery-vertical-gap: 1vw; --gallery-horizontal-gap: 2.5vw; --gallery-gutter: 1vw; --gallery-breakpoint-name: xxl; } } @media (min-width: 2000px) { .gallery-focus-content { --gallery-row-height: 6vw; --gallery-gap: 1vw; --gallery-vertical-gap: 1vw; --gallery-horizontal-gap: 2vw; --gallery-gutter: 1vw; --gallery-breakpoint-name: xxxl; } } .gallery-focus-image-wrapper { position: relative; width: 100%; height: 100%; display: flex; cursor: none; align-items: center; justify-content: center; overflow: hidden; background-color: var(--gallery-bg-color); -webkit-user-select: none; -moz-user-select: none; user-select: none; aspect-ratio: var(--focus-aspect-ratio); padding-bottom: calc(var(--image-offset-px) - var(--header-height)); transition: padding-bottom 0.3s ease-in; } .gallery-focus-image-wrapper.image-loading img { pointer-events: none; opacity: 0; } .gallery-focus-image-wrapper[data-type=image].image-loaded img { pointer-events: none; animation: fade-in 1s ease-in forwards; } .gallery-focus-image-wrapper[data-type=video].image-loaded img.gallery-focus-image { pointer-events: none; opacity: 0; position: absolute; } .gallery-focus-image { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; transition: opacity 0.3s ease; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .gallery-focus-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: none; pointer-events: none; } .gallery-focus-video.image-loading { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .gallery-focus-video.image-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); margin-top: clamp(-10px, -7px + -3 * (100vw - 0px) / 2000, -7px); margin-left: clamp(-10px, -7px + -3 * (100vw - 0px) / 2000, -7px); border: 2px solid color-mix(in srgb, var(--cursor-color) 10%, transparent); border-top-color: var(--cursor-color); border-right-color: color-mix(in srgb, var(--cursor-color) 80%, transparent); border-radius: 50%; animation: spin 1s linear infinite; pointer-events: none; z-index: 20; } .gallery-focus-video.image-loaded { opacity: 1; animation: fade-in 0.6s ease-in forwards; position: relative; } .gallery-focus-video iframe { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; } .gallery-focus-video video { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; } .gallery-focus-info { position: absolute; bottom: 0vw; display: block; width: 100%; text-align: right; background-color: var(--gallery-bg-color); z-index: 26; padding-left: calc(var(--gallery-gutter) / 1); padding-right: calc(var(--gallery-gutter) / 1); } @media (max-width: 479px) { .gallery-focus-info { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xxs; } } @media (min-width: 480px) { .gallery-focus-info { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xxs; } } @media (min-width: 640px) { .gallery-focus-info { --gallery-row-height: 20vw; --gallery-gap: 4vw; --gallery-vertical-gap: 4vw; --gallery-horizontal-gap: 4vw; --gallery-gutter: 4vw; --gallery-breakpoint-name: xs; } } @media (min-width: 769px) { .gallery-focus-info { --gallery-row-height: 16vw; --gallery-gap: 3vw; --gallery-vertical-gap: 3vw; --gallery-horizontal-gap: 3vw; --gallery-gutter: 3vw; --gallery-breakpoint-name: sm; } } @media (min-width: 992px) { .gallery-focus-info { --gallery-row-height: 14vw; --gallery-gap: 2.5vw; --gallery-vertical-gap: 2.5vw; --gallery-horizontal-gap: 2.5vw; --gallery-gutter: 2.5vw; --gallery-breakpoint-name: md; } } @media (min-width: 1020px) { .gallery-focus-info { --gallery-row-height: 12vw; --gallery-gap: 2vw; --gallery-vertical-gap: 2vw; --gallery-horizontal-gap: 2vw; --gallery-gutter: 2vw; --gallery-breakpoint-name: lg; } } @media (min-width: 1430px) { .gallery-focus-info { --gallery-row-height: 8vw; --gallery-gap: 1vw; --gallery-vertical-gap: 1vw; --gallery-horizontal-gap: 2.5vw; --gallery-gutter: 1vw; --gallery-breakpoint-name: xxl; } } @media (min-width: 2000px) { .gallery-focus-info { --gallery-row-height: 6vw; --gallery-gap: 1vw; --gallery-vertical-gap: 1vw; --gallery-horizontal-gap: 2vw; --gallery-gutter: 1vw; --gallery-breakpoint-name: xxxl; } } .gallery-focus-info .focus-info-toggle { color: var(--gallery-text-color); cursor: pointer; position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; right: var(--gallery-gutter); width: var(--gallery-gutter); height: var(--header-height); display: flex; will-change: opacity; transition: opacity 0.3s ease-in-out; z-index: 26; } .gallery-focus-info .focus-info-toggle .postioner { font-size: 150%; margin: auto; display: inline-flex; align-items: center; justify-content: center; transform-origin: center center; transition: transform 0.3s ease-in-out; } .gallery-focus-info .focus-info-toggle.no-content { opacity: 0; pointer-events: none; } .gallery-focus-info[data-expanded=true] .postioner { transform: rotate(45deg); } .gallery-focus-info .minimised-content { display: flex; } .gallery-focus-info .expanded-content { overflow: visible; display: flex; max-height: 0; transition: max-height 0.3s ease-in-out; flex-flow: column; } .gallery-focus-info .expanded-content .gallery-project-nav { display: flex; justify-content: space-between; padding-top: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); padding-bottom: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); margin-left: clamp(-5px, -3.5px + -1.5 * (100vw - 0px) / 2000, -3.5px); margin-right: clamp(-5px, -3.5px + -1.5 * (100vw - 0px) / 2000, -3.5px); } .gallery-focus-info .expanded-content .gallery-project-nav .project-nav-prev, .gallery-focus-info .expanded-content .gallery-project-nav .project-nav-next { color: var(--gallery-text-color); display: flex; flex-basis: 50%; text-align: left; align-items: center; gap: clamp(1.75px, 1.75px + 0.75 * (100vw - 0px) / 2000, 2.5px); } .gallery-focus-info .expanded-content .gallery-project-nav .project-nav-next { justify-content: flex-end; } .gallery-focus-info .expanded-content .gallery-project-nav .nav-icon { width: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); height: clamp(14px, 14px + 6 * (100vw - 0px) / 2000, 20px); fill: currentColor; flex-shrink: 0; } .gallery-focus-info .expanded-content .gallery-project-nav .prev-icon { order: -1; } .gallery-focus-info .expanded-content .gallery-project-nav .next-icon { order: 1; } .gallery-focus-info[data-expanded=true] .expanded-content { max-height: 1000px; } .gallery-focus-title { font-weight: normal; color: var(--gallery-text-color); min-height: var(--header-height); align-items: center; display: flex; justify-content: flex-end; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .gallery-focus-desc { text-align: left; color: var(--gallery-text-color); margin-top: 1rem; } @media (min-width: 640px) { .gallery-focus-desc { max-width: 50%; } } @media (min-width: 992px) { .gallery-focus-desc { max-width: 40%; } } @media (min-width: 1020px) { .gallery-focus-desc { max-width: 30%; } } .gallery-focus-desc p { margin: 0; } .gallery-nav-arrows { position: absolute; top: 0; left: 0; right: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 20; bottom: var(--header-height); } [data-expanded=true] .gallery-nav-arrows { bottom: var(--expanded-info-height); } .gallery-nav-item { position: relative; pointer-events: none; width: 50vw; height: 100%; background: none; padding: 0; cursor: none; display: flex; align-items: center; justify-content: center; } .gallery-nav-item.arrow-left { justify-content: flex-start; height: 100%; } .gallery-nav-item.arrow-right { justify-content: flex-end; height: 100%; } .arrow { position: relative; z-index: 21; pointer-events: none; border: none; background: none; padding: 0; cursor: none; display: flex; align-items: center; justify-content: center; } .arrow-follower-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 22; opacity: 0; } .arrow-follower-wrapper .arrow-follower { position: absolute; width: var(--header-height); height: var(--header-height); top: 0; left: 0; transform: translate(-50%, -50%); transition: transform 0.2s ease; pointer-events: none; opacity: 1; } .arrow-follower-wrapper .arrow-follower.arrow-follower-hidden { opacity: 0; will-change: opacity; transition: opacity 0.2s ease; pointer-events: none; } .arrow-follower-wrapper .arrow-follower svg { width: 100%; height: 100%; } .arrow-follower-wrapper.initiated { opacity: 1; } .gallery-focus-close { display: none; position: absolute; top: 2rem; right: 2rem; width: 44px; height: 44px; border: none; border-radius: 50%; background-color: var(--gallery-text-color); color: var(--gallery-bg-color); opacity: 0.8; cursor: pointer; justify-content: center; align-items: center; transition: background-color 0.2s ease; z-index: 25; } .gallery-focus-close svg { width: 24px; height: 24px; } .gallery-focus-close:hover { background-color: var(--gallery-text-color); } .gallery-focus-close:focus { outline: none; } .gallery-focus-close:active { transform: scale(0.95); } @media (max-width: 768px) { .gallery-focus-close { top: 1rem; right: 1rem; width: 36px; height: 36px; } .gallery-focus-close svg { width: 20px; height: 20px; } } html { overscroll-behavior: none; } html body.is-touch .arrow-follower-wrapper { display: none; } /*# sourceMappingURL=style.min.css.map */