* {
scroll-behavior: smooth;
}
html,body {
overflow-x: clip;
scroll-behavior: smooth;
}
body {
position: relative;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}img {
width: 100%;
height: auto;
vertical-align: bottom;
}
ul, ol {
padding-inline-start: 1.125rem;
margin-block-start: 0;
margin-block-end: 0;
}
.main > *:first-child {
padding-top: 8.5rem;
} footer h2, footer h3, footer p {
max-width: 40rem;
}
@media screen and (max-width: 47.9375rem) {
.main > *:first-child {
padding-top: 7.5rem;
}
}:root, :host {
--color-breezy-blue: #0A4170;
--color-good-work-green: #0C2923;
--color-barnwood-brown: #2E1D18;
--color-pickled-patch: #31572C;
--color-lemon-lime: #A79F36;
--color-reddish-radish: #AA4214;
--color-simple-sky-blue: #AED1DC;
--color-golden-grain: #E2CFAF;
--color-petal-pink: #E8AEAD;
--color-compassion-cream: #FFF9ED;
--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
--gap-0: 0;
--gap-4: .25rem;
--gap-8: .5rem;
--gap-12: .75rem;
--gap-16: 1rem;
--gap-24: 1.5rem;
--gap-32: 2rem;
--gap-48: 3rem;
--gap-56: 3.5rem;
--gap-64: 4rem;
--gap-72: 4.5rem;
--gap-80: 5rem;
--tracking-tighter: -.075em;
--tracking-tight: -.05em;
--tracking-normal: 0em;
--tracking-wide: .05em;
--tracking-wider: .075em;
--tracking-widest: .15em;
--leading-tight: 1;
--leading-snug: 1.25;
--leading-base: 1.375;
--leading-normal: 1.5625;
--leading-relaxed: 1.625;
--leading-loose: 2;
--radius-8: .5rem;
--radius-10: .625rem;
--radius-12: .75rem;
--radius-16: 1rem;
--radius-20: 1.25rem;
--radius-24: 1.5rem;
--shadow-2xs: 0 0.0625rem #0000000d;
--shadow-xs: 0 0.0625rem 0.125rem 0 #0000000d;
--shadow-sm: 0 0.0625rem 0.1875rem 0 #0000001a, 0 0.0625rem 0.125rem -0.0625rem #0000001a;
--shadow-md: 0 0.25rem 0.375rem -0.0625rem #0000001a, 0 0.125rem 0.25rem -0.125rem #0000001a;
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem #0000001a, 0 0.25rem 0.375rem -0.25rem #0000001a;
--shadow-xl: 0 1.25rem 1.5625rem -0.3125rem #0000001a, 0 0.5rem 0.625rem -0.375rem #0000001a;
--shadow-2xl: 0 1.5625rem 3.125rem -0.75rem #00000040;
--spacing: .25rem;
--text-max-h4: 2.25rem;
--text-max-h3: 2.5rem;
--text-max-h2: 4rem;
--text-max-h1: 6rem;
--text-p-xs: .75rem;
--text-p-sm: .875rem;
--text-p: 1.125rem;
--text-h6: 1.125rem;
--text-h5: 1.375rem;
--text-h4: 2rem;
--text-h3: 3.5rem;
--text-h2: 3.25rem;
--text-h1: 4.5rem;
--text-min-h4: 1.5rem;
--text-min-h3: 1.625rem;
--text-min-h2: 2.125rem;
--text-min-h1: 2.5rem;
--inset-shadow-2xs: inset 0 0.0625rem #0000000d;
--inset-shadow-xs: inset 0 0.0625rem 0.0625rem #0000000d;
--inset-shadow-sm: inset 0 0.125rem 0.25rem #0000000d;
--drop-shadow-xs: 0 0.0625rem 0.0625rem #0000000d;
--drop-shadow-sm: 0 0.0625rem 0.125rem #00000026;
--drop-shadow-md: 0 0.1875rem 0.1875rem #0000001f;
--drop-shadow-lg: 0 0.25rem 0.25rem #00000026;
--drop-shadow-xl: 0 0.5625rem 0.4375rem #0000001a;
--drop-shadow-2xl: 0 1.5625rem 1.5625rem #00000026;
--text-shadow-2xs: 0rem 0.0625rem 0rem #00000026;
--text-shadow-xs: 0rem 0.0625rem 0.0625rem #0003;
--text-shadow-sm: 0rem 0.0625rem 0rem #00000013, 0rem 0.0625rem 0.0625rem #00000013, 0rem 0.125rem 0.125rem #00000013;
--text-shadow-md: 0rem 0.0625rem 0.0625rem #0000001a, 0rem 0.0625rem 0.125rem #0000001a, 0rem 0.125rem 0.25rem #0000001a;
--text-shadow-lg: 0rem 0.0625rem 0.125rem #0000001a, 0rem 0.1875rem 0.125rem #0000001a, 0rem 0.25rem 0.5rem #0000001a;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--animate-spin: spin 1s linear infinite;
--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
--animate-bounce: bounce 1s infinite;
--blur-xs: 0.25rem;
--blur-sm: 0.5rem;
--blur-md: 0.75rem;
--blur-lg: 1rem;
--blur-xl: 1.5rem;
--blur-2xl: 2.5rem;
--blur-3xl: 4rem;
--perspective-dramatic: 6.25rem;
--perspective-near: 18.75rem;
--perspective-normal: 31.25rem;
--perspective-midrange: 50rem;
--perspective-distant: 75rem;
--aspect-video: 16/9;
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}@media (max-width: 25rem) {
@-ms-viewport {
width: 20rem;
}
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.grid-container:before, .grid-container-full:before, .mobile-grid-5:before, .mobile-grid-10:before, .mobile-grid-15:before, .mobile-grid-20:before, .mobile-grid-25:before, .mobile-grid-30:before, .mobile-grid-35:before, .mobile-grid-40:before, .mobile-grid-45:before, .mobile-grid-50:before, .mobile-grid-55:before, .mobile-grid-60:before, .mobile-grid-65:before, .mobile-grid-70:before, .mobile-grid-75:before, .mobile-grid-80:before, .mobile-grid-85:before, .mobile-grid-90:before, .mobile-grid-95:before, .mobile-grid-100:before, .mobile-grid-33:before, .mobile-grid-66:before, .tablet-grid-5:before, .tablet-grid-10:before, .tablet-grid-15:before, .tablet-grid-16:before, .tablet-grid-20:before, .tablet-grid-25:before, .tablet-grid-30:before, .tablet-grid-35:before, .tablet-grid-40:before, .tablet-grid-45:before, .tablet-grid-50:before, .tablet-grid-55:before, .tablet-grid-60:before, .tablet-grid-65:before, .tablet-grid-70:before, .tablet-grid-75:before, .tablet-grid-80:before, .tablet-grid-85:before, .tablet-grid-90:before, .tablet-grid-95:before, .tablet-grid-100:before, .tablet-grid-33:before, .tablet-grid-66:before, .grid-5:before, .grid-10:before, .grid-15:before, .grid-16:before, .grid-20:before, .grid-25:before, .grid-30:before, .grid-35:before, .grid-40:before, .grid-45:before, .grid-50:before, .grid-55:before, .grid-60:before, .grid-65:before, .grid-70:before, .grid-75:before, .grid-80:before, .grid-85:before, .grid-90:before, .grid-95:before, .grid-100:before, .grid-33:before, .grid-66:before, .grid-offset:before, .clearfix:before,
.grid-container:after,
.grid-container-full:after,
.mobile-grid-5:after,
.mobile-grid-10:after,
.mobile-grid-15:after,
.mobile-grid-20:after,
.mobile-grid-25:after,
.mobile-grid-30:after,
.mobile-grid-35:after,
.mobile-grid-40:after,
.mobile-grid-45:after,
.mobile-grid-50:after,
.mobile-grid-55:after,
.mobile-grid-60:after,
.mobile-grid-65:after,
.mobile-grid-70:after,
.mobile-grid-75:after,
.mobile-grid-80:after,
.mobile-grid-85:after,
.mobile-grid-90:after,
.mobile-grid-95:after,
.mobile-grid-100:after,
.mobile-grid-33:after,
.mobile-grid-66:after,
.tablet-grid-5:after,
.tablet-grid-10:after,
.tablet-grid-15:after,
.tablet-grid-16:after,
.tablet-grid-20:after,
.tablet-grid-25:after,
.tablet-grid-30:after,
.tablet-grid-35:after,
.tablet-grid-40:after,
.tablet-grid-45:after,
.tablet-grid-50:after,
.tablet-grid-55:after,
.tablet-grid-60:after,
.tablet-grid-65:after,
.tablet-grid-70:after,
.tablet-grid-75:after,
.tablet-grid-80:after,
.tablet-grid-85:after,
.tablet-grid-90:after,
.tablet-grid-95:after,
.tablet-grid-100:after,
.tablet-grid-33:after,
.tablet-grid-66:after,
.grid-5:after,
.grid-10:after,
.grid-15:after,
.grid-16:after,
.grid-20:after,
.grid-25:after,
.grid-30:after,
.grid-35:after,
.grid-40:after,
.grid-45:after,
.grid-50:after,
.grid-55:after,
.grid-60:after,
.grid-65:after,
.grid-70:after,
.grid-75:after,
.grid-80:after,
.grid-85:after,
.grid-90:after,
.grid-95:after,
.grid-100:after,
.grid-33:after,
.grid-66:after,
.grid-offset:after,
.clearfix:after {
content: ".";
display: block;
overflow: hidden;
position: absolute;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.grid-container:after, .grid-container-full:after,.mobile-grid-5:after, .mobile-grid-10:after, .mobile-grid-15:after, .mobile-grid-20:after, .mobile-grid-25:after, .mobile-grid-30:after, .mobile-grid-35:after, .mobile-grid-40:after, .mobile-grid-45:after, .mobile-grid-50:after, .mobile-grid-55:after, .mobile-grid-60:after, .mobile-grid-65:after, .mobile-grid-70:after, .mobile-grid-75:after, .mobile-grid-80:after, .mobile-grid-85:after, .mobile-grid-90:after, .mobile-grid-95:after, .mobile-grid-100:after, .mobile-grid-33:after, .mobile-grid-66:after, .tablet-grid-5:after, .tablet-grid-10:after, .tablet-grid-15:after, .tablet-grid-16:after, .tablet-grid-20:after, .tablet-grid-25:after, .tablet-grid-30:after, .tablet-grid-35:after, .tablet-grid-40:after, .tablet-grid-45:after, .tablet-grid-50:after, .tablet-grid-55:after, .tablet-grid-60:after, .tablet-grid-65:after, .tablet-grid-70:after, .tablet-grid-75:after, .tablet-grid-80:after, .tablet-grid-85:after, .tablet-grid-90:after, .tablet-grid-95:after, .tablet-grid-100:after, .tablet-grid-33:after, .tablet-grid-66:after, .grid-5:after, .grid-10:after, .grid-15:after, .grid-16:after, .grid-20:after, .grid-25:after, .grid-30:after, .grid-35:after, .grid-40:after, .grid-45:after, .grid-50:after, .grid-55:after, .grid-60:after, .grid-65:after, .grid-70:after, .grid-75:after, .grid-80:after, .grid-85:after, .grid-90:after, .grid-95:after, .grid-100:after, .grid-33:after, .grid-66:after, .grid-offset:after, .clearfix:after {
clear: both;
}
.grid-container, .grid-container-full, .mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .tablet-grid-5, .tablet-grid-10, .tablet-grid-15, .tablet-grid-16, .tablet-grid-20, .tablet-grid-25, .tablet-grid-30, .tablet-grid-35, .tablet-grid-40, .tablet-grid-45, .tablet-grid-50, .tablet-grid-55, .tablet-grid-60, .tablet-grid-65, .tablet-grid-70, .tablet-grid-75, .tablet-grid-80, .tablet-grid-85, .tablet-grid-90, .tablet-grid-95, .tablet-grid-100, .tablet-grid-33, .tablet-grid-66, .grid-5, .grid-10, .grid-15, .grid-16, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66, .grid-offset, .clearfix { *zoom: 1; }
.grid-container, .grid-container-full {
padding-left: 3rem;
padding-right: 3rem;
width: calc(100% - 6rem);
}
.grid-container {
max-width: 80rem;
} .grid-container.padding-left-0, .grid-container-full.padding-left-0 {
padding-left: 0;
width: calc(100% - 3rem);
}
.grid-container.padding-right-0, .grid-container-full.padding-right-0 {
padding-right: 0;
width: calc(100% - 3rem);
}
.grid-container.padding-right-0.padding-left-0, .grid-container-full.padding-right-0.padding-left-0 {
padding-left: 0;
padding-right: 0;
width: 100%;
}
.mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .tablet-grid-5, .tablet-grid-10, .tablet-grid-15, .tablet-grid-16, .tablet-grid-20, .tablet-grid-25, .tablet-grid-30, .tablet-grid-35, .tablet-grid-40, .tablet-grid-45, .tablet-grid-50, .tablet-grid-55, .tablet-grid-60, .tablet-grid-65, .tablet-grid-70, .tablet-grid-75, .tablet-grid-80, .tablet-grid-85, .tablet-grid-90, .tablet-grid-95, .tablet-grid-100, .tablet-grid-33, .tablet-grid-66, .grid-5, .grid-10, .grid-15, .grid-16, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mobile-grid-5 > *, .mobile-grid-10 > *, .mobile-grid-15 > *, .mobile-grid-20 > *, .mobile-grid-25 > *, .mobile-grid-30 > *, .mobile-grid-35 > *, .mobile-grid-40 > *, .mobile-grid-45 > *, .mobile-grid-50 > *, .mobile-grid-55 > *, .mobile-grid-60 > *, .mobile-grid-65 > *, .mobile-grid-70 > *, .mobile-grid-75 > *, .mobile-grid-80 > *, .mobile-grid-85 > *, .mobile-grid-90 > *, .mobile-grid-95 > *, .mobile-grid-100 > *, .mobile-grid-33 > *, .mobile-grid-66 > *, .tablet-grid-5 > *, .tablet-grid-10 > *, .tablet-grid-15 > *, .tablet-grid-16 > *, .tablet-grid-20 > *, .tablet-grid-25 > *, .tablet-grid-30 > *, .tablet-grid-35 > *, .tablet-grid-40 > *, .tablet-grid-45 > *, .tablet-grid-50 > *, .tablet-grid-55 > *, .tablet-grid-60 > *, .tablet-grid-65 > *, .tablet-grid-70 > *, .tablet-grid-75 > *, .tablet-grid-80 > *, .tablet-grid-85 > *, .tablet-grid-90 > *, .tablet-grid-95 > *, .tablet-grid-100 > *, .tablet-grid-33 > *, .tablet-grid-66 > *, .grid-5 > *, .grid-10 > *, .grid-15 > *, .grid-16 > *, .grid-20 > *, .grid-25 > *, .grid-30 > *, .grid-35 > *, .grid-40 > *, .grid-45 > *, .grid-50 > *, .grid-55 > *, .grid-60 > *, .grid-65 > *, .grid-70 > *, .grid-75 > *, .grid-80 > *, .grid-85 > *, .grid-90 > *, .grid-95 > *, .grid-100 > *, .grid-33 > *, .grid-66 > * { *margin-left: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === 'block' && this.currentStyle.width === 'auto') && '10px');
*margin-right: expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === 'block' && this.currentStyle.width === 'auto') && '10px'); }
.grid-offset {
clear: both;
margin-left: -.625rem;
margin-right: -.625rem;
}
@media (max-width: 47.9375rem) {
.mobile-push-5, .mobile-pull-5, .mobile-push-10, .mobile-pull-10, .mobile-push-15, .mobile-pull-15, .mobile-push-20, .mobile-pull-20, .mobile-push-25, .mobile-pull-25, .mobile-push-30, .mobile-pull-30, .mobile-push-35, .mobile-pull-35, .mobile-push-40, .mobile-pull-40, .mobile-push-45, .mobile-pull-45, .mobile-push-50, .mobile-pull-50, .mobile-push-55, .mobile-pull-55, .mobile-push-60, .mobile-pull-60, .mobile-push-65, .mobile-pull-65, .mobile-push-70, .mobile-pull-70, .mobile-push-75, .mobile-pull-75, .mobile-push-80, .mobile-pull-80, .mobile-push-85, .mobile-pull-85, .mobile-push-90, .mobile-pull-90, .mobile-push-95, .mobile-pull-95, .mobile-push-33, .mobile-pull-33, .mobile-push-66, .mobile-pull-66 {
position: relative;
}
.hide-on-mobile {
display: none !important;
}
.mobile-grid-5 {
float: left;
width: 5%; *width: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-5 {
margin-left: 5%;
}
.mobile-suffix-5 {
margin-right: 5%;
}
.mobile-push-5 {
left: 5%; *left: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-5 {
left: -5%; *left: expression(Math.floor(-0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-10 {
float: left;
width: 10%; *width: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-10 {
margin-left: 10%;
}
.mobile-suffix-10 {
margin-right: 10%;
}
.mobile-push-10 {
left: 10%; *left: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-10 {
left: -10%; *left: expression(Math.floor(-0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-15 {
float: left;
width: 15%; *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-15 {
margin-left: 15%;
}
.mobile-suffix-15 {
margin-right: 15%;
}
.mobile-push-15 {
left: 15%; *left: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-15 {
left: -15%; *left: expression(Math.floor(-0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-20 {
float: left;
width: 20%; *width: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-20 {
margin-left: 20%;
}
.mobile-suffix-20 {
margin-right: 20%;
}
.mobile-push-20 {
left: 20%; *left: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-20 {
left: -20%; *left: expression(Math.floor(-0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-25 {
float: left;
width: 25%; *width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-25 {
margin-left: 25%;
}
.mobile-suffix-25 {
margin-right: 25%;
}
.mobile-push-25 {
left: 25%; *left: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-25 {
left: -25%; *left: expression(Math.floor(-0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-30 {
float: left;
width: 30%; *width: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-30 {
margin-left: 30%;
}
.mobile-suffix-30 {
margin-right: 30%;
}
.mobile-push-30 {
left: 30%; *left: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-30 {
left: -30%; *left: expression(Math.floor(-0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-35 {
float: left;
width: 35%; *width: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-35 {
margin-left: 35%;
}
.mobile-suffix-35 {
margin-right: 35%;
}
.mobile-push-35 {
left: 35%; *left: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-35 {
left: -35%; *left: expression(Math.floor(-0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-40 {
float: left;
width: 40%; *width: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-40 {
margin-left: 40%;
}
.mobile-suffix-40 {
margin-right: 40%;
}
.mobile-push-40 {
left: 40%; *left: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-40 {
left: -40%; *left: expression(Math.floor(-0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-45 {
float: left;
width: 45%; *width: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-45 {
margin-left: 45%;
}
.mobile-suffix-45 {
margin-right: 45%;
}
.mobile-push-45 {
left: 45%; *left: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-45 {
left: -45%; *left: expression(Math.floor(-0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-50 {
float: left;
width: 50%; *width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-50 {
margin-left: 50%;
}
.mobile-suffix-50 {
margin-right: 50%;
}
.mobile-push-50 {
left: 50%; *left: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-50 {
left: -50%; *left: expression(Math.floor(-0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-55 {
float: left;
width: 55%; *width: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-55 {
margin-left: 55%;
}
.mobile-suffix-55 {
margin-right: 55%;
}
.mobile-push-55 {
left: 55%; *left: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-55 {
left: -55%; *left: expression(Math.floor(-0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-60 {
float: left;
width: 60%; *width: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-60 {
margin-left: 60%;
}
.mobile-suffix-60 {
margin-right: 60%;
}
.mobile-push-60 {
left: 60%; *left: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-60 {
left: -60%; *left: expression(Math.floor(-0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-65 {
float: left;
width: 65%; *width: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-65 {
margin-left: 65%;
}
.mobile-suffix-65 {
margin-right: 65%;
}
.mobile-push-65 {
left: 65%; *left: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-65 {
left: -65%; *left: expression(Math.floor(-0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-70 {
float: left;
width: 70%; *width: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-70 {
margin-left: 70%;
}
.mobile-suffix-70 {
margin-right: 70%;
}
.mobile-push-70 {
left: 70%; *left: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-70 {
left: -70%; *left: expression(Math.floor(-0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-75 {
float: left;
width: 75%; *width: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-75 {
margin-left: 75%;
}
.mobile-suffix-75 {
margin-right: 75%;
}
.mobile-push-75 {
left: 75%; *left: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-75 {
left: -75%; *left: expression(Math.floor(-0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-80 {
float: left;
width: 80%; *width: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-80 {
margin-left: 80%;
}
.mobile-suffix-80 {
margin-right: 80%;
}
.mobile-push-80 {
left: 80%; *left: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-80 {
left: -80%; *left: expression(Math.floor(-0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-85 {
float: left;
width: 85%; *width: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-85 {
margin-left: 85%;
}
.mobile-suffix-85 {
margin-right: 85%;
}
.mobile-push-85 {
left: 85%; *left: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-85 {
left: -85%; *left: expression(Math.floor(-0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-90 {
float: left;
width: 90%; *width: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-90 {
margin-left: 90%;
}
.mobile-suffix-90 {
margin-right: 90%;
}
.mobile-push-90 {
left: 90%; *left: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-90 {
left: -90%; *left: expression(Math.floor(-0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-95 {
float: left;
width: 95%; *width: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-95 {
margin-left: 95%;
}
.mobile-suffix-95 {
margin-right: 95%;
}
.mobile-push-95 {
left: 95%; *left: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-95 {
left: -95%; *left: expression(Math.floor(-0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-33 {
float: left;
width: 33.33333%; *width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-33 {
margin-left: 33.33333%;
}
.mobile-suffix-33 {
margin-right: 33.33333%;
}
.mobile-push-33 {
left: 33.33333%; *left: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-33 {
left: -33.33333%; *left: expression(Math.floor(-0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-66 {
float: left;
width: 66.66667%; *width: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-prefix-66 {
margin-left: 66.66667%;
}
.mobile-suffix-66 {
margin-right: 66.66667%;
}
.mobile-push-66 {
left: 66.66667%; *left: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-pull-66 {
left: -66.66667%; *left: expression(Math.floor(-0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.mobile-grid-100 {
clear: both;
width: 100%;
max-width: 100%;
}
.mobile-flex-direction-row .mobile-grid-50 {
max-width: calc(50% - .75rem)!important;
}
}
@media screen and (max-width: 64rem) {
.grid-container, .grid-container-full {
padding-left: 1.5rem;
padding-right: 1.5rem;
width: calc(100% - 3rem);
} .grid-container.padding-left-0, .grid-container-full.padding-left-0 {
padding-left: 0;
width: calc(100% - 1.5rem);
}
.grid-container.padding-right-0, .grid-container-full.padding-right-0 {
padding-right: 0;
width: calc(100% - 1.5rem);
}
}
@media (min-width: 48rem) and (max-width: 64rem) {
.tablet-push-5, .tablet-pull-5, .tablet-push-10, .tablet-pull-10, .tablet-push-15, .tablet-pull-15, .tablet-push-20, .tablet-pull-20, .tablet-push-25, .tablet-pull-25, .tablet-push-30, .tablet-pull-30, .tablet-push-35, .tablet-pull-35, .tablet-push-40, .tablet-pull-40, .tablet-push-45, .tablet-pull-45, .tablet-push-50, .tablet-pull-50, .tablet-push-55, .tablet-pull-55, .tablet-push-60, .tablet-pull-60, .tablet-push-65, .tablet-pull-65, .tablet-push-70, .tablet-pull-70, .tablet-push-75, .tablet-pull-75, .tablet-push-80, .tablet-pull-80, .tablet-push-85, .tablet-pull-85, .tablet-push-90, .tablet-pull-90, .tablet-push-95, .tablet-pull-95, .tablet-push-33, .tablet-pull-33, .tablet-push-66, .tablet-pull-66 {
position: relative;
}
.hide-on-tablet {
display: none !important;
}
.tablet-grid-5 {
float: left;
width: 5%; *width: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-5 {
margin-left: 5%;
}
.tablet-suffix-5 {
margin-right: 5%;
}
.tablet-push-5 {
left: 5%; *left: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-5 {
left: -5%; *left: expression(Math.floor(-0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-10 {
float: left;
width: 10%; *width: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-10 {
margin-left: 10%;
}
.tablet-suffix-10 {
margin-right: 10%;
}
.tablet-push-10 {
left: 10%; *left: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-10 {
left: -10%; *left: expression(Math.floor(-0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-15 {
float: left;
width: 15%; *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-15 {
margin-left: 15%;
}
.tablet-suffix-15 {
margin-right: 15%;
}
.tablet-push-15 {
left: 15%; *left: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-15 {
left: -15%; *left: expression(Math.floor(-0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-16 {
float: left;
width: 16.66666%; *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-20 {
float: left;
width: 20%; *width: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-20 {
margin-left: 20%;
}
.tablet-suffix-20 {
margin-right: 20%;
}
.tablet-push-20 {
left: 20%; *left: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-20 {
left: -20%; *left: expression(Math.floor(-0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-25 {
float: left;
width: 25%; *width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-25 {
margin-left: 25%;
}
.tablet-suffix-25 {
margin-right: 25%;
}
.tablet-push-25 {
left: 25%; *left: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-25 {
left: -25%; *left: expression(Math.floor(-0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-30 {
float: left;
width: 30%; *width: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-30 {
margin-left: 30%;
}
.tablet-suffix-30 {
margin-right: 30%;
}
.tablet-push-30 {
left: 30%; *left: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-30 {
left: -30%; *left: expression(Math.floor(-0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-35 {
float: left;
width: 35%; *width: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-35 {
margin-left: 35%;
}
.tablet-suffix-35 {
margin-right: 35%;
}
.tablet-push-35 {
left: 35%; *left: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-35 {
left: -35%; *left: expression(Math.floor(-0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-40 {
float: left;
width: 40%; *width: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-40 {
margin-left: 40%;
}
.tablet-suffix-40 {
margin-right: 40%;
}
.tablet-push-40 {
left: 40%; *left: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-40 {
left: -40%; *left: expression(Math.floor(-0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-45 {
float: left;
width: 45%; *width: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-45 {
margin-left: 45%;
}
.tablet-suffix-45 {
margin-right: 45%;
}
.tablet-push-45 {
left: 45%; *left: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-45 {
left: -45%; *left: expression(Math.floor(-0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-50 {
float: left;
width: 50%; *width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-50 {
margin-left: 50%;
}
.tablet-suffix-50 {
margin-right: 50%;
}
.tablet-push-50 {
left: 50%; *left: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-50 {
left: -50%; *left: expression(Math.floor(-0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-55 {
float: left;
width: 55%; *width: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-55 {
margin-left: 55%;
}
.tablet-suffix-55 {
margin-right: 55%;
}
.tablet-push-55 {
left: 55%; *left: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-55 {
left: -55%; *left: expression(Math.floor(-0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-60 {
float: left;
width: 60%; *width: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-60 {
margin-left: 60%;
}
.tablet-suffix-60 {
margin-right: 60%;
}
.tablet-push-60 {
left: 60%; *left: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-60 {
left: -60%; *left: expression(Math.floor(-0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-65 {
float: left;
width: 65%; *width: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-65 {
margin-left: 65%;
}
.tablet-suffix-65 {
margin-right: 65%;
}
.tablet-push-65 {
left: 65%; *left: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-65 {
left: -65%; *left: expression(Math.floor(-0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-70 {
float: left;
width: 70%; *width: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-70 {
margin-left: 70%;
}
.tablet-suffix-70 {
margin-right: 70%;
}
.tablet-push-70 {
left: 70%; *left: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-70 {
left: -70%; *left: expression(Math.floor(-0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-75 {
float: left;
width: 75%; *width: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-75 {
margin-left: 75%;
}
.tablet-suffix-75 {
margin-right: 75%;
}
.tablet-push-75 {
left: 75%; *left: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-75 {
left: -75%; *left: expression(Math.floor(-0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-80 {
float: left;
width: 80%; *width: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-80 {
margin-left: 80%;
}
.tablet-suffix-80 {
margin-right: 80%;
}
.tablet-push-80 {
left: 80%; *left: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-80 {
left: -80%; *left: expression(Math.floor(-0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-85 {
float: left;
width: 85%; *width: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-85 {
margin-left: 85%;
}
.tablet-suffix-85 {
margin-right: 85%;
}
.tablet-push-85 {
left: 85%; *left: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-85 {
left: -85%; *left: expression(Math.floor(-0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-90 {
float: left;
width: 90%; *width: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-90 {
margin-left: 90%;
}
.tablet-suffix-90 {
margin-right: 90%;
}
.tablet-push-90 {
left: 90%; *left: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-90 {
left: -90%; *left: expression(Math.floor(-0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-95 {
float: left;
width: 95%; *width: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-95 {
margin-left: 95%;
}
.tablet-suffix-95 {
margin-right: 95%;
}
.tablet-push-95 {
left: 95%; *left: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-95 {
left: -95%; *left: expression(Math.floor(-0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-33 {
float: left;
width: 33.33333%; *width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-33 {
margin-left: 33.33333%;
}
.tablet-suffix-33 {
margin-right: 33.33333%;
}
.tablet-push-33 {
left: 33.33333%; *left: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-33 {
left: -33.33333%; *left: expression(Math.floor(-0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-66 {
float: left;
width: 66.66667%; *width: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-prefix-66 {
margin-left: 66.66667%;
}
.tablet-suffix-66 {
margin-right: 66.66667%;
}
.tablet-push-66 {
left: 66.66667%; *left: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-pull-66 {
left: -66.66667%; *left: expression(Math.floor(-0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.tablet-grid-100 {
clear: both;
width: 100%;
}
}
@media (min-width: 64.0625rem) {
.push-5, .pull-5, .push-10, .pull-10, .push-15, .pull-15, .push-20, .pull-20, .push-25, .pull-25, .push-30, .pull-30, .push-35, .pull-35, .push-40, .pull-40, .push-45, .pull-45, .push-50, .pull-50, .push-55, .pull-55, .push-60, .pull-60, .push-65, .pull-65, .push-70, .pull-70, .push-75, .pull-75, .push-80, .pull-80, .push-85, .pull-85, .push-90, .pull-90, .push-95, .pull-95, .push-33, .pull-33, .push-66, .pull-66 {
position: relative;
}
.hide-on-desktop {
display: none !important;
}
.grid-5 {
float: left;
width: 5%; *width: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-5 {
margin-left: 5%;
}
.suffix-5 {
margin-right: 5%;
}
.push-5 {
left: 5%; *left: expression(Math.floor(0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-5 {
left: -5%; *left: expression(Math.floor(-0.05 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-10 {
float: left;
width: 10%; *width: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-10 {
margin-left: 10%;
}
.suffix-10 {
margin-right: 10%;
}
.push-10 {
left: 10%; *left: expression(Math.floor(0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-10 {
left: -10%; *left: expression(Math.floor(-0.1 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-15 {
float: left;
width: 15%; *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-15 {
margin-left: 15%;
}
.suffix-15 {
margin-right: 15%;
}
.push-15 {
left: 15%; *left: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-15 {
left: -15%; *left: expression(Math.floor(-0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-16 {
float: left;
width: 16.66666%; *width: expression(Math.floor(0.15 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-20 {
float: left;
width: 20%; *width: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-20 {
margin-left: 20%;
}
.suffix-20 {
margin-right: 20%;
}
.push-20 {
left: 20%; *left: expression(Math.floor(0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-20 {
left: -20%; *left: expression(Math.floor(-0.2 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-25 {
float: left;
width: 25%; *width: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-25 {
margin-left: 25%;
}
.suffix-25 {
margin-right: 25%;
}
.push-25 {
left: 25%; *left: expression(Math.floor(0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-25 {
left: -25%; *left: expression(Math.floor(-0.25 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-30 {
float: left;
width: 30%;
max-width: calc(30% - 2rem); *width: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-30 {
margin-left: 30%;
}
.suffix-30 {
margin-right: 30%;
}
.push-30 {
left: 30%; *left: expression(Math.floor(0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-30 {
left: -30%; *left: expression(Math.floor(-0.3 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-35 {
float: left;
width: 35%;
max-width: calc(35% - 2rem); *width: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-35 {
margin-left: 35%;
}
.suffix-35 {
margin-right: 35%;
}
.push-35 {
left: 35%; *left: expression(Math.floor(0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-35 {
left: -35%; *left: expression(Math.floor(-0.35 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-40 {
float: left;
width: 40%;
max-width: calc(40% - 2rem); *width: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-40 {
margin-left: 40%;
}
.suffix-40 {
margin-right: 40%;
}
.push-40 {
left: 40%; *left: expression(Math.floor(0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-40 {
left: -40%; *left: expression(Math.floor(-0.4 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-45 {
float: left;
width: 45%; *width: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-45 {
margin-left: 45%;
}
.suffix-45 {
margin-right: 45%;
}
.push-45 {
left: 45%; *left: expression(Math.floor(0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-45 {
left: -45%; *left: expression(Math.floor(-0.45 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-50 {
float: left;
width: 50%; *width: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-50 {
margin-left: 50%;
}
.suffix-50 {
margin-right: 50%;
}
.push-50 {
left: 50%; *left: expression(Math.floor(0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-50 {
left: -50%; *left: expression(Math.floor(-0.5 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-55 {
float: left;
width: 55%; *width: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-55 {
margin-left: 55%;
}
.suffix-55 {
margin-right: 55%;
}
.push-55 {
left: 55%; *left: expression(Math.floor(0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-55 {
left: -55%; *left: expression(Math.floor(-0.55 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-60 {
float: left;
width: 60%; *width: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-60 {
margin-left: 60%;
}
.suffix-60 {
margin-right: 60%;
}
.push-60 {
left: 60%; *left: expression(Math.floor(0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-60 {
left: -60%; *left: expression(Math.floor(-0.6 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-65 {
float: left;
width: 65%; *width: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-65 {
margin-left: 65%;
}
.suffix-65 {
margin-right: 65%;
}
.push-65 {
left: 65%; *left: expression(Math.floor(0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-65 {
left: -65%; *left: expression(Math.floor(-0.65 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-70 {
float: left;
width: 70%; *width: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-70 {
margin-left: 70%;
}
.suffix-70 {
margin-right: 70%;
}
.push-70 {
left: 70%; *left: expression(Math.floor(0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-70 {
left: -70%; *left: expression(Math.floor(-0.7 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-75 {
float: left;
width: 75%; *width: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-75 {
margin-left: 75%;
}
.suffix-75 {
margin-right: 75%;
}
.push-75 {
left: 75%; *left: expression(Math.floor(0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-75 {
left: -75%; *left: expression(Math.floor(-0.75 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-80 {
float: left;
width: 80%; *width: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-80 {
margin-left: 80%;
}
.suffix-80 {
margin-right: 80%;
}
.push-80 {
left: 80%; *left: expression(Math.floor(0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-80 {
left: -80%; *left: expression(Math.floor(-0.8 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-85 {
float: left;
width: 85%; *width: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-85 {
margin-left: 85%;
}
.suffix-85 {
margin-right: 85%;
}
.push-85 {
left: 85%; *left: expression(Math.floor(0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-85 {
left: -85%; *left: expression(Math.floor(-0.85 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-90 {
float: left;
width: 90%; *width: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-90 {
margin-left: 90%;
}
.suffix-90 {
margin-right: 90%;
}
.push-90 {
left: 90%; *left: expression(Math.floor(0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-90 {
left: -90%; *left: expression(Math.floor(-0.9 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-95 {
float: left;
width: 95%; *width: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-95 {
margin-left: 95%;
}
.suffix-95 {
margin-right: 95%;
}
.push-95 {
left: 95%; *left: expression(Math.floor(0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-95 {
left: -95%; *left: expression(Math.floor(-0.95 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-33 {
float: left;
width: 33.33333%; *width: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-33 {
margin-left: 33.33333%;
}
.suffix-33 {
margin-right: 33.33333%;
}
.push-33 {
left: 33.33333%; *left: expression(Math.floor(0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-33 {
left: -33.33333%; *left: expression(Math.floor(-0.33333 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-66 {
float: left;
width: 66.66667%; *width: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.prefix-66 {
margin-left: 66.66667%;
}
.suffix-66 {
margin-right: 66.66667%;
}
.push-66 {
left: 66.66667%; *left: expression(Math.floor(0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.pull-66 {
left: -66.66667%; *left: expression(Math.floor(-0.66667 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + 'px'); }
.grid-100 {
clear: both;
width: 100%;
}
} .text-align-center {
text-align: center;
}
.text-align-left {
text-align: left;
}
.text-align-right {
text-align: right;
}
.margin-0-auto {
margin: 0 auto;
}
.float-left {
float: left;
}
.float-right {
float: right;
} .position-relative {
position: relative;
}
.position-absolute {
position: absolute!important;
}
.position-fixed {
position: fixed;
}
.top-0 {
top: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
.left-0 {
left: 0;
} .display-none {
display: none;
} .z-index--1 {
z-index: -1;
}
.z-index-0 {
z-index: 0;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
}
.z-index-3 {
z-index: 3;
}
.z-index-4 {
z-index: 4;
}
.z-index-5 {
z-index: 5;
}
.z-index-6 {
z-index: 6;
}
.z-index-7 {
z-index: 7;
}
.z-index-8 {
z-index: 8;
}
.z-index-9 {
z-index: 9;
}
.z-index-10 {
z-index: 10;
}
@media screen and (min-width: 48rem) {
.grid-parent > .grid-16 {
max-width: calc(16.66666% - 1.6666rem);
}
.grid-parent > .grid-20 {
max-width: calc(20% - 1.6rem);
}
.grid-parent > .grid-25 {
max-width: calc(25% - 1.5rem);
}
.grid-parent > .grid-33 {
max-width: calc(33.33333% - 1.3333rem);
}
.grid-parent > .grid-50 {
max-width: calc(50% - 1rem);
}
}.grid-container, .grid-container-full, .grid-parent {
gap: 2rem;
} .padding-global-quarter {
padding-top: .5rem;
padding-bottom: .5rem;
}
.padding-top-quarter {
padding-top: .5rem;
}
.padding-bottom-quarter {
padding-bottom: .5rem;
}
.padding-global-half {
padding-top: 1rem;
padding-bottom: 1rem;
}
.padding-top-half {
padding-top: 1rem;
}
.padding-bottom-half {
padding-bottom: 1rem;
}
.padding-global {
padding-top: 2rem;
padding-bottom: 2rem;
}
.padding-top {
padding-top: 2rem;
}
.padding-bottom {
padding-bottom: 2rem;
}
.padding-global-2x {
padding-top: 4rem;
padding-bottom: 4rem;
}
.padding-top-2x {
padding-top: 4rem;
}
.padding-bottom-2x {
padding-bottom: 4rem;
}
.padding-global-3x {
padding-top: 6rem;
padding-bottom: 6rem;
}
.padding-top-3x {
padding-top: 6rem;
}
.padding-bottom-3x {
padding-bottom: 6rem;
}
.padding-global-4x {
padding-top: 8rem;
padding-bottom: 8rem;
}
.padding-top-4x {
padding-top: 8rem;
}
.padding-bottom-4x {
padding-bottom: 8rem;
}
.padding-global-5x {
padding-top: 10rem;
padding-bottom: 10rem;
}
.padding-top-5x {
padding-top: 10rem;
}
.padding-bottom-5x {
padding-bottom: 10rem;
}
.padding-global-6x {
padding-top: 12rem;
padding-bottom: 12rem;
}
.padding-top-6x {
padding-top: 12rem;
}
.padding-bottom-6x {
padding-bottom: 12rem;
}
.padding-top-0 {
padding-top: 0!important;
}
.padding-right-0 {
padding-right: 0!important;
}
.padding-bottom-0 {
padding-bottom: 0!important;
}
.padding-left-0 {
padding-left: 0!important;
}
@media (max-width: 47.9375rem) {
.grid-container, .grid-container-full, .grid-parent {
gap: 1.5rem;
}
.padding-global, .padding-global-2x, .padding-global-3x, .padding-global-4x, .padding-global-5x, .padding-global-6x {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.padding-top, .padding-top-2x, .padding-top-3x, .padding-top-4x, .padding-top-5x, .padding-top-6x {
padding-top: 2.5rem;
}
.padding-bottom, .padding-bottom-2x, .padding-bottom-3x, .padding-bottom-4x, .padding-bottom-5x, .padding-bottom-6x {
padding-bottom: 2.5rem;
}
.mobile-padding-top {
padding-top: 2.5rem;
}
.mobile-padding-bottom {
padding-bottom: 2.5rem;
}
}.grid-container, .grid-container-full, .grid-parent, .flex-column, .flex-row, .flex-row-reverse {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.grid-container, .grid-container-full, .grid-parent {
margin-left: auto;
margin-right: auto;
position: relative;
align-items: center;
justify-content: center;
}
.flex-column {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-wrap-wrap {
flex-wrap: wrap;
}
.align-items-flex-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.align-items-flex-end {
align-items: flex-end;
}
.align-items-stretch {
align-items: stretch;
}
.justify-content-center {
justify-content: center!important;
}
.justify-content-flex-start {
justify-content: flex-start;
}
.justify-content-flex-end {
justify-content: flex-end;
}
.justify-content-space-around {
justify-content: space-around!important;
}
.justify-content-space-between {
justify-content: space-between;
}
.justify-content-space-between > *:after, .justify-content-space-between > *:before {
content: "";
display: none;
}
.flex-direction-column {
flex-direction: column;
}
.flex-direction-column-reverse {
flex-direction: column-reverse;
}
.flex-direction-row {
flex-direction: row;
}
.flex-direction-row-reverse {
flex-direction: row-reverse;
}
.flex-grow-1 {
flex-grow: 1;
}
.gap-0 {
gap: var(--gap-0);
}
.gap-4 {
gap: var(--gap-4);
}
.gap-8 {
gap: var(--gap-8);
}
.gap-12 {
gap: var(--gap-12);
}
.gap-16 {
gap: var(--gap-16);
}
.gap-24 {
gap: var(--gap-24);
}
.gap-32 {
gap: var(--gap-32);
}
.gap-48 {
gap: var(--gap-48);
}
@media screen and (min-width: 48rem) {
.grid-container, .grid-container-full, .grid-parent {
justify-content: space-between;
}
}   @media screen and (max-width: 47.9375rem) { .grid-container, .grid-container-full, .grid-parent {
flex-direction: column;
}
.flex-row {
flex-direction: column;
}
.mobile-flex-direction-column {
flex-direction: column;
}
.mobile-flex-direction-row {
flex-direction: row!important;
} .mobile-align-items-center {
align-items: center;
}
.mobile-align-items-flex-start {
align-items: flex-start;
}
.mobile-align-items-flex-end {
align-items: flex-end;
} .mobile-justify-content-center {
justify-content: center;
}
.mobile-justify-content-flex-start {
justify-content: flex-start;
}
.mobile-justify-content-flex-end {
justify-content: flex-end;
}
.mobile-justify-content-space-between {
justify-content: space-between;
} .mobile-flex-wrap-wrap {
flex-wrap: wrap;
} .mobile-flex-direction-column-reverse {
flex-direction: column-reverse;
}
.mobile-flex-direction-row-reverse {
flex-direction: row-reverse;
}
}.background-barnwood-brown {
background-color: var(--color-barnwood-brown);
color: var(--color-compassion-cream);
}
.background-barnwood-brown h1,
.background-barnwood-brown h2,
.background-barnwood-brown h3,
.background-barnwood-brown h4,
.background-barnwood-brown h5,
.background-barnwood-brown h6,
.background-barnwood-brown p,
.background-barnwood-brown li {
color: var(--color-compassion-cream);
}
.background-barnwood-brown p a,
.background-barnwood-brown a.text-link,
.background-barnwood-brown p.text-link {
color: var(--color-simple-sky-blue);
}
.background-barnwood-brown .tagline,
.background-barnwood-brown .eyebrow {
color: var(--color-lemon-lime);
} .background-compassion-cream {
background-color: var(--color-compassion-cream);
color: var(--color-barnwood-brown);
}
.background-compassion-cream h1,
.background-compassion-cream h2,
.background-compassion-cream h3,
.background-compassion-cream h4,
.background-compassion-cream h5,
.background-compassion-cream h6,
.background-compassion-cream p,
.background-compassion-cream li,
.background-compassion-cream p a,
.background-compassion-cream a,
.background-compassion-cream a.text-link,
.background-compassion-cream p.text-link {
color: var(--color-barnwood-brown);
}
.background-compassion-cream .tagline,
.background-compassion-cream .eyebrow {
color: var(--color-reddish-radish);
} .background-good-work-green {
background-color: var(--color-good-work-green);
color: var(--color-compassion-cream);
}
.background-good-work-green h1,
.background-good-work-green h2,
.background-good-work-green h3,
.background-good-work-green h4,
.background-good-work-green h5,
.background-good-work-green h6 {
color: var(--color-compassion-cream);
}
.background-good-work-green p,
.background-good-work-green li,
.background-good-work-green p a,
.background-good-work-green a.text-link,
.background-good-work-green p.text-link {
color: var(--color-compassion-cream);
}
.background-good-work-green .tagline,
.background-good-work-green .eyebrow {
color: var(--color-petal-pink);
} .background-breezy-blue {
background-color: var(--color-breezy-blue);
color: var(--color-compassion-cream);
}
.background-breezy-blue h1,
.background-breezy-blue h2,
.background-breezy-blue h3,
.background-breezy-blue h4,
.background-breezy-blue h5,
.background-breezy-blue h6,
.background-breezy-blue p,
.background-breezy-blue li,
.background-breezy-blue p a,
.background-breezy-blue a.text-link,
.background-breezy-blue p.text-link {
color: var(--color-compassion-cream);
}
.background-breezy-blue .tagline,
.background-breezy-blue .eyebrow {
color: var(--color-simple-sky-blue);
} .background-pickled-patch {
background-color: var(--color-pickled-patch);
color: var(--color-compassion-cream);
}
.background-pickled-patch h1,
.background-pickled-patch h2,
.background-pickled-patch h3,
.background-pickled-patch h4,
.background-pickled-patch h5,
.background-pickled-patch h6,
.background-pickled-patch p,
.background-pickled-patch li {
color: var(--color-compassion-cream);
}
.background-pickled-patch p a,
.background-pickled-patch a.text-link,
.background-pickled-patch p.text-link {
color: var(--color-simple-sky-blue);
}
.background-pickled-patch .tagline,
.background-pickled-patch .eyebrow {
color: var(--color-lemon-lime);
} .background-reddish-radish {
background-color: var(--color-reddish-radish);
color: var(--color-compassion-cream);
}
.background-reddish-radish h1,
.background-reddish-radish h2,
.background-reddish-radish h3,
.background-reddish-radish h4,
.background-reddish-radish h5,
.background-reddish-radish h6,
.background-reddish-radish p,
.background-reddish-radish li {
color: var(--color-compassion-cream);
}
.background-reddish-radish p a,
.background-reddish-radish a.text-link,
.background-reddish-radish p.text-link {
color: var(--color-simple-sky-blue);
}
.background-reddish-radish .tagline,
.background-reddish-radish .eyebrow {
color: var(--color-lemon-lime);
} .background-transparent-dark {
background-color: transparent;
color: var(--color-compassion-cream);
}
.background-transparent-dark h1,
.background-transparent-dark h2,
.background-transparent-dark h3,
.background-transparent-dark h4,
.background-transparent-dark h5,
.background-transparent-dark h6,
.background-transparent-dark p,
.background-transparent-dark li,
.background-transparent-dark p a,
.background-transparent-dark a.text-link,
.background-transparent-dark p.text-link {
color: var(--color-compassion-cream);
}
.background-transparent-dark .tagline,
.background-transparent-dark .eyebrow {
color: var(--color-lemon-lime);
} .eyebrow-barnwood-brown {
color: var(--color-barnwood-brown)!important;
}
.eyebrow-breezy-blue {
color: var(--color-breezy-blue)!important;
}
.eyebrow-compassion-cream {
color: var(--color-compassion-cream)!important;
}
.eyebrow-good-work-green {
color: var(--color-good-work-green)!important;
}
.eyebrow-petal-pink {
color: var(--color-petal-pink)!important;
}
.eyebrow-pickled-patch {
color: var(--color-pickled-patch)!important;
}
.eyebrow-simple-sky-blue {
color: var(--color-simple-sky-blue)!important;
} .gform_footer input.gform_button,
#field_submit .gform-button.gform-button--color-white.button {
color: var(--color-compassion-cream) !important;
background-color: var(--color-barnwood-brown) !important;
} .barnwood-brown {
color: var(--color-barnwood-brown) !important;
}
.breezy-blue {
color: var(--color-breezy-blue) !important;
}
.compassion-cream {
color: var(--color-compassion-cream) !important;
}
.good-work-green {
color: var(--color-good-work-green) !important;
}
.petal-pink {
color: var(--color-petal-pink) !important;
}
.pickled-patch {
color: var(--color-pickled-patch) !important;
}
.reddish-radish {
color: var(--color-reddish-radish) !important;
}
.simple-sky-blue {
color: var(--color-simple-sky-blue) !important;
}body {
font-family: "filson-pro", sans-serif;
font-weight: var(--font-weight-light);
line-height: var(--leading-normal);
position: relative;
font-optical-sizing: auto;
font-style: normal;
}
h1, h2, h3, h4, h5, h6, .product-type-description p::first-line {
font-family: "albiona", sans-serif;
font-weight: var(--font-weight-medium);
line-height: var(--leading-snug);
margin-block-start: .75rem;
margin-block-end: .75rem;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
h1 em, h2 em, h3 em, h4 em {
font-style: italic;
}
h1 {
font-size: clamp(var(--text-min-h1), 4vw, var(--text-max-h1));
}
h2, .product-type-description p::first-line {
font-size: clamp(var(--text-min-h2), 3.75vw, var(--text-max-h2));
}
h3 {
font-size: clamp(var(--text-min-h3), 3vw, var(--text-max-h3));
}
h4 {
font-size: clamp(var(--text-min-h4), 1.5vw, var(--text-max-h4));
}
h5 {
font-size: var(--text-h5);
}
h6 {
font-size: var(--text-h6);
}
p {
margin-block-start: .5rem;
margin-block-end: .5rem;
font-size: var(--text-p);
}
.h1, .h2, .h3, .h4 {
font-family: "albiona", sans-serif;
font-weight: var(--font-weight-medium);
line-height: var(--leading-snug);
margin-block-start: .75rem;
margin-block-end: .75rem;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
.h1 em, .h2 em, .h3 em, .h4 em {
font-style: italic;
}
.h1 {
font-size: clamp(var(--text-min-h1), 4vw, var(--text-max-h1));
}
.h2 {
font-size: clamp(var(--text-min-h2), 3vw, var(--text-max-h2));
}
.h3 {
font-size: clamp(var(--text-min-h3), 2vw, var(--text-max-h3));
}
.h4 {
font-size: clamp(var(--text-min-h4), 1.5vw, var(--text-max-h4));
}
.h5 {
font-size: var(--text-h5);
}
.h6 {
font-size: var(--text-h6);
}
.p, .tagline, .eyebrow {
margin-block-start: .5rem;
margin-block-end: .5rem;
font-size: var(--text-p);
}
.h5, .h6, .p, .tagline, .eyebrow {
font-family: "filson-pro", sans-serif;
font-weight: var(--font-weight-light);
line-height: var(--leading-normal);
padding: 0;
margin: 0;
}
.tagline, .eyebrow {
text-transform: uppercase;
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-widest);
}
@media screen and (max-width: 47.9375rem) {
.product-type-description p::first-line{
font-size: var(--text-h4-min);
}
}.padding-container {
padding: 3rem;
border-radius: var(--radius-10);
overflow: clip;
}
.padding-container-small {
padding: 1.5rem;
border-radius: var(--radius-10);
overflow: clip;
}
.border-radius-10, .border-radius-10 > img {
border-radius: var(--radius-10);
overflow: clip;
}
.border-radius-20, .border-radius-20 > img {
border-radius: var(--radius-20);
overflow: clip;
} .container-barnwood-brown h1, .container-barnwood-brown h2, .container-barnwood-brown h3, .container-barnwood-brown h4, .container-barnwood-brown h5, .container-barnwood-brown h6, .container-barnwood-brown p, .container-barnwood-brown li, .container-barnwood-brown .tagline, .container-barnwood-brown .eyebrow, .container-barnwood-brown p a, .container-barnwood-brown a.text-link, .container-barnwood-brown p.text-link, .container-good-work-green h1, .container-good-work-green h2, .container-good-work-green h3, .container-good-work-green h4, .container-good-work-green h5, .container-good-work-green h6, .container-good-work-green p, .container-good-work-green li, .container-good-work-green .tagline, .container-good-work-green .eyebrow, .container-good-work-green p a, .container-good-work-green a.text-link, .container-good-work-green p.text-link, .container-pickled-patch h1, .container-pickled-patch h2, .container-pickled-patch h3, .container-pickled-patch h4, .container-pickled-patch h5, .container-pickled-patch h6, .container-pickled-patch p, .container-pickled-patch li, .container-pickled-patch .tagline, .container-pickled-patch .eyebrow, .container-pickled-patch p a, .container-pickled-patch a.text-link, .container-pickled-patch p.text-link {
color: var(--color-compassion-cream);
} .container-simple-sky-blue h1, .container-simple-sky-blue h2, .container-simple-sky-blue h3, .container-simple-sky-blue h4, .container-simple-sky-blue h5, .container-simple-sky-blue h6, .container-simple-sky-blue p, .container-simple-sky-blue li, .container-simple-sky-blue .tagline, .container-simple-sky-blue .eyebrow, .container-simple-sky-blue p a, .container-simple-sky-blue a.text-link, .container-simple-sky-blue p.text-link, .container-compassion-cream h1, .container-compassion-cream h2, .container-compassion-cream h3, .container-compassion-cream h4, .container-compassion-cream h5, .container-compassion-cream h6, .container-compassion-cream p, .container-compassion-cream li, .container-compassion-cream p a, .container-compassion-cream a.text-link, .container-compassion-cream p.text-link {
color: var(--color-barnwood-brown);
} .container-barnwood-brown {
background-color: var(--color-barnwood-brown);
} .container-compassion-cream {
background-color: var(--color-compassion-cream);
}
.container-compassion-cream .tagline, .container-compassion-cream .eyebrow {
color: var(--color-reddish-radish);
} .container-good-work-green {
background-color: var(--color-good-work-green);
} .container-simple-sky-blue {
background-color: var(--color-simple-sky-blue);
} .container-pickled-patch {
background-color: var(--color-pickled-patch);
}
@media screen and (max-width: 47.9375rem) {
.padding-container {
padding: 1.5rem;
}
}.button-container, .button-container-small {
padding: 1.5rem 0 .875rem 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
gap: .75rem;
}
.button-container-small {
padding: .75rem 0;
}
a,
a.button,
.gform_footer input.gform_button,
input[type=password],
form.post-password-form input[type=submit] {
cursor: pointer;
-webkit-transition: all .2s ease-in-out, border .2s ease-in-out;
-moz-transition: all .2s ease-in-out, border .2s ease-in-out;
-o-transition: all .2s ease-in-out, border .2s ease-in-out;
transition: all .2s ease-in-out, border .2s ease-in-out;
} a.button, .gfield--type-submit input.gform-button, .gform_footer input.gform_button, footer .footer-menu ul li a, .text-link, nav ul li.primary a, nav ul li.secondary a {
font-size: var(--text-p-sm)!important;
font-weight: var(--font-weight-bold)!important;
letter-spacing: var(--tracking-widest)!important;
text-transform: uppercase!important;
border-radius: var(--radius-24)!important;
padding: .5rem 1rem .5rem 1rem;
text-decoration: none!important;
border: .0625rem solid transparent;
}
nav ul li.secondary a {
border: solid .125rem var(--color-compassion-cream);
}
nav ul li.primary a {
background-color: var(--color-lemon-lime);
border: solid .125rem var(--color-lemon-lime);
color: var(--color-good-work-green);
} footer .footer-menu ul li a, .text-link {
padding-left: 0!important;
}
a.text-link,
p.text-link {
text-decoration: none;
}
footer .footer-menu ul li a {
color: var(--color-simple-sky-blue);
}
a.button:hover,
nav a:hover,
input[type=password]:hover,
form.post-password-form input[type=submit]:hover,
.gform_footer input.gform_button:hover,
body .gform_wrapper .gform_footer input[type=submit]:hover {
opacity: .6 !important;
}
a.button.tertiary:after,
a.text-link:after,
p.text-link:after, 
li.faq-category-nav-item a:after {
content: '›';
margin-left: .5rem;
}
a.button.tertiary:hover:after {
margin-left: .75rem;
}
a.tertiary {
padding: 0;
}
.button-container:has(a:nth-of-type(2).tertiary) {
gap: 1rem;
}
.button-container:has(a:nth-of-type(2).tertiary) a.tertiary:nth-of-type(2) {
padding: 1.25rem;
}    .background-compassion-cream a.button.primary,
.background-compassion-cream .button.primary {
background-color: var(--color-breezy-blue);
border-color: var(--color-breezy-blue);
color: var(--color-compassion-cream);
}
.background-compassion-cream a.button.secondary,
.background-compassion-cream .button.secondary {
background-color: transparent;
border: .0625rem solid var(--color-breezy-blue);
color: var(--color-breezy-blue);
} .background-barnwood-brown a.button.primary,
.background-barnwood-brown .button.primary,
.background-transparent-dark a.button.primary,
.background-transparent-dark .button.primary {
background-color: var(--color-simple-sky-blue);
border-color: var(--color-simple-sky-blue);
color: var(--color-barnwood-brown);
}
.background-barnwood-brown a.button.secondary,
.background-barnwood-brown .button.secondary,
.background-transparent-dark a.button.secondary,
.background-transparent-dark .button.secondary {
background-color: transparent;
border: .0625rem solid var(--color-simple-sky-blue);
color: var(--color-simple-sky-blue);
} .background-good-work-green a.button.primary,
.background-good-work-green .button.primary {
background-color: var(--color-lemon-lime);
border-color: var(--color-lemon-lime);
color: var(--color-good-work-green);
}
.background-good-work-green a.button.secondary,
.background-good-work-green .button.secondary {
background-color: transparent;
border: .0625rem solid var(--color-lemon-lime);
color: var(--color-lemon-lime);
} .background-breezy-blue a.button.primary,
.background-breezy-blue .button.primary {
background-color: var(--color-simple-sky-blue);
border-color: var(--color-simple-sky-blue);
color: var(--color-breezy-blue);
}
.background-breezy-blue a.button.secondary,
.background-breezy-blue .button.secondary {
background-color: transparent;
border: .0625rem solid var(--color-simple-sky-blue);
color: var(--color-simple-sky-blue);
} .primary-barnwood-brown {
background-color: var(--color-barnwood-brown)!important;
color: var(--color-compassion-cream)!important;
border-color: var(--color-barnwood-brown)!important;
}
.secondary-barnwood-brown {
background-color: transparent!important;
border: .0625rem solid var(--color-barnwood-brown)!important;
color: var(--color-barnwood-brown)!important;
}
.primary-breezy-blue {
background-color: var(--color-breezy-blue)!important;
color: var(--color-compassion-cream)!important;
border-color: var(--color-breezy-blue)!important;
}
.secondary-breezy-blue {
background-color: transparent!important;
border: .0625rem solid var(--color-breezy-blue)!important;
color: var(--color-breezy-blue)!important;
}
.primary-good-work-green {
background-color: var(--color-good-work-green)!important;
color: var(--color-compassion-cream)!important;
border-color: var(--color-good-work-green)!important;
}
.secondary-good-work-green {
background-color: transparent!important;
border: .0625rem solid var(--color-good-work-green)!important;
color: var(--color-good-work-green)!important;
}
.primary-lemon-lime {
background-color: var(--color-lemon-lime)!important;
color: var(--color-good-work-green)!important;
border-color: var(--color-lemon-lime)!important;
}
.secondary-lemon-lime {
background-color: transparent!important;
border: .0625rem solid var(--color-lemon-lime)!important;
color: var(--color-lemon-lime)!important;
}
.primary-reddish-radish {
background-color: var(--color-reddish-radish)!important;
color: var(--color-compassion-cream)!important;
border-color: var(--color-reddish-radish)!important;
}
.secondary-reddish-radish {
background-color: transparent!important;
border: .0625rem solid var(--color-reddish-radish)!important;
color: var(--color-reddish-radish)!important;
}
.primary-simple-sky-blue {
background-color: var(--color-simple-sky-blue)!important;
color: var(--color-breezy-blue)!important;
border-color: var(--color-simple-sky-blue)!important;
}
.secondary-simple-sky-blue {
background-color: transparent!important;
border: .0625rem solid var(--color-simple-sky-blue)!important;
color: var(--color-simple-sky-blue)!important;
}   .gform_footer input.gform_button,
body .gform_wrapper .gform_footer input[type=submit],
form.post-password-form input[type=submit] {
border-radius: var(--radius-small);
padding: .625rem 1.125rem .75rem 1.125rem;
text-decoration: none;
border: .0625rem solid transparent;
color: var(--color-compassion-cream);
background-color: var(--color-barnwood-brown);
}
@media screen and (min-width: 48rem) {
nav ul li.secondary {
padding: 0 .75rem;
}
}
@media screen and (max-width: 47.9375rem) {
.button-container, .button-container-small {
flex-direction: column;
}
}.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .ginput_container input[type=text], .ginput_container input[type=email], .ginput_container textarea.textarea, .gform-theme--foundation .gfield .ginput_password.large, .gform-theme--foundation .gfield input.large, .gform-theme--foundation .gfield select.large, .gform_footer input.gform_button {
background-color: var(--color-compassion-cream)!important;
border-radius: var(--radius-10);
border: solid .125rem var(--color-barnwood-brown);
} .ginput_container input[type=text], .ginput_container textarea.textarea, .ginput_container input[type=email], .gform-theme--foundation .gfield .ginput_password.large, .gform-theme--foundation .gfield input.large, .gform-theme--foundation .gfield select.large {
color: var(--color-barnwood-brown)!important;
font-size: var(--text-p)!important;
min-height: 2.625rem!important;
border: solid .125rem var(--color-barnwood-brown)!important;
}
input:is([type="radio"], [type="checkbox"]) {
background-color: transparent!important;
border: solid .125rem var(--color-barnwood-brown)!important;
}
.ginput_container input[type=text], .ginput_container input[type=email], .ginput_container textarea.textarea {
padding: .625rem!important;
}
.gfield--type-submit input.gform-button, .gform_footer input.gform_button {
font-size: var(--text-p-sm)!important;
border-radius: var(--radius-10)!important;
padding: .75rem!important;
background-color: var(--color-lemon-lime)!important;
color: var(--color-barnwood-brown)!important;
}
.gform-theme--foundation .gfield textarea.medium, .section-comments form textarea {
min-height: 10rem!important;
}
.gform-theme--foundation legend {
font-size: var(--text-p)!important;
font-weight: var(--font-weight-semibold)!important;
}
.gform-theme--framework .field_sublabel_above .gform-field-label--type-sub {
font-size: var(--text-p)!important;
}
.gform-theme--framework .gform-field-label:where(:not([class*=gform-field-label--type-])) {
color: var(--color-compassion-cream)!important;
} footer #gform_fields_3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: var(--gap-16);
}
footer .ginput_container input[type=email], footer .ginput_container input[type=text] {
font-size: var(--text-p-sm)!important;
color: var(--color-barnwood-brown)!important;
border: none!important;
border-radius: var(--radius-20)!important;
}
footer .gform-theme--framework .field_sublabel_above .gform-field-label--type-sub {
color: var(--color-compassion-cream)!important;	
}
footer .gfield_label.gform-field-label.gfield_label_before_complex {
color: var(--color-compassion-cream);
}
footer .gform-theme--foundation .gfield--width-full {
min-width: 100%!important;
}
footer #gform_fields_3 .gfield--type-submit input.gform-button, .gform_footer input.gform_button {
border-radius: var(--radius-20)!important;
}
#gform_4 .gform_footer input.gform_button {
background-color: var(--color-pickled-patch)!important;
color: var(--color-compassion-cream)!important;
border: solid .0625rem var(--color-pickled-patch)!important;
}
@media screen and (min-width: 48rem) {
footer .ginput_container input[type=email] {
min-width: 30rem;
}
}.global-nav {
position: fixed;
top: 0;
left: 0;
-webkit-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
ul#menu-main-menu {
margin-block-end: 0;
}
nav a,
li {
text-decoration: none;
font-optical-sizing: auto;
}
nav ul,
footer ul {
padding-inline-start: 0;
list-style-type: none;
float: left;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
}
nav ul li a {
padding-left: .625rem;
padding-right: .625rem;
color: var(--color-compassion-cream);
font-size: var(--text-p-sm);
font-weight: var(--font-weight-bold)!important;
letter-spacing: var(--tracking-wider)!important;
text-transform: uppercase!important;
text-decoration: none!important;
}
nav li.current_page_item a {
color: var(--color-lemon-lime);
} .global-nav.scrolling_up {
top: 0;
}
.global-nav.scrolling_down {
top: -15rem;
}
footer ul {
padding-inline-start: 0 !important;
}
footer ul#menu-footer-menu {
width: 100%;
}
footer ul li {
padding-right: 0;
margin-block-start: .0625rem;
} footer ul#menu-socials-menu > li a {
width: 100%;
height: 1.5rem;
top: 0;
left: 0;
color: transparent;
width: 1.5rem;
height: 1.5rem;
text-decoration: none;
font-size: var(--text-p-sm);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
footer ul#menu-socials-menu li {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--gap-8);
}
footer ul#menu-socials-menu li:before {
width: 1.5rem;
min-width: 1.5rem;
}
footer ul#menu-socials-menu li a {
color: var(--color-simple-sky-blue);
}
footer ul#menu-socials-menu li.fb:before {
content: url(//simplepromisefarms.org/wp-content/themes/simple-promise-farms/assets/images/facebook.svg);
}
footer ul#menu-socials-menu li.insta:before {
content: url(//simplepromisefarms.org/wp-content/themes/simple-promise-farms/assets/images/instagram.svg);
}
@media screen and (max-width: 64rem) {
.navigation,
.global-nav .navigation {
position: relative;
}
.global-nav .navigation__wrapper {
flex-grow: 1;
z-index: 10 !important;
} #hamburger,
.global-nav #hamburger {
position: absolute;
opacity: 0;
pointer-events: none;
inline-size: 0;
block-size: 0;
} .navigation__button,
.global-nav .navigation__button {
position: relative;
display: inline-block;
width: 2.25rem;
height: 2rem;
background: transparent;
cursor: pointer;
z-index: 3;
}
.navigation__button span,
.global-nav .navigation__button span {
position: absolute;
right: 0;
display: inline-block;
width: 1.5rem;
height: 0.125rem;
background-color: var(--color-compassion-cream);
transform-origin: center;
transition: transform 0.3s linear, opacity 0.2s linear, top 0.3s linear;
}
.navigation__button span:nth-of-type(1),
.global-nav .navigation__button span:nth-of-type(1) {
top: 0.5625rem;
}
.navigation__button span:nth-of-type(2),
.global-nav .navigation__button span:nth-of-type(2) {
top: 0.9375rem;
}
.navigation__button span:nth-of-type(3),
.global-nav .navigation__button span:nth-of-type(3) {
top: 1.3125rem;
} .navigation__links,
.global-nav .navigation__links {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
max-height: 100vh;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
transform: translateY(-110%);
transition: transform 0.2s ease-in;
background: var(--color-breezy-blue);
color: var(--color-compassion-cream);
list-style: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0.0625rem 0.0625rem 0.625rem 0 rgba(46, 29, 24, 0.75);
z-index: 2;
overflow: clip;
}
#hamburger:checked ~ .navigation__links,
.global-nav #hamburger:checked ~ .navigation__links {
transform: translateY(0);
} #hamburger:checked ~ .navigation__button span:nth-of-type(1),
.global-nav #hamburger:checked ~ .navigation__button span:nth-of-type(1) {
transform: rotate(45deg);
top: 1rem;
}
#hamburger:checked ~ .navigation__button span:nth-of-type(2),
.global-nav #hamburger:checked ~ .navigation__button span:nth-of-type(2) {
opacity: 0;
}
#hamburger:checked ~ .navigation__button span:nth-of-type(3),
.global-nav #hamburger:checked ~ .navigation__button span:nth-of-type(3) {
transform: rotate(-45deg);
top: 1rem;
}
.global-nav .navigation__links li {
padding: 1rem 1.5rem 1rem 2rem;
text-align: left;
width: calc(100% - 1.5rem);
flex-basis: 0;
color: var(--color-compassion-cream);
}
.navigation__links a,
.global-nav .navigation__links a,
.navigation__links li a,
.global-nav .navigation__links li a {
color: var(--color-compassion-cream);
text-decoration: none;
font-size: 1rem;
}
.navigation__links > li > a {
padding-right: 1rem;
} footer .footer-menu ul li, footer .copyright {
text-align: center;
}
}.accordion {
width: 100%;
}
.accordion .a-btn {
width: 100%;
padding: 1rem 0;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
}
.accordion .a-panel {
display: block;
}
.accordion .a-panel[hidden] { display: none; }
.accordion .a-btn img {
width: 2rem;
height: 2rem;
}
.accordion .a-container.active img {
transform: rotate(180deg);
}.divider img {
margin-bottom: -.0625rem;
} .event-details img {
width: 2.5rem;
}
.event-details .flex-row p, .event-details .flex-row a {
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.event-details .flex-row a {
font-size: var(--text-p-xs);
color: var(--color-barnwood-brown);
text-decoration: none;
} footer .identity img {
max-width: 14rem;
}
footer .footer-menu ul {
flex-wrap: wrap;
}
footer .footer-menu ul li {
width: 50%;
padding-bottom: .5rem;
}
footer ul#menu-socials-menu li a {
width: 100%;
} p.category {
background: var(--color-petal-pink);
border-radius: 1rem;
width: fit-content;
}
p.category, ul.blog-category-list li a {
font-size: var(--text-p-xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
border-radius: var(--radius-20);
padding: .375rem .75rem .375rem .75rem;
margin-block-start: 1.5rem;
margin-block-end: 1.5rem;
}
p.category.farmers-market, p.category.story {
background: var(--color-simple-sky-blue);
}
p.category.grocery-store, p.category.events-recap {
background: var(--color-golden-grain);
}
p.category.featured {
background: var(--color-lemon-lime);
}
.breadcrumbs a, .breadcrumbs p {
font-size: var(--text-p-sm);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.breadcrumbs a {
color: var(--color-barnwood-brown);
text-decoration: none;
}
.article-snippet img {
aspect-ratio: 3 / 2;
object-fit: cover;
}
.article-snippet h3 {
margin-block-start: 0;
}
.article-body p img {
border-radius: var(--radius-10);
}
.article-body pre {
font-family: "filson-pro", sans-serif;
font-weight: var(--font-weight-light);
line-height: var(--leading-normal);
position: relative;
font-optical-sizing: auto;
font-style: normal;
margin-top: .75rem;
padding-left: .75rem;
border-left: solid .125rem var(--color-barnwood-brown);
text-wrap: wrap;
}
.blog header .flex-row img {
width: 3.5rem;
border-radius: 50%;
}
.blog header .flex-row p {
font-size: var(--text-p-xs);
margin-block-start: .125rem;
margin-block-end: .125rem;
}
.article-body h2 {
font-size: 220%;
}
.article-body h3 {
font-size: 180%;
}
.share-button-wrapper img {
max-width: 1.25rem;
}
.pagination a.page-numbers, .pagination span.page-numbers {
text-transform: uppercase;
color: var(--color-barnwood-brown)!important;
font-weight: var(--font-weight-bold);
}
.blog-archive .grid-parent .grid-100 p {
text-align: center;
} .board-of-directors .gallery-footer {
position: relative;
min-height: 3.5rem;
}
.board-of-directors .gallery-footer button {
background-color: transparent;
border: none;
}
.board-of-directors .bod-swiper a {
font-size: var(--text-p-sm);
text-transform: lowercase;
font-weight: var(--font-weight-normal);
color: var(--color-barnwood-brown);
}
.board-of-directors .swiper-pagination-bullet {
background-color: var(--color-barnwood-brown);
} .instagram-images .button-container img.cta-icon {
max-width: 3.6875rem;
} .community-stories img.quote {
max-width: 7rem;
left: 41.5%;
}
.community-stories .container-barnwood-brown p, .timeline-swiper p.caption {
font-family: "marydale", cursive;
font-size: var(--text-min-h3);
}
.timeline-swiper p.caption {
font-size: var(--text-h6);
}
.community-stories .swiper-controls:before, .swiper-controls:after {
position: absolute;
}
.community-stories .swiper-controls button {
background-color: transparent;
border: none;
}
.community-stories .swiper-controls, .testimonials .swiper-controls {
height: 100%;
}
.community-stories a.text-link {
color: var(--color-lemon-lime)!important;
}
.community-stories a.text-link:after {
content: '›';
margin-left: .5rem;
} .day-and-time {
margin-top: .75rem;
margin-right: .75rem;
}
.day-and-time .h5 {
text-transform: uppercase;
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-widest);
}
.day-and-time .eyebrow {
font-size: var(--text-p-xs)!important;
} ul.faq-category-nav {
padding-inline-start: 0;
list-style-type: none!important;
list-style: none!important;
}
ul.faq-category-nav li a {
text-decoration: none!important;
color: var(--color-good-work-green)!important;
}
.faqs .a-container {
width: 100%;
border-bottom: solid .0625rem var(--color-barnwood-brown);
}
.a-btn.eyebrow {
font-size: var(--text-p-sm)!important;
} ul.blog-category-list {
list-style-type: none;
padding-inline-start: 0;
}
p.event-details, ul.blog-category-list li a {
margin-block-start: .375rem;
margin-block-end: .75rem;
background-color: transparent;
border: solid .125rem var(--color-barnwood-brown);
color:  var(--color-barnwood-brown);
font-size: var(--text-p-xs);
}
ul.blog-category-list li a {
text-decoration: none;
color: var(--color-barnwood-brown)!important;
}
ul.blog-category-list li a.is-active {
background-color: var(--color-barnwood-brown)!important;
color: var(--color-compassion-cream)!important;
} .logo-marquee {
position: relative;
overflow: hidden;
}
.logo-marquee::before,
.logo-marquee::after {
content: "";
position: absolute;
top: 0;
width: 120px;
height: 100%;
pointer-events: none;
z-index: 2;
}
.logo-marquee::before {
left: 0;
background: linear-gradient(to right, var(--color-compassion-cream) 0%, rgba(18,21,22,0) 100%);
}
.logo-marquee::after {
right: 0;
background: linear-gradient(to left, var(--color-compassion-cream) 0%, rgba(18,21,22,0) 100%);
}
.logo-marquee {
overflow: hidden;
}
.logo-track {
display: flex;
width: max-content;
will-change: transform;
}
.logo-group,
.logo-group-clone {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 2rem;
}
.logo-item {
flex-shrink: 0;
padding-left: .5rem;
padding-right: .5rem;
}
.logo-track.is-animated { animation: spf-marquee var(--marquee-duration, 30s) linear infinite; }
.logo-marquee:hover .logo-track.is-animated,
.logo-marquee:focus-within .logo-track.is-animated { animation-play-state: paused; }
@keyframes spf-marquee { to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); } }
@media (prefers-reduced-motion: reduce) { .logo-track.is-animated { animation: none; } }
.board-of-directors .bod-swiper-pagination { width: 50% !important; }
@media (max-width: 47.9375rem) { .board-of-directors .bod-swiper-pagination { width: 60% !important; } }
.spf-js .swiper { overflow: hidden; touch-action: pan-y; }
.spf-js .swiper-wrapper { display: flex; align-items: stretch; transition: transform 500ms ease; }
.spf-js .swiper-slide { min-width: 0; box-sizing: border-box; }
.swiper-controls button:disabled { opacity: .4; cursor: not-allowed; }
.bod-swiper-pagination { display: flex; align-items: center; gap: .55rem; }
.bod-swiper-pagination .swiper-pagination-bullet { width: .7rem; height: .7rem; padding: 0; border: 0; border-radius: 50%; background: currentColor; opacity: .35; cursor: pointer; }
.bod-swiper-pagination .swiper-pagination-bullet-active { opacity: 1; }
.swiper:focus-visible, .bod-swiper-pagination button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .spf-js .swiper-wrapper { transition-duration: 0ms; } }
.spf-video { position: relative; aspect-ratio: 16 / 9; background: #171717; }
.spf-video img, .spf-video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.spf-video a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; border-radius: 999px; padding: .8rem 1.3rem; background: white; color: #171717; cursor: pointer; } .in-season .vegetable img {
max-width: 1.5625rem;
} .intro-image-left-container {
margin-left: 0!important;
}
.intro-image-left {
top: 25%;
} .community-stories .testimonials-swiper {
min-width: 0;
width: 100%;
}
.community-stories .testimonials-swiper {
overflow: hidden;
}
.community-stories .swiper-wrapper {
min-width: 0;
}
.community-stories .swiper-slide {
width: 100%;
min-width: 0;
height: auto;
box-sizing: border-box;
justify-content: center;
}
.testimonials .swiper-slide {
justify-content: center!important;
} .dual-color > * {
overflow: clip;
}
.dual-color-right img {
aspect-ratio: 1 / 1;
object-fit: cover;
max-height: 37rem;
}
.watermark {
width: 20rem;
bottom: -2rem;
right: -5rem;
}
.dual-color-left {
overflow-x: clip;
}
.dual-color-left .watermark {
bottom: -5rem;
} .image-container-mask {
padding: 2.5rem;
background-image: url(//simplepromisefarms.org/wp-content/themes/simple-promise-farms/assets/images/image-text-mask-background.webp);
background-repeat: no-repeat;
background-size: contain;
}
.columns .image-container-mask {
padding: 2rem;
}
.image-container-mask img {
-webkit-mask-image: url(//simplepromisefarms.org/wp-content/themes/simple-promise-farms/assets/images/image-text-mask.svg);
mask-image: url(//simplepromisefarms.org/wp-content/themes/simple-promise-farms/assets/images/image-text-mask.svg);
mask-repeat: no-repeat;  
mask-size: contain;
} .products button.a-btn {
padding-bottom: 0;
} .team-bio {
max-height: 33.75rem;
overflow-y: scroll;
}
.team-bio .team-title {
--offset: -1.5rem;
flex-grow: 1;
align-self: start;
position: sticky;
top: var(--offset);
}
.bordered-container {
padding-top: .75rem;
border-top: solid .0625rem var(--color-lemon-lime);
}
.team-bio p.eyebrow {
font-size: var(--text-p-sm);
} .timeline .fade-on-scroll {
opacity: 0;
transition: opacity 0.2s linear;
will-change: opacity;
}
.timeline .step {
padding-top: 1.75rem;
}
.timeline .step img {
width: 1.625rem;
}
.timeline span.h2 {
color: var(--color-breezy-blue);
} .steps img {
margin-top: .75rem;
width: 2.8125rem;
}
.step-rule {
width: .125rem;
height: 100%;
} .title-text .gallery-footer {
position: relative;
min-height: 3.5rem;
}
.title-text .gallery-footer button {
background-color: transparent;
border: none;
}
@media screen and (min-width: 48rem) { .gform-theme--framework .gfield--type-choice .gfield_radio {
flex-direction: row!important;
flex-wrap: wrap!important;
}
.gform-theme--framework .gfield--type-choice .gchoice {
width: calc(50% - 1rem)!important;
} .dual-color-left .flex-column {
padding-left: 3rem;
padding-right: 2.5rem;
max-width: 37.5rem;
}
.dual-color-right .flex-column {
max-width: 39rem;
padding: 4rem;
} .vegetable:nth-child(5) {
margin-left: .75rem;
} .community-stories .padding-container {
width: 100%;
max-width: calc(100% - 6rem);
}
}
@media screen and (max-width: 47.9375rem) {  ul#menu-footer-menu {
padding-top: 1.5rem;
} .breadcrumbs {
align-items: flex-start;
}
.blog-image .grid-100 a {
justify-content: flex-start;
align-items: flex-end;
} .community-stories .container-barnwood-brown p {
font-size: var(--text-h5)!important;
}
.community-stories img.quote {
left: 1.5rem;
top: 37%;
}
.community-stories .swiper-controls, .testimonials .swiper-controls {
position: relative!important;
}
.community-stories p {
text-align: center;
} .dual-color-left, .dual-color-right {
padding-top: 1.5rem!important;
padding-right: 1.5rem!important;
padding-bottom: 1.5rem!important;
padding-left: 1.5rem!important;
}
.dual-color-right .watermark {
width: 10rem;
bottom: -2rem;
right: -3rem;
}
.dual-color-left {
overflow: clip;
} .image-container-mask {
padding: 1.25rem;
} .team-bio {
max-height: 30.75rem
} .timeline .step {
padding-top: .75rem;
}
}.js-scroll {
opacity: 0;
transition: none;
will-change: opacity, transform, clip-path;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.js-scroll img,
.js-scroll picture,
.js-scroll svg {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} .js-scroll.fade-in-top {
-webkit-transform: translate3d(0, -3.125rem, 0);
transform: translate3d(0, -3.125rem, 0);
} .js-scroll.fade-in-bottom:has(h1 span),
.js-scroll.fade-in-bottom:has(h2 span),
h1.js-scroll.fade-in-bottom,
h2.js-scroll.fade-in-bottom {
opacity: 1;
}
.js-scroll.fade-in-bottom h1 span,
.js-scroll.fade-in-bottom h2 span,
h1.js-scroll.fade-in-bottom span,
h2.js-scroll.fade-in-bottom span {
display: inline-block;
opacity: 0;
-webkit-transform: translate3d(0, 3.125rem, 0);
transform: translate3d(0, 3.125rem, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: opacity, transform;
}
.js-scroll.slide-in-left {
-webkit-transform: translate3d(-6.25rem, 0, 0);
transform: translate3d(-6.25rem, 0, 0);
}
.js-scroll.slide-in-right {
-webkit-transform: translate3d(6.25rem, 0, 0);
transform: translate3d(6.25rem, 0, 0);
}
.js-scroll.wipe-in-top {
-webkit-clip-path: var(--wipe-in-top);
clip-path: var(--wipe-in-top);
}
.js-scroll.wipe-in-bottom,
.js-scroll.wipe-and-zoom {
-webkit-clip-path: var(--wipe-in-bottom);
clip-path: var(--wipe-in-bottom);
}
.js-scroll.wipe-in-right {
-webkit-clip-path: var(--wipe-in-left);
clip-path: var(--wipe-in-left);
}
.js-scroll.wipe-in-left {
-webkit-clip-path: var(--wipe-in-right);
clip-path: var(--wipe-in-right);
}
.js-scroll.wipe-and-zoom {
-webkit-transform: translate3d(0, 0, 0) scale(1.08);
transform: translate3d(0, 0, 0) scale(1.08);
overflow: clip;
}
.logged-in .js-scroll,
.paged .js-scroll {
opacity: 1 !important;
}
.js-scroll.scrolled.wipe-in-top,
.js-scroll.scrolled.wipe-in-bottom,
.js-scroll.scrolled.wipe-in-right,
.js-scroll.scrolled.wipe-in-left {
opacity: 1;
}
.js-scroll.scrolled-complete {
opacity: 1;
will-change: auto;
} .scrolled {
--animation-duration: 800ms;
--animation-easing: ease-in-out;
--animation-delay: 0ms;
--word-stagger: 100ms;
}
.scrolled.fade-in,
.scrolled.fade-in-top,
.scrolled.fade-in-bottom h1 span,
.scrolled.fade-in-bottom h2 span,
h1.scrolled.fade-in-bottom span,
h2.scrolled.fade-in-bottom span,
.scrolled.slide-in-left,
.scrolled.slide-in-right,
.scrolled.wipe-in-top,
.scrolled.wipe-in-bottom,
.scrolled.wipe-in-right,
.scrolled.wipe-in-left,
.scrolled.wipe-and-zoom {
-webkit-animation-duration: var(--animation-duration);
animation-duration: var(--animation-duration);
-webkit-animation-timing-function: var(--animation-easing);
animation-timing-function: var(--animation-easing);
-webkit-animation-delay: var(--animation-delay);
animation-delay: var(--animation-delay);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
} .scrolled.fade-in-bottom h1 span,
.scrolled.fade-in-bottom h2 span,
h1.scrolled.fade-in-bottom span,
h2.scrolled.fade-in-bottom span {
-webkit-animation-delay: calc(var(--animation-delay) + (var(--word-index, 0) * var(--word-stagger)));
animation-delay: calc(var(--animation-delay) + (var(--word-index, 0) * var(--word-stagger)));
} .scrolled.fade-in {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
.scrolled.fade-in-top {
-webkit-animation-name: fade-in-top;
animation-name: fade-in-top;
}
.scrolled.fade-in-bottom h1 span,
.scrolled.fade-in-bottom h2 span,
h1.scrolled.fade-in-bottom span,
h2.scrolled.fade-in-bottom span {
-webkit-animation-name: fade-in-bottom;
animation-name: fade-in-bottom;
}
.scrolled.slide-in-left {
-webkit-animation-name: slide-in-left;
animation-name: slide-in-left;
}
.scrolled.slide-in-right {
-webkit-animation-name: slide-in-right;
animation-name: slide-in-right;
} :root {
--wipe-in: inset(0 0 0 0);
--wipe-in-bottom: inset(100% 0 0 0);
--wipe-in-left: inset(0 100% 0 0);
--wipe-in-top: inset(0 0 100% 0);
--wipe-in-right: inset(0 0 0 100%);
}
.scrolled.wipe-in-top,
.scrolled.wipe-in-bottom,
.scrolled.wipe-in-right,
.scrolled.wipe-in-left {
--animation-duration: 600ms;
}
.scrolled.wipe-in-top {
-webkit-animation-name: wipe-in-top;
animation-name: wipe-in-top;
}
.scrolled.wipe-in-bottom {
-webkit-animation-name: wipe-in-bottom;
animation-name: wipe-in-bottom;
}
.scrolled.wipe-in-right {
-webkit-animation-name: wipe-in-right;
animation-name: wipe-in-right;
}
.scrolled.wipe-in-left {
-webkit-animation-name: wipe-in-left;
animation-name: wipe-in-left;
} .scrolled.wipe-and-zoom {
--animation-duration: 1200ms;
-webkit-animation-name: wipe-and-zoom;
animation-name: wipe-and-zoom;
overflow: clip;
} [transition-style] {
-webkit-animation-delay: var(--transition__delay, 0ms);
animation-delay: var(--transition__delay, 0ms);
-webkit-animation-duration: var(--transition__duration, 2.5s);
animation-duration: var(--transition__duration, 2.5s);
-webkit-animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .3, 1));
animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .3, 1));
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
will-change: clip-path;
}
[transition-style="in:wipe:down"],
[transition-style="in:wipe:top"] {
-webkit-animation-name: wipe-in-top;
animation-name: wipe-in-top;
}
[transition-style="in:wipe:right"] {
-webkit-animation-name: wipe-in-right;
animation-name: wipe-in-right;
}
[transition-style="in:wipe:bottom"],
[transition-style="in:wipe:up"] {
-webkit-animation-name: wipe-in-bottom;
animation-name: wipe-in-bottom;
}
[transition-style="in:wipe:left"] {
-webkit-animation-name: wipe-in-left;
animation-name: wipe-in-left;
}   @-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-in-top {
0% {
-webkit-transform: translate3d(0, -3.125rem, 0);
transform: translate3d(0, -3.125rem, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes fade-in-top {
0% {
-webkit-transform: translate3d(0, -3.125rem, 0);
transform: translate3d(0, -3.125rem, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes fade-in-bottom {
0% {
-webkit-transform: translate3d(0, 3.125rem, 0);
transform: translate3d(0, 3.125rem, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes fade-in-bottom {
0% {
-webkit-transform: translate3d(0, 3.125rem, 0);
transform: translate3d(0, 3.125rem, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translate3d(-6.25rem, 0, 0);
transform: translate3d(-6.25rem, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translate3d(-6.25rem, 0, 0);
transform: translate3d(-6.25rem, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translate3d(6.25rem, 0, 0);
transform: translate3d(6.25rem, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translate3d(6.25rem, 0, 0);
transform: translate3d(6.25rem, 0, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes wipe-in-top {
0% {
-webkit-clip-path: var(--wipe-in-top);
clip-path: var(--wipe-in-top);
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
}
}
@keyframes wipe-in-top {
0% {
-webkit-clip-path: var(--wipe-in-top);
clip-path: var(--wipe-in-top);
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
}
}
@-webkit-keyframes wipe-in-right {
0% {
-webkit-clip-path: var(--wipe-in-left);
clip-path: var(--wipe-in-left);
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
}
}
@keyframes wipe-in-right {
0% {
-webkit-clip-path: var(--wipe-in-left);
clip-path: var(--wipe-in-left);
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
}
}
@-webkit-keyframes wipe-in-bottom {
0% {
-webkit-clip-path: var(--wipe-in-bottom);
clip-path: var(--wipe-in-bottom);
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
}
}
@keyframes wipe-in-bottom {
0% {
-webkit-clip-path: var(--wipe-in-bottom);
clip-path: var(--wipe-in-bottom);
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
}
}
@-webkit-keyframes wipe-in-left {
0% {
-webkit-clip-path: var(--wipe-in-right);
clip-path: var(--wipe-in-right);
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
}
}
@keyframes wipe-in-left {
0% {
-webkit-clip-path: var(--wipe-in-right);
clip-path: var(--wipe-in-right);
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
}
}
@-webkit-keyframes wipe-and-zoom {
0% {
-webkit-clip-path: var(--wipe-in-bottom);
clip-path: var(--wipe-in-bottom);
-webkit-transform: translate3d(0, 0, 0) scale(1.08);
transform: translate3d(0, 0, 0) scale(1.08);
opacity: 0;
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
}
@keyframes wipe-and-zoom {
0% {
-webkit-clip-path: var(--wipe-in-bottom);
clip-path: var(--wipe-in-bottom);
-webkit-transform: translate3d(0, 0, 0) scale(1.08);
transform: translate3d(0, 0, 0) scale(1.08);
opacity: 0;
}
100% {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in);
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
}   .infinite-scroll-wrapper {
width: 100%;
overflow-x: hidden;
}
.infinite-scroll-container {
display: flex;
width: 125rem;
animation: infinite-scroll 20s linear infinite;
}
.infinite-scroll-item {
white-space: nowrap;
}
@-webkit-keyframes infinite-scroll {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
}
@keyframes infinite-scroll {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
}   .transition-delay-50 {
--animation-delay: 50ms;
animation-delay: 50ms;
transition-delay: 50ms;
}
.transition-delay-100 {
--animation-delay: 100ms;
animation-delay: 100ms;
transition-delay: 100ms;
}
.transition-delay-150 {
--animation-delay: 150ms;
animation-delay: 150ms;
transition-delay: 150ms;
}
.transition-delay-200 {
--animation-delay: 200ms;
animation-delay: 200ms;
transition-delay: 200ms;
}
.transition-delay-250 {
--animation-delay: 250ms;
animation-delay: 250ms;
transition-delay: 250ms;
}
.transition-delay-300 {
--animation-delay: 300ms;
animation-delay: 300ms;
transition-delay: 300ms;
}
.transition-delay-350 {
--animation-delay: 350ms;
animation-delay: 350ms;
transition-delay: 350ms;
}
.transition-delay-400 {
--animation-delay: 400ms;
animation-delay: 400ms;
transition-delay: 400ms;
}
.transition-delay-450 {
--animation-delay: 450ms;
animation-delay: 450ms;
transition-delay: 450ms;
}
.transition-delay-500 {
--animation-delay: 500ms;
animation-delay: 500ms;
transition-delay: 500ms;
}
.transition-delay-550 {
--animation-delay: 550ms;
animation-delay: 550ms;
transition-delay: 550ms;
}
.transition-delay-600 {
--animation-delay: 600ms;
animation-delay: 600ms;
transition-delay: 600ms;
}
.transition-delay-650 {
--animation-delay: 650ms;
animation-delay: 650ms;
transition-delay: 650ms;
}
.transition-delay-700 {
--animation-delay: 700ms;
animation-delay: 700ms;
transition-delay: 700ms;
}
.transition-delay-750 {
--animation-delay: 750ms;
animation-delay: 750ms;
transition-delay: 750ms;
}
.transition-delay-800 {
--animation-delay: 800ms;
animation-delay: 800ms;
transition-delay: 800ms;
}
.transition-delay-850 {
--animation-delay: 850ms;
animation-delay: 850ms;
transition-delay: 850ms;
}
.transition-delay-900 {
--animation-delay: 900ms;
animation-delay: 900ms;
transition-delay: 900ms;
}
.transition-delay-950 {
--animation-delay: 950ms;
animation-delay: 950ms;
transition-delay: 950ms;
}
.transition-delay-1000 {
--animation-delay: 1000ms;
animation-delay: 1000ms;
transition-delay: 1000ms;
}   @media screen and (min-width: 48rem) {
.grid-50:nth-of-type(2n+2),
.grid-33:nth-of-type(3n+2),
.grid-25:nth-of-type(4n+2),
.grid-20:nth-of-type(5n+2),
.grid-16:nth-of-type(6n+2) {
animation-delay: 100ms;
}
.grid-33:nth-of-type(3n+3),
.grid-25:nth-of-type(4n+3),
.grid-20:nth-of-type(5n+3),
.grid-16:nth-of-type(6n+3) {
animation-delay: 200ms;
}
.grid-25:nth-of-type(4n+4),
.grid-20:nth-of-type(5n+4),
.grid-16:nth-of-type(6n+4) {
animation-delay: 300ms;
}
.grid-20:nth-of-type(5n+5),
.grid-16:nth-of-type(6n+5) {
animation-delay: 400ms;
}
.grid-16:nth-of-type(6n+6) {
animation-delay: 500ms;
}
}
@media screen and (max-width: 47.9375rem) {
.mobile-grid-50:nth-of-type(2n+2),
.mobile-grid-33:nth-of-type(3n+2),
.mobile-grid-25:nth-of-type(4n+2),
.mobile-grid-20:nth-of-type(5n+2),
.mobile-grid-16:nth-of-type(6n+2) {
animation-delay: 100ms;
}
.mobile-grid-33:nth-of-type(3n+3),
.mobile-grid-25:nth-of-type(4n+3),
.mobile-grid-20:nth-of-type(5n+3),
.mobile-grid-16:nth-of-type(6n+3) {
animation-delay: 200ms;
}
.mobile-grid-25:nth-of-type(4n+4),
.mobile-grid-20:nth-of-type(5n+4),
.mobile-grid-16:nth-of-type(6n+4) {
animation-delay: 300ms;
}
.mobile-grid-20:nth-of-type(5n+5),
.mobile-grid-16:nth-of-type(6n+5) {
animation-delay: 400ms;
}
.mobile-grid-16:nth-of-type(6n+6) {
animation-delay: 500ms;
}
}   @media screen and (min-width: 48rem) {
:root {
--space: 2rem;
--space-xs: calc(var(--space) / 3);
--space-sm: calc(var(--space) / 2);
--space-md: calc(var(--space) * 2);
}
.sticky-article {
flex-basis: 0;
flex-grow: 999;
}
.sticky-aside {
--offset: var(--space);
flex-grow: 1;
align-self: start;
position: sticky;
top: var(--offset);
}
.scrolling-text-fading-image .sticky-aside {
--offset: 0;
}
}   @media (prefers-reduced-motion: reduce), print {
.js-scroll,
.scrolled,
[transition-style],
.infinite-scroll-container {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}