*
*
*
*
*
*
*
* The above will create a system in which the first item will be 100% width
* until we enter our medium breakpoint, when it will become 33.333% width. The
* second and third items will be 50% of their parent, until they also become
* 33.333% width at the medium breakpoint.
*
* We can also manipulate entire layout systems by adding a series of modifiers
* to the `.o-layout` block. For example:
*
*
*
* This will reverse the displayed order of the system so that it runs in the
* opposite order to our source, effectively flipping the system over.
*
*
*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block; /* [1] */
margin: 0; /* [2] */
padding: 0; /* [2] */
list-style: none; /* [1] */
margin-left: -24px; /* [3] */
font-size: 0 !important;
}
.o-layout__item {
box-sizing: border-box; /* [1] */
display: inline-block; /* [2] */
vertical-align: top; /* [3] */
width: 100%; /* [4] */
padding-left: 24px; /* [5] */
font-size: 18px; /* [6] */
font-size: 1rem;
}
/* Gutter size modifiers
========================================================================== */
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
.o-layout--tiny {
margin-left: -6px;
}
.o-layout--tiny > .o-layout__item {
padding-left: 6px;
}
.o-layout--small {
margin-left: -12px;
}
.o-layout--small > .o-layout__item {
padding-left: 12px;
}
.o-layout--large {
margin-left: -48px;
}
.o-layout--large > .o-layout__item {
padding-left: 48px;
}
.o-layout--huge {
margin-left: -96px;
}
.o-layout--huge > .o-layout__item {
padding-left: 96px;
}
/* Vertical alignment modifiers
========================================================================== */
.o-layout--middle > .o-layout__item {
vertical-align: middle;
}
.o-layout--bottom > .o-layout__item {
vertical-align: bottom;
}
.o-layout--stretch {
display: flex;
flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
display: flex;
flex: auto 1;
flex-direction: column;
}
.o-layout--stretch.o-layout--center {
justify-content: center;
}
.o-layout--stretch.o-layout--right {
justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
justify-content: flex-start;
}
.o-layout--stretch.o-layout--middle {
align-items: center;
}
/* Fill order modifiers
========================================================================== */
.o-layout--center {
text-align: center;
}
.o-layout--center > .o-layout__item {
text-align: left;
}
.o-layout--right {
text-align: right;
}
.o-layout--right > .o-layout__item {
text-align: left;
}
.o-layout--left {
text-align: left;
}
.o-layout--left > .o-layout__item {
text-align: left;
}
.o-layout--reverse {
direction: rtl;
}
.o-layout--reverse > .o-layout__item {
direction: ltr;
}
/* Auto-widths modifier
========================================================================== */
.o-layout--auto > .o-layout__item {
width: auto;
}
/* ==========================================================================
#LISTS
========================================================================== */
/**
* Strip list-like appearance from lists by removing their bullets and any
* indentation.
*
* Note: Declaring the item class might not be necessary everywhere,
* but is for example in
lists for the - children.
*/
.o-list-bare, [id^=social-menu] .c-navigation__list {
list-style: none;
margin-left: 0;
}
.o-list-bare li:before, [id^=social-menu] .c-navigation__list li:before {
content: none !important;
}
.o-list-bare__item, [id^=social-menu] .c-navigation__list > li {
margin-left: 0;
padding-left: 0;
}
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline, [id^=social-menu] .c-navigation__list {
margin-left: 0;
list-style: none;
}
.o-list-inline__item, [id^=social-menu] .c-navigation__list > li {
display: inline-block;
}
/* ==========================================================================
#ROWS
========================================================================== */
.o-row {
padding: 24px 0;
position: relative;
}
@media (min-width: 46.25em) {
.o-row {
padding: 48px 0;
}
}
@media (min-width: 61.25em) {
.o-row.bg_image {
background: none !important;
padding: 144px 0;
}
}
.o-row--embossed {
position: relative;
}
.o-row--embossed:after {
content: "";
background: #fafafa;
display: block;
position: absolute;
width: 120%;
height: 100%;
top: 0;
left: 50%;
z-index: -1;
transform: translateX(-50%);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.26);
}
.o-row__bg-image {
background-repeat: no-repeat;
background-position: center center;
background-size: 1920px auto;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
.o-row__bg-color {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -2;
}
@media (max-width: 61.24em) {
.o-row__bg-image {
display: none;
}
}
/* ==========================================================================
#SWATCHES
========================================================================== */
.o-swatch {
width: 49%;
display: inline-block;
vertical-align: top;
margin-bottom: 24px;
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1.7142857143;
}
@media (min-width: 20em) {
.o-swatch {
width: 32%;
}
}
@media (min-width: 46.25em) {
.o-swatch {
width: 19%;
}
}
@media (min-width: 61.25em) {
.o-swatch {
width: 10%;
}
}
.o-swatch__color {
width: 60px;
height: 60px;
border-radius: 100%;
display: inline-block;
background: white;
border: 1px solid #b3b3b3;
position: relative;
overflow: hidden;
}
.o-swatch__color:before {
content: "";
display: block;
width: 50%;
height: 200%;
border-left: 1px solid red;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transform: rotate(-45deg);
transform-origin: top left;
opacity: 0.5;
}
/* ==========================================================================
#TRUNCATE
========================================================================== */
/**
* Truncates sibling elements after a `.truncate` marker within `.o-truncate`.
*
* Any siblings following the `.truncate` element will be hidden by default.
* Removing the `.truncate` class (via JS or otherwise) will reveal the hidden content.
*
* This is useful for previewing a limited set of items and showing the rest
* on interaction (e.g. "View All" button).
*/
.o-truncate .truncate ~ * {
display: none;
}
/* ==========================================================================
#WRAPPER
========================================================================== */
/**
* Page-level constraining and wrapping elements.
*/
.o-wrapper:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-wrapper {
padding-right: 24px;
padding-left: 24px;
margin-right: auto;
margin-left: auto;
max-width: 1200px;
}
@media (max-width: 46.24em) {
.o-wrapper {
padding-right: 12px;
padding-left: 12px;
}
}
.o-wrapper--wide {
max-width: 1600px !important;
margin: auto;
}
.o-wrapper--narrow {
max-width: 800px !important;
margin: auto;
}
.o-wrapper--slim {
max-width: 600px !important;
margin: auto;
}
.o-wrapper--full {
max-width: none !important;
margin: auto;
}
.o-wrapper--flush {
max-width: none !important;
margin: auto;
padding: 0;
}
/* ==========================================================================
#ACCORDIONS
========================================================================== */
.c-accordion {
box-shadow: inset 0 0 0 1px #d9d9d9;
border-radius: 6px;
margin-bottom: 12px;
background: white;
transition: all 0.25s ease 0s;
}
.c-accordion.hover, .c-accordion:hover {
box-shadow: inset 0 0 0 1px #b3b3b3, 0 2px 5px rgba(0, 0, 0, 0.16);
}
.c-accordion:focus {
box-shadow: inset 0 0 0 2px var(--color-link-hover);
}
.c-accordion.expanded {
box-shadow: inset 0 0 0 1px #666666;
}
.c-accordion__toggle {
display: block;
padding: 12px 48px 12px 24px;
position: relative;
font-weight: 500;
cursor: pointer;
color: #333333;
}
.hover .c-accordion__toggle {
color: var(--color-link-hover);
}
.c-accordion__toggle + section {
display: none;
padding: 0 24px;
}
.c-accordion__toggle + section p:last-child {
margin-bottom: 0;
}
.expanded .c-accordion__toggle + section {
display: block;
padding: 0 24px 24px;
}
.c-accordion__toggle:after {
content: "\f078";
font-family: "Font Awesome 6 Free";
font-weight: bold;
display: inline-block;
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%) scale(1, 1);
}
.expanded .c-accordion__toggle:after {
transform-origin: center;
transform: translateY(-50%) scale(1, -1);
}
/* ==========================================================================
#BADGES
========================================================================== */
.c-badge, .woocommerce-page .wc-content .tagcloud a,
.woocommerce-page .o-content .woocommerce .tagcloud a {
display: inline-block;
line-height: 1;
background: #e6e6e6;
color: #666666;
padding: 3px 6px;
margin: 0 6px 6px 0;
box-sizing: border-box;
border-radius: 3px;
max-width: 80%;
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1;
}
.c-badge *, .woocommerce-page .wc-content .tagcloud a *,
.woocommerce-page .o-content .woocommerce .tagcloud a * {
color: inherit !important;
}
.c-badge--stroke {
background: transparent;
color: #666666;
box-shadow: inset 0 0 0 1px #d9d9d9;
}
.c-badge--link, .woocommerce-page .wc-content .tagcloud a,
.woocommerce-page .o-content .woocommerce .tagcloud a {
transition: all 0.25s ease 0s;
}
.c-badge--link:hover, .woocommerce-page .wc-content .tagcloud a:hover,
.woocommerce-page .o-content .woocommerce .tagcloud a:hover {
color: #89c43d;
background: rgb(184.5731225296, 219.7865612648, 139.2134387352);
}
.c-badge--link.c-badge--stroke:hover, .woocommerce-page .wc-content .tagcloud a.c-badge--stroke:hover,
.woocommerce-page .o-content .woocommerce .tagcloud a.c-badge--stroke:hover {
box-shadow: none;
}
.c-badge--image {
padding: 0;
border: none;
overflow: hidden;
}
.c-badge--image img {
vertical-align: bottom !important;
}
.c-badge--success {
background: rgb(224.8170731707, 237.1646341463, 205.3353658537);
color: rgb(103.6585365854, 137.9573170732, 49.5426829268);
}
.c-badge--success.c-badge--stroke {
box-shadow: inset 0 0 0 1px rgb(103.6585365854, 137.9573170732, 49.5426829268);
}
.c-badge--pending {
background: #ffeecc;
color: #cc8800;
}
.c-badge--pending.c-badge--stroke {
box-shadow: inset 0 0 0 1px #cc8800;
}
.c-badge--error {
background: #ffaaaa;
color: #aa0000;
}
.c-badge--error.c-badge--stroke {
box-shadow: inset 0 0 0 1px #aa0000;
}
.c-badge__truncate {
margin-bottom: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
max-height: 1.5em;
line-height: 1.2;
}
/* ==========================================================================
#BREADCRUMBS
========================================================================== */
.c-breadcrumbs {
color: #999999;
padding: 12px 0;
font-weight: 500;
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1.6;
}
.c-breadcrumbs br {
display: none;
}
.c-breadcrumbs .current-item {
font-weight: 300;
color: #999999 !important;
}
.c-breadcrumbs .current-item * {
color: #999999 !important;
}
/* ==========================================================================
#PAGE
========================================================================== */
.c-form-item {
margin-bottom: 24px;
}
.c-form-item .required {
color: #aa0000;
}
.c-form-item .description {
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1.5;
margin-top: 6px;
}
.c-form-item input, .c-form-item textarea {
padding: 12px;
}
/* ==========================================================================
#FOOTER
========================================================================== */
.c-pre-footer {
padding: 96px 0 48px;
background: #f9e60f;
background: linear-gradient(to bottom, #f9e60f 0%, #fbf7af 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9e60f', endColorstr='#fbf7af', GradientType=0);
}
.c-pre-footer .nf-form-fields-required {
display: none !important;
}
.c-footer__brand {
max-width: 100px;
display: inline-block;
}
/* ==========================================================================
#FEATUED POST
========================================================================== */
/* ==========================================================================
#HEADINGS
========================================================================== */
.u-heading-divider {
text-align: center;
padding: 48px 0;
}
@media (min-width: 46.25em) {
.u-heading-divider {
position: relative;
}
.u-heading-divider:before {
content: "";
display: inline-block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 35%;
height: 0;
border-bottom: 1px solid darkgray;
z-index: -1;
}
.u-heading-divider:after {
content: "";
display: inline-block;
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
width: 35%;
height: 0;
border-bottom: 1px solid darkgray;
z-index: -1;
}
}
.u-heading-underscore {
margin-bottom: 0;
}
.centered .u-heading-underscore, .u-align-center .u-heading-underscore {
text-align: center;
}
.u-heading-underscore:after {
content: "";
display: block;
width: 50px;
border-bottom: 4px solid #3390cd;
margin: 24px 0;
}
.centered .u-heading-underscore:after, .u-align-center .u-heading-underscore:after {
margin: 24px auto;
}
/**
* Redefine all of our basic heading styles against utility classes so as to
* allow for double stranded heading hierarchy, e.g. we semantically need an H2,
* but we want it to be sized like an H1:
*
*
*
*/
@media (min-width: 61.25em) {
.c-featured-post {
display: flex;
}
}
.c-featured-post.c-featured-post--sidebar, .c-featured-post.c-featured-post--vertical {
display: block;
}
.c-featured-post .u-heading-underscore:after {
margin: 12px 0;
}
.c-featured-post__thumbnail {
margin-bottom: 12px;
background: no-repeat center/cover;
}
.c-featured-post__thumbnail .c-image {
padding-bottom: 67%;
}
@media (min-width: 61.25em) {
.c-featured-post__thumbnail {
width: 50%;
margin-right: 48px;
}
}
.c-featured-post--vertical .c-featured-post__thumbnail, .c-featured-post--sidebar .c-featured-post__thumbnail {
width: 100%;
margin-right: 0;
padding: 0;
}
.c-featured-post__content {
flex: 1;
}
.c-featured-post__title {
margin-bottom: 6px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipse;
font-size: 1.4444444444rem;
font-size: 26px;
line-height: 1.3846153846;
}
.c-featured-post--vertical .c-featured-post__title, .c-featured-post--sidebar .c-featured-post__title {
margin-bottom: 6px;
}
.c-featured-post__date {
margin-bottom: 12px;
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1.5;
}
.c-featured-post--vertical .c-featured-post__date, .c-featured-post--sidebar .c-featured-post__date {
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1.7142857143;
margin-bottom: 12px;
}
.c-featured-post__excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipse;
}
.c-featured-post--vertical .c-featured-post__excerpt, .c-featured-post--sidebar .c-featured-post__excerpt {
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1.4;
}
.c-featured-post__tags {
margin-bottom: 12px;
}
/* ==========================================================================
#HEADER
========================================================================== */
.c-header {
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
padding: 12px 0 0;
position: relative;
z-index: 999;
}
.mobile-menu-active .c-header {
z-index: 999999;
}
.c-header__layout {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (min-width: 61.25em) {
.c-header__layout {
align-items: flex-end;
}
}
.c-header__wrap {
position: relative;
}
.c-header__branding {
margin-right: 24px;
padding-bottom: 12px;
max-width: 80px;
}
.c-header__branding .custom-logo-link {
display: inline-block;
max-width: 350px;
}
.c-header__navigation {
box-sizing: border-box;
flex: 1;
text-align: right;
background: white;
}
@media (max-width: 61.24em) {
.c-header__navigation {
flex-direction: column-reverse;
position: fixed;
top: 0;
right: -120vw;
z-index: 9999999;
width: 95%;
height: 100%;
padding: 24px;
overflow: auto;
transition: all 0.25s ease 0s;
}
}
.mobile-menu-active .c-header__navigation {
right: 0;
box-shadow: -2px 0 20px 10px rgba(0, 0, 0, 0.36);
}
@media (max-width: 61.24em) {
.c-header__toolbar {
display: flex;
flex-direction: column-reverse;
margin-bottom: 24px;
}
}
@media (min-width: 61.25em) {
.c-header__toolbar nav[class^=c-navigation] {
display: inline-block;
}
}
.c-header__menu {
flex: 1;
}
@media (max-width: 61.24em) {
.c-header__menu {
margin-bottom: 24px;
}
}
/* ==========================================================================
#LISTINGS
========================================================================== */
.c-listing {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #d9d9d9;
}
.c-listing:not(.c-listing--card):last-of-type {
border: none;
}
.c-listing .u-heading-underscore:after {
margin: 12px 0;
}
.c-listing--card {
width: 100%;
height: 100%;
border: 1px solid #d9d9d9;
border-radius: 6px;
padding: 24px;
margin-bottom: 24px;
background: white;
box-sizing: border-box;
transition: all 0.25s ease 0s;
}
.c-listing--card:hover {
border-color: #b3b3b3;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
}
.c-listing--sidebar {
border-bottom: 1px solid #b3b3b3;
margin-bottom: 12px;
padding-bottom: 12px;
}
.c-listing__thumbnail {
margin-bottom: 12px;
text-align: right;
}
.c-listing__event-details {
display: flex;
align-items: flex-start;
}
.c-listing__event-date {
background: var(--color-primary);
color: white;
padding: 6px 12px;
border-radius: 3px;
margin: 0 12px 12px 0;
text-align: center;
transition: all 0.25s ease 0s;
}
.c-listing__event-date:hover {
color: white;
background: var(--color-secondary);
}
.c-listing__event-day {
display: block;
font-weight: 600;
vertical-align: bottom;
font-size: 1.9444444444rem;
font-size: 35px;
line-height: 1;
}
@media (min-width: 46.25em) {
.c-listing--sidebar .c-listing__event-day {
font-size: 1rem;
font-size: 18px;
line-height: 1;
}
}
.c-listing__event-month {
display: block;
font-weight: 500;
text-transform: uppercase;
line-height: 1;
vertical-align: bottom;
}
@media (min-width: 46.25em) {
.c-listing--sidebar .c-listing__event-month {
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1;
}
}
.c-listing__title {
margin-bottom: 0;
}
.c-listing--vertical .c-listing__title, .c-listing--compact .c-listing__title {
text-transform: none;
margin-bottom: 0;
}
.c-listing--sidebar .c-listing__title {
margin-bottom: 0;
}
.c-listing__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipse;
}
.c-listing__meta {
margin-bottom: 12px;
}
.c-listing__date {
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1.7142857143;
margin-bottom: 6px;
}
.c-listing__excerpt {
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipse;
}
.c-listing__tags {
margin-bottom: 12px;
}
/* ==========================================================================
#NAVIGATION
========================================================================== */
@media (min-width: 61.25em) {
.c-navigation#toolbar-menu {
margin-left: 24px;
}
}
.c-navigation#copy-menu {
display: inline;
}
.c-navigation__list {
list-style: none;
padding: 0;
margin: 0;
}
.c-navigation__list li {
display: inline-block;
margin-bottom: 0;
}
#top-menu .c-navigation__list > li {
color: black;
font-weight: 700;
margin-left: 1em;
display: block;
}
@media (min-width: 61.25em) {
#top-menu .c-navigation__list > li {
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1.2;
display: inline-block;
position: relative;
}
}
#top-menu .c-navigation__list > li > a {
display: inline-block;
color: inherit;
vertical-align: middle;
padding: 12px 0;
}
@media (min-width: 61.25em) {
#top-menu .c-navigation__list > li > a {
padding: 12px;
}
}
#top-menu .c-navigation__list > li > a:hover {
color: #89c43d;
}
#top-menu .c-navigation__list > li:hover .sub-menu {
display: block;
}
#top-menu .c-navigation__list > li .sub-menu {
margin: 0 0 24px;
padding: 0;
}
@media (min-width: 61.25em) {
#top-menu .c-navigation__list > li .sub-menu {
display: none;
position: absolute;
top: 100%;
right: -12px;
z-index: 999;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
background: white;
border-radius: 0 0 3px 3px;
padding: 24px;
}
}
#top-menu .c-navigation__list > li .sub-menu li {
padding: 0;
text-transform: none;
font-weight: 400;
color: #3390cd;
display: block;
min-width: 150px;
font-size: 1rem;
font-size: 18px;
line-height: 1.2;
}
@media (max-width: 61.24em) {
#top-menu .c-navigation__list > li .sub-menu li {
margin: 12px 0 0;
}
}
#top-menu .c-navigation__list > li .sub-menu li.current-menu-item > a {
font-weight: bold;
color: black;
pointer-events: none;
}
#top-menu .c-navigation__list > li.menu-item-has-children > a:before {
content: "\f078";
font-family: "Font Awesome 6 Free";
font-weight: 700;
margin-right: 6px;
color: #3390cd;
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1.7142857143;
vertical-align: text-bottom;
}
#top-menu .c-navigation__list > li.current-menu-item > a, #top-menu .c-navigation__list > li.current-page-parent > a, #top-menu .c-navigation__list > li.current_page_ancestor > a, #top-menu .c-navigation__list > li.current-page-ancestor > a, #top-menu .c-navigation__list > li.current-menu-ancestor > a {
box-shadow: inset 0 -4px 0 var(--color-primary);
}
#footer-menu .c-navigation__list > li {
display: block;
margin-bottom: 12px;
}
#footer-menu .c-navigation__list > li a:hover {
text-decoration: underline;
}
[id^=social-menu] .c-navigation__list {
display: inline-block;
}
#copy-menu .c-navigation__list {
display: inline-block;
}
#copy-menu .c-navigation__list > li {
line-height: 1;
box-shadow: -1px 0 0 0 #b3b3b3;
margin-left: 6px;
padding-left: 6px;
}
#copy-menu .c-navigation__list a {
color: inherit;
white-space: normal;
}
#copy-menu .c-navigation__list a:hover {
text-decoration: underline;
}
/* ==========================================================================
#MAP
========================================================================== */
.c-map {
margin: 0 0 24px;
overflow: hidden;
position: relative;
border-radius: 3px;
}
.c-map__toggle {
display: block;
padding: 12px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 9;
}
.c-map__frame {
display: none;
}
/* ==========================================================================
#PAGER
========================================================================== */
.c-pager {
text-align: center;
padding: 12px 0 48px;
display: inline-flex;
}
.c-pager .page-numbers {
display: inline-block;
vertical-align: middle;
min-width: 1.5em;
border-color: #b3b3b3;
width: auto;
}
@media (max-width: 46.24em) {
.c-pager .page-numbers {
padding: 6px 12px;
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1.5;
}
}
.c-pager .page-numbers:hover {
box-shadow: none;
}
.c-pager .prev,
.c-pager .next {
border-color: #b3b3b3;
display: flex;
align-items: center;
justify-content: center;
}
.c-pager .prev:hover,
.c-pager .next:hover {
box-shadow: none;
}
@media (max-width: 46.24em) {
.c-pager .prev {
float: left;
}
}
@media (max-width: 46.24em) {
.c-pager .next {
float: right;
}
}
.c-pager .current {
pointer-events: none;
background: var(--button-color-primary);
border-color: var(--button-color-primary);
color: white;
}
.c-pager .dots {
border: none;
pointer-events: none;
color: #999999;
}
/* ==========================================================================
#POST NAVIGATION
========================================================================== */
.c-posts-nav {
display: flex;
justify-content: space-between;
}
.c-posts-nav a {
position: relative;
}
.c-posts-nav .prev,
.c-posts-nav .next {
font-weight: 600;
flex: 1;
}
.c-posts-nav .next {
text-align: right;
}
/* ==========================================================================
#SLIDER
========================================================================== */
.c-slider .slide {
position: relative;
margin: 0;
padding: 0 0 24px;
max-height: 0;
}
.c-slider .slide:before {
content: none;
}
.c-slider .slide.flex-active-slide {
max-height: 1000px;
}
.flexslider {
border: none;
}
@media (max-width: 46.24em) {
.c-slider--carousel .flex-direction-nav {
display: none;
}
}
.flex-direction-nav li {
padding: 0;
}
.flex-direction-nav li:before {
content: none;
}
.flex-direction-nav a:before {
color: #cccccc;
background: none;
font-size: 48px;
font-family: "Font Awesome 6 Free";
font-weight: 900;
border-radius: 96px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease 0s;
}
@media (max-width: 46.24em) {
.flex-direction-nav a:before {
width: 35px;
height: 35px;
font-size: 35px;
}
}
@media (max-width: 61.24em) {
.flex-direction-nav a {
top: 98.5%;
}
}
.flex-direction-nav a:hover:before {
color: black;
}
.flex-direction-nav a.flex-prev:before {
content: "\f053";
text-shadow: none;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
text-shadow: none;
}
.flex-control-nav {
position: static;
}
.flex-control-nav li {
padding: 0;
margin: 0 6px;
}
.flex-control-nav li:before {
content: none;
}
.flex-control-nav li a {
background: #cccccc;
box-shadow: none;
width: 12px;
height: 12px;
transition: all 0.25s ease 0s;
}
.flex-control-nav li a:hover {
background: var(--color-link);
}
.flex-control-nav li a.flex-active {
background: var(--color-link);
}
/* ==========================================================================
#SEARCH
========================================================================== */
.c-search__text {
border-radius: 6px 0 0 6px;
}
.c-search__submit {
border-radius: 0 6px 6px 0;
}
/* ==========================================================================
#SIDEBAR CTA
========================================================================== */
.c-sidebar-cta {
position: relative;
border: 1px solid #d9d9d9;
border-radius: 6px;
overflow: hidden;
text-align: center;
background: var(--color-primary);
color: var(--color-text-reverse);
}
.c-sidebar-cta__content {
padding: 24px;
color: inherit;
}
.c-sidebar-cta__title {
color: inherit;
}
.c-sidebar-cta__title a {
color: var(--color-link);
}
.c-sidebar-cta__title a:hover {
color: var(--color-link-hover);
}
.c-sidebar-cta__excerpt {
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1.4;
}
/* ==========================================================================
#SUB HEADER
========================================================================== */
.c-sub-header {
overflow: hidden;
position: relative;
}
.c-sub-header.c-sub-header--hero {
background: no-repeat right center/cover;
}
@media (max-width: 61.24em) {
.c-sub-header.c-sub-header--hero {
background: none !important;
}
}
@media (min-width: 61.25em) {
.c-sub-header--hero .c-sub-header__layout {
display: flex;
position: relative;
}
}
.c-sub-header__content {
position: relative;
padding-top: 24px;
width: 100%;
z-index: 9;
}
.c-sub-header--hero .c-sub-header__content {
width: auto;
margin: 0 -24px;
padding: 0 24px 48px;
background: white;
}
@media (min-width: 61.25em) {
.c-sub-header--hero .c-sub-header__content {
padding: 48px 24px;
background: none !important;
height: 60vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 50%;
max-height: 550px;
}
}
.c-sub-header__subheading {
font-size: 1.2222222222rem;
font-size: 22px;
line-height: 1.3636363636;
}
@media (min-width: 61.25em) {
.c-sub-header__share {
flex: 1;
text-align: right;
}
}
.c-sub-header--hero .c-sub-header__image {
margin: 0 -24px;
flex: 1;
}
@media (min-width: 61.25em) {
.c-sub-header--hero .c-sub-header__image {
margin: 0 -24px 0 0;
}
}
.c-sub-header__image-close-crop {
width: 100%;
margin: auto;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media (min-width: 61.25em) {
.c-sub-header__image-close-crop {
background: none !important;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
text-align: center;
}
}
.c-sub-header__image-close-crop img {
max-width: none;
width: 100%;
height: 300px;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: right bottom;
object-position: right bottom;
}
@media (min-width: 61.25em) {
.c-sub-header__image-close-crop img {
height: 100%;
width: auto;
}
}
.c-sub-header__image-hero {
position: relative;
}
@media (min-width: 61.25em) {
.c-sub-header__image-hero {
overflow: hidden;
height: 100%;
width: 120%;
}
}
.c-sub-header__image-hero img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 100%;
height: 100%;
}
@media (min-width: 61.25em) {
.c-sub-header__hero-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@media (min-width: 61.25em) {
.c-sub-header__title-container {
display: flex;
}
}
.c-sub-header--centered .c-sub-header__title-container {
display: block;
text-align: center;
}
.c-sub-header__title {
color: #009660;
}
@media (min-width: 61.25em) {
.c-sub-header--blog .c-sub-header__title {
width: 65%;
}
}
.c-sub-header__subtitle {
margin: 0 auto;
font-weight: 400;
font-size: 1.2222222222rem;
font-size: 22px;
line-height: 1.4;
}
.c-sub-header__subtitle p:last-child {
margin: 0;
}
.c-sub-header--centered .c-sub-header__subtitle {
max-width: 800px;
text-align: center;
}
.c-sub-header__actions {
margin-top: 36px;
}
.c-sub-header--centered .c-sub-header__actions {
text-align: center;
}
/* ==========================================================================
#TABS
========================================================================== */
.c-tabs {
position: relative;
z-index: 9;
}
.c-tabs.c-tabs--lifted {
margin-top: -48px;
}
.c-tabs__headers, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs {
margin: 0;
list-style: none;
display: flex;
align-items: flex-end;
}
.c-tabs__headers::-webkit-scrollbar, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs::-webkit-scrollbar,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs::-webkit-scrollbar {
display: none;
}
.c-tabs__headers, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
padding: 0 12px;
white-space: nowrap;
position: relative;
overflow: auto;
border-bottom: 1px solid #b3b3b3;
}
.c-tabs--lifted .c-tabs__headers, .c-tabs--lifted .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs, .woocommerce-page .wc-content .product .woocommerce-tabs .c-tabs--lifted ul.wc-tabs,
.c-tabs--lifted .woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs .c-tabs--lifted ul.wc-tabs {
margin: 0 -24px;
}
.c-tabs__item, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab] a,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab] a, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab].active a {
font-weight: 400;
display: inline-block;
padding: 12px 24px;
margin-right: 6px;
color: black;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(30px);
border-radius: 6px 6px 0 0;
-webkit-backdrop-filter: blur(10px); /* For Safari */
}
.active .c-tabs__item, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab].active a .c-tabs__item,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab].active a .c-tabs__item, .active .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab] a, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab] .active a,
.active .woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab] a,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab] .active a, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab].active a,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab].active a, .c-tabs__item.active, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab] a.active,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab] a.active {
background: rgba(255, 255, 255, 0.65);
box-shadow: inset 0 -4px 0 var(--color-primary);
}
.c-tabs__panel {
padding: 24px 0;
display: none;
}
.c-tabs__panel.active, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab].active a.c-tabs__panel,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab].active a.c-tabs__panel {
display: block;
}
/* ==========================================================================
#ALIGN
========================================================================== */
.u-align-right {
text-align: right !important;
}
.u-align-left {
text-align: left !important;
}
.u-align-center {
text-align: center !important;
}
@media (min-width: 20em) {
.u-align-left--mobile {
text-align: left !important;
}
}
@media (min-width: 20em) {
.u-align-right--mobile {
text-align: right !important;
}
}
@media (min-width: 20em) {
.u-align-center--mobile {
text-align: center !important;
}
}
@media (min-width: 26.25em) {
.u-align-left--phablet {
text-align: left !important;
}
}
@media (min-width: 26.25em) {
.u-align-right--phablet {
text-align: right !important;
}
}
@media (min-width: 26.25em) {
.u-align-center--phablet {
text-align: center !important;
}
}
@media (min-width: 46.25em) {
.u-align-left--tablet {
text-align: left !important;
}
}
@media (min-width: 46.25em) {
.u-align-right--tablet {
text-align: right !important;
}
}
@media (min-width: 46.25em) {
.u-align-center--tablet {
text-align: center !important;
}
}
@media (min-width: 61.25em) {
.u-align-left--desktop {
text-align: left !important;
}
}
@media (min-width: 61.25em) {
.u-align-right--desktop {
text-align: right !important;
}
}
@media (min-width: 61.25em) {
.u-align-center--desktop {
text-align: center !important;
}
}
@media (min-width: 81.25em) {
.u-align-left--wide {
text-align: left !important;
}
}
@media (min-width: 81.25em) {
.u-align-right--wide {
text-align: right !important;
}
}
@media (min-width: 81.25em) {
.u-align-center--wide {
text-align: center !important;
}
}
/* ==========================================================================
#ASPECT RATIO
========================================================================== */
[class*=u-ratio] {
position: relative;
overflow: hidden;
}
[class*=u-ratio]:before {
display: block;
content: "";
width: 100%;
padding-bottom: 100%;
}
[class*=u-ratio] > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
[class*=u-ratio] > .content iframe,
[class*=u-ratio] > .content img {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 100%;
height: 100%;
}
.u-ratio-1\:1::before {
padding-bottom: 100%;
}
@media (min-width: 20em) {
.u-ratio-1\:1--mobile:before {
padding-bottom: 100% !important;
}
}
@media (min-width: 26.25em) {
.u-ratio-1\:1--phablet:before {
padding-bottom: 100% !important;
}
}
@media (min-width: 46.25em) {
.u-ratio-1\:1--tablet:before {
padding-bottom: 100% !important;
}
}
@media (min-width: 61.25em) {
.u-ratio-1\:1--desktop:before {
padding-bottom: 100% !important;
}
}
@media (min-width: 81.25em) {
.u-ratio-1\:1--wide:before {
padding-bottom: 100% !important;
}
}
.u-ratio-2\:1::before {
padding-bottom: 50%;
}
@media (min-width: 20em) {
.u-ratio-2\:1--mobile:before {
padding-bottom: 50% !important;
}
}
@media (min-width: 26.25em) {
.u-ratio-2\:1--phablet:before {
padding-bottom: 50% !important;
}
}
@media (min-width: 46.25em) {
.u-ratio-2\:1--tablet:before {
padding-bottom: 50% !important;
}
}
@media (min-width: 61.25em) {
.u-ratio-2\:1--desktop:before {
padding-bottom: 50% !important;
}
}
@media (min-width: 81.25em) {
.u-ratio-2\:1--wide:before {
padding-bottom: 50% !important;
}
}
.u-ratio-3\:1::before {
padding-bottom: 33.3333333333%;
}
@media (min-width: 20em) {
.u-ratio-3\:1--mobile:before {
padding-bottom: 33.3333333333% !important;
}
}
@media (min-width: 26.25em) {
.u-ratio-3\:1--phablet:before {
padding-bottom: 33.3333333333% !important;
}
}
@media (min-width: 46.25em) {
.u-ratio-3\:1--tablet:before {
padding-bottom: 33.3333333333% !important;
}
}
@media (min-width: 61.25em) {
.u-ratio-3\:1--desktop:before {
padding-bottom: 33.3333333333% !important;
}
}
@media (min-width: 81.25em) {
.u-ratio-3\:1--wide:before {
padding-bottom: 33.3333333333% !important;
}
}
.u-ratio-4\:3::before {
padding-bottom: 75%;
}
@media (min-width: 20em) {
.u-ratio-4\:3--mobile:before {
padding-bottom: 75% !important;
}
}
@media (min-width: 26.25em) {
.u-ratio-4\:3--phablet:before {
padding-bottom: 75% !important;
}
}
@media (min-width: 46.25em) {
.u-ratio-4\:3--tablet:before {
padding-bottom: 75% !important;
}
}
@media (min-width: 61.25em) {
.u-ratio-4\:3--desktop:before {
padding-bottom: 75% !important;
}
}
@media (min-width: 81.25em) {
.u-ratio-4\:3--wide:before {
padding-bottom: 75% !important;
}
}
.u-ratio-16\:9::before {
padding-bottom: 56.25%;
}
@media (min-width: 20em) {
.u-ratio-16\:9--mobile:before {
padding-bottom: 56.25% !important;
}
}
@media (min-width: 26.25em) {
.u-ratio-16\:9--phablet:before {
padding-bottom: 56.25% !important;
}
}
@media (min-width: 46.25em) {
.u-ratio-16\:9--tablet:before {
padding-bottom: 56.25% !important;
}
}
@media (min-width: 61.25em) {
.u-ratio-16\:9--desktop:before {
padding-bottom: 56.25% !important;
}
}
@media (min-width: 81.25em) {
.u-ratio-16\:9--wide:before {
padding-bottom: 56.25% !important;
}
}
.u-ratio-image-share::before {
padding-bottom: 52.5%;
}
@media (min-width: 20em) {
.u-ratio-image-share--mobile:before {
padding-bottom: 52.5% !important;
}
}
@media (min-width: 26.25em) {
.u-ratio-image-share--phablet:before {
padding-bottom: 52.5% !important;
}
}
@media (min-width: 46.25em) {
.u-ratio-image-share--tablet:before {
padding-bottom: 52.5% !important;
}
}
@media (min-width: 61.25em) {
.u-ratio-image-share--desktop:before {
padding-bottom: 52.5% !important;
}
}
@media (min-width: 81.25em) {
.u-ratio-image-share--wide:before {
padding-bottom: 52.5% !important;
}
}
.u-ratio-image-profile::before {
padding-bottom: 140%;
}
@media (min-width: 20em) {
.u-ratio-image-profile--mobile:before {
padding-bottom: 140% !important;
}
}
@media (min-width: 26.25em) {
.u-ratio-image-profile--phablet:before {
padding-bottom: 140% !important;
}
}
@media (min-width: 46.25em) {
.u-ratio-image-profile--tablet:before {
padding-bottom: 140% !important;
}
}
@media (min-width: 61.25em) {
.u-ratio-image-profile--desktop:before {
padding-bottom: 140% !important;
}
}
@media (min-width: 81.25em) {
.u-ratio-image-profile--wide:before {
padding-bottom: 140% !important;
}
}
/* ==========================================================================
#COLOR
========================================================================== */
.u-color-primary {
color: #3390cd;
}
.u-color-primary--bg {
background-color: #3390cd;
}
.u-color-primary--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #3390cd inset;
color: #3390cd;
}
.u-color-primary--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-secondary {
color: #89c43d;
}
.u-color-secondary--bg {
background-color: #89c43d;
}
.u-color-secondary--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #89c43d inset;
color: #89c43d;
}
.u-color-secondary--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
box-shadow: 0 0 0 2px #3390cd inset;
color: #3390cd;
}
.u-color-secondary--bg.c-btn--solid:hover {
background: #3390cd;
}
.u-color-tertiary {
color: #009660;
}
.u-color-tertiary--bg {
background-color: #009660;
}
.u-color-tertiary--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #009660 inset;
color: #009660;
}
.u-color-tertiary--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-brand-1 {
color: #89c43d;
}
.u-color-brand-1--bg {
background-color: #89c43d;
}
.u-color-brand-1--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #89c43d inset;
color: #89c43d;
}
.u-color-brand-1--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
box-shadow: 0 0 0 2px #3390cd inset;
color: #3390cd;
}
.u-color-brand-1--bg.c-btn--solid:hover {
background: #3390cd;
}
.u-color-brand-2 {
color: #3390cd;
}
.u-color-brand-2--bg {
background-color: #3390cd;
}
.u-color-brand-2--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #3390cd inset;
color: #3390cd;
}
.u-color-brand-2--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-brand-3 {
color: #f9e60f;
}
.u-color-brand-3--bg {
background-color: #f9e60f;
}
.u-color-brand-3--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #f9e60f inset;
color: #f9e60f;
}
.u-color-brand-3--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-brand-4 {
color: #d9e499;
}
.u-color-brand-4--bg {
background-color: #d9e499;
}
.u-color-brand-4--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #d9e499 inset;
color: #d9e499;
}
.u-color-brand-4--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-brand-5 {
color: #deeffb;
}
.u-color-brand-5--bg {
background-color: #deeffb;
}
.u-color-brand-5--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #deeffb inset;
color: #deeffb;
}
.u-color-brand-5--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-brand-6 {
color: #133977;
}
.u-color-brand-6--bg {
background-color: #133977;
}
.u-color-brand-6--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #133977 inset;
color: #133977;
}
.u-color-brand-6--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-brand-7 {
color: #009660;
}
.u-color-brand-7--bg {
background-color: #009660;
}
.u-color-brand-7--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #009660 inset;
color: #009660;
}
.u-color-brand-7--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-success {
color: #91be4a;
}
.u-color-success--bg {
background-color: #91be4a;
}
.u-color-success--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #91be4a inset;
color: #91be4a;
}
.u-color-success--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-warning {
color: #ffaa00;
}
.u-color-warning--bg {
background-color: #ffaa00;
}
.u-color-warning--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #ffaa00 inset;
color: #ffaa00;
}
.u-color-warning--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-error {
color: #aa0000;
}
.u-color-error--bg {
background-color: #aa0000;
}
.u-color-error--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #aa0000 inset;
color: #aa0000;
}
.u-color-error--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-white {
color: #ffffff;
}
.u-color-tint-white--bg {
background-color: #ffffff;
}
.u-color-tint-white--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #ffffff inset;
color: #ffffff;
}
.u-color-tint-white--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-1 {
color: #fcfcfc;
}
.u-color-tint-1--bg {
background-color: #fcfcfc;
}
.u-color-tint-1--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #fcfcfc inset;
color: #fcfcfc;
}
.u-color-tint-1--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-2 {
color: #fafafa;
}
.u-color-tint-2--bg {
background-color: #fafafa;
}
.u-color-tint-2--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #fafafa inset;
color: #fafafa;
}
.u-color-tint-2--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-3 {
color: #f7f7f7;
}
.u-color-tint-3--bg {
background-color: #f7f7f7;
}
.u-color-tint-3--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #f7f7f7 inset;
color: #f7f7f7;
}
.u-color-tint-3--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-4 {
color: #f5f5f5;
}
.u-color-tint-4--bg {
background-color: #f5f5f5;
}
.u-color-tint-4--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #f5f5f5 inset;
color: #f5f5f5;
}
.u-color-tint-4--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-5 {
color: #f2f2f2;
}
.u-color-tint-5--bg {
background-color: #f2f2f2;
}
.u-color-tint-5--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #f2f2f2 inset;
color: #f2f2f2;
}
.u-color-tint-5--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-10 {
color: #e6e6e6;
}
.u-color-tint-10--bg {
background-color: #e6e6e6;
}
.u-color-tint-10--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #e6e6e6 inset;
color: #e6e6e6;
}
.u-color-tint-10--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-15 {
color: #d9d9d9;
}
.u-color-tint-15--bg {
background-color: #d9d9d9;
}
.u-color-tint-15--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #d9d9d9 inset;
color: #d9d9d9;
}
.u-color-tint-15--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-20 {
color: #cccccc;
}
.u-color-tint-20--bg {
background-color: #cccccc;
}
.u-color-tint-20--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #cccccc inset;
color: #cccccc;
}
.u-color-tint-20--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-25 {
color: #bfbfbf;
}
.u-color-tint-25--bg {
background-color: #bfbfbf;
}
.u-color-tint-25--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #bfbfbf inset;
color: #bfbfbf;
}
.u-color-tint-25--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-30 {
color: #b3b3b3;
}
.u-color-tint-30--bg {
background-color: #b3b3b3;
}
.u-color-tint-30--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #b3b3b3 inset;
color: #b3b3b3;
}
.u-color-tint-30--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-35 {
color: #a6a6a6;
}
.u-color-tint-35--bg {
background-color: #a6a6a6;
}
.u-color-tint-35--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #a6a6a6 inset;
color: #a6a6a6;
}
.u-color-tint-35--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-40 {
color: #999999;
}
.u-color-tint-40--bg {
background-color: #999999;
}
.u-color-tint-40--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #999999 inset;
color: #999999;
}
.u-color-tint-40--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-45 {
color: #8c8c8c;
}
.u-color-tint-45--bg {
background-color: #8c8c8c;
}
.u-color-tint-45--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #8c8c8c inset;
color: #8c8c8c;
}
.u-color-tint-45--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-50 {
color: #808080;
}
.u-color-tint-50--bg {
background-color: #808080;
}
.u-color-tint-50--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #808080 inset;
color: #808080;
}
.u-color-tint-50--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-55 {
color: #737373;
}
.u-color-tint-55--bg {
background-color: #737373;
}
.u-color-tint-55--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #737373 inset;
color: #737373;
}
.u-color-tint-55--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-60 {
color: #666666;
}
.u-color-tint-60--bg {
background-color: #666666;
}
.u-color-tint-60--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #666666 inset;
color: #666666;
}
.u-color-tint-60--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-65 {
color: #595959;
}
.u-color-tint-65--bg {
background-color: #595959;
}
.u-color-tint-65--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #595959 inset;
color: #595959;
}
.u-color-tint-65--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-70 {
color: #4d4d4d;
}
.u-color-tint-70--bg {
background-color: #4d4d4d;
}
.u-color-tint-70--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #4d4d4d inset;
color: #4d4d4d;
}
.u-color-tint-70--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-75 {
color: #404040;
}
.u-color-tint-75--bg {
background-color: #404040;
}
.u-color-tint-75--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #404040 inset;
color: #404040;
}
.u-color-tint-75--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-80 {
color: #333333;
}
.u-color-tint-80--bg {
background-color: #333333;
}
.u-color-tint-80--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #333333 inset;
color: #333333;
}
.u-color-tint-80--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-85 {
color: #262626;
}
.u-color-tint-85--bg {
background-color: #262626;
}
.u-color-tint-85--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #262626 inset;
color: #262626;
}
.u-color-tint-85--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-90 {
color: #1a1a1a;
}
.u-color-tint-90--bg {
background-color: #1a1a1a;
}
.u-color-tint-90--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #1a1a1a inset;
color: #1a1a1a;
}
.u-color-tint-90--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-tint-black {
color: #000000;
}
.u-color-tint-black--bg {
background-color: #000000;
}
.u-color-tint-black--bg.c-btn--stroke {
background: none;
box-shadow: 0 0 0 2px #000000 inset;
color: #000000;
}
.u-color-tint-black--bg.c-btn--stroke:hover {
color: #89c43d;
border-color: #89c43d;
}
.u-color-reverse {
color: var(--color-text-reverse);
}
.u-color-reverse a {
color: var(--color-text-reverse);
}
.u-color-reverse a:hover {
color: var(--color-text-reverse-hover);
}
/* ==========================================================================
#HIDE
========================================================================== */
.u-hide {
display: none !important;
}
.u-hide-visually {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.u-hide-visually a:focus, .u-hide-visually input:focus, .u-hide-visually button:focus {
position: static;
width: auto;
height: auto;
}
.u-hide-scrollbar::-webkit-scrollbar {
display: none;
}
.u-hide-scrollbar {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
@media print {
.u-hide-for-print {
display: none !important;
}
}
/**
* Responsive hide/show utilities generated per breakpoint.
*/
@media (min-width: 320px) {
.u-hide--mobile {
display: none !important;
}
}
@media (max-width: 319px) {
.u-show--mobile {
display: none !important;
}
}
@media (min-width: 320px) {
.u-hide--visually--mobile {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
}
@media (min-width: 420px) {
.u-hide--phablet {
display: none !important;
}
}
@media (max-width: 419px) {
.u-show--phablet {
display: none !important;
}
}
@media (min-width: 420px) {
.u-hide--visually--phablet {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
}
@media (min-width: 740px) {
.u-hide--tablet {
display: none !important;
}
}
@media (max-width: 739px) {
.u-show--tablet {
display: none !important;
}
}
@media (min-width: 740px) {
.u-hide--visually--tablet {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
}
@media (min-width: 980px) {
.u-hide--desktop {
display: none !important;
}
}
@media (max-width: 979px) {
.u-show--desktop {
display: none !important;
}
}
@media (min-width: 980px) {
.u-hide--visually--desktop {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
}
@media (min-width: 1300px) {
.u-hide--wide {
display: none !important;
}
}
@media (max-width: 1299px) {
.u-show--wide {
display: none !important;
}
}
@media (min-width: 1300px) {
.u-hide--visually--wide {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
}
/**
* Responsive hide/show utilities generated per breakpoint.
*/
@media (min-width: 20em) {
.u-hide--mobile {
display: none !important;
}
}
@media (max-width: 19.99em) {
.u-show--mobile {
display: none !important;
}
}
@media (min-width: 20em) {
.u-hide-visually--mobile {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-hide-visually--mobile a:focus, .u-hide-visually--mobile input:focus, .u-hide-visually--mobile button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (max-width: 19.99em) {
.u-show-visually--mobile {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-show-visually--mobile a:focus, .u-show-visually--mobile input:focus, .u-show-visually--mobile button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (min-width: 26.25em) {
.u-hide--phablet {
display: none !important;
}
}
@media (max-width: 26.24em) {
.u-show--phablet {
display: none !important;
}
}
@media (min-width: 26.25em) {
.u-hide-visually--phablet {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-hide-visually--phablet a:focus, .u-hide-visually--phablet input:focus, .u-hide-visually--phablet button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (max-width: 26.24em) {
.u-show-visually--phablet {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-show-visually--phablet a:focus, .u-show-visually--phablet input:focus, .u-show-visually--phablet button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (min-width: 46.25em) {
.u-hide--tablet {
display: none !important;
}
}
@media (max-width: 46.24em) {
.u-show--tablet {
display: none !important;
}
}
@media (min-width: 46.25em) {
.u-hide-visually--tablet {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-hide-visually--tablet a:focus, .u-hide-visually--tablet input:focus, .u-hide-visually--tablet button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (max-width: 46.24em) {
.u-show-visually--tablet {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-show-visually--tablet a:focus, .u-show-visually--tablet input:focus, .u-show-visually--tablet button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (min-width: 61.25em) {
.u-hide--desktop {
display: none !important;
}
}
@media (max-width: 61.24em) {
.u-show--desktop {
display: none !important;
}
}
@media (min-width: 61.25em) {
.u-hide-visually--desktop {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-hide-visually--desktop a:focus, .u-hide-visually--desktop input:focus, .u-hide-visually--desktop button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (max-width: 61.24em) {
.u-show-visually--desktop {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-show-visually--desktop a:focus, .u-show-visually--desktop input:focus, .u-show-visually--desktop button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (min-width: 81.25em) {
.u-hide--wide {
display: none !important;
}
}
@media (max-width: 81.24em) {
.u-show--wide {
display: none !important;
}
}
@media (min-width: 81.25em) {
.u-hide-visually--wide {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-hide-visually--wide a:focus, .u-hide-visually--wide input:focus, .u-hide-visually--wide button:focus {
position: static;
width: auto;
height: auto;
}
}
@media (max-width: 81.24em) {
.u-show-visually--wide {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
.u-show-visually--wide a:focus, .u-show-visually--wide input:focus, .u-show-visually--wide button:focus {
position: static;
width: auto;
height: auto;
}
}
/* ==========================================================================
#PLACEHOLDERS
========================================================================== */
.u-placeholder-text {
background-color: yellow;
color: #333333;
}
.u-placeholder-border {
overflow: auto;
border: 1px dashed rgba(0, 0, 0, 0.3);
padding: 12px;
}
.u-placeholder-border .u-placeholder-border--red {
border: 1px dashed rgba(255, 0, 0, 0.3);
}
.u-placeholder-border .u-placeholder-border--blue {
border: 1px dashed rgba(0, 0, 255, 0.3);
}
.u-placeholder-border .u-placeholder-border--green {
border: 1px dashed rgba(0, 128, 0, 0.5);
}
.u-placeholder-border .u-placeholder-border--yellow {
border: 1px dashed #ffd200;
}
.u-placeholder-border .u-placeholder-border--purple {
border: 1px dashed rgba(128, 0, 128, 0.5);
}
/* ==========================================================================
#SPACINGS
========================================================================== */
/**
* Utility classes to put specific spacing values onto elements. The below loop
* will generate us a suite of classes like:
*
* .u-margin {}
* .u-padding-left-large {}
* .u-margin-right-small {}
* .u-padding {}
* .u-padding-right-none {}
* .u-padding-horizontal {}
* .u-padding-vertical-small {}
*/
.u-padding {
padding: 24px !important;
}
.u-padding-tiny {
padding: 6px !important;
}
.u-padding-small {
padding: 12px !important;
}
.u-padding-large {
padding: 48px !important;
}
.u-padding-huge {
padding: 96px !important;
}
.u-padding-none {
padding: 0 !important;
}
.u-padding-top {
padding-top: 24px !important;
}
.u-padding-top-tiny {
padding-top: 6px !important;
}
.u-padding-top-small {
padding-top: 12px !important;
}
.u-padding-top-large {
padding-top: 48px !important;
}
.u-padding-top-huge {
padding-top: 96px !important;
}
.u-padding-top-none {
padding-top: 0 !important;
}
.u-padding-right {
padding-right: 24px !important;
}
.u-padding-right-tiny {
padding-right: 6px !important;
}
.u-padding-right-small {
padding-right: 12px !important;
}
.u-padding-right-large {
padding-right: 48px !important;
}
.u-padding-right-huge {
padding-right: 96px !important;
}
.u-padding-right-none {
padding-right: 0 !important;
}
.u-padding-bottom {
padding-bottom: 24px !important;
}
.u-padding-bottom-tiny {
padding-bottom: 6px !important;
}
.u-padding-bottom-small {
padding-bottom: 12px !important;
}
.u-padding-bottom-large {
padding-bottom: 48px !important;
}
.u-padding-bottom-huge {
padding-bottom: 96px !important;
}
.u-padding-bottom-none {
padding-bottom: 0 !important;
}
.u-padding-left {
padding-left: 24px !important;
}
.u-padding-left-tiny {
padding-left: 6px !important;
}
.u-padding-left-small {
padding-left: 12px !important;
}
.u-padding-left-large {
padding-left: 48px !important;
}
.u-padding-left-huge {
padding-left: 96px !important;
}
.u-padding-left-none {
padding-left: 0 !important;
}
.u-padding-horizontal {
padding-left: 24px !important;
padding-right: 24px !important;
}
.u-padding-horizontal-tiny {
padding-left: 6px !important;
padding-right: 6px !important;
}
.u-padding-horizontal-small {
padding-left: 12px !important;
padding-right: 12px !important;
}
.u-padding-horizontal-large {
padding-left: 48px !important;
padding-right: 48px !important;
}
.u-padding-horizontal-huge {
padding-left: 96px !important;
padding-right: 96px !important;
}
.u-padding-horizontal-none {
padding-left: 0 !important;
padding-right: 0 !important;
}
.u-padding-vertical {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.u-padding-vertical-tiny {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.u-padding-vertical-small {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.u-padding-vertical-large {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.u-padding-vertical-huge {
padding-top: 96px !important;
padding-bottom: 96px !important;
}
.u-padding-vertical-none {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.u-margin {
margin: 24px !important;
}
.u-margin-tiny {
margin: 6px !important;
}
.u-margin-small {
margin: 12px !important;
}
.u-margin-large {
margin: 48px !important;
}
.u-margin-huge {
margin: 96px !important;
}
.u-margin-none {
margin: 0 !important;
}
.u-margin-top {
margin-top: 24px !important;
}
.u-margin-top-tiny {
margin-top: 6px !important;
}
.u-margin-top-small {
margin-top: 12px !important;
}
.u-margin-top-large {
margin-top: 48px !important;
}
.u-margin-top-huge {
margin-top: 96px !important;
}
.u-margin-top-none {
margin-top: 0 !important;
}
.u-margin-right {
margin-right: 24px !important;
}
.u-margin-right-tiny {
margin-right: 6px !important;
}
.u-margin-right-small {
margin-right: 12px !important;
}
.u-margin-right-large {
margin-right: 48px !important;
}
.u-margin-right-huge {
margin-right: 96px !important;
}
.u-margin-right-none {
margin-right: 0 !important;
}
.u-margin-bottom {
margin-bottom: 24px !important;
}
.u-margin-bottom-tiny {
margin-bottom: 6px !important;
}
.u-margin-bottom-small {
margin-bottom: 12px !important;
}
.u-margin-bottom-large {
margin-bottom: 48px !important;
}
.u-margin-bottom-huge {
margin-bottom: 96px !important;
}
.u-margin-bottom-none {
margin-bottom: 0 !important;
}
.u-margin-left {
margin-left: 24px !important;
}
.u-margin-left-tiny {
margin-left: 6px !important;
}
.u-margin-left-small {
margin-left: 12px !important;
}
.u-margin-left-large {
margin-left: 48px !important;
}
.u-margin-left-huge {
margin-left: 96px !important;
}
.u-margin-left-none {
margin-left: 0 !important;
}
.u-margin-horizontal {
margin-left: 24px !important;
margin-right: 24px !important;
}
.u-margin-horizontal-tiny {
margin-left: 6px !important;
margin-right: 6px !important;
}
.u-margin-horizontal-small {
margin-left: 12px !important;
margin-right: 12px !important;
}
.u-margin-horizontal-large {
margin-left: 48px !important;
margin-right: 48px !important;
}
.u-margin-horizontal-huge {
margin-left: 96px !important;
margin-right: 96px !important;
}
.u-margin-horizontal-none {
margin-left: 0 !important;
margin-right: 0 !important;
}
.u-margin-vertical {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.u-margin-vertical-tiny {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.u-margin-vertical-small {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.u-margin-vertical-large {
margin-top: 48px !important;
margin-bottom: 48px !important;
}
.u-margin-vertical-huge {
margin-top: 96px !important;
margin-bottom: 96px !important;
}
.u-margin-vertical-none {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ==========================================================================
#TYPOGRAPHY
========================================================================== */
/* Font variants
========================================================================== */
.u-type-font-primary {
font-family: Helvetica, sans-serif;
}
.u-type-font-secondary {
font-family: Helvetica, serif;
}
/* Size variants
========================================================================== */
.u-type-micro {
font-size: 0.7777777778rem !important;
font-size: 14px !important;
line-height: 1.7142857143 !important;
}
.u-type-small {
font-size: 0.8888888889rem !important;
font-size: 16px !important;
line-height: 1.5 !important;
}
.u-type-base {
font-size: 1rem !important;
font-size: 18px !important;
line-height: 1.3333333333 !important;
}
.u-type-large {
font-size: 1.2222222222rem !important;
font-size: 22px !important;
line-height: 1.3636363636 !important;
}
.u-type-larger {
font-size: 1.2277777778rem !important;
font-size: 22.1px !important;
line-height: 1.3574660633 !important;
}
@media (min-width: 46.25em) {
.u-type-larger {
font-size: 1.4444444444rem !important;
font-size: 26px !important;
line-height: 1.3846153846 !important;
}
}
.u-type-largest {
font-size: 1.4583333333rem !important;
font-size: 26.25px !important;
line-height: 1.3714285714 !important;
}
@media (min-width: 46.25em) {
.u-type-largest {
font-size: 1.9444444444rem !important;
font-size: 35px !important;
line-height: 1.2 !important;
}
}
.u-type-huge {
font-size: 2rem !important;
font-size: 36px !important;
line-height: 1.1666666667 !important;
}
@media (min-width: 46.25em) {
.u-type-huge {
font-size: 2.6666666667rem !important;
font-size: 48px !important;
line-height: 1.125 !important;
}
}
/* Weight variants
========================================================================== */
.u-type-thin {
font-weight: 100 !important;
}
.u-type-light {
font-weight: 300 !important;
}
.u-type-regular {
font-weight: 400 !important;
}
.u-type-semi-bold {
font-weight: 600 !important;
}
.u-type-bold {
font-weight: 700 !important;
}
.u-type-black {
font-weight: 900 !important;
}
/* Other variants
========================================================================== */
.u-type-uppercase {
text-transform: uppercase;
}
.u-type-nowrap {
display: inline-block;
white-space: nowrap;
}
.u-type-reverse, .u-type-reverse p, .u-type-reverse h1, .u-type-reverse h2, .u-type-reverse h3, .u-type-reverse h4, .u-type-reverse h5, .u-type-reverse h6, .u-type-reverse li {
color: var(--color-text-reverse) !important;
}
/* ==========================================================================
#WIDTHS
========================================================================== */
/**
* Generates responsive width, push, and pull utility classes like:
* .u-1/2
* .u-1/3--tablet
* .u-push-1/4--desktop
* .u-pull-2/5
*/
.u-1\/1 {
width: 100% !important;
}
.u-1\/2 {
width: 50% !important;
}
.u-2\/2 {
width: 100% !important;
}
.u-1\/3 {
width: 33.3333333333% !important;
}
.u-2\/3 {
width: 66.6666666667% !important;
}
.u-3\/3 {
width: 100% !important;
}
.u-1\/4 {
width: 25% !important;
}
.u-2\/4 {
width: 50% !important;
}
.u-3\/4 {
width: 75% !important;
}
.u-4\/4 {
width: 100% !important;
}
.u-1\/5 {
width: 20% !important;
}
.u-2\/5 {
width: 40% !important;
}
.u-3\/5 {
width: 60% !important;
}
.u-4\/5 {
width: 80% !important;
}
.u-5\/5 {
width: 100% !important;
}
@media (min-width: 20em) {
.u-1\/1--mobile {
width: 100% !important;
}
.u-1\/2--mobile {
width: 50% !important;
}
.u-2\/2--mobile {
width: 100% !important;
}
.u-1\/3--mobile {
width: 33.3333333333% !important;
}
.u-2\/3--mobile {
width: 66.6666666667% !important;
}
.u-3\/3--mobile {
width: 100% !important;
}
.u-1\/4--mobile {
width: 25% !important;
}
.u-2\/4--mobile {
width: 50% !important;
}
.u-3\/4--mobile {
width: 75% !important;
}
.u-4\/4--mobile {
width: 100% !important;
}
.u-1\/5--mobile {
width: 20% !important;
}
.u-2\/5--mobile {
width: 40% !important;
}
.u-3\/5--mobile {
width: 60% !important;
}
.u-4\/5--mobile {
width: 80% !important;
}
.u-5\/5--mobile {
width: 100% !important;
}
}
@media (min-width: 26.25em) {
.u-1\/1--phablet {
width: 100% !important;
}
.u-1\/2--phablet {
width: 50% !important;
}
.u-2\/2--phablet {
width: 100% !important;
}
.u-1\/3--phablet {
width: 33.3333333333% !important;
}
.u-2\/3--phablet {
width: 66.6666666667% !important;
}
.u-3\/3--phablet {
width: 100% !important;
}
.u-1\/4--phablet {
width: 25% !important;
}
.u-2\/4--phablet {
width: 50% !important;
}
.u-3\/4--phablet {
width: 75% !important;
}
.u-4\/4--phablet {
width: 100% !important;
}
.u-1\/5--phablet {
width: 20% !important;
}
.u-2\/5--phablet {
width: 40% !important;
}
.u-3\/5--phablet {
width: 60% !important;
}
.u-4\/5--phablet {
width: 80% !important;
}
.u-5\/5--phablet {
width: 100% !important;
}
}
@media (min-width: 46.25em) {
.u-1\/1--tablet {
width: 100% !important;
}
.u-1\/2--tablet {
width: 50% !important;
}
.u-2\/2--tablet {
width: 100% !important;
}
.u-1\/3--tablet {
width: 33.3333333333% !important;
}
.u-2\/3--tablet {
width: 66.6666666667% !important;
}
.u-3\/3--tablet {
width: 100% !important;
}
.u-1\/4--tablet {
width: 25% !important;
}
.u-2\/4--tablet {
width: 50% !important;
}
.u-3\/4--tablet {
width: 75% !important;
}
.u-4\/4--tablet {
width: 100% !important;
}
.u-1\/5--tablet {
width: 20% !important;
}
.u-2\/5--tablet {
width: 40% !important;
}
.u-3\/5--tablet {
width: 60% !important;
}
.u-4\/5--tablet {
width: 80% !important;
}
.u-5\/5--tablet {
width: 100% !important;
}
}
@media (min-width: 61.25em) {
.u-1\/1--desktop {
width: 100% !important;
}
.u-1\/2--desktop {
width: 50% !important;
}
.u-2\/2--desktop {
width: 100% !important;
}
.u-1\/3--desktop {
width: 33.3333333333% !important;
}
.u-2\/3--desktop {
width: 66.6666666667% !important;
}
.u-3\/3--desktop {
width: 100% !important;
}
.u-1\/4--desktop {
width: 25% !important;
}
.u-2\/4--desktop {
width: 50% !important;
}
.u-3\/4--desktop {
width: 75% !important;
}
.u-4\/4--desktop {
width: 100% !important;
}
.u-1\/5--desktop {
width: 20% !important;
}
.u-2\/5--desktop {
width: 40% !important;
}
.u-3\/5--desktop {
width: 60% !important;
}
.u-4\/5--desktop {
width: 80% !important;
}
.u-5\/5--desktop {
width: 100% !important;
}
}
@media (min-width: 81.25em) {
.u-1\/1--wide {
width: 100% !important;
}
.u-1\/2--wide {
width: 50% !important;
}
.u-2\/2--wide {
width: 100% !important;
}
.u-1\/3--wide {
width: 33.3333333333% !important;
}
.u-2\/3--wide {
width: 66.6666666667% !important;
}
.u-3\/3--wide {
width: 100% !important;
}
.u-1\/4--wide {
width: 25% !important;
}
.u-2\/4--wide {
width: 50% !important;
}
.u-3\/4--wide {
width: 75% !important;
}
.u-4\/4--wide {
width: 100% !important;
}
.u-1\/5--wide {
width: 20% !important;
}
.u-2\/5--wide {
width: 40% !important;
}
.u-3\/5--wide {
width: 60% !important;
}
.u-4\/5--wide {
width: 80% !important;
}
.u-5\/5--wide {
width: 100% !important;
}
}
/* ==========================================================================
#DATEPICKER
========================================================================== */
/**
* Theme jQuery UI datepicker widget styles
*/
#datepicker .ui-datepicker,
#ui-datepicker-div .ui-datepicker {
border: none;
background: none;
padding: 0;
width: 100%;
}
#datepicker .ui-datepicker-header,
#ui-datepicker-div .ui-datepicker-header {
background: none;
border: none;
border-radius: 0;
padding: 0 0 12px;
text-align: center;
}
#datepicker .ui-datepicker-title,
#ui-datepicker-div .ui-datepicker-title {
cursor: pointer;
display: inline-block;
line-height: 0;
}
#datepicker .ui-datepicker-title span,
#ui-datepicker-div .ui-datepicker-title span {
color: var(--color-link);
line-height: 1.4;
transition: color 0.25s ease 0s;
}
#datepicker .ui-datepicker-title span:hover,
#ui-datepicker-div .ui-datepicker-title span:hover {
color: var(--color-link-hover);
}
#datepicker .ui-datepicker-month,
#ui-datepicker-div .ui-datepicker-month {
display: block;
}
#datepicker .ui-datepicker-year,
#ui-datepicker-div .ui-datepicker-year {
display: block;
font-weight: 300;
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1.7142857143;
}
#datepicker .ui-state-hover,
#ui-datepicker-div .ui-state-hover {
background: none;
border: none;
}
#datepicker .ui-datepicker-next,
#datepicker .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next,
#ui-datepicker-div .ui-datepicker-prev {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-link);
border-radius: 6px;
transition: all 0.25s ease 0s;
}
#datepicker .ui-datepicker-next span,
#datepicker .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span,
#ui-datepicker-div .ui-datepicker-prev span {
display: none;
}
#datepicker .ui-datepicker-next:after,
#datepicker .ui-datepicker-prev:after,
#ui-datepicker-div .ui-datepicker-next:after,
#ui-datepicker-div .ui-datepicker-prev:after {
content: "\f060";
display: inline-block;
font-family: "Font Awesome 6 Free";
font-weight: 900;
line-height: 1.2;
text-align: center;
transition: all 0.25s ease 0s;
font-size: 0.8888888889rem;
font-size: 16px;
line-height: 1;
}
#datepicker .ui-datepicker-next:hover,
#datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover,
#ui-datepicker-div .ui-datepicker-prev:hover {
color: var(--color-link-hover);
background: var(--button-color-secondary-hover);
}
#datepicker .ui-datepicker-next,
#ui-datepicker-div .ui-datepicker-next {
top: 50%;
transform: translateY(-50%);
right: 0;
}
#datepicker .ui-datepicker-next:after,
#ui-datepicker-div .ui-datepicker-next:after {
content: "\f061";
}
#datepicker .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-prev {
top: 50%;
transform: translateY(-50%);
left: 0;
}
#datepicker .ui-datepicker-prev:after,
#ui-datepicker-div .ui-datepicker-prev:after {
content: "\f060";
}
#datepicker .ui-datepicker-calendar,
#ui-datepicker-div .ui-datepicker-calendar {
border-radius: 6px;
overflow: hidden;
box-shadow: inset 0 0 0 1px #b3b3b3;
}
#datepicker .ui-datepicker-calendar thead th,
#ui-datepicker-div .ui-datepicker-calendar thead th {
padding: 12px 0;
background: var(--color-link);
font-weight: 600;
}
#datepicker .ui-datepicker-calendar thead th span,
#ui-datepicker-div .ui-datepicker-calendar thead th span {
color: white;
}
#datepicker .ui-datepicker-calendar tbody tr:first-child td,
#ui-datepicker-div .ui-datepicker-calendar tbody tr:first-child td {
padding-top: 12px;
}
#datepicker .ui-datepicker-calendar tbody td,
#ui-datepicker-div .ui-datepicker-calendar tbody td {
padding: 3px;
text-align: center;
}
#datepicker .ui-state-default,
#ui-datepicker-div .ui-state-default {
border: none;
background: none;
text-align: center;
color: #666666;
border-radius: 6px;
}
#datepicker .ui-state-default:hover,
#ui-datepicker-div .ui-state-default:hover {
color: #666666;
}
#datepicker .ui-state-disabled,
#ui-datepicker-div .ui-state-disabled {
opacity: 0.5;
pointer-events: none !important;
}
#datepicker .ui-datepicker-today,
#ui-datepicker-div .ui-datepicker-today {
background: var(--button-color-secondary-hover);
}
#datepicker .ui-datepicker-today.current a,
#ui-datepicker-div .ui-datepicker-today.current a {
color: white;
}
/* ==========================================================================
#SELECT2 OVERRIDES
========================================================================== */
.select2-container {
display: block;
}
.select2-container .select2-selection,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
height: auto;
border: none;
}
.select2-container .select2-selection .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
padding-right: 48px;
}
.select2-container .select2-selection .select2-selection__arrow,
.select2-container .select2-selection--single .select2-selection__arrow,
.select2-container .select2-selection--multiple .select2-selection__arrow {
background: url("../img/chevron-down.svg") calc(100% - 10px) center no-repeat;
background-size: 30px 30px;
width: 50px;
height: 100%;
top: 0;
right: 0;
}
.select2-container .select2-selection .select2-selection__arrow b,
.select2-container .select2-selection--single .select2-selection__arrow b,
.select2-container .select2-selection--multiple .select2-selection__arrow b {
display: none;
}
.select2-container.select2-container--open .select2-selection__arrow {
transform: scale(1, -1);
}
/* ==========================================================================
#WOOCOMMERCE OVERRIDES
========================================================================== */
/**
* Theme styles
*/
.wc-filters {
display: none;
}
.wc-filters-active .wc-filters {
display: block;
}
@media (min-width: 46.25em) {
.wc-filters {
display: block;
}
}
/**
* Normalize and preserve various styles
*/
.woocommerce-page.woocommerce-shop .wc-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.woocommerce-page.woocommerce-shop .wc-content .woocommerce-no-products-found,
.woocommerce-page.woocommerce-shop .wc-content .woocommerce-notices-wrapper {
width: 100%;
}
.woocommerce-page.woocommerce-shop .wc-content .products {
width: 100%;
}
.woocommerce-page .wc-content img,
.woocommerce-page .o-content .woocommerce img {
margin: 0;
}
.woocommerce-page .wc-content li,
.woocommerce-page .o-content .woocommerce li {
padding: 0;
}
.woocommerce-page .wc-content section.related.products,
.woocommerce-page .o-content .woocommerce section.related.products {
clear: both;
}
.woocommerce-page .wc-content ul.wc-block-components-product-details li,
.woocommerce-page .o-content .woocommerce ul.wc-block-components-product-details li {
padding: 0;
margin: 0;
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1.7142857143;
}
.woocommerce-page .wc-content button br,
.woocommerce-page .wc-content .button br,
.woocommerce-page .wc-content a.button br,
.woocommerce-page .wc-content a.button.alt br,
.woocommerce-page .wc-content button.button br,
.woocommerce-page .wc-content button.button br,
.woocommerce-page .o-content .woocommerce button br,
.woocommerce-page .o-content .woocommerce .button br,
.woocommerce-page .o-content .woocommerce a.button br,
.woocommerce-page .o-content .woocommerce a.button.alt br,
.woocommerce-page .o-content .woocommerce button.button br,
.woocommerce-page .o-content .woocommerce button.button br {
display: none;
}
.woocommerce-page .wc-content button.checkout-button,
.woocommerce-page .wc-content .button.checkout-button,
.woocommerce-page .wc-content a.button.checkout-button,
.woocommerce-page .wc-content a.button.alt.checkout-button,
.woocommerce-page .wc-content button.button.checkout-button,
.woocommerce-page .wc-content button.button.checkout-button,
.woocommerce-page .o-content .woocommerce button.checkout-button,
.woocommerce-page .o-content .woocommerce .button.checkout-button,
.woocommerce-page .o-content .woocommerce a.button.checkout-button,
.woocommerce-page .o-content .woocommerce a.button.alt.checkout-button,
.woocommerce-page .o-content .woocommerce button.button.checkout-button,
.woocommerce-page .o-content .woocommerce button.button.checkout-button {
width: 100%;
}
.woocommerce-page .wc-content .show-password-input,
.woocommerce-page .o-content .woocommerce .show-password-input {
padding: 0;
background: none !important;
width: auto !important;
}
.woocommerce-page .wc-content a.remove,
.woocommerce-page .o-content .woocommerce a.remove {
display: flex;
align-items: center;
justify-content: center;
width: 1.25em;
height: 1.25em;
font-size: 1em;
line-height: 0.8;
}
.woocommerce-page .wc-content .product-name .variation,
.woocommerce-page .o-content .woocommerce .product-name .variation {
margin-top: 0;
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1.7142857143;
}
.woocommerce-page .wc-content form .form-row,
.woocommerce-page .wc-content form[class*=woocommerce] .form-row,
.woocommerce-page .o-content .woocommerce form .form-row,
.woocommerce-page .o-content .woocommerce form[class*=woocommerce] .form-row {
margin-bottom: 12px;
}
.woocommerce-page .wc-content form table.cart td.actions input.input-text,
.woocommerce-page .wc-content form[class*=woocommerce] table.cart td.actions input.input-text,
.woocommerce-page .o-content .woocommerce form table.cart td.actions input.input-text,
.woocommerce-page .o-content .woocommerce form[class*=woocommerce] table.cart td.actions input.input-text {
width: 50%;
}
@media (min-width: 46.25em) {
.woocommerce-page .wc-content form table.cart td.actions input.input-text,
.woocommerce-page .wc-content form[class*=woocommerce] table.cart td.actions input.input-text,
.woocommerce-page .o-content .woocommerce form table.cart td.actions input.input-text,
.woocommerce-page .o-content .woocommerce form[class*=woocommerce] table.cart td.actions input.input-text {
width: initial;
}
}
.woocommerce-page .wc-content form .quantity input.qty,
.woocommerce-page .wc-content form .quantity table.cart td.actions input.qty.input-text,
.woocommerce-page .wc-content form table.cart td.actions .quantity input.qty.input-text,
.woocommerce-page .wc-content form[class*=woocommerce] .quantity input.qty,
.woocommerce-page .o-content .woocommerce form .quantity input.qty,
.woocommerce-page .o-content .woocommerce form[class*=woocommerce] .quantity input.qty {
width: 3.631em;
}
.woocommerce-page .wc-content form .search-field,
.woocommerce-page .wc-content form[class*=woocommerce] .search-field,
.woocommerce-page .o-content .woocommerce form .search-field,
.woocommerce-page .o-content .woocommerce form[class*=woocommerce] .search-field {
margin-bottom: 12px;
}
.woocommerce-page .wc-content .product_meta span,
.woocommerce-page .o-content .woocommerce .product_meta span {
display: block;
font-weight: 500;
font-size: 0.7777777778rem;
font-size: 14px;
line-height: 1.7142857143;
}
.woocommerce-page .wc-content table.variations th.label,
.woocommerce-page .o-content .woocommerce table.variations th.label {
padding-right: 6px;
}
.woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs {
margin-bottom: 24px;
}
.woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab],
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab] {
background: none;
color: initial;
border: none;
padding: 0;
margin: 0;
}
.woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab]:before, .woocommerce-page .wc-content .product .woocommerce-tabs ul.wc-tabs li[class*=tab]:after,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab]:before,
.woocommerce-page .o-content .woocommerce .product .woocommerce-tabs ul.wc-tabs li[class*=tab]:after {
content: none;
}
@media (min-width: 46.25em) {
.woocommerce-page .wc-content .addresses,
.woocommerce-page .o-content .woocommerce .addresses {
display: flex;
justify-content: space-between;
gap: 12px;
}
}
.woocommerce-page .wc-content .woocommerce-Address,
.woocommerce-page .o-content .woocommerce .woocommerce-Address {
box-sizing: border-box;
}
@media (min-width: 46.25em) {
.woocommerce-page .wc-content .woocommerce-Address,
.woocommerce-page .o-content .woocommerce .woocommerce-Address {
flex: 1;
}
}
.woocommerce-page .wc-content .woocommerce-Address .title,
.woocommerce-page .o-content .woocommerce .woocommerce-Address .title {
margin-bottom: 12px;
}
.woocommerce-page .wc-content .ui-slider .ui-slider-range .ui-slider-handle,
.woocommerce-page .wc-content .ui-slider .ui-slider-range .ui-slider-range,
.woocommerce-page .wc-content .ui-slider .ui-slider-handle,
.woocommerce-page .wc-content .ui-slider .ui-slider-range,
.woocommerce-page .o-content .woocommerce .ui-slider .ui-slider-range .ui-slider-handle,
.woocommerce-page .o-content .woocommerce .ui-slider .ui-slider-range .ui-slider-range,
.woocommerce-page .o-content .woocommerce .ui-slider .ui-slider-handle,
.woocommerce-page .o-content .woocommerce .ui-slider .ui-slider-range {
background-color: var(--color-secondary);
}
.woocommerce-page .wc-content .widget ul,
.woocommerce-page .o-content .woocommerce .widget ul {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-page .wc-content .woocommerce-form-login .woocommerce-form-login__rememberme,
.woocommerce-page .o-content .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
margin-left: 12px;
vertical-align: middle;
}