/*
Theme Name: Fuel6
Theme URI: https://fuelmedical.com
Author: Fuel Medical
Description: A Fuel Medical block theme (2024)
Requires at least: 6.5
Tested up to: 6.7.1
Requires PHP: 8.0
Version: 6.3.8
Text Domain: fuel6
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Custom Properties
# Fuel Normalize
# Helper Classes
# WordPress Blocks
# Forms - Moved to css/gravity-forms.css
# Header
# Content
# Footer
# Location Section
# Contact Section
# Animations
# print
# Safari 15.3 fallbacks
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Custom Properties
Note: WordPress declares its variables in the body, so do the same to avoid scope issues.
--------------------------------------------------------------*/
body {
/* Structure - 1100px - for use outside of contain class */
--contain-padding: clamp(1rem, calc(50vw - 29.93rem), 19rem);
/* Design - Change in theme.json */
--primary-color: var(--wp--preset--color--primary);
--accent-color: var(--wp--preset--color--accent);
--white: var(--wp--preset--color--white);
--grey: var(--wp--preset--color--grey);
--black: var(--wp--preset--color--black);
/* Custom Colors */
--forest-green: var(--wp--preset--color--color-1);
--dark-green: var(--wp--preset--color--color-2);
--link-blue: var(--wp--preset--color--color-3);
--gb-grad: var(--wp--preset--color--green-black-gradient);
--green-trans-bg: var(--wp--preset--color--green-trans-bg);
/* Top Level Primary Menu Colors - now managed on the block level */
--wp--preset--color--menu-background: inherit;
--wp--preset--color--menu-color: currentColor;
--wp--preset--color--menu-hover-color: var(--white);
--wp--preset--color--menu-hover-bg: var(--wp--preset--color--color-2);
/* Sub Menu Colors */
--wp--preset--color--sub-menu-background: var(--white);
--wp--preset--color--sub-menu-color: var(--primary-color);
--wp--preset--color--sub-menu-hover-color: var(--primary-color);
--wp--preset--color--sub-menu-hover-bg: var(--wp--preset--color--color-3);
/* Text */
--title-font: var(--wp--preset--font-family--title);
--title-color: var(--primary-color);
--content-font: var(--wp--preset--font-family--content), sans-serif;
--content-color: var(--wp--preset--color--content);
}
/*--------------------------------------------------------------
# Fuel Normalize
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { font-size: clamp(125%, 1vw, 240%); line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; min-width: 18rem; }
iframe, img, svg, audio, video, embed { vertical-align: middle; max-width: 100%; }
img {object-fit: cover;}
img:not([src*=".png"], [src*=".gif"], [src*=".svg"], [src*=".webp"]) {background: var(--grey);}
a { text-decoration: none; color: var(--accent-color); transition: color 300ms, background-color 300ms; }
a[href^="tel:"] { white-space: nowrap; }
a:hover {color: var(--primary-color);}
[hidden] { display: none; }
@media only screen and (min-width: 68.5em) {
*[id] {scroll-margin-top: 3rem;}
}
/*--------------------------------------------------------------
# Helper Classes
--------------------------------------------------------------*/
.contain { --contain-padding: clamp(var(--mobile-padding, 1rem), calc(50vw - 29.93rem), var(--desktop-padding, 19rem)); display: block; position: relative; margin: auto; padding-right: var(--contain-padding); padding-left: var(--contain-padding); width: 100%; }
.icon-item {display: block;position: relative;margin: 1em 0;padding: 0 0 0 1.8em;}
.icon-item svg {position: absolute;top: 0.15em;left: 0;width: 1.2rem;height: 1.2rem;color: var(--accent-color);}
@media (min-width: 68.5em) {
.mobile-only { display: none !important; }
}
@media (max-width: 68.49em) {
.desktop-only { display: none !important; }
body { --center-on-mobile: center; }
.text-center-on-mobile { text-align: var(--center-on-mobile); }
.center-on-mobile { justify-content: var(--center-on-mobile); }
}
.zebra > *:not(tbody):nth-child(odd) { background-color: var(--zebra, var(--grey)); }
/* Use on query loops to help change the order every other column */
.stagger > :nth-child(odd) .wp-block-columns { flex-direction: row-reverse; }
/* Use to make link fill entire block - use when you can't wrap blocks with anchor tag */
.cover-link { position: absolute !important; inset: 0; width: 100%; z-index: 1; background: none !important; }
:has(> .cover-link) { position: relative; }
/*--------------------------------------------------------------
# WordPress Blocks
--------------------------------------------------------------*/
@media (min-width: 37.5em) {
.alignleft, .alignright { max-width: 48%; }
}
@media (min-width: 68.5em) {
.is-position-sticky { top: 4rem; }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header-logo svg {width: auto;height: 5.5rem;transition: transform 0.3s ease;}
.header-logo a:is(:hover, :focus-visible) svg { transform: scale(1.05); }
.header-quicklinks .wp-block-fuel-menu-item { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.header-quicklinks a {padding: 0.65rem 1.6rem;font-family: var(--title-font);}
.header-quicklinks a:is(:hover, :focus-visible) { }
.header-quicklinks svg { margin-right: 0.3rem; transform: translateY(-0.1rem); }
@media (max-width: 68.49em) {
.header {position: relative;z-index: 998;border-top: 1.6rem solid var(--dark-green);border-bottom: 1px solid var(--white);}
.header-logo {padding-bottom: 1.5rem;}
.header-quicklinks { display: none; }
}
@media (min-width: 68.5em) {
.header:not(.block-editor-block-list__block) {position: sticky;top: -11rem;z-index: 999;border-bottom: 2px solid var(--white);}
.header-quicklinks .wp-block-fuel-menu-wrapper { padding-right: 0.75rem; }
.header-logo { padding-bottom: 0.5rem; }
.wp-block-group:has(.header-number) { gap: 0; }
.header-number { line-height: 1; }
.header-number:is(:hover, :focus-visible) .header-phone-link { color: var(--accent-color); }
.header-phone-link {font-size: 1.6rem;color: var(--white);transition: 300ms ease;}
.header-phone-link .phone-number {font-size: 1.6rem;font-family: 'Open Sans';color: var(--accent-color);font-weight: 700;margin-left: 0.55rem;transition: 300ms ease;}
.header-number:first-of-type .header-phone-link {margin-right: 3.5rem;position: relative;}
.header-number:first-of-type .header-phone-link:after {content: '';width: 0.2rem;height: 3.1rem;background: var(--white);position: absolute;top: 0;right: -1.87rem;bottom: 0;margin: auto;}
}
@media (min-width: 100em) {
.header-quicklinks .wp-block-fuel-menu-wrapper { padding-right: 8.5rem; }
.header > .wp-block-columns { padding-right: 10rem; padding-left: 11.5rem; }
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.wp-site-blocks { margin: auto; }
#main { margin: 0; font-size: var(--wp--preset--font-size--content); }
.entry-content .wp-block-list li {margin: 0.5rem 0 0 0;}
/* Location card loop - Used in content, and menu */
/* If a grid has only one column, make it full width */
.location-cta .wp-block-post-template.is-layout-grid:not(:has(li:nth-child(2))) { grid-template-columns: 1fr }
/* If a grid has three columns, make it flex */
.location-cta .wp-block-post-template.is-layout-grid:has(li:nth-child(3)) { display: flex; flex-wrap: wrap; & .wp-block-post { flex: 1 1 15rem; } }
.location-card svg {vertical-align: bottom;width: 1.2rem;height: 1.2rem;}
.sub-menu .location-card { background: none !important; padding-top: 0 !important; & .wp-block-post-title { padding-bottom: 0.5rem; font-size: var(--wp--preset--font-size--content); font-family: var(--content-font); font-weight: bold; } & > .wp-block-group:first-of-type { margin-top: 1.3rem; } }
@media (max-width: 68.49em) { .sub-menu { & .location-cta svg { color: var(--white); } & .location-card { padding: 0 !important; } & .location-cta > ul { gap: 1rem; } & .location h3 { border-color: var(--white) !important; } } }
/* Bio grid custom loop */
.bio-list .bio-box { display: grid; grid-template-areas: "img label"; justify-content: start; }
.bio-list .bio-image {grid-area: img;width: 3.1rem; overflow: hidden;}
.bio-list img { width: 100%; height: 100%; }
.bio-list .bio-label {/* grid-area: label; */line-height: normal;display: flex;flex-wrap: wrap;align-content: center;text-align: left;padding: 1rem 0.6rem;}
.bio-list .bio-label span {/* flex: 1 1 100%; */}
.bio-list .bio-cred {/* font-size: 0.8rem; */margin-left: 0.3rem;}
@media (max-width: 68.49em) {
#main .bio-list .bio-box { padding: 0.3rem 1rem; margin-left: -1rem; width: calc(100% + 2rem); }
#main .bio-list .bio-box:nth-child(odd) { background: rgba(0, 0, 0, 0.1); }
/* Menu styling */
.sub-menu .bio-list .bio-box.bio-box {margin-left: -1rem;border-top: 1px solid var(--white);padding: 0;background: none;color: var(--white);}
.sub-menu .bio-box::after, #main .bio-box::after {/* content: ''; */--link-svg: url('data:image/svg+xml,');background-color: currentColor;-webkit-mask: var(--link-svg);mask: var(--link-svg);position: absolute;inset: 0 8vw 0 auto;width: 0.9rem;height: 0.9rem;margin: auto;transition: background-color 0.3s ease;}
.sub-menu .bio-list .bio-box:not(:hover, :focus-visible):nth-child(odd) {/* background: rgba(255, 255, 255, 0.1); */}
}
@media (min-width: 68.5em) {
.bio-list {display: flex;flex-wrap: wrap;gap: 4rem 3.9rem;align-items: flex-start;margin-top: 1rem;}
.bio-list .bio-box {grid-template-areas: "img" "label";flex: 0 1 calc(33% - 7.7rem);min-width: 7.5rem; /* Adjust to prevent names from wrapping */text-align: center;color: var(--content-color);}
.sub-menu .bio-list .bio-box { flex: 0 1 calc(20% - 1rem); }
.bio-list.bio-list .bio-box:is(:hover, :focus-visible) { background: none; }
.bio-list .bio-image {display: block;width: 100%;height: auto;aspect-ratio: 1 / 1.32;margin-bottom: 0.2rem;}
.bio-list .bio-image img { transition: transform 0.3s; }
.bio-list .bio-box:is(:hover, :focus-visible) .bio-image img { transform: scale(1.1); }
.bio-list .bio-cred { color: var(--content-color); }
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {margin: 0;background: var(--gb-grad);position: relative;}
.footer a {display: block;width: fit-content;background: linear-gradient(0deg, var(--white), var(--white)) no-repeat 0 bottom / 0 2px;transition: 350ms ease;}
.footer a.icon-item { background-position-x: 1.6rem; }
.footer a:not(.footer-logo):is(:hover, :focus-visible) { background-size: 100% 2px; color: var(--white); }
.footer-logo svg { transition: 300ms ease; }
.footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); }
.footer-socials {max-width: 11.5rem;margin-top: 1.5rem;margin-bottom: 2rem;}
.footer-socials a {transition: 300ms ease;background: none;}
.footer-socials a:is(:hover, :focus) { background: none; transform: scale(1.2); }
.footer-search {padding: 0;min-width: 0;max-width: 12rem;margin: 1.3rem auto 0 !important;}
.footer-search .wp-block-search__inside-wrapper {border: 1px solid var(--white);border-radius: 0;outline: none;}
.footer-search .wp-block-search__input {order: 2;border: none;padding: 0.4rem;font-style: italic;color: var(--white);}
.footer-search .wp-block-search__button {padding: 0 0.75rem;border: none;margin: 0;background-color: transparent !important;background-repeat: no-repeat;background-position: center;background-image: url('data:image/svg+xml,');}
.footer-search .wp-block-search__button:is(:hover, :focus-visible) {background-color: var(--accent-color) !important;background-image: url('data:image/svg+xml,');}
.footer-search ::placeholder { color: var(--white); opacity: 1; }
.ftr-bill-dept {border: 3px solid var(--accent-color);padding: 0.25rem 0.5rem 0.25rem 1rem;width: 100% !important;max-width: 12rem;.page-template-page_fullwidth .about-us-best-of-flathead.wp-block-media-text {margin-bottom: 0 !important; };}
.ftr-bill-dept:is(:hover, :focus-visible) {background-size: 0 !important;border-color: var(--white);color: var(--accent-color) !important;}
.ftr-bill-dept:is(:hover, :focus-visible) svg path {
fill: var(--white);
}
.ftr-bill-dept.icon-item svg {margin-left: -0.5rem;background: rgba(0,62,66);padding: 0.3rem 0rem;height: 1.8rem;}
#footer-locations {position: relative;}
#footer-locations:before {content: 'Providing Quality ENT & Hearing Care for the Flathead Valley';margin: auto;text-align: center;padding: 0 0 1.7rem;display: flex;max-width: 24rem;font-size: 1.2rem;font-family: var(--title-font);}
/* 850px - Mobile breakpoint for copyright section */
@media only screen and (max-width: 53.125em) {
.copyright-wrapper { flex-direction: column; text-align: center; }
.policy-menu { justify-content: center; }
}
/* Policy menu */
.policy-menu li:nth-child(n+1):not(:last-child)::before { content: '|'; position: absolute; right: -0.6rem; }
@media (min-width: 48.875em) { /* 782px */
#footer-locations:before { text-align: left; max-width: none; }
.ftr-bill-dept {margin-left: 0 !important;width: 100% !important;}
.ftr-bill-dept.icon-item svg { background: rgba(0, 76, 80); }
}
@media (min-width: 75em) { /* 1200px */
.ftr-bill-dept.icon-item svg {background: rgba(0, 88, 93);}
}
@media (min-width: 68.5em) {
.footer:after { content: ''; position: absolute; top: 0.6rem; right: 0.5rem; z-index: 0; width: 7.8rem; height: 16.4rem; background-size: contain; background-image: url('data:image/svg+xml,'); }
#foot_content {max-width: 60rem;gap: 0 2.7rem;position: relative;}
#foot_content:before { content: 'Providing Quality ENT & Hearing Care for the Flathead Valley'; position: absolute; left: 14.2rem; /* background: pink; */ font-size: 1.2rem; font-family: var(--title-font); }
#footer-locations, #footer-quick-links { margin-top: 3.5rem; }
#footer-locations:before { display: none; }
#footer-locations .location .wp-block-group > .wp-block-group { margin-top: 0; }
#footer-quick-links .wp-block-navigation__container {column-count: 2;=:wrap;display: flex;flex-wrap: wrap;flex-direction: row;gap: 0 2rem;}
#footer-quick-links .wp-block-navigation__container .wp-block-navigation-item { margin: 0 0 0.25rem; width: calc(50% - 1rem); }
}
/*--------------------------------------------------------------
# Location Section
--------------------------------------------------------------*/
#location_section .wp-block-media-text__media a { z-index: 2; position: relative; }
#location_section {max-width: none;overflow: hidden;}
#fullwidth_location_section {width: 100%;max-width: none;position: relative;border-top: 2.5rem solid var(--white);padding-right: 0;padding-left: 0;}
#fullwidth_location_section:before {content: '';position: absolute;top: -0.05rem;right: -0.5rem;bottom: 0;left: -0.5rem;z-index: 2;background-position: top right;background-size: contain;background-repeat: no-repeat;background-image: url('data:image/svg+xml,');}
.location-section-container.wp-block-media-text { display: flex ; flex-wrap: wrap !important; }
.location-section-container {max-width: none;}
.location-section-container .wp-block-media-text__content { padding-top: 6.7rem;padding-bottom: 2.5rem;width: 100%;background: var(--gb-grad);position: relative;}
.location-section-container .wp-block-media-text__content:after {content: '';position: absolute;top: calc(100% - 3rem);left: calc(100% - 39.7vw);z-index: 0;width: 79.4vw;max-width: 22.6rem;height: 37.78vw;max-height: 10.75rem;background-size: contain;background-image: url('data:image/svg+xml,');}
.location-section-container .location-card {z-index: 2;position: relative;}
.fullwidth-location-section-title {position: relative;margin-bottom: 4.3rem;}
.fullwidth-location-section-title:after {content: '';width: 5rem;height: 1rem;position: absolute;right: 0;bottom: -2.05rem;left: 0;background-size: contain;background-repeat: no-repeat;background-image: url('data:image/svg+xml,');}
.location-section-row-title {font-weight: bold;}
.location-section-row-title svg { color: var(--accent-color); margin-right: 0.5rem; }
.location-section-box a:is(:hover, :focus-visible) {text-decoration: underline;color: var(--white);}
.location-section-box-3 {display: inline-block;padding-top: 1rem;border-top: 1px solid var(--white);margin-top: 0;}
.location-section-container .wp-block-media-text__media {width: 100%;max-width: none;max-height: 32rem;margin: 0 !important;padding: 0 !important;position: initial;}
.location-section-container .wp-block-media-text__media::after { display: none; }
.location-section-box .fullwidth-location-section-office-title {margin-top: 2rem;}
.location-section-box:first-of-type .fullwidth-location-section-office-title {margin-top: 0;}
.location-section-box > .wp-block-group {margin-top: 0.5rem;margin-bottom: 1.5rem; }
.hours-billing {display: block !important;width: fit-content;}
@media (min-width: 37.56em) { /* 601px */
.location-section-container .wp-block-media-text__content { padding-top: 5rem; padding-bottom: 3.9rem; }
.fullwidth-location-section-title { text-align: center; }
.fullwidth-location-section-title:after { margin: auto; }
.location-section-contact-info-container {max-width: none;gap: 0;}
.location-section-contact-info {display: grid;grid-template-areas: 'left-top right' 'left-bottom right';margin: auto !important;gap: 1rem 3rem;position: relative;}
.location-section-contact-info:after {content: '';background: var(--white);width: 1px;position: absolute;top: 3rem;right: auto;bottom: 0;left: calc(50% - 0.8rem);margin: auto;}
.location-section-box-1 {grid-area: left-top;}
.location-section-box-2 {grid-area: left-bottom;margin-top: 0;}
.location-section-box-3 {grid-area: right;padding-top: 3rem;margin-top: 0 !important;border: none;}
.location-section-box .fullwidth-location-section-office-title { margin-top: 0; }
.hours-billing .hours-rows { display: inline-block; padding-left: 1.65rem; }
.hours-billing .icon-item.bill-dept { margin-top: 2rem; }
}
@media (max-width: 37.5em) { /* 600px */
.location-section-container.wp-block-media-text > .wp-block-media-text__content { grid-row: 1; }
.fullwidth-location-section-title {text-align: center;margin-bottom: 5rem;}
.fullwidth-location-section-title:after { margin: auto; }
.location-section-container.wp-block-media-text > .wp-block-media-text__media { grid-row: 2; }
}
@media (min-width: 68.5em) {
#fullwidth_location_section { border: none; }
#fullwidth_location_section:before {bottom: calc(100% - 3.6rem);z-index: 3;background-size: initial;background-image: url('data:image/svg+xml,');}
.location-section-container .wp-block-media-text__content {width: 60%;padding-right: 3.75rem;padding-left: 1.5rem;display: flex;justify-content: flex-end; align-self: auto;}
.location-section-container .location-card {width: 100%;max-width: 30rem;}
.fullwidth-location-section-title { text-align: left; }
.fullwidth-location-section-title:after { margin: 0; }
.location-section-contact-info {margin: 0 !important;width: 100%;gap: 1.5rem 3.5rem;}
.location-section-container .wp-block-media-text__content:after {top: auto;right: -3.35rem;bottom: -3.65rem;left: auto;}
.location-section-container .wp-block-media-text__media {width: 40%;max-height: 100%;}
.location-section-container .wp-block-media-text__media img {height: revert-layer;}
}
@media (min-width: 82.5em) {
.location-section-container .wp-block-media-text__content {padding-right: 7.5rem;padding-left: 0;}
.location-section-contact-info {gap: 1.5rem 6rem;}
}
@media (min-width: 93.75em) { /* 1500px */
#fullwidth_location_section:before { background-size: contain; top: 0; left: 0; }
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.wp-block-template-part:has(#contact_section) { margin-top: 0; }
#contact_section { padding-top: 4rem; padding-bottom: 2rem; }
#contact_section a:is(:hover, :focus-visible) {text-decoration: underline;color: var(--accent-color);}
#contact_section .wp-block-cover__inner-container { padding: 0; }
.cf-mtn-outline-container { margin-bottom: 1.7rem; }
.contact-section-text-column-title { font-family: var(--content-font); }
.cf-container {
padding-top: 1.5rem; padding-right: 0.4rem; padding-bottom: 1.7rem; padding-left: 0.4rem;
p {font-size: clamp(0.9rem,1.9vw,1rem);}
.gform_wrapper { padding-right: 1.1rem; padding-left: 1.1rem; }
.gfield {border-color: var(--white) !important;border-radius: 0;background: none;}
.gfield .gfield_label {color: var(--white) !important;font-size: 0.9rem;font-style: italic;}
.gfield .gfield_label .gfield_required { color: var(--white); }
.gfield input { background: none !important; }
}
#contact_section {
#gform_1 .gfield {border-color: var(--white);}
#gform_1 .gfield .gform-field-label { color: var(--white); }
.gform_footer { padding: 1.4rem 0 0; }
.gform_footer button { margin: 0; }
}
@media (min-width: 48.875em) { /* 782px */
.contact-section-columns { max-width: 56.5rem; }
.contact-section-text-column { padding-top: 2.4rem; }
}
@media (min-width: 68.5em) {
#contact_section { padding-top: 10.3rem; padding-bottom: 6.8rem; }
.contact-section-columns { justify-content: space-between; }
.contact-section-text-column {padding-top: 4.8rem;width: 100%;max-width: 31rem;}
.contact-section-text-column-title {font-size: 1.6rem;margin-bottom: 1.6rem;}
.contact-section-text-column p { margin-top: 0.25rem; line-height: inherit; }
.contact-section-cf-column { width: 100%; max-width: 23.6rem; }
.cf-container { padding-right: 2.5rem; padding-bottom: 2rem; padding-left: 2.5rem; }
.cf-container .gform_wrapper {padding-right: 1.1rem;padding-left: 1.1rem;margin-top: 2.3rem;}
}
/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(var(--spin-rotation, 360deg)); }
}
@keyframes fadein {
0% { opacity: var(--o1, 0); transform: translate(var(--x1, 0), var(--y1, 5rem)); }
100% { opacity: var(--o2, 1); transform: translate(var(--x2, 0), var(--y2, 0)); }
}
@keyframes fadeout {
0% { opacity: var(--o2, 1); transform: translate(var(--x2, 0), var(--y2, 0)); }
100% { opacity: var(--o1, 0); transform: translate(var(--x1, 0), var(--y1, 5rem)); }
}
@keyframes point {
0% { transform: translate(0, 0); }
50% { transform: translate(var(--x, 1rem), var(--y, 0)); }
100% { transform: translate(0, 0); }
}
/* popAnimation Example: https://jsfiddle.net/KTC_88/8xkLv520/ */
@keyframes popAnimation {
0% { transform: scale(0.5); opacity: 0; }
80% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
/**
* Animation helper classes.
*/
@media (prefers-reduced-motion:no-preference) {
/* Transition Delay */
.delay-200 { --delay: 200ms; }
.delay-300 { --delay: 300ms; }
.delay-400 { --delay: 400ms; }
.delay-500 { --delay: 500ms; }
.delay-600 { --delay: 600ms; }
.delay-750 { --delay: 750ms; }
.delay-800 { --delay: 800ms; }
.delay-900 { --delay: 900ms; }
.delay-1000 { --delay: 1000ms; }
.delay-1200 { --delay: 1200ms; }
.delay-1500 { --delay: 1500ms; }
/* Transition Time */
.time-300 { --time: 300ms; }
.time-500 {--time: 500ms;}
.time-750 { --time: 750ms; }
.time-1000 { --time: 1000ms; }
.time-1500 { --time: 1500ms; }
/* Add to wrappers to animate children */
.popin>* { transform: scale(0.5); opacity: 0; }
.popin.js-intersected>* { --delay: calc(var(--i, 0) * 200ms); animation: popAnimation 400ms ease var(--delay) forwards }
.fadein-items>* { opacity: 0; transform: translateY(0); }
.fadein-items.js-intersected>* { --delay: calc(var(--i, 0) * 200ms); animation: fadein var(--time, 400ms) ease var(--delay) forwards; }
/* Add directly to element that will be affected */
.fadein { opacity: 0; transform: translateY(0); --y1: 0; }
.fadeup { opacity: 0; transform: translateY(5rem); }
.fadedown { opacity: 0; transform: translateY(-5rem); --y1: -5rem; }
.fadeleft { opacity: 0; transform: translateX(-5rem); --x1: -5rem; --y1: 0; }
.faderight { opacity: 0; transform: translateX(5rem); --x1: 5rem; --y1: 0; }
.js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight) {animation: fadein var(--time, 500ms) var(--easing, ease) var(--delay, 0s) forwards;}
}
/* Used to make images in links grow when link is hovered - simply add .hover-img-grow to link or image block */
figure.hover-img-grow, .hover-img-grow figure {noverflow: hidden; }
.hover-img-grow img { transition: transform var(--time, 0.3s); }
a:has(+ .hover-img-grow):is(:hover, :focus-visible)+figure img, a:has(.hover-img-grow):is(:hover, :focus-visible) img, a.hover-img-grow:is(:hover, :focus-visible) img { transform: scale(var(--scale, 1.1)); }
/*--------------------------------------------------------------
# Print
--------------------------------------------------------------*/
@media print {
@page { margin: 0.5cm; }
* { background: transparent !important; color: black !important; text-shadow: none !important; -webkit-filter: none !important; filter: none !important; -ms-filter: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
p, h1, h2, h3 { orphans: 3; widows: 3; }
h1, h2, h3 { page-break-after: avoid; }
.main-header { padding-top: 0 !important; padding-bottom: 0 !important; }
.main-title { margin: 0; padding-bottom: 1rem; border-bottom: 2px solid #000; }
.primary-menu, #sidebar, .header, .footer, .page-navigation, .pagination, .wp-prev-next, .respond-form { display: none !important; }
}
/*--------------------------------------------------------------
# Safari 15.3 fallbacks
Safari 15.3 and under bug fixes - welcome to the new IE
--------------------------------------------------------------*/
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
/* Hide Dialog (not supported) */
dialog { display: none; background-color: var(--white); z-index: 9999; }
dialog[open] { display: block; }
/* menu fixes */
.js-active .sub-menu-trigger[aria-expanded=true]+.sub-menu .sub-animate>* { background: var(--white); }
.primary-menu .menu-label:hover { color: var(--white); }
}
}