/* Theme Name: Björn Berglund Creative Studio Description: Custom made for client Author: WP and coding by Abrovink Author URI: https://www.abrovink.se Text Domain: bbcs Version: 1.0.011 */ :root{ --section-padding-vert: 12px; --section-padding-horiz: 0; --content-padding-vert: 24px; /* updated 2026-02-25 from 12px */ --content-padding-horiz: 24px; --content-wrap-max-width: 100%; --color-white: #ffffff; --color-palepink: #F8DFDA; --color-olive: #698473; --border-color: var(--color-olive); --border-radius: 5px; --header-height: 100px; --grid-gap: 24px; --gutter: var(--content-padding-horiz); --col: auto; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { position: relative; border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%; overflow-y: auto; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; } *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } body{ background: url(gfx/texture-1280x319px-pink-v1.jpg) repeat top center var(--color-palepink); background-size: 1280px 319px; height: 100%; font-family: "dm-sans", sans-serif; font-size: 18px; line-height: 1.37; font-weight: 500; color: var(--color-olive); font-style: normal; font-display: swap; font-optical-sizing: auto; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } /* Reset UA default

margins (40px inline + 1em block). Without this every figure gets phantom space from the browser default. */ figure{ margin: 0; } caption, th, td{ font-size: .85em; line-height: 1.15; font-weight: 400; text-align: left; } p, table, form { margin-bottom: 1.25em; color: inherit; text-wrap: pretty; } fieldset { min-width: inherit; } /* ************************************************************************************** */ /* general typographic /* ************************************************************************************** */ h1, h2, h3, h4, h5, h6 { font-family: swear-display, serif; font-weight: 700; font-style: normal; font-display: swap; font-optical-sizing: auto; color: inherit; clear: both; margin: 0; padding: 0; } h1, h2.as-h1 { margin: 0 0 .25em 0; font-size: 54px; line-height: 1.05em; font-weight: 900; } h1.smaller { margin: 0 0 0 0; font-size: 32px; line-height: 1.15; font-weight: 900; } h2 { margin: 0 0 .175em 0; font-size: 25px; line-height: 1.1; font-weight: 800; color: inherit; } h2.x-large{ font-size: 7.4vw; /* org: font-size: 36px; */ margin-bottom: .5em; } h2.hidden{ display: none; } h3 { margin: .5em 0 .125em 0; font-size: 1.225em; line-height: 1.25; font-weight: 700; color: inherit; } h4 { margin: 0 0 .25em 0; font-family: "dm-sans", sans-serif; font-size: 1em; line-height: 1.25; font-weight: 900; color: inherit; } h5{} h6{} a { color: var(--color-olive); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: all .25s; } a:visited{ color: inherit; } /* When a post sets custom bg/fg via ACF (rendered as inline `color:` on ), content links inherit that fg instead of the default olive. Scoped to .content-wrap so nav/footer links keep theme colors. */ body[style*="color:"] .content-wrap a{ color: inherit; text-decoration-color: currentColor; } a:hover, a:active, a:focus { /*background: #fff;*/ } *:focus-visible{ outline: solid 2px #8a44bc !important; outline-offset: 2px; } /* WCAG */ .skip-to-main-content-link { position: absolute; left: -9999px; z-index: 99999; padding: 1em; background-color: black; color: white; opacity: 0; } .skip-to-main-content-link:focus { left: 0; opacity: 1; } strong, b{ font-weight: 600; } dfn, cite, em, i{ font-style: italic; } blockquote{ -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; color: inherit; /* Matches p.caption typography so editors can use either interchangeably. */ font-size: 1em; font-weight: 600; padding-right: 48px; } @media screen and (min-width: 1024px){ blockquote{ font-size: 1.5em; } } blockquote p:last-child{ margin-bottom: .25em; } address { font-style: normal; margin: 0 0 1.5em; } pre { background: rgba(64,64,64, .05); font-family: Courier, monospace; font-size: .85em; line-height: 1.5em; margin-bottom: 1.5em; max-width: 100%; overflow: auto; padding: 1.5em; } code, kbd, tt, var { font-family: Courier, monospace; font-size: .85em; } abbr, acronym { border-bottom: 1px dotted var(--border-color); cursor: help; } mark{ background: rgba(64,64,64, .05); } ins { text-decoration: none; background: rgba(255,255,255, 1); } small { font-size: smaller; } big { font-size: bigger; } hr { display: block; width: 100%; float: none; clear: both; background-color: var(--border-color); border: 0; height: 2px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 24px 16px; padding: 0; } ul { list-style: square; } ol { list-style: decimal; } li{ } ul li::marker{ color: inherit; } li > ul, li > ol { /*margin-bottom: 0;*/ } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } :focus { outline: none; } table { border-collapse: collapse; margin: 0 0 1.5em 0; width: 100%; } thead th { border-bottom: 1px solid var(--border-color); padding-bottom: .5em; } th { padding: .5em; font-weight: 600; text-align: left; } tr { border-bottom: 1px solid var(--border-color); } td { padding: .5em; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } sup{ font-size: 65%; line-height: 1; white-space: break-after; } sub{ font-size: 65%; line-height: 1; white-space: break-after; } img, svg{ display: block; max-width: 100%; /* Adhere to container width. */ height: auto !important; /* Make sure images are scaled correctly. */ } a img, a svg { border: 0; } .alignleft { float: left; margin-right: 1.5em; } .alignright { float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } video { display: inline-block; height: auto !important; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object, canvas { max-width: 100%; margin-bottom: 0; } p > embed, p > iframe, p > object{ max-width: 100%; margin-bottom: 0; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption-text { margin: 1.25em 0; font-size: .85em; line-height: 1.5em; font-weight: 300; } /* Handle dynamic height of iframes etc. Scoped to figures that actually contain an embed — NOT every

, which would add 56.25% phantom padding to images, captions, etc. */ .embed-container, figure:has(iframe), figure:has(video), figure:has(embed), figure:has(object) { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; max-width: 100%; height: 100%; margin: 0 0 1.5em 0; } figure iframe, .embed-container iframe, .embed-container object, .embed-container embed, .embed-container canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .embed-container + p{ margin-bottom: 0; } /* ************************************************************************************** */ /* WP gallery defaults - small screen, override column setting */ /* ************************************************************************************** */ .gallery{ display: grid; gap: 24px; grid-template-columns: 1fr 1fr; } .gallery > br{ display: none; } .gallery-item{} /* light gallery adaptions */ .lg .lg-actions{ margin-top: 50vh !important; } @media screen and (min-width: 768px){ .gallery{ margin-top: 5px; } .gallery.gallery-columns-3, .gallery.gallery-columns-4, .gallery.gallery-columns-5 .gallery.gallery-columns-6{ grid-template-columns: 1fr 1fr 1fr; } } @media screen and (min-width: 1280px) { .gallery.gallery-columns-4{ grid-template-columns: 1fr 1fr 1fr 1fr; } .gallery.gallery-columns-5{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .gallery.gallery-columns-6{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* form styles */ /* ************************************************************************************** */ form{} fieldset{} form legend{} form label{ display: inline-block; margin-bottom: 2px; font-size: inherit; font-size: 12px; font-weight: 400; color: var(--color-olive); } form p{ margin-bottom: 1em; } form input, form select, form textarea{ display: inline-block; margin: 0; padding: .5em .5em; border: solid 2px var(--color-olive); border-radius: var(--border-radius); background: rgba(255,255,255, 0); font-size: inherit; font-weight: 400; transition: all .2s ease; } form input[type="text"], form input[type="email"], form input[type="date"], form input[type="time"], form textarea{ width: 100%; } form textarea{ height: 150px; } form input[type="checkbox"]{ /*transform: scale(125%);*/ } form input:focus, form textarea:focus{ background: rgba(255,255,255, 1); } form button, form submit, form input[type="button"], form input[type="submit"]{ position: relative; margin: 12px 0; padding: 8px 36px; font-weight: 400; color: var(--color-olive); border-radius: 50px; cursor: pointer; text-align: left; transition: all .2s ease; } form button:hover, form submit:hover, form input[type="button"]:hover, form input[type="submit"]:hover{ color: #fff; border-color: #8a44bc; background-color: #8a44bc; } form submit, form input[type="submit"]{ padding-right: 52px; background: no-repeat center right 24px transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23698473; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); background-size: 24px 24px; } form button:hover, form submit:hover, form input[type="button"]:hover, form input[type="submit"]:hover{ color: #fff; border-color: #8a44bc; background-color: #8a44bc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); } form button:focus, form input[type="button"]:focus, form input[type="submit"]:focus{} form input[type="submit"]:disabled{} /* form layout specs */ form .form-field{ padding-right: 24px; } form .form-row{ float: none; clear: both; } form .form-field.w100{ width: 100%; float: none; clear: both; } /* responsive widths present */ /* responsive form field widths */ @media screen and (min-width: 640px){ form .form-field.w50{ width: 50%; float: left; } form .form-field.w25{ width: 25%; float: left; } } /* ============================================================ ACFE forms — paper-form styling Overrides ACF/ACFE plugin CSS for all ACFE forms on the site. ============================================================ */ .acfe-form .acf-fields > .acf-field{ border-top: 0; } .acfe-form .acf-fields > .acf-field input[type="text"], .acfe-form .acf-fields > .acf-field input[type="email"], .acfe-form .acf-fields > .acf-field input[type="tel"], .acfe-form .acf-fields > .acf-field input[type="url"], .acfe-form .acf-fields > .acf-field input[type="number"], .acfe-form .acf-fields > .acf-field input[type="password"], .acfe-form .acf-fields > .acf-field input[type="search"], .acfe-form .acf-fields > .acf-field input[type="date"], .acfe-form .acf-fields > .acf-field textarea{ border: 0; border-bottom: 2px solid var(--border-color, #698473); border-radius: 0; padding: .4em 0 !important; background: transparent; box-shadow: none; font: inherit; color: inherit; transition: none; } .acfe-form .acf-fields > .acf-field input:focus:not(:focus-visible), .acfe-form .acf-fields > .acf-field textarea:focus:not(:focus-visible){ outline: none; } /* Labels match body p */ .acfe-form .acf-fields .acf-field .acf-label label{ font: inherit; color: inherit; } /* Radio buttons: custom styling + 4-column grid layout */ .acfe-form .acf-radio-list{ display: grid; /* minmax(0, 1fr) forces equal-width tracks regardless of label length. Without the 0-min, long labels would expand their track and push subsequent items out of alignment. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em 1em; margin: 0; padding: 0; list-style: none; } /* ACF's .acf-bl class ships ::before/::after clearfix pseudos that become grid items — pushing the first real option into column 2. */ .acfe-form .acf-radio-list::before, .acfe-form .acf-radio-list::after{ display: none; } @media (max-width: 960px){ .acfe-form .acf-radio-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px){ .acfe-form .acf-radio-list{ grid-template-columns: minmax(0, 1fr); } } .acfe-form .acf-radio-list li{ margin: 0; padding: 0; list-style: none; /* Override ACF plugin CSS `ul.acf-radio-list li { font-size: 13px }` so labels can inherit the form's 26px body text size. */ font: inherit; } .acfe-form .acf-radio-list label{ display: inline-flex; align-items: center; gap: .5em; cursor: pointer; font: inherit; color: inherit; font-size: .7em; line-height: 1.3; } .acfe-form .acf-radio-list input[type="radio"]{ appearance: none; -webkit-appearance: none; width: 1.1em; height: 1.1em; margin: 0; padding: 0; border: 1px solid var(--color-olive, #698473); border-radius: 50%; background: transparent; cursor: pointer; flex-shrink: 0; display: inline-block; box-sizing: border-box; position: relative; /* Override generic `form input { border: 2px ... }` from earlier in file. */ box-shadow: none; transition: border-color .15s ease; } /* Only show the global focus ring for keyboard focus, not mouse click. */ .acfe-form .acf-radio-list input[type="radio"]:focus:not(:focus-visible){ outline: none; } .acfe-form .acf-radio-list input[type="radio"]::before{ content: ""; position: absolute; inset: 0; margin: auto; /* with inset:0 + explicit w/h, centers in both axes */ width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--color-olive, #698473); transform: scale(0); transition: transform .15s ease-in-out; } .acfe-form .acf-radio-list input[type="radio"]:checked::before{ transform: scale(1); } /* ************************************************************************************** */ /* Extra RTE stylings */ /* ************************************************************************************** */ @media screen and (max-width: 1024px) { p.introtext{ font-size: 1.57em; line-height: 1.25; font-weight: 500; letter-spacing: -.015em; } } li p.introtext{ margin-bottom: 0; } p.caption{ width: 85%; max-width: 960px; margin: 1.25em 0 .25em 0; font-size: 1em; font-weight: 600; } p.caption.no-margin-top{ margin-top: 0; } p.footnote{ margin: 12px 0 24px 0; font-size: 16px; } p.breadcrumbs{ margin-bottom: 0; font-size: .875em; } p.pre-headline{ font-size: 1.2em; line-height: 1.5; letter-spacing: -.015em; margin-bottom: .25em; font-weight: 500; } .rounded{ border-radius: 6px; overflow: hidden; } img.extra-margin, svg.extra-margin{ padding: 2.25em; } p:has(img){ margin-bottom: 0; } p:has(img) + p{ margin-top: 12px; } .abrovink-gallery{ background: #ff9f00 !important; } /* ************************************************************************************** */ /* a.button-primary + a.button-secondary (if implemented)*/ /* ************************************************************************************** */ a.button-primary, a.button-secondary{ display: inline-flex; flex-flow: row nowrap; align-items: center; margin: 0 .25em .25em 0; padding: .75em 1.25em .75em .825em; font-weight: 400; color: inherit; line-height: 1em; border: solid 1px var(--color-olive); background: transparent; border-radius: 100px; text-decoration: none; cursor: pointer; transition: all .2s; -webkit-tap-highlight-color: transparent; } a.button-primary::before, a.button-secondary::before{ content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 4px; background: no-repeat center center transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23698473; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); background-size: 18px 18px; } a.button-primary:hover, a.button-secondary:hover, a.button-primary:active, a.button-secondary:active{ color: #fff; border-color: #8a44bc; background-color: #8a44bc; } a.button-primary:hover::before, a.button-secondary:hover::before, a.button-primary:active::before, a.button-secondary:active::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); } /* color adjustments for buttons on olive green background */ .bg-olive a.button-primary, .bg-olive a.button-secondary{ color: var(--color-palepink); border-color: var(--color-palepink); } .bg-olive a.button-primary:hover, .bg-olive a.button-secondary:hover, .bg-olive a.button-primary:active, .bg-olive a.button-secondary:active{ border-color: #8a44bc; } .bg-olive a.button-primary::before, .bg-olive a.button-secondary::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23F8DFDA; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); } .bg-olive a.button-primary:hover::before, .bg-olive a.button-secondary:hover::before, .bg-olive a.button-primary:active::before, .bg-olive a.button-secondary:active::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); } /* ************************************************************************************** */ .read-more{ display: inline-flex; flex-flow: row nowrap; align-items: center; margin: 0 0 .5em 0; font-weight: 400; cursor: pointer; text-decoration: none; } .read-more::after{ content: ""; display: inline-block; width: 24px; height: 24px; margin-left: 6px; background: no-repeat center center transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); background-size: 24px 24px; transition: margin-left .2s; } a:hover .read-more::after{ margin-left: 12px; } ul.paketlista{ margin: .5em 0 3em 0; padding: 0; list-style: none; } ul.paketlista li{ margin: 0; padding: .5em 0; list-style: none; border-bottom: 1px solid var(--color-olive); } ul.paketlista li:first-child{ border-top: 1px solid var(--color-olive); } li.download, li.checkmark{ padding-left: 8px; } /* ************************************************************************************** */ /* .toggle-div */ /* button.toggle-button */ /* ************************************************************************************** */ .toggle-div{ padding-top: .275em; } .toggle-div.initially-hidden{ display: none; } .toggle-div p:empty{ display: none; } button.toggle-button{ display: inline-flex; flex-flow: row nowrap; align-items: flex-start; justify-content: space-between; margin: 1em 0 .15em 0; padding: 0; font-family: swear-display, serif; color: var(--color-olive); font-display: swap; font-optical-sizing: auto; font-size: 26px; line-height: 1.15; font-weight: 800; text-align: left; text-decoration: none; border: 0; background: transparent; cursor: pointer; } button.toggle-button::after{ flex-shrink: 0; content: ""; display: inline-block; width: 23px; height: 23px; margin-top: 7px; margin-left: .5em; border-radius: 50px; border: solid .05em var(--color-olive); background: no-repeat center center transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23698473; stroke-width: 2; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3Cline class='cls-1' x1='12' y1='18' x2='12' y2='6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 22px 22px; transition: transform .2s; } button.toggle-button.active::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23698473; stroke-width: 2; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3C/svg%3E"); transform: rotate(180deg); } .content-wrap button.toggle-button:first-child{ margin-top: 0; } /* ************************************************************************************** */ /* Pushes standalone content blocks to the bottom of their parent. Excludes .cell — grid cells should fill their track; bottom-aligning their content is handled by .va_bottom .content-wrap (line below). */ p.va_bottom, div.va_bottom:not(.cell), span.va_bottom{ margin-top: auto; margin-bottom: 0; } p.va_bottom .button-primary, p.va_bottom .button-secondary{ margin-bottom: 0; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .soft-hyphen::after{ display: block; float: none; clear: both; content: ""; } .clearfix::after{ content: ""; display: table; clear: both; } /* sticky footer */ html, body { height: 100%; } body { display: flex; flex-direction: column; } #main { flex: 1 0 auto; } #footer { flex-shrink: 0; } /* /sticky footer */ /* ************************************************************************************** */ /* Header, logo, nav */ /* ************************************************************************************** */ #header{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: auto; height: var(--header-height); margin: 0; background: url(gfx/texture-1280x319px-pink-v1.jpg) repeat top center var(--color-palepink); background-size: 1280px 319px; overflow: hidden; scrollbar-width: none; transition: all .4s ease; } #header .container{ width: 100%; max-width: unset; height: 100%; padding: 32px var(--content-padding-horiz) 0 var(--content-padding-horiz); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .scrolling #header{} .nav-expanded #header, .scrolling.nav-expanded #header{ height: 100vh; overflow-y: auto; } .nav-expanded #header{ background: url(gfx/texture-1280x319px-green-v1.jpg) repeat top center var(--color-olive); background-size: 1280px 319px; } #logo{ width: 48px; height: 50px; margin-left: -5px; flex-shrink: 0; transition: all .4s ease; } #logo img, #logo svg{ transition: all .4s ease; } .nav-expanded #logo{ opacity: 0; } .toggle-nav{ position: relative; right: -16px; } #nav{ position: relative; z-index: 100; width: 100%; transition: height .2s ease-out; pointer-events: none; } .nav-expanded #nav{ pointer-events: auto; } #nav ul{ margin: 24px 0 0 0; padding: 0; list-style: none; } #nav li{ position: relative; display: block; width: 100%; margin: 1px 0; padding: 0; list-style: none; } #nav a{ position: relative; display: inline-block; width: auto; padding: 6px 0; font-size: 36px; line-height: 1; letter-spacing: 0px; color: var(--color-palepink); font-weight: 500; text-decoration: none; transition: border .5s; } #nav a:hover{} #nav li.current-menu-item > a::before, #nav li.current_page > a::before, #nav li.current_page_item > a::before, #nav li.current-menu-ancestor > a::before{ position: absolute; left: -16px; display: block; content: "•"; } .mobile-nav-widgets{ display: none; position: fixed; bottom: 18px; width: calc(100% - ( var(--content-padding-horiz ) * 2 )); max-width: calc(100% - ( var(--content-padding-horiz ) * 2 )); color: var(--color-palepink); } .nav-expanded .mobile-nav-widgets{ display: block; } .nav-expanded .mobile-nav-widgets img{ width: 100%; margin-left: -1.25vw; } .mobile-nav-widgets p{ margin-bottom: 12px; font-size: 14px; } .mobile-nav-widgets a{ color: inherit; text-decoration: none; } @media screen and (min-width: 1024px) { #header, .nav-expanded #header, .scrolling #header, .scrolling.nav-expanded #header{ width: 100%; height: var(--header-height); background: url(gfx/texture-1280x319px-pink-v1.jpg) repeat top center var(--color-palepink); background-size: 1280px 319px; /*background: transparent;*/ } #header:hover{ overflow: visible; } #header .container{ display: flex; flex-flow: row nowrap; align-items: stretch; } #logo{ width: 56px; } .toggle-nav{ display: none; } .nav-expanded .mobile-nav-widgets{ display: none; } #nav{ width: auto; display: flex; flex-grow: 1; flex-flow: row nowrap; justify-content: flex-end; margin: 0; padding: 0; opacity: 1; line-height: 14px; overflow: visible; pointer-events: initial; } #nav ul{ float: none; width: auto; margin: 0; display: flex; align-items: center; } #nav li{ height: 70px; display: flex; align-items: flex-end; align-content: center; flex-grow: 0; margin: 0 8px; padding: 0; overflow: visible; white-space: nowrap; border-bottom: 0; opacity: 1; } #nav li a{ width: 100%; margin: 0 12px; padding: 28px 0; font-size: 17px; font-weight: 400; color: var(--color-olive); } /* perfect right column align of last menu item */ #nav li:last-child, #nav li:last-child a{margin-right: 0;} #nav li a:hover{} #nav li a.toggle-children{ display: none; } #nav li.current-menu-item > a, #nav li.current_page > a, #nav li.current_page_item > a, #nav li.current-menu-ancestor > a{} #nav li a::before{ opacity: 0; transition: opacity .25s ease-out; } #nav li a::before, #nav li.current-menu-item > a::before, #nav li.current_page > a::before, #nav li.current_page_item > a::before, #nav li.current-menu-ancestor > a::before{ position: absolute; left: -12px; display: block; margin-top: -2px; content: "•"; font-size: 1.15em; line-height: 1; font-weight: 700; } #nav li a:hover::before, #nav li.current-menu-item > a::before, #nav li.current_page > a::before, #nav li.current_page_item > a::before, #nav li.current-menu-ancestor > a::before{ opacity: 1; } /* arrow down, has children indicator */ #nav li.menu-item-has-children a span::after{ position: relative; top: 6px; display: inline-block; width: 24px; height: 24px; margin-left: 2px; padding: auto; background: no-repeat center center transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='8.4 6.92 13.48 12 8.4 17.08 9.81 18.49 16.31 12 9.81 5.51 8.4 6.92'/%3E%3C/svg%3E"); background-size: 24px 24px; content: ""; transform: rotate(90deg); transition: transform .2s; transition-delay: .15s; } #nav li.menu-item-has-children:hover a span::after{ transform: rotate(270deg); } /* level 2 */ #nav li ul{ position: absolute; left: 0; top: 100%; display: block; min-width: 600px; margin: 0 0 0 8px; padding: 24px 0; opacity: 0; background: #fff; transition: margin .75s, opacity .25s; pointer-events: none; } #nav ul li:hover ul{ opacity: 1; transition: margin .5s, opacity .5s; pointer-events: auto; } /* dropdown underlay */ #nav li.menu-item-has-children ul::before{ position: fixed; left: 0; top: var(--header-height); z-index: 0; width: 100vw; height: 0; background: rgba(255,255,255, 1); content: ""; pointer-events: none; transition: margin .4s ease, height .25s, opacity .25s; } .scrolling nav li.menu-item-has-children ul::before{ margin-top: -44px; } #nav li.menu-item-has-children:hover ul::before{ height: 320px; } #nav li li{ position: relative; display: none; height: auto; white-space: normal; margin: 0; padding: 0; background-image: none; } #nav li li:first-child{} #nav li li:last-child{ padding-bottom: 16px; } #nav ul li:hover ul li{ display: block; float: none; clear: both; } #nav li li a, #nav li .current-menu-item > a, #nav li .current_page > a, #nav li .current_page_item > a, #nav li .current-menu-ancestor > a{ display: inline-block; margin: 0; padding: 0; padding: 12px 8px; } #nav li li a{} #nav li li a::after{ display: none; } #nav li.menu-item-has-children li a span::after{ top: 0; width: 22px; height: 22px; background: no-repeat center center transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); background-size: 22px 22px; transform: rotate(0) !important; transition: margin-left .2s; transition-delay: 0; } #nav li.menu-item-has-children:hover li:hover a span::after{ transform: rotate(0) !important; margin-left: 16px; } #nav li .current-menu-item, #nav li .current_page, #nav li .current_page_item, #nav li .current-menu-ancestor{ border-bottom: 0; } #nav li .current-menu-item > a, #nav li .current_page > a, #nav li .current_page_item > a, #nav li .current-menu-ancestor > a{} } @media screen and (min-width: 1440px) { #nav li a{ font-size: 19px; } } /* ************************************************************************************** */ /* Exceptions for body.home + 404 */ body.home, body.error404{ color: var(--color-palepink); background: url(gfx/texture-1280x319px-green-v1.jpg) repeat top center var(--color-olive); background-size: 1280px 319px; } body.home .content-wrap a, body.error404 .content-wrap a{ color: inherit; text-decoration-color: currentColor; } /* Home + 404 header stays transparent when the nav is closed. When nav opens, `.nav-expanded #header` (above) paints the olive texture. */ html:not(.nav-expanded) body.home #header, html:not(.nav-expanded) body.error404 #header{ background: transparent; } body.home .hamburger-inner, body.home .hamburger-inner::before, body.home .hamburger-inner::after, body.error404 .hamburger-inner, body.error404 .hamburger-inner::before, body.error404 .hamburger-inner::after{ background-color: var(--color-palepink); } body.home #nav li a, body.error404 #nav li a{ color: var(--color-palepink); } /* /Exceptions for body.home + 404 */ body.bg_white{ background-color: #fff; color: var(--color-olive); } body.bg_white #header{} html.nav-expanded body.bg_white #header{ background-color: var(--color-olive); } /* ************************************************************************************** */ .pad{ padding: 0 var(--section-padding-horiz); } .container{ width: 100%; max-width: 1680px; /* some sections have 100% max-width */ margin: 0 auto; } .page-section.fullwidth .container{ max-width: unset; } #main{ margin-top: var(--header-height); /* set to same as header height */ padding: 0; transition: all .4s ease; } /* ************************************************************************************** */ /* ************************************************************************************** */ /* page sections */ /* ************************************************************************************** */ .page-section{ position: relative; z-index: 1; margin: 0; padding: var(--section-padding-vert) 0; background: url() no-repeat center center transparent; } /* backgrounds for sections, cells and whatnots */ .bg-white{ background: #fff; color: inherit; } .bg-transparent{ background: transparent; color: inherit; } .bg-inherit{ background: inherit; } .bg-image{ background: url() no-repeat center center transparent; background-size: cover; } .bg-palepink{ background: url(gfx/texture-1280x319px-pink-v1.jpg) repeat top center var(--color-palepink); background-size: 1280px 319px; } .bg-olive{ background: url(gfx/texture-1280x319px-green-v1.jpg) repeat top center var(--color-olive); background-size: 1280px 319px; color: var(--color-palepink) !important; } .page-section.no-padding-top{ padding-top: 0; } .page-section.no-padding-bottom{ padding-bottom: 0; } .page-section.extra-padding-top{ padding-top: calc( var(--section-padding-vert) * 3 ); } .page-section.extra-padding-bottom{ padding-bottom: calc( var(--section-padding-vert) * 3 ); } /* generic alignment and padding classes for content-wrap divs */ .va_top .content-wrap{ align-self: flex-start; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .va_middle .content-wrap{ align-self: center; } .va_bottom .content-wrap{ align-self: flex-end; margin-top: auto; } /* padding for content-wrap containers */ .content-wrap{ padding: var(--content-padding-vert) var(--content-padding-horiz); /* Fill the cell's main axis. Without this, as a flex item with flex-basis:auto, content-wrap sizes to its content's width — which collapses to ~0 when the child has overflow:hidden. */ width: 100%; min-width: 0; } .content-wrap.pad-nopad{ padding: 0; } .content-wrap.pad-extra-vertical{ padding-top: calc(var(--content-padding-vert)*2); padding-bottom: calc(var(--content-padding-vert)*2); } .content-wrap.pad-extra-horizontal{ padding-left: calc(var(--content-padding-horiz)*2); padding-right: calc(var(--content-padding-horiz)*2); } .content-wrap.pad-extra-both{ padding: calc(var(--content-padding-vert)*2); } .content-wrap.pad-only-vertical{ padding-left: 0; padding-right: 0; } .content-wrap.pad-only-horizontal{ padding-top: 0; padding-bottom: 0; } .col{ border-radius: var(--border-radius); overflow: hidden; } /* ************************************************************************************** */ /* Need to construct a consequent way to override default widths, padding and alignment on section intro, column content and images etc!! */ /* ************************************************************************************** */ .section-intro, .section-outro{ display: block; width: 100%; max-width: var(--content-wrap-max-width); margin: 0 auto 0 0; padding: /*var(--content-padding-vert) var(--content-padding-horiz);*/ } .section-intro{ padding-bottom: var(--content-padding-vert); } .section-outro{ padding-top: var(--content-padding-vert); } .centered .section-intro, .centered .section-outro{ margin: 0 auto; } /* ************************************************************************************** */ /* .page-section.hero-home */ /* ************************************************************************************** */ .page-section.hero-home{ position: unset; padding: 0; } .page-section.hero-home .container{ padding: 0 var(--content-padding-horiz); display: flex; height: auto; min-height: calc( var(--vh, 1vh) * 100 - var(--header-height )); flex-flow: row wrap; align-items: flex-end; } .page-section.hero-home .content-wrap{ width: 100%; padding: 0; } .page-section.hero-home .inner-image{ width: 60%; margin-bottom: 24px; } .page-section.hero-home .image-wrap{ width: 100%; padding: 0 0 18px 0; } /* text logo in bottom */ .page-section.hero-home .image-wrap img{ width: 100%; margin-left: -1vw; } .page-section.hero-home .inner-content{ max-width: 1180px; } .hero-home h1{ font-size: 32px; margin: 0 0 .75em 0; } @media screen and (min-width: 1024px) { .page-section.hero-home .content-wrap{ display: flex; align-items: flex-end; } .page-section.hero-home .inner-image{ position: relative; z-index: 999; width: 35%; margin-bottom: 0px; } .page-section.hero-home .inner-content{ width: 65%; padding-left: 24px; } .page-section.hero-home .inner-content p:last-child{ margin-bottom: 0; } .hero-home h1{ font-size: 2.81vw; } } @media screen and (min-width: 1920px) { .page-section.hero-home .container{ height: auto; min-height: calc( var(--vh, 1vh) * 100 - var(--header-height )); } .hero-home h1{ font-size: 54px; } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* .page-section.hero-standard */ /* ************************************************************************************** */ .page-section.hero-standard .container{ margin-bottom: 2em; padding: 0 var(--content-padding-horiz); display: flex; flex-flow: column wrap; } .page-section.hero-standard .image-wrap{ order: 1; } .page-section.hero-standard .content-wrap{ order: 3; padding: 0; } .page-section.hero-standard .heading-wrap{ order: 2; margin: 3.75em 0 0 0; } @media screen and (max-width: 1279.99px) { /* alternate ordering */ .page-section.hero-standard.alt-order .container{ margin-bottom: 0; } .page-section.hero-standard.alt-order .image-wrap{ order: 1; } .page-section.hero-standard.alt-order .content-wrap{ order: 2; margin: 3.75em 0 0 0; } .page-section.hero-standard.alt-order .heading-wrap{ order: 3; } .page-section.hero-standard.alt-order .content-wrap :last-child{ margin-bottom: 1em; } .page-section.hero-standard.alt-order .heading-wrap{ margin-top: 0; } } @media screen and (min-width: 1280px) { .page-section.hero-standard .container{ position: relative; margin-bottom: 4em; padding: var(--content-padding-vert) var(--content-padding-horiz); display: flex; flex-flow: row nowrap; justify-content: space-between; } .page-section.hero-standard .image-wrap{ width: 64%; order: unset; } .page-section.hero-standard .content-wrap{ width: 33.33%; align-self: center; order: unset; } .page-section.hero-standard .heading-wrap{ position: absolute; bottom: -1.5em; z-index: 99; padding: 0; order: unset; } .page-section.hero-standard.reverse-layout .image-wrap{ order: 1; } .page-section.hero-standard.reverse-layout .content-wrap{ order: 3; } .page-section.hero-standard.reverse-layout .heading-wrap{ order: 2; right: 0; left: auto; padding: 0 var(--content-padding-horiz); } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* .page-section.portfolio-item-hero */ /* ************************************************************************************** */ .page-section.portfolio-item-hero{ margin: 0; padding: var(--section-padding-vert) 0; z-index: 10; } .portfolio-item-hero .container{ position: relative; z-index: 99; padding: var(--section-padding-vert) var(--content-padding-horiz); } .section-backdrop{ position: absolute; top: -100px; left: 0; right: 0; bottom: 100px; z-index: 1; width: 100%; height: 100%; } .section-backdrop::after{ display: block; content: ""; width: 100%; height: 100%; background: url(gfx/bg.png) repeat top center; background-size: 1280px 319px; } .section-backdrop.noise-opacity-0::after{ opacity: 0; } .section-backdrop.noise-opacity-20::after{ opacity: .2; } .section-backdrop.noise-opacity-40::after{ opacity: .4; } .section-backdrop.noise-opacity-60::after{ opacity: .6; } .section-backdrop.noise-opacity-80::after{ opacity: .8; } .section-backdrop.noise-opacity-100::after{ opacity: 1; } .portfolio-item-hero h1{ margin-bottom: calc( var(--section-padding-vert) * 4 ); } @media screen and (min-width: 1024px){ .portfolio-item-hero h1{ margin-bottom: calc( var(--section-padding-vert) * 6 ); } .section-backdrop{ top: -300px; bottom: 300px; } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* .breadcrumbs-wrap */ /* ************************************************************************************** */ .breadcrumbs-wrap{ font-size: .825em; opacity: .75; } .breadcrumbs-wrap ul{ margin: 2em 0 .25em 0; padding: 0; list-style: none; } .breadcrumbs-wrap li{ display: inline-block; margin: 0; padding: 0; } .breadcrumbs-wrap li::after{ content: "/"; } .breadcrumbs-wrap li:last-child::after{ content: ""; } .breadcrumbs-wrap li a, .breadcrumbs-wrap li span{ display: inline-block; padding: 0 3px; text-decoration: none; color: inherit; } .breadcrumbs-wrap li a:hover{ text-decoration: underline; } /* ************************************************************************************** */ /* ************************************************************************************** */ /* page-section.standard-content */ /* /* .page-section [cols_33-66|cols_66-33|cols_33-33-33|cols_50_centered|cols_66_centered|cols_100] .pad .container .col [cell-1] .content-wrap [pad-default|pad-extra-vertical|pad-extra-horizontal|pad-extra-both|pad-only-vertical|pad-only-horizontal|pad-nopad] .col [cell-2] .content-wrap [pad-default|pad-extra-vertical|pad-extra-horizontal|pad-extra-both|pad-only-vertical|pad-only-horizontal|pad-nopad] .col [cell-3] .content-wrap [pad-default|pad-extra-vertical|pad-extra-horizontal|pad-extra-both|pad-only-vertical|pad-only-horizontal|pad-nopad] /* /* ************************************************************************************** */ .page-section.standard-content .container{ display: flex; flex-flow: row wrap; justify-content: center; align-items: stretch; } .standard-content .col{ position: relative; display: flex; flex-flow: row wrap; justify-content: flex-start; width: 100%; } .standard-content .content-wrap{ width: 100%; max-width: var(--content-wrap-max-width); display: flex; flex-flow: column; } /* flip order on mobile */ .standard-content.rev-on-mobile .cell-1{ order: 2; } .standard-content.rev-on-mobile .cell-2{ order: 1; } @media screen and (min-width: 1280px) { .standard-content .cell-1, .standard-content .cell-2{ width: 50%; } .cols_33-66 .cell-1, .cols_66-33 .cell-2{ width: 33.33%; } .cols_33-66 .cell-2, .cols_66-33 .cell-1{ width: 66.66%; } .cols_33-33-33 .cell-1, .cols_33-33-33 .cell-2, .cols_33-33-33 .cell-3{ width: 33.33%; } .cols_50_centered .content-wrap{ margin-left: auto; margin-right: auto; } .cols_50_centered .cell-1, .cols_50_centered .cell-2{ width: 50%; margin-left: auto; margin-right: auto;} .cols_50_centered .content{ width: 100%; max-width: var(--content-wrap-max-width); margin-left: auto; margin-right: auto; } .cols_66_centered .content-wrap{ margin-left: auto; margin-right: auto; } .cols_66_centered .cell-1, .cols_66_centered .cell-2{ width: 66.66%; margin-left: auto; margin-right: auto;} .cols_66_centered .content{ width: 100%; margin-left: auto; margin-right: auto; } .cols_100 .content{ width: 100%; max-width: none; } .cols_100 .col{ width: 100%; } .col{ display: flex; flex-flow: row wrap; align-items: center; background-repeat: no-repeat; background-size: cover; } /* reset order from mobile */ .standard-content.rev-on-mobile .cell-1, .standard-content.rev-on-mobile .cell-2{ order: unset; } .inner-bg .col.cell-1{ border-radius: var(--border-radius) 0 0 var(--border-radius); } .inner-bg .col.cell-2{ border-radius: 0 var(--border-radius) var(--border-radius) 0; } .inner-bg .col.cell-1 .content-wrap.pad-default{ padding-right: 0; } .inner-bg .col.cell-2 .content-wrap.pad-default{ padding-left: 0; } .page-section.w66 .items-container, .page-section.w66 .section-wrap, .page-section.w50 .items-container, .page-section.w50 .section-wrap{ margin-left: auto; margin-right: auto; } .page-section.w66 .items-container, .page-section.w66 .section-wrap{ max-width: 66.66%; } .page-section.w50 .items-container, .page-section.w50 .section-wrap{ max-width: 50%; } /* background image bleed left/right */ .standard-content.bg-bleed-left .cell-1, .standard-content.bg-bleed-right .cell-2{ overflow: visible; } .standard-content.bg-bleed-left .cell-1::before, .standard-content.bg-bleed-right .cell-2::before{ position: absolute; top: 0; display: block; width: 50vw; height: 100%; content: ""; background: inherit; } .standard-content.bg-bleed-left .cell-1::before{ right: 0; } .standard-content.bg-bleed-right .cell-2::before{ left: 0; } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* page-section.call-to-action */ /* /* .page-section [...] .pad .container .section-intro (for heading) .content-wrap .button-wrap .image-wrap */ /* ************************************************************************************** */ .page-section.call-to-action{ padding-bottom: 0; } .call-to-action .container{ display: flex; flex-flow: row wrap; align-items: flex-end; } .call-to-action .content-wrap{ margin-bottom: 0; padding-bottom: 0; } .call-to-action .content-wrap :last-child{ margin-bottom: 0; } .call-to-action .image-wrap{ max-width: 540px; } @media screen and (min-width: 1024px){ .call-to-action .content-wrap{ width: 66%; padding: var(--content-padding-vert) var(--content-padding-horiz); order: 2; } .call-to-action .content-wrap :last-child{ margin-bottom: .5em; } .call-to-action .image-wrap{ width: 33%; max-width: unset; order: 1; } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* boxes | grid | panels etc - new version */ /* featured items, article listing, etc /* ************************************************************************************** */ .page-section.featured-items{} .featured-items a{ text-decoration: none; } .items-container{ display: grid; grid-gap: 24px; grid-template-columns: 1fr; } .featured-items .items-container.list{ display: block; } /* .boxes */ .items-container.boxes{ display: flex; } .items-container.boxes .item{ position: relative; display: flex; flex-flow: column nowrap; justify-content: flex-start; width: 100%; overflow: hidden; border-radius: var(--border-radius); padding: 0; text-decoration: none; } .items-container.boxes .content-wrap, .items-container.panels .content-wrap{ display: flex; flex-flow: column; width: 100%; height: 100%; margin: 0 auto; padding: 24px; font-size: 16px; } .items-container.boxes .image-wrap, .items-container.columns .image-wrap{ margin: 0; background: url() no-repeat center center transparent; background-size: cover; } .items-container.boxes .image-wrap img, .items-container.columns .image-wrap img{ width: 100%; } /* ************************************************************************************** */ /* .carousel */ /* ************************************************************************************** */ .layout-carousel .pad{ overflow: hidden; /* Needed to avoid horizontal page scroll */ } .items-container.carousel .slick-list{ overflow: visible; } .items-container.carousel{ padding-left: var(--content-padding-horiz); } .carousel .item{ width: 325px; max-width: 72vw; margin-right: 12px; /* gap between items */ color: var(--color-olive); } .carousel .content-wrap{ min-height: 350px; margin-bottom: 40px; /*padding: 30px;*/ display: flex; flex-flow: column wrap; justify-content: space-between; } @media screen and (min-width: 768px){ .carousel .item{ width: 380px; } } @media screen and (min-width: 1024px){ .carousel .item{ width: 480px; } } @media screen and (min-width: 1280px) { .carousel .item{ width: 540px; margin-right: 24px; /* gap between items */ } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* .slideshow */ /* ************************************************************************************** */ .layout-slideshow .pad{ overflow: hidden; /* Needed to avoid horizontal page scroll */ } /* ************************************************************************************** */ /* ************************************************************************************** */ /* .page-section.testimonials */ /* ************************************************************************************** */ .page-section.testimonials .slideshow.items-container{ color: var(--color-olive); margin: 0 var(--content-padding-horiz); padding: calc(var(--content-padding-vert) * 2) 0 ; border-top: solid 2px var(--border-color); } .testimonials .item > blockquote, .testimonials .item > figcaption{ width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; } .testimonials .item > figcaption{ text-align: left; } .testimonials figcaption.quotee{ font-size: 1em; font-weight: 400; } /* Vertically center quote/cite within each slide. The figure.item is the slick-slide directly (no inner wrapper), so the track stretches it to full track height. Don't set an explicit height on the item — height:100% resolves circularly against the flex track and breaks the stretch, leaving the item shrunk to content height. */ .page-section.testimonials .slideshow.items-container .slick-track{ display: flex; align-items: stretch; } .page-section.testimonials .slideshow.items-container .slick-slide{ height: auto; float: none; } .page-section.testimonials .slideshow.items-container .item{ display: flex; flex-direction: column; justify-content: center; } /* Per-slide countdown progress bar — replaces the items-container bottom border */ .page-section.testimonials .slick-progress{ position: relative; height: 2px; margin: 0 var(--content-padding-horiz); background: transparent; overflow: hidden; } @media screen and (min-width: 1024px){ /* Pull progress up to sit flush against items-container's box bottom (items-container has margin-bottom: var(--content-padding-vert) at this breakpoint), then re-add the same space below so section spacing is preserved. */ .page-section.testimonials .slick-progress{ margin-top: calc(-1 * var(--content-padding-vert)); margin-bottom: var(--content-padding-vert); } } .page-section.testimonials .slick-dots{ display: none !important; } .page-section.testimonials .slick-progress span{ display: block; height: 100%; width: 0; background: var(--color-olive); transform-origin: left center; } .page-section.testimonials .slick-progress span.run{ animation-name: slickCountdown; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes slickCountdown{ from { width: 0; } to { width: 100%; } } @media screen and (min-width: 1024px){ .page-section.testimonials .slideshow.items-container{ margin: var(--content-padding-vert) var(--content-padding-horiz); padding: var(--content-padding-vert) 0; } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* .panels - expandable panels */ /* ************************************************************************************** */ .items-container.panels .item{ position: relative; display: flex; flex-flow: column nowrap; justify-content: flex-start; width: 100%; overflow: hidden; border-radius: var(--border-radius); padding: 0; text-decoration: none; box-shadow: none; background: transparent !important; } .items-container.panels .item .panel-wrap{ border-radius: var(--border-radius) } html.js .panels .item.has-more{ cursor: pointer; } html.js .panels .item.has-more .content-wrap{ max-height: 260px; padding-bottom: 48px; overflow: hidden; transition: max-height .4s ease; border-radius: 0 0 var(--border-radius) var(--border-radius); } html.js .panels .item.has-more.active .content-wrap{ height: auto; max-height: 1200px; transition: max-height .5s ease; } /* click indicator */ html.js .panels .item.has-more .content-wrap::after{ position: absolute; bottom: 24px; z-index: 200; display: block; width: 24px; height: 24px; content: ""; border-radius: 50%; background: no-repeat center center #dbe2e7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %230b3b5b; stroke-width: 2; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3Cline class='cls-1' x1='12' y1='18' x2='12' y2='6'/%3E%3C/g%3E%3C/svg%3E"); background-size: 24px 24px; transition: transform .4s; } html.js .panels .item.active.has-more .content-wrap::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %230b3b5b; stroke-width: 2; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3C/svg%3E"); transform: rotate(180deg); } /* item background - panel version, will not grow height when panel is open */ .items-container.panels .item.bg-white .content-wrap, .items-container.panels .item.bg-white .image-wrap{ background: #fff; color: var(--color-olive); } .items-container.panels .item.bg-warmwhite .content-wrap, .items-container.panels .item.bg-warmwhite .image-wrap{ background-color: var(--color-palepink); color: var(--color-olive); } .items-container.panels .item.bg-darkgreen .content-wrap, .items-container.panels .item.bg-darkgreen .image-wrap{ background-color: var(--color-olive); color: #fff; } /* gradient cover */ html.js .panels .item.has-more .panel-wrap::before{ position: absolute; bottom: 0; z-index: 20; width: 100%; height: 180px; content: ""; background: linear-gradient(0deg, rgba(255,255,255,1) 54px, rgba(255,255,255,0) 100%); transition: opacity .4s ease-out; border-radius: var(--border-radius); } html.js .panels .item.bg-white .panel-wrap::before{ background: linear-gradient(0deg, rgba(255,255,255,1) 54px, rgba(255,255,255,0) 100%); } html.js .panels .item.bg-lightgray .panel-wrap::before{ background: linear-gradient(0deg, rgba(248,249,250,1) 54px, rgba(248,249,250,0) 100%); } html.js .panels .item.bg-darkblue .panel-wrap::before{ background: linear-gradient(0deg, rgba(11,59,91,1) 54px, rgba(11,59,91,0) 100%); } /* gradient cover background color adjustments */ html.js .panels .item.active.has-more .panel-wrap::before{ opacity: 0; transition: opacity .4s ease-in; } /* .cards - image on the left, content on the right? */ /* Not constructed yet. */ /* .columns - boxes without borders, backgrounds or box shadows */ /* Not constructed yet. */ /* .list - just a plain list */ /* Not constructed yet. */ /* ************************************************************************************** */ /* Equal-height slides in featured-items carousels. Slick defaults to float layout, letting each slide size to its own content height. Flex track + align-items:stretch snaps every slide to the tallest one (useful for cards with varying text lengths). */ .page-section.featured-items .slick-track{ display: flex !important; align-items: stretch; } .page-section.featured-items .slick-slide{ height: auto !important; float: none !important; } /* ************************************************************************************** */ /* .page-section.featured-items.steps */ /* ************************************************************************************** */ .featured-items.steps{ padding-bottom: calc( var(--section-padding-vert) * 2 ); } .featured-items.steps .item{ color: var(--color-olive); } .featured-items.steps .item h3{ margin: 0 0 24px 0; font-family: "dm-sans", sans-serif; font-weight: 100; font-style: normal; font-display: swap; font-optical-sizing: auto; font-size: 58px; line-height: 58px; text-align: right; } .steps .item .content-wrap{ min-height: 400px; margin-bottom: 0; justify-content: flex-start; font-size: .85em; } .steps .item .content-wrap:last-child{ margin-bottom: 0; } @media screen and (min-width: 1280px){ .steps .item .content-wrap{ min-height: 460px; font-weight: 300; } .featured-items.steps .item h3{ font-size: 6em; line-height: 1em; } } @media screen and (min-width: 1440px){ } /* ************************************************************************************** */ /* ************************************************************************************** */ /* .page-section.grid-section */ /* ************************************************************************************** */ .page-section.grid-section { padding: var(--content-padding-vert) 0; } .grid-section .container { padding: 0 var(--content-padding-horiz); } .grid-section .row-wrap { width: 100%; display: flex; flex-flow: row wrap; gap: var(--gutter); padding-bottom: var(--gutter); } .grid-section .row-wrap:last-child{ padding-bottom: 0; } .grid-section .cell { position: relative; z-index: 10; display: flex; flex-flow: row wrap; width: 100%; /* Grid items default min-width: auto which sizes to content — without this, wide children (carousels, iframes) balloon out past the grid-track width instead of respecting it. */ min-width: 0; text-decoration: none; } /* ## Mobile — all cells full width by default */ /* Narrow screen: 2-column pairs (cells that share a row on small screens) */ .grid_3_1 .cell, .grid_2_2 .cell { width: calc(50% - var(--gutter) / 2); } /* Override: force full width on small screens for all grid types */ @media screen and (max-width: 1023.99px) { .grid-section .cell { width: 100% !important; } } /* ************************************************************************************** */ /* Desktop grid layouts — min-width: 1024px */ /* ************************************************************************************** */ @media screen and (min-width: 1024px) { .grid-section .row-wrap { display: grid; --col: calc((100% - 11 * var(--gutter)) / 12); grid-template-columns: repeat(12, var(--col)); gap: var(--gutter); width: 100%; margin: 0; } .grid-section .cell { width: auto; /* let grid control sizing */ aspect-ratio: unset !important; text-decoration: none; } /* ----------------------------------------------------------------------- ## 4-column based layouts Each "column unit" = 3 grid cols | 4 col basis = 12 grid cols ----------------------------------------------------------------------- */ /* --- 1 cell --- */ /* 4x1: full width, short (aspect 4:1) */ .grid_4x1 .cell-1 { grid-column: span 12; aspect-ratio: 4 / 1; } /* 4x2: full width, medium (aspect 2:1) */ .grid_4x2 .cell-1 { grid-column: span 12; aspect-ratio: 2 / 1; } /* --- 2 cells --- */ /* 1+3: narrow left, wide right */ .grid_1_3 .cell-1 { grid-column: span 3; aspect-ratio: 1 / 1; } .grid_1_3 .cell-2 { grid-column: span 9; } /* 3+1: wide left, narrow right */ .grid_3_1 .cell-1 { grid-column: span 9; } .grid_3_1 .cell-2 { grid-column: span 3; aspect-ratio: 1 / 1; } /* 2+2: equal halves */ .grid_2_2 .cell-1 { grid-column: span 6; aspect-ratio: 2 / 1; } .grid_2_2 .cell-2 { grid-column: span 6; } /* 2x2+2x2: two square halves */ .grid_2x2_2x2 .cell-1 { grid-column: span 6; aspect-ratio: 1 / 1; } .grid_2x2_2x2 .cell-2 { grid-column: span 6; } /* --- 3 cells --- */ /* 1+1+2: two narrow left, wide right */ .grid_1_1_2 .cell-1 { grid-column: span 3; aspect-ratio: 1 / 1; } .grid_1_1_2 .cell-2 { grid-column: span 3; } .grid_1_1_2 .cell-3 { grid-column: span 6; } /* 2+1+1: wide left, two narrow right */ .grid_2_1_1 .cell-1 { grid-column: span 6; } .grid_2_1_1 .cell-2 { grid-column: span 3; } .grid_2_1_1 .cell-3 { grid-column: span 3; aspect-ratio: 1 / 1; } /* 3x2+1+1: large tall-ish left (spans 2 rows), two stacked right */ .grid_3x2_1_1 .row-wrap { grid-template-rows: auto auto; } .grid_3x2_1_1 .cell-1 { grid-column: span 9; grid-row: span 2; aspect-ratio: 3 / 2; } .grid_3x2_1_1 .cell-2 { grid-column: span 3; } .grid_3x2_1_1 .cell-3 { grid-column: span 3; } /* 1+1+3x2: two stacked left, large tall-ish right (spans 2 rows) */ .grid_1_1_3x2 .row-wrap { grid-template-rows: auto auto; } .grid_1_1_3x2 .cell-1 { grid-column: span 3; } .grid_1_1_3x2 .cell-2 { grid-column: 4 / span 9; grid-row: span 2; aspect-ratio: 3 / 2; } .grid_1_1_3x2 .cell-3 { grid-column: span 3; } /* --- 4 cells --- */ /* 1+1+1+1: four equal quarters */ .grid_1_1_1_1 .cell { grid-column: span 3; aspect-ratio: 1 / 1; } /* 2x2+2+1+1: large square top-left, wide top-right, two bottom-right */ .grid_2x2_2_1_1 .cell-1 { grid-column: span 6; grid-row: span 2; aspect-ratio: 1 / 1; } .grid_2x2_2_1_1 .cell-2 { grid-column: span 6; } .grid_2x2_2_1_1 .cell-3 { grid-column: span 3; } .grid_2x2_2_1_1 .cell-4 { grid-column: span 3; } /* 2x2+1+1+2: large square top-left, two top-right, wide bottom-right */ .grid_2x2_1_1_2 .cell-1 { grid-column: span 6; grid-row: span 2; aspect-ratio: 1 / 1; } .grid_2x2_1_1_2 .cell-2 { grid-column: span 3; } .grid_2x2_1_1_2 .cell-3 { grid-column: span 3; } .grid_2x2_1_1_2 .cell-4 { grid-column: span 6; } /* 1+1+2+2x2: two top-left, wide bottom-left, large square right */ .grid_1_1_2_2x2 .cell-1 { grid-column: span 3; } .grid_1_1_2_2x2 .cell-2 { grid-column: span 3; } .grid_1_1_2_2x2 .cell-3 { grid-column: span 6; grid-row: span 2; aspect-ratio: 1 / 1; } .grid_1_1_2_2x2 .cell-4 { grid-column: span 6; } /* 2+1+1+2x2: wide top-left, two top-right, large square bottom-right */ .grid_2_1_1_2x2 .cell-1 { grid-column: span 6; } .grid_2_1_1_2x2 .cell-2 { grid-column: span 6; grid-row: span 2; aspect-ratio: 1 / 1;} .grid_2_1_1_2x2 .cell-3 { grid-column: span 3; } .grid_2_1_1_2x2 .cell-4 { grid-column: span 3; } /* --- 5 cells --- */ /* 2x2+1+1+1+1: large square top-left, four quarters right/bottom */ .grid_2x2_1_1_1_1 .cell-1 { grid-column: span 6; grid-row: span 2; aspect-ratio: 1 / 1; } .grid_2x2_1_1_1_1 .cell-2, .grid_2x2_1_1_1_1 .cell-3, .grid_2x2_1_1_1_1 .cell-4, .grid_2x2_1_1_1_1 .cell-5 { grid-column: span 3; aspect-ratio: 1 / 1; } /* 1+1+1+1+2x2: four quarters left/top, large square bottom-right */ .grid_1_1_1_1_2x2 .cell-3 { grid-column: span 6; grid-row: span 2; aspect-ratio: 1 / 1; } .grid_1_1_1_1_2x2 .cell-1, .grid_1_1_1_1_2x2 .cell-2, .grid_1_1_1_1_2x2 .cell-5, .grid_1_1_1_1_2x2 .cell-4 { grid-column: span 3; aspect-ratio: 1 / 1; } /* ----------------------------------------------------------------------- ## 3-column based layouts Each "column unit" = 4 grid cols | 3 col basis = 12 grid cols ----------------------------------------------------------------------- */ /* --- 1 cell --- */ .grid_3x1 .cell-1 { grid-column: span 12; aspect-ratio: 3 / 1; } .grid_3x2 .cell-1 { grid-column: span 12; aspect-ratio: 3 / 2; } /* --- 2 cells --- */ .grid_1_2 .cell-1 { grid-column: span 4; } .grid_1_2 .cell-2 { grid-column: span 8; } .grid_2_1 .cell-1 { grid-column: span 8; } .grid_2_1 .cell-2 { grid-column: span 4; } /* --- 3 cells --- */ .grid_1_1_1 .cell { grid-column: span 4; } .grid_1x2_1x2_1x2 .cell { grid-column: span 4; } /* 2x2+1+1: large square left spans 2 rows, two stacked right */ .grid_2x2_1_1 .cell-1 { grid-column: span 8; grid-row: span 2; } .grid_2x2_1_1 .cell-2 { grid-column: span 4; } .grid_2x2_1_1 .cell-3 { grid-column: span 4; } /* 1+1+2x2: two stacked left, large square right spans 2 rows */ .grid_1_1_2x2 .cell-1 { grid-column: span 4; } .grid_1_1_2x2 .cell-2 { grid-column: span 8; grid-row: span 2; } .grid_1_1_2x2 .cell-3 { grid-column: span 4; } /* --- 5 cells --- */ /* 1x2+1+1+1+1: tall left spans 2 rows, four quarters right */ .grid_1x2_1_1_1_1 .cell-1 { grid-column: span 4; grid-row: span 2; } .grid_1x2_1_1_1_1 .cell-2, .grid_1x2_1_1_1_1 .cell-3, .grid_1x2_1_1_1_1 .cell-4, .grid_1x2_1_1_1_1 .cell-5 { grid-column: span 4; } /* 1+1+1+1+1x2: four quarters left, tall right spans 2 rows */ .grid_1_1_1_1_1x2 .cell-1, .grid_1_1_1_1_1x2 .cell-2, .grid_1_1_1_1_1x2 .cell-4, .grid_1_1_1_1_1x2 .cell-5 { grid-column: span 4; } .grid_1_1_1_1_1x2 .cell-3 { grid-column: span 4; grid-row: span 2; } } /* Experiment or setting: remove aspect ratio on all grid items - additional css class on page section */ .page-section.grid-section.no-aspect-ratio .row-wrap .cell{ /*aspect-ratio: unset !important;*/ } /* Special adaptions - additional css class on page section */ .portfolio-grid .content-wrap.pad-default{ padding: 0; } .portfolio-grid a.cell img{ transition: all .25s; } .portfolio-grid a.cell:hover img, .portfolio-grid a.cell:focus-visible img{ border-radius: 24px; } .portfolio-grid a.cell h3{ position: relative; z-index: 5; margin-top: .25em; display: inline-flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; font-size: 1.25em; } .portfolio-grid a.cell h3::after{ flex-shrink: 0; content: ""; display: inline-block; width: 23px; height: 23px; margin-top: 7px; margin-left: .5em; border-radius: 50px; border: solid .05em var(--color-olive); background: no-repeat center center transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23698473; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); background-size: 17px 17px; transition: margin-left .2s; } /* color variation */ .portfolio-grid.bg-olive a.cell h3::after{ border: solid .05em var(--color-palepink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23F8DFDA; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E"); } .portfolio-grid a p{ font-weight: 300; } .portfolio-grid p:last-child{ margin-bottom: 1.5em; } /* /.page-section.grid-section */ /* ************************************************************************************** */ /* ************************************************************************************** */ /* .page-section.article-listing */ /* also using boxes | grid etc. */ /* ************************************************************************************** */ .page-section.article-listing .category-filters{ display: flex; flex-flow: row wrap; align-items: center; width: 100%; padding: 24px 0; } .category-filters label{ margin: 3px 10px 3px 0; font-size: 14px; text-transform: uppercase; } .category-filters ul{ display: flex; flex-flow: row wrap; margin: 0; padding: 0; list-style: none; } .category-filters li{ margin: 3px 3px 3px 0; } .category-filters a{ display: inline-block; padding: 2px 14px; font-size: 14px; text-transform: uppercase; text-decoration: none; background: #f6f6f6; } .category-filters a:hover{ color: #fff; background: #8eb9cb; } .category-filters .active a{ color: #fff; background: #8eb9cb; } /* item */ .article-listing .item{ background: #fff; } .article-listing .item .excerpt{ margin-bottom: 1em; } .article-listing .item a{ text-decoration: none; } .article-listing .item .categories ul{ margin: 0; padding: 0; list-style: none; display: flex; } .article-listing .item .categories li{ margin-right: 5px; } .article-listing .item .meta{ font-size: 14px; } .article-listing .item .author::before, .article-listing .item .date::before, .article-listing .item .item-categories::before{ content: " · "; } .article-listing .item .meta span:first-child::before{ display: none; } .article-listing .items-container.boxes .image-wrap{ aspect-ratio: 16/9; background: #d6dee3; overflow: hidden; } .more-items{ text-align: center; } @media screen and (min-width: 1280px) { .article-listing .items-container{ grid-template-columns: 1fr 1fr 1fr; } } /* single */ .article-meta{ display: flex; flex-flow: row nowrap; margin-bottom: 24px; font-size: 14px; font-style: italic; text-transform: uppercase; } .article-meta ul.post-categories{ display: flex; margin: 0; padding: 0; list-style: none; } .article-meta .post-categories li{} .single .cell-1 .content-wrap{ max-width: 100%; } .single .cell-2 .content-wrap{ /*padding-right: 48px;*/ } /* ************************************************************************************** */ /* ************************************************************************************** */ /* .page-section.faq-section{} */ /* ************************************************************************************** */ .page-section.faq{} .page-section.faq .section-wrap{ max-width: var(--content-wrap-max-width); margin-left: auto; margin-right: auto; } .page-section.faq .section-intro, .page-section.faq .section-outro{} .page-section.faq .faq-wrap{ padding-bottom: 24px; } .page-section.faq .faq-wrap .item{ margin: 0; padding: 0 6px 0 0; border-bottom: solid 1px var(--color-olive); transition: background .25s; } .page-section.faq .faq-wrap .item:first-child{ border-top: solid 1px var(--color-olive); } .js .page-section.faq .item.active{} .page-section.faq .item h4{ display: flex; justify-content: space-between; align-items: flex-start; margin: 0; padding: 12px 0; color: var(--color-olive); cursor: pointer; } .page-section.faq .item h4 span{ max-width: 740px; margin-right: 44px; } .page-section.faq .item h4::after{ width: 24px; height: 24px; margin-right: 2px; flex-grow: 0; flex-shrink: 0; content: ""; background: no-repeat center center transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='8.4 6.92 13.48 12 8.4 17.08 9.81 18.49 16.31 12 9.81 5.51 8.4 6.92'/%3E%3C/svg%3E"); background-size: 24px 24px; transform: rotate(90deg); -webkit-transform: rotate(90deg); transition: transform .25s; } .page-section.faq .item.active h4::after{ transform: rotate(270deg); -webkit-transform: rotate(270deg); } .page-section.faq .item .answer{ max-width: var(--content-wrap-max-width); padding: 12px 64px 24px 0; color: var(--color-olive); } .js .page-section.faq .item .answer{ display: none; } /* ************************************************************************************** */ /* ************************************************************************************** */ /* search.php */ /* ************************************************************************************** */ .result-list .item{ margin-bottom: var(--content-padding-vert); } .result-list .meta.small{ font-size: 14px; } .result-list .read-more{ margin-top: 0; } /* ************************************************************************************** */ /* ************************************************************************************** */ /* #footer section */ /* ************************************************************************************** */ #footer{ padding: 0; font-size: 14px; line-height: 1.31; font-weight: 300; color: var(--color-olive); background: #fff; } #footer .container{ padding: var(--content-padding-vert) var(--content-padding-horiz); } #footer h3{ margin: 1em 0 .5em 0; font-size: 19px; color: var(--color-olive); } #footer h3.widget-title{ display: none; } #footer a{ text-decoration: none; } #footer a:hover{ text-decoration: underline; } @media screen and (max-width: 1279.99px) { /* Hide some of the widgets in the footer */ #footer .widget:nth-child(2), #footer .widget:nth-child(3), #footer .widget:nth-child(4), #footer .widget:nth-child(5){ display: none; } /* On HOME/mobile, hide footer completely */ /* .home #footer{ display: none; } */ } @media screen and (min-width: 1280px) { #footer .container{ padding-bottom: 0; } #footer .widgets{ display: flex; flex-flow: row wrap; justify-content: space-between; } #footer .widget{ width: 15%; padding: 4px 24px 24px 0; flex-grow: 1; flex-shrink: 1; } #footer .widget:first-child{ min-width: 340px; padding-top: 0; } #footer .widget:last-child{ width: 100%; padding-right: 0; } #footer h3{ margin-top: 0; } } @media screen and (min-width: 1440px) { #footer .container{ max-width: 100%; } #footer .widgets{ flex-flow: row nowrap; } #footer .widget, #footer .widget:last-child{ width: auto; } #footer .widget:first-child{ width: 30%; } #footer h3{ font-size: 1.55em; } } @media screen and (min-width: 1600px) { #footer .container{ padding-bottom: 12px; } #footer h3{ font-size: 1.85em; } /* #footer h3 br{ display: none; } */ } /* ************************************************************************************** */ /* ************************************************************************************** */ /* slick-slider */ /* ************************************************************************************** */ .slick-loading .slick-list{ background: transparent; } /* slick-arrows */ .slick-prev, .slick-next{ font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; z-index: 9999; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus{ color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before{ opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before{ opacity: .25; } .slick-prev:before, .slick-next:before{ font-size: 24px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev{ left: 10px; } .slick-prev:before{ content: '←'; } .slick-next{ right: 10px; } .slick-next:before{ content: '→'; } /* slick-dots */ .slick-dots{ position: relative; bottom: 0; right: 0; display: block; width: auto; margin: 24px auto 0 auto; padding: 12px 0 6px 0; list-style: none; text-align: center; } .slick-dots li{ display: inline-block; margin: 0; padding: 0; cursor: pointer; } .slick-dots li button{ display: inline-block; width: 7px; height: 7px; margin: 0 5px; padding: 0; color: transparent; border: 0; outline: none; background: transparent; border: solid 1px var(--color-olive); border-radius: 50%; cursor: pointer; transition: background .5s ease; } .slick-dots li.slick-active button{ background: var(--color-olive); } @media screen and (min-width: 1280px){ .slick-dots li button{ width: 9px; height: 9px; margin: 0 5px; } } /* ************************************************************************************** */ /* ************************************************************************************** */ /* small animations */ /* ************************************************************************************** */ .label-handcrafted .image-wrap{ overflow: visible; margin-bottom: 0; } .label-handcrafted .image-wrap::before{ position: absolute; bottom: -32px; right: -16px; z-index: 99; overflow: hidden; display: block; width: 140px; height: 140px; content: ""; animation: spin 12s linear infinite; background: no-repeat center center transparent; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 263.27 270.62'%3E%3Cdefs%3E%3Cstyle%3E.u%7Bfill:%23698473;%7D%3C/style%3E%3C/defs%3E%3Cg id='b'%3E%3Cg id='c'%3E%3Cpath id='d' class='u' d='M79.58,49.73l-15.29-24.2-4.22,4.46-1.95-3.09,4.76-6.98,2.68-1.7,18.22,28.85-4.2,2.66Z'/%3E%3Cpath id='e' class='u' d='M104.23,39.08c-2.9.86-5.6.9-8.11.1-2.51-.79-4.71-2.29-6.58-4.49-1.88-2.2-3.33-4.99-4.33-8.35-1-3.36-1.33-6.48-.96-9.35.36-2.88,1.37-5.33,3.04-7.37,1.66-2.04,3.94-3.5,6.83-4.36,2.9-.86,5.59-.9,8.09-.1,2.49.8,4.67,2.3,6.53,4.51,1.87,2.21,3.3,4.99,4.31,8.35,1,3.37,1.33,6.48.98,9.35-.35,2.87-1.34,5.32-2.99,7.35-1.65,2.04-3.92,3.49-6.81,4.36ZM102.98,34.92c1.75-.52,3.16-1.5,4.24-2.95,1.08-1.44,1.72-3.22,1.93-5.36.21-2.13-.08-4.52-.87-7.16-.79-2.65-1.86-4.81-3.2-6.47-1.35-1.67-2.87-2.8-4.55-3.4-1.69-.6-3.41-.64-5.15-.12-1.78.53-3.21,1.52-4.31,2.95-1.1,1.43-1.75,3.21-1.97,5.34-.21,2.13.08,4.52.87,7.17.79,2.64,1.86,4.8,3.21,6.47,1.34,1.66,2.87,2.8,4.58,3.41,1.71.61,3.45.65,5.22.12Z'/%3E%3Cpath id='f' class='u' d='M138.19,35.26c-3.01-.19-5.56-1.1-7.64-2.71-2.08-1.62-3.62-3.78-4.62-6.5s-1.38-5.83-1.16-9.33,1-6.54,2.34-9.1c1.34-2.57,3.14-4.53,5.4-5.86,2.27-1.34,4.91-1.91,7.93-1.72,3.01.19,5.55,1.1,7.62,2.71,2.06,1.61,3.58,3.78,4.56,6.49.99,2.72,1.37,5.83,1.14,9.33-.22,3.5-.99,6.54-2.31,9.11-1.32,2.57-3.11,4.52-5.36,5.86s-4.88,1.91-7.9,1.72ZM138.47,30.93c1.81.11,3.48-.32,4.99-1.29,1.51-.98,2.73-2.43,3.67-4.36s1.49-4.27,1.67-7.03c.18-2.75-.08-5.15-.76-7.18-.69-2.02-1.72-3.61-3.09-4.76-1.38-1.15-2.97-1.78-4.79-1.89-1.85-.12-3.54.3-5.06,1.26-1.53.96-2.76,2.41-3.7,4.33-.94,1.93-1.49,4.27-1.67,7.03-.17,2.76.08,5.15.77,7.18.68,2.03,1.72,3.62,3.11,4.79,1.39,1.16,3.01,1.8,4.86,1.92Z'/%3E%3Cpath id='g' class='u' d='M163.13,38.77l32.5-22.17,4.35,2.1-32.51,22.17-4.34-2.1ZM173.05,23.64c-1.35-.65-2.41-1.54-3.2-2.68-.78-1.14-1.23-2.43-1.34-3.88-.12-1.44.2-2.94.95-4.49.75-1.55,1.73-2.72,2.92-3.51,1.2-.79,2.5-1.23,3.89-1.32,1.39-.08,2.76.21,4.11.86,1.34.65,2.41,1.54,3.19,2.68.79,1.14,1.23,2.42,1.32,3.83.09,1.42-.24,2.9-.99,4.45-.75,1.55-1.72,2.74-2.89,3.56-1.17.82-2.46,1.27-3.85,1.36-1.4.08-2.77-.21-4.11-.86ZM174.62,20.4c.64.31,1.31.43,2.01.37.7-.05,1.36-.32,1.99-.79.62-.48,1.17-1.2,1.64-2.16.46-.97.69-1.85.68-2.65,0-.8-.21-1.49-.59-2.07-.39-.59-.89-1.03-1.5-1.32-.64-.32-1.33-.45-2.06-.4-.72.04-1.41.31-2.05.79-.65.48-1.21,1.2-1.68,2.16-.45.94-.67,1.81-.64,2.62.02.8.24,1.5.64,2.09.4.59.92,1.05,1.56,1.36ZM183.01,49.05c-1.35-.66-2.41-1.55-3.2-2.69-.78-1.14-1.22-2.43-1.32-3.86-.1-1.44.22-2.92.96-4.44.76-1.58,1.73-2.77,2.92-3.57,1.18-.8,2.46-1.24,3.84-1.33s2.74.19,4.08.84c1.41.68,2.5,1.58,3.27,2.71.77,1.13,1.2,2.41,1.29,3.82.09,1.42-.25,2.92-1.01,4.5-.74,1.52-1.7,2.69-2.87,3.51s-2.45,1.28-3.83,1.37c-1.38.09-2.76-.2-4.13-.86ZM184.54,45.78c.67.32,1.35.46,2.05.4.7-.06,1.37-.33,2.01-.79.64-.47,1.19-1.18,1.66-2.15.47-.96.69-1.84.67-2.62,0-.79-.21-1.47-.6-2.06-.39-.58-.91-1.03-1.59-1.36-.61-.3-1.27-.42-1.98-.37-.72.06-1.39.32-2.03.78-.64.47-1.2,1.18-1.66,2.15-.47.96-.69,1.84-.66,2.63s.24,1.48.63,2.07c.38.58.88,1.02,1.5,1.32Z'/%3E%3Cpath id='h' class='u' d='M211.72,77.18c-1.42-2.06-2.3-4.12-2.64-6.18-.34-2.05-.13-3.97.61-5.75.75-1.78,2.02-3.29,3.81-4.53l2.91,4.21c-1,.73-1.76,1.62-2.28,2.67-.51,1.05-.71,2.19-.59,3.43.13,1.24.64,2.51,1.55,3.82.77,1.13,1.63,1.97,2.57,2.52.94.56,1.88.82,2.83.8.95-.02,1.85-.33,2.71-.92.99-.69,1.65-1.48,1.97-2.38.33-.89.44-1.87.33-2.92-.11-1.04-.36-2.18-.73-3.4-.37-1.23-.75-2.52-1.13-3.87-.81-2.72-1.02-5.02-.62-6.89.4-1.88,1.53-3.46,3.37-4.73,1.58-1.09,3.21-1.67,4.89-1.72,1.68-.06,3.31.37,4.9,1.26,1.59.9,3.02,2.27,4.3,4.12,1.25,1.82,2.02,3.64,2.29,5.46.27,1.83.09,3.53-.55,5.12-.64,1.59-1.75,2.93-3.33,4.02l-2.93-4.25c.72-.5,1.3-1.18,1.73-2.03.44-.86.62-1.81.54-2.86-.07-1.06-.49-2.13-1.25-3.23-.6-.93-1.31-1.64-2.13-2.14-.82-.5-1.67-.74-2.56-.71-.9.02-1.77.33-2.63.92-.85.59-1.42,1.25-1.69,1.97-.27.72-.35,1.56-.25,2.51.11.95.33,2,.66,3.13.33,1.14.69,2.39,1.09,3.78.51,1.7.81,3.32.9,4.86.1,1.53-.15,2.97-.75,4.31-.6,1.34-1.69,2.56-3.3,3.67-1.39.96-2.93,1.5-4.64,1.61-1.7.1-3.42-.29-5.16-1.18-1.74-.89-3.34-2.39-4.8-4.5Z'/%3E%3Cpath id='i' class='u' d='M221.84,93l32.68-9.81,1.4,4.67-14.19,4.26,18.12,8.82,1.75,5.83-16.62-8.24-16,18.28-1.7-5.7,13.06-14.81-4.73-2.34-12.37,3.71-1.4-4.67Z'/%3E%3Cpath id='j' class='u' d='M229.69,120.62l33.58,13.9-.22,5.31-34.6,11.13.21-5.21,28.66-8.84-27.84-11.18.21-5.11ZM237.88,126.61l3.84,1.52-.65,16.02-3.95,1.21.76-18.75Z'/%3E%3Cpath id='k' class='u' d='M226.5,156.87l31.8,12.37-4.22,10.86c-.99,2.54-2.23,4.46-3.71,5.77-1.49,1.31-3.1,2.08-4.83,2.31-1.72.23-3.5,0-5.31-.71-1.73-.67-3.16-1.67-4.3-3.01-1.14-1.33-1.82-2.98-2.05-4.95-.23-1.97.16-4.24,1.16-6.82l2.46-6.31-12.77-4.97,1.77-4.54ZM241.27,167.84l-2.39,6.14c-.93,2.39-1.07,4.29-.42,5.72.65,1.42,1.84,2.46,3.57,3.14,1.84.71,3.47.76,4.86.14,1.39-.63,2.56-2.14,3.49-4.53l2.38-6.13-11.49-4.48Z'/%3E%3Cpath id='l' class='u' d='M217.92,179.6l19.18,30.87-3.27,4.19-34.6-11.13,3.21-4.11,28.43,9.53-16.1-25.32,3.15-4.03ZM221.09,189.24l2.23,3.48-9.87,12.64-3.92-1.33,11.56-14.79Z'/%3E%3Cpath id='m' class='u' d='M190.3,209.54l17.49,24.53,8.22-5.86,2.32,3.25-20.44,14.58-2.32-3.25,8.25-5.89-17.49-24.53,3.97-2.83Z'/%3E%3Cpath id='n' class='u' d='M157.88,225.98l5.73,33.63-20.9,3.57-.67-3.94,16.09-2.75-1.86-10.91-13.45,2.3-.66-3.85,13.46-2.29-2.55-14.95,4.81-.81Z'/%3E%3Cpath id='o' class='u' d='M115.44,227.01c3.23.55,5.95,1.77,8.15,3.65,2.2,1.87,3.77,4.24,4.72,7.09.94,2.85,1.12,6,.52,9.46-.59,3.43-1.8,6.33-3.64,8.7-1.84,2.37-4.12,4.08-6.82,5.13-2.7,1.05-5.67,1.3-8.91.75-3.3-.57-6.05-1.8-8.26-3.7-2.22-1.89-3.78-4.26-4.69-7.11-.92-2.84-1.08-5.98-.49-9.4.59-3.46,1.8-6.38,3.61-8.76,1.81-2.37,4.07-4.08,6.79-5.11,2.71-1.04,5.72-1.27,9.02-.7ZM114.66,231.27c-2.31-.39-4.42-.21-6.33.55-1.91.76-3.51,2.04-4.79,3.83-1.28,1.79-2.15,4.05-2.62,6.77s-.4,5.14.21,7.25c.61,2.12,1.69,3.85,3.24,5.18,1.55,1.34,3.48,2.21,5.79,2.61,2.3.39,4.41.22,6.32-.53,1.91-.74,3.51-2.01,4.81-3.79,1.29-1.79,2.17-4.05,2.64-6.77.47-2.72.39-5.14-.24-7.26-.62-2.12-1.71-3.86-3.25-5.21-1.55-1.35-3.48-2.23-5.78-2.63ZM104.83,264.01c.73.13,1.32.48,1.74,1.07.43.58.58,1.24.46,1.98-.12.7-.49,1.27-1.09,1.69-.6.43-1.27.57-2,.45-.71-.12-1.26-.48-1.67-1.08-.41-.6-.55-1.25-.43-1.95.12-.74.48-1.32,1.06-1.73.58-.41,1.22-.55,1.93-.43ZM112.9,265.4c.74.12,1.31.48,1.72,1.06.41.58.56,1.24.43,1.98-.12.7-.47,1.27-1.06,1.69-.58.43-1.25.58-1.98.45-.71-.12-1.28-.48-1.72-1.08-.44-.61-.6-1.26-.48-1.96.13-.74.5-1.31,1.11-1.72.62-.4,1.28-.55,1.98-.42Z'/%3E%3Cpath id='p' class='u' d='M92.66,221.45l-17.19,29.48-9.98-5.82c-2.33-1.36-4.01-2.86-5.04-4.52-1.03-1.65-1.52-3.34-1.47-5.06.04-1.73.55-3.42,1.51-5.07.92-1.57,2.13-2.82,3.62-3.73,1.49-.92,3.23-1.34,5.21-1.25,1.98.08,4.15.81,6.51,2.19l5.64,3.29,6.98-11.96,4.21,2.45ZM79.61,234.16l-5.47-3.19c-2.08-1.22-3.91-1.6-5.49-1.14-1.58.45-2.84,1.47-3.77,3.07-.95,1.63-1.23,3.2-.83,4.71.4,1.51,1.67,2.89,3.8,4.13l5.47,3.2,6.29-10.78ZM77.16,212.42l-1.27,16.8-4.64-2.7,1.03-16.95,4.88,2.85Z'/%3E%3Cpath id='q' class='u' d='M44.68,175.63l-29.03,17.94-2.56-4.15,29.03-17.93,2.56,4.14ZM56.08,194.08l-29.02,17.94-2.57-4.14,29.03-17.94,2.56,4.14ZM40.85,198.74l-3.4,2.1-9.84-15.92,3.4-2.1,9.84,15.92Z'/%3E%3Cpath id='r' class='u' d='M39.56,165.93l-35.93-5.53-1.05-5.21,30.97-19.03,1.03,5.11-25.73,15.39,29.7,4.25,1.01,5.02ZM30.17,162.06l-4.09-.57-3.17-15.72,3.55-2.11,3.71,18.4Z'/%3E%3Cpath id='s' class='u' d='M33.71,130.07L0,124.82l.75-4.81,28.53-13.17-25.86-4.03.75-4.82,33.72,5.25-.75,4.82-28.5,13.17,25.82,4.02-.75,4.82Z'/%3E%3Cpath id='t' class='u' d='M40.63,95.48l-29.69-16.82,5.17-9.12c1.95-3.45,4.18-5.96,6.67-7.53,2.5-1.57,5.17-2.28,8-2.11,2.84.17,5.79,1.12,8.84,2.85,3.05,1.73,5.37,3.77,6.96,6.1,1.59,2.34,2.35,4.97,2.28,7.9s-1.09,6.13-3.06,9.61l-5.17,9.12ZM39.47,89.22l2.67-4.71c1.55-2.74,2.33-5.17,2.34-7.3,0-2.12-.63-4.01-1.92-5.65-1.29-1.65-3.1-3.13-5.42-4.44-2.34-1.33-4.56-2.13-6.65-2.4-2.09-.27-4.04.15-5.86,1.25-1.82,1.1-3.5,3.02-5.06,5.76l-2.66,4.71,22.56,12.78Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } @media screen and (min-width: 1024px){ .label-handcrafted .image-wrap::before{ width: 13.8vw; height: 13.8vw; bottom: -3vw; right: 1.5vw; } } /* @media screen and (min-width: 1280px) { .label-handcrafted .image-wrap::before{ width: 200px; height: 200px; } } @media screen and (min-width: 1440px) { .label-handcrafted .image-wrap::before{ width: 220px; height: 220px; } } */ @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } /* ************************************************************************************** */ @media screen and ( max-width: 360px ) { /* wrap tooooo long words */ h1, h2, h3{ /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } } @media screen and (min-width: 540px){ :root{ --content-padding-vert: 48px; --content-padding-horiz: 48px; } .soft-hyphen{ display: none; } } @media screen and (min-width: 1024px){ :root{ --header-height: 112px; } body{ font-size: 22px; font-weight: 400; } h1, h2.as-h1{ font-size: 3.2em; } h2{ font-size: 24px; } h2.x-large{ font-size: 6.4vw; } p.caption{ font-size: 1.5em; } .page-section.text-size-grow h1.smaller{ max-width: 80%; font-size: 5vw; } p.pre-headline{ font-size: 1.5em; } p.introtext.growing{ font-size: 2.1vw; } } @media screen and (max-width: 1279.99px) { .hide-on-small-screens{ display: none; } } @media screen and (min-width: 1280px) { body{ font-size: 26px; font-weight: 400; } .hide-on-large-screens{ display: none; } h1, h2.as-h1{ font-size: 10vw; } h2{ font-size: 29px; } } @media screen and (min-width: 1920px) { h2.x-large{ font-size: 120px; } } /* small screen nav */ @media screen and (max-width: 1023.99px) { #nav li{ opacity: 0; } .nav-expanded #nav li{ -webkit-animation: fadeinmenu .55s 1; animation: fadeinmenu .55s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .nav-expanded #nav li:nth-child(1){-webkit-animation-delay: .20s; animation-delay: .20s;} .nav-expanded #nav li:nth-child(2){-webkit-animation-delay: .27s; animation-delay: .27s;} .nav-expanded #nav li:nth-child(3){-webkit-animation-delay: .34s; animation-delay: .34s;} .nav-expanded #nav li:nth-child(4){-webkit-animation-delay: .41s; animation-delay: .41s;} .nav-expanded #nav li:nth-child(5){-webkit-animation-delay: .48s; animation-delay: .48s;} .nav-expanded #nav li:nth-child(6){-webkit-animation-delay: .55s; animation-delay: .55s;} .nav-expanded #nav li:nth-child(7){-webkit-animation-delay: .62s; animation-delay: .62s;} .nav-expanded #nav li:nth-child(8){-webkit-animation-delay: .69s; animation-delay: .69s;} .nav-expanded #nav li:nth-child(9){-webkit-animation-delay: .76s; animation-delay: .76s;} .nav-expanded #nav li:nth-child(10){-webkit-animation-delay: .81s; animation-delay: .81s;} .nav-expanded #nav li:nth-child(11){-webkit-animation-delay: .95s; animation-delay: .95s;} @-webkit-keyframes fadeinmenu { from {opacity: 0; padding-top: 10px; } to {opacity: 1; padding-top: 0; } } @keyframes fadeinmenu { from {opacity: 0; padding-top: 10px; } to {opacity: 1; padding-top: 0; } } .hamburger { padding: 5px; display: inline-block; cursor: pointer; -webkit-transition-property: opacity, -webkit-filter; transition-property: opacity, -webkit-filter; -o-transition-property: opacity, filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; -webkit-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; font: inherit; color: inherit; font-size: 1px; line-height: 1px; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { /*opacity: 0.6; */ } .hamburger.is-active:hover { /*opacity: 0.6; */ } .hamburger:focus{ outline: none; } .hamburger-box { position: relative; display: inline-block; width: 41px; height: 41px; } .hamburger-inner { display: block; top: 50%; margin-top: 0px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 29px; height: 2px; background-color: var(--color-olive); border-radius: 0; position: absolute; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } .is-active .hamburger-inner, .is-active .hamburger-inner::before, .is-active .hamburger-inner::after{ background-color: var(--color-palepink); } .hamburger--squeeze .hamburger-inner { -webkit-transition-duration: 0.075s; -o-transition-duration: 0.075s; transition-duration: 0.075s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { -webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease; -o-transition: top 0.075s 0.12s ease, opacity 0.075s ease; transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.12s; -o-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease; -o-transition: top 0.075s ease, opacity 0.075s 0.12s ease; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } }