* {
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;
}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 {
padding: 0 .5rem;
}
.global-nav {
position: fixed;
top: 0;
left: 0;
z-index: 100;
-webkit-transition: top .6s;
-o-transition: top .6s;
transition: top .6s;
}
.global-nav:not(.page-faq).scrolling_up {
top: 0;
}
.global-nav:not(.page-faq).scrolling_down {
top: -15rem;
}
.global-nav .current-menu-item, .global-nav .current-menu-ancestor {
text-decoration: underline;
text-underline-offset: 0.375rem;
}
.global-nav:has(+ .main .intro.background-blue) {
background-color: var(--color-blue);
.submenu-wrapper, .navigation__links {
background-color: var(--color-blue);
}
a, li {
color: var(--color-cream);
}
.button.primary {
background-color: var(--color-yellow);
border: solid .125rem var(--color-yellow);
a {
color: var(--color-blue);
}
}
.navigation__logo .logo {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/logo-yellow.svg);
}
.navigation__button span {
background-color: var(--color-yellow);
}
}
.global-nav:has(+ .main .intro.background-red) {
background-color: var(--color-red);
.submenu-wrapper, .navigation__links {
background-color: var(--color-red);
}
a, li {
color: var(--color-cream);
}
.button.primary {
background-color: var(--color-mint);
border: solid .125rem var(--color-mint);
a {
color: var(--color-brown);
}
}
.navigation__logo .logo {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/logo-mint.svg);
}
.navigation__button span {
background-color: var(--color-mint);
}
}
.global-nav:has(+ .main .intro.background-brown) {
background-color: var(--color-brown);
.submenu-wrapper, .navigation__links {
background-color: var(--color-brown);
}
a, li {
color: var(--color-cream);
}
.button.primary {
background-color: var(--color-mint);
border: solid .125rem var(--color-mint);
a {
color: var(--color-brown);
}
}
.navigation__logo .logo {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/logo-mint.svg);
}
.navigation__button span {
background-color: var(--color-mint);
}
}
.global-nav:has(+ .main .intro.background-green) {
background-color: var(--color-green);
.submenu-wrapper, .navigation__links {
background-color: var(--color-green);
}
a, li {
color: var(--color-cream);
}
.button.primary {
background-color: var(--color-pink);
border: solid .125rem var(--color-pink);
a {
color: var(--color-green);
}
}
.navigation__logo .logo {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/logo-pink.svg);
}
.navigation__button span {
background-color: var(--color-pink);
}
}
.global-nav:has(+ .main .intro.background-brown) {
background-color: var(--color-brown);
.submenu-wrapper, .navigation__links {
background-color: var(--color-brown);
}
a, li {
color: var(--color-cream);
}
.button.primary {
background-color: var(--color-pink);
border: solid .125rem var(--color-pink);
a {
color: var(--color-brown);
}
}
.navigation__logo .logo {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/logo-pink.svg);
}
.navigation__button span {
background-color: var(--color-pink);
}
}
.global-nav:has(+ .main .intro.background-cream), .global-nav:has(+ .main .text-form.background-cream) {
background-color: var(--color-cream);
.submenu-wrapper, .navigation__links {
background-color: var(--color-cream);
}
a, li {
color: var(--color-brown);
}
.button.primary {
background-color: var(--color-blue);
border: solid .125rem var(--color-blue);
text-decoration: none;
a {
color: var(--color-cream);
}
}
.navigation__logo .logo {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/logo-blue.svg);
}
.navigation__button span {
background-color: var(--color-blue);
}
}
.page-give:has(+ .main .intro.background-green) {
.button.primary {
background-color: var(--color-yellow);
border: solid .125rem var(--color-yellow);
a {
color: var(--color-green);
}
}
.navigation__logo .logo {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/logo-yellow.svg);
}
.navigation__button span {
background-color: var(--color-yellow);
}
}
.scrolled .global-nav {
background-color: var(--color-cream) !important;
.submenu-wrapper, .navigation__links {
background-color: var(--color-cream) !important;
}
a, li {
color: var(--color-brown) !important;
}
.button.primary {
background-color: var(--color-blue) !important;
border: solid .125rem var(--color-blue) !important;
a {
color: var(--color-cream) !important;
}
}
.navigation__logo .logo {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/logo-blue.svg)!important;
}
.navigation__button span {
background-color: var(--color-blue) !important;
}
}
footer ul {
padding-inline-start: 0!important;
}
footer ul li {
padding-right: 0;
margin-block-start: .0625rem;
}
.footer-wrap a {
display: block;
width: 70%;
}@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;
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 {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 90rem;
position: relative;
z-index: 2;
}
.grid-container-full {
margin-left: auto;
margin-right: auto;
width: 100%;
position: relative;
z-index: 2;
}
.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%;
}
}
@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%; *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%; *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%; *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;
}
.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;
}.display-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
}
.flex-wrap-wrap {
flex-wrap: wrap;
}
.align-items-flex-start {
align-items: flex-start;
}
.align-items-flex-end {
align-items: flex-end;
}
.align-items-stretch {
align-items: stretch;
}
.align-items-center {
align-items: center;
}
.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-between {
justify-content: space-between;
}
.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 {
flex-grow: 1;
}   @media screen and (max-width: 47.9375rem) {
.mobile-align-items-flex-start {
align-items: flex-start!important;
}
.mobile-align-items-flex-end {
align-items: flex-end!important;
}
.mobile-align-items-center {
align-items: center!important;
}
.mobile-justify-content-flex-start {
justify-content: flex-start!important;
}
.mobile-justify-content-flex-end {
justify-content: flex-end!important;
}
.mobile-justify-content-center {
justify-content: center !important;
}
.mobile-flex-wrap-wrap {
flex-wrap: wrap!important;
}
.mobile-flex-direction-column {
flex-direction: column!important;
}
.mobile-flex-direction-column-reverse {
flex-direction: column-reverse!important;
}
.mobile-display-block {
display: block;
}
}.padding-equalize {
padding-left: .75rem;
padding-right: .75rem;
}
.padding-equalize > * {
padding-left: .75rem;
padding-right: .75rem;
} .padding-global {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.padding-top {
padding-top: 1.25rem;
}
.padding-bottom {
padding-bottom: 1.25rem;
}
.padding-global-2x {
padding-top: 3rem;
padding-bottom: 3rem;
}
.padding-top-2x {
padding-top: 3rem;
}
.padding-bottom-2x {
padding-bottom: 3rem;
}
.padding-global-3x {
padding-top: 7rem;
padding-bottom: 7rem;
}
.padding-top-3x {
padding-top: 7rem;
}
.padding-bottom-3x {
padding-bottom: 7rem;
}
.padding-global-half {
padding-top: .75rem;
padding-bottom: .75rem;
}
.padding-top-half {
padding-top: .75rem;
}
.padding-bottom-half {
padding-bottom: .75rem;
}
.padding-top-0 {
padding-top: 0;
}
.padding-right-0 {
padding-right: 0;
}
.padding-bottom-0 {
padding-bottom: 0;
}
.padding-left-0 {
padding-left: 0;
}
@media screen and (min-width: 48rem) {
.padding-equalize {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.padding-equalize > * {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (max-width: 47.9375rem) {
.padding-global-3x {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.padding-top-3x {
padding-top: 2.25rem;
}
.padding-bottom-3x {
padding-bottom: 2.25rem;
}
.padding-global-2x {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.padding-top-2x {
padding-top: 1.5rem;
}
.padding-bottom-2x {
padding-bottom: 1.5rem;
}
.mobile-padding-bottom {
padding-bottom: 1rem;
}
.mobile-padding-bottom-2x {
padding-bottom: 1.5rem;
}
.mobile-padding-bottom-3x {
padding-bottom: 2.25rem;
}
.mobile-padding-bottom-0 {
padding-bottom: 0;
}
.mobile-padding-right {
padding-right: .75rem;
}
.mobile-no-padding {
padding-left: 0;
padding-right: 0;
}
.mobile-padding-unequalize {
padding-left: 0rem;
padding-right: 0rem;
}
.mobile-padding-unequalize > * {
padding-left: 0rem;
padding-right: 0rem;
}
}:root, :host {
--color-cream: #EAE2DA;
--color-brown: #3F2B26;
--color-blue: #2F558C;
--color-green: #535327;
--color-red: #B74E35;
--color-mint: #ADCCC1;
--color-yellow: #E2C84B;
--color-pink: #F3B9C8;
--color-dust: #AA865B;
--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;
--tracking-tighter: -.05em;
--tracking-tight: -.025em;
--tracking-normal: 0em;
--tracking-wide: .025em;
--tracking-wider: .05em;
--tracking-widest: .1em;
--leading-tight: 1;
--leading-snug: 1.25;
--leading-base: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
--radius-xs: .125rem;
--radius-sm: .25rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-xl: 0.625rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
--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-xs: .75rem;
--text-sm: .875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
--text-7xl: 4.5rem;
--text-8xl: 6rem;
--text-9xl: 8rem;
--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);
}.color-red {
color: var(--color-red);
}
.color-blue {
color: var(--color-blue);
}
.color-yellow {
color: var(--color-yellow);
}
.color-green {
color: var(--color-green);
}
.color-mint {
color: var(--color-mint);
}
.color-cream {
color: var(--color-cream);
}
.color-pink {
color: var(--color-pink);
}
.color-dust {
color: var(--color-dust);
}
.color-brown {
color: var(--color-brown);
} .background-cream,
.background-mint,
.background-yellow {
color: var(--color-brown);
}
.background-brown,
.background-blue,
.background-green,
.background-red {
color: var(--color-cream);
} .background-cream a,
.background-mint a,
.background-yellow a{
color: var(--color-brown);
}
.background-brown a,
.background-blue a,
.background-green a,
.background-red a {
color: var(--color-cream);
}
.background-cream {
background-color: var(--color-cream);
}
.background-mint {
background-color: var(--color-mint);
}
.background-brown {
background-color: var(--color-brown);
}
.background-green {
background-color: var(--color-green);
}
.background-red {
background-color: var(--color-red);
}
.background-blue {
background-color: var(--color-blue);
}
.background-yellow {
background-color: var(--color-yellow);
}
.background-pink {
background-color: var(--color-pink);
}  a.button.primary, .button-blue {
background-color: var(--color-blue);
color: var(--color-cream);
border: solid .125rem var(--color-blue);
}
a.button.secondary {
color: var(--color-brown);
border: solid .125rem var(--color-brown);
}
.background-white a.button.primary {
background-color: transparent;
border: solid .125rem var(--color-blue);
}
.background-blue a.button.primary {
color: var(--color-blue);
border: solid .125rem var(--color-yellow);
background-color: var(--color-yellow);
}
.background-blue a.button.secondary {
color: var(--color-yellow);
border: solid .125rem var(--color-yellow);
}
.background-blue a.button.tertiary {
color: var(--color-yellow);
}
.background-brown a.button.primary {
border: solid .125rem var(--color-cream);
background-color: var(--color-cream);
color: var(--color-brown);
}
.background-brown a.button.secondary {
border: solid .125rem var(--color-cream);
color: var(--color-cream);
}
.background-green a.button.primary {
color: var(--color-green);
background-color: var(--color-cream);
border: solid .125rem var(--color-cream);
}
.background-green a.button.secondary {
color: var(--color-cream);
border: solid .125rem var(--color-cream);
}
.background-red a.button.primary {
color: var(--color-red);
border: solid .125rem var(--color-cream);
background-color: var(--color-cream);
}
.background-red a.button.secondary {
color: var(--color-cream);
border: solid .125rem var(--color-cream);
}
.background-yellow a.button.primary {
background-color: var(--color-green);
border: solid .125rem var(--color-green);
}
.background-pink a.button.primary {
background-color: var(--color-brown);
border: solid .125rem var(--color-brown);
color: var(--color-pink);
}
.button-blue a {
color: var(--color-cream);
}
a.button.primary.yellow {
background-color: var(--color-yellow);
border: solid .125rem var(--color-yellow);
}
a.button.secondary.yellow {
background-color: var(--transparent);
border: solid .125rem var(--color-yellow);
color: var(--color-yellow);
}
a.button.primary.red {
border: solid .125rem var(--color-red);
background-color: var(--color-red);
}
a.button.secondary.red {
border: solid .125rem var(--color-red);
color: var(--color-red);
}
a.button.tertiary.red {
color: var(--color-red);
}
a.button.primary.green {
border: solid .125rem var(--color-green);
background-color: var(--color-green);
}
a.button.secondary.green {
border: solid .125rem var(--color-green);
color: var(--color-green);
}
a.button.tertiary.green {
color: var(--color-green);
}
a.button.primary.red-mint {
border: solid .125rem var(--color-mint);
background-color: var(--color-mint);
color: var(--color-red);
}
a.button.primary.pink-green {
border: solid .125rem var(--color-green);
background-color: var(--color-green);
color: var(--color-pink);
}
a.button.primary.green-pink {
border: solid .125rem var(--color-pink);
background-color: var(--color-pink);
color: var(--color-green);
}
a.button.primary.green-cream {
border: solid .125rem var(--color-cream);
background-color: var(--color-cream);
color: var(--color-green);
}
a.button.primary.cream-green {
border: solid .125rem var(--color-green);
background-color: var(--color-green);
color: var(--color-cream);
}
a.button.primary.yellow-blue {
border: solid .125rem var(--color-blue);
background-color: var(--color-blue);
color: var(--color-yellow);
}
a.button.primary.yellow-green {
border: solid .125rem var(--color-green);
background-color: var(--color-green);
color: var(--color-yellow);
}
a.button.primary.mint-brown {
border: solid .125rem var(--color-brown);
background-color: var(--color-brown);
color: var(--color-mint);
}
a.button.primary.mint {
border: solid .125rem var(--color-mint);
background-color: var(--color-mint);
}
a.button.secondary.mint {
border: solid .125rem var(--color-mint);
color: var(--color-mint);
}
a.button.secondary.blue {
border: solid .125rem var(--color-blue);
color: var(--color-blue);
}
a.button.tertiary.blue {
color: var(--color-blue);
}
a.button.primary.pink {
border: solid .125rem var(--color-pink);
background-color: var(--color-pink);
}
a.button.secondary.pink {
border: solid .125rem var(--color-pink);
color: var(--color-pink);
}
a.button.primary.brown {
border: solid .125rem var(--color-brown);
background-color: var(--color-brown);
}
a.button.secondary.brown {
border: solid .125rem var(--color-brown);
color: var(--color-brown);
}
a.button.tertiary.brown {
color: var(--color-brown);
}
a.button.primary.cream {
border: solid .125rem var(--color-cream);
background-color: var(--color-cream);
}
a.button.secondary.cream {
border: solid .125rem var(--color-cream);
color: var(--color-cream);
}
a.button.tertiary.cream {
color: var(--color-cream);
} .background-green button {
border: solid .125rem var(--color-cream) !important;
background-color: var(--color-cream) !important;
color: var(--color-green) !important;
} .gform_footer input.gform_button, #field_submit .gform-button.gform-button--color-white.button {
color: var(--color-white)!important;
background-color: var(--color-black)!important;
}@font-face {
font-family: 'gotham';
src: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/fonts/Gotham.otf) format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'basted-clubs';
src: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/fonts/BastedClubs.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: "gotham", sans-serif;
font-size: var(--text-xl);
font-weight: var(--font-weight-medium);
line-height: var(--leading-normal);
font-style: normal;
padding: 0;
margin: 0;
position: relative;
font-optical-sizing: auto;
}
h1, h2, h3 {
font-family: "basted-clubs", sans-serif;
font-weight: var(--font-weight-medium);
line-height: var(--leading-tight);
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
h1 {
font-size: var(--text-8xl);
margin-block-start: .75rem;
margin-block-end: .75rem;
letter-spacing: .6rem;
line-height: 120%;
}
h2 {
font-size: var(--text-6xl);
margin-block-start: .625rem;
margin-block-end: .625rem;
line-height: 120%;
letter-spacing: .563rem;
}
h3, .subhead-1 {
font-family: "basted-clubs", sans-serif;
text-transform: uppercase;
letter-spacing: 0.375rem;
font-size: 2.5rem;
line-height: 120%;
font-weight: var(--font-weight-medium);
margin-block-start: .5rem;
margin-block-end: .5rem;
}
h4, .subhead-2{
font-family: "basted-clubs", sans-serif;
font-weight: var(--font-weight-medium);
font-size: 1.5rem;
line-height: 1.2; 
letter-spacing: 0.225rem;
text-transform: uppercase;
margin-block-end: .5rem;
margin-block-start: .5rem;
}
h5, .subhead-3, td, th {
font-family: "basted-clubs", sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 154%;
letter-spacing: 0.1rem;
margin-block-end: .5rem;
margin-block-start: .5rem;
}
h6 {
font-size: var(--text-xl);
margin-block-start: .125rem;
margin-block-end: .125rem;
}
em {
font-style: italic;
}
p, blockquote, ul, li, .gform-theme--framework .gform-field-label, .gform_footer input.gform_button,  {
margin-block-start: .75rem;
margin-block-end: .5rem;
}
p, ul, li {
font-size: var(--text-xl);
font-weight: var(--font-weight-medium);
margin-block-start: .625rem;
margin-block-end: .625rem;
}
li {
font-size: 1rem;
}
nav li {
margin-block-start: 0!important;
margin-block-end: 0!important;
}
nav li a {
padding: .625rem 0;
}
.h1 {
font-size: var(--text-8xl);
font-weight: var(--font-weight-extralight);
line-height: var(--leading-base);
margin-block-start: .75rem;
margin-block-end: .75rem;
letter-spacing: .6rem;
line-height: 120%;
}
.h2 {
font-size: var(--text-6xl);
font-weight: var(--font-weight-extralight);
line-height: var(--leading-base);
margin-block-start: .625rem;
margin-block-end: .625rem;
line-height: 120%;
letter-spacing: .563rem;
}
.h3 {
font-size: var(--text-4xl);
font-weight: var(--font-weight-extralight);
line-height: var(--leading-base);
margin-block-start: .5rem;
margin-block-end: .5rem;
}
.h4 {
font-size: var(--text-3xl);
font-weight: var(--font-weight-extralight);
line-height: var(--leading-base);
margin-block-start: .375rem;
margin-block-end: .375rem;
}
.h5 {
font-size: var(--text-2xl);
margin-block-start: .25rem;
margin-block-end: .25rem;
}
.h6 {
font-size: var(--text-xl);
margin-block-start: .125rem;
margin-block-end: .125rem;
}
.p {
font-size: var(--text-xl);
font-weight: var(--font-weight-medium);
line-height: var(--leading-normal);	
}
p.large {
font-size: var(--text-2xl);
}
.filmotype {
font-family: "filmotype-lucky", sans-serif;
font-weight: var(--font-weight-normal);
letter-spacing: 0;
}
h1 .filmotype, .h1 .filmotype {
font-size: 7.4375rem;
}
h2 .filmotype, .h2 .filmotype {
font-size: 5.1875rem;
}
h3 .filmotype, .h3 .filmotype {
font-size: 3rem;
}
.text-transform-none {
text-transform: none;
}
.button, a {
font-family: "basted-clubs", sans-serif;
font-size: var(--text-base);
font-weight: var(--font-weight-normal);
line-height: 1.5;
letter-spacing: 0.15rem;
text-transform: uppercase;
text-decoration: none;
}
button {
font-family: "basted-clubs", sans-serif !important;
font-size: var(--text-base) !important;
font-weight: var(--font-weight-normal) !important;
line-height: 1.5 !important;
letter-spacing: 0.15rem !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.body-2, .body-2 ul li, .body-2 p, .body-2 li {
font-size: var(--text-base);
}
.fine-print, .fine-print p, .fine-print li {
font-size: 0.75rem;
}
.button-text p {
font-family: "basted-clubs", sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15rem;
}
p a {
font: inherit;
letter-spacing: inherit;
color: inherit;
text-transform: none;
text-decoration: underline;
}  legend.gform-field-label, label.gform-field-label, div.gfield_description {
font-size: var(--text-lg);
}   @media screen and (min-width: 64.0625rem) and (max-width: 90rem) {
h1 {
font-size: var(--text-7xl);
}
h2 {
font-size: var(--text-6xl);
}
.h1 {
font-size: var(--text-7xl);
}
.h2 {
font-size: var(--text-6xl);
}
h1 .filmotype, .h1 .filmotype {
font-size: var(--text-7xl);
}
h2 .filmotype, .h2 .filmotype {
font-size: var(--text-6xl);
}
h3 .filmotype, .h3 .filmotype {
font-size: var(--text-3xl);
}
}
@media screen and (min-width: 48rem) and (max-width: 64rem) {
h1 {
font-size: var(--text-6xl);
}
h2 {
font-size: var(--text-5xl);
}
h3, .subhead-1 {
font-size: var(--text-3xl);
letter-spacing: 0.175rem;
}
.h1 {
font-size: var(--text-6xl);
}
.h2 {
font-size: var(--text-5xl);
}
.h3 {
font-size: var(--text-3xl);
}
h1 .filmotype, .h1 .filmotype {
font-size: var(--text-6xl);
}
h2 .filmotype, .h2 .filmotype {
font-size: var(--text-5xl);
}
h3 .filmotype, .h3 .filmotype {
font-size: var(--text-4xl);
}
}
@media screen and (max-width: 47.9375rem) {
h1 {
font-size: 2.5rem;
letter-spacing: 0.4rem;
}
h2 {
font-size: var(--text-4xl);
letter-spacing: 0.3rem;
}
h3, .subhead-1 {
font-size: var(--text-3xl);
letter-spacing: 0.175rem;
}
h4, .subhead-2, .camps-tab-item h3 {
font-size: var(--text-2xl);
}
h5 {
font-size: var(--text-xl);
}
h6 {
font-size: var(--text-sm);
}
p {
font-size: 1rem;
}
.body-2 {
font-size: 14px;
}
.fine-print {
font-size: 12px;
}
.h1 {
font-size: 2.5rem;
letter-spacing: 0.4rem;
}
.h2, .mobile-h2 {
font-size: var(--text-4xl);
letter-spacing: 0.3rem;
}
.h3 {
font-size: var(--text-3xl);
letter-spacing: 0.175rem;
}
.h4 {
font-size: var(--text-2xl);
}
.h5 {
font-size: var(--text-xl);
}
.h6 {
font-size: var(--text-sm);
}
h1 .filmotype, .h1 .filmotype {
font-size: var(--text-6xl);
}
h2 .filmotype, .h2 .filmotype {
font-size: var(--text-5xl);
}
h3 .filmotype, .h3 .filmotype {
font-size: var(--text-4xl);
}
}.button-container {
padding: 1.75rem 0 .875rem 0;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
gap: .75rem;
}
@media screen and (max-width: 47.9375rem) {
.button-container {
padding: 1rem 0 .875rem 0;
}
}
.tab-buttons {
gap: .75rem;
}
.button-container:has(a:nth-of-type(2).tertiary) {
gap: 2rem;
}
.button-container-small {
padding: .75rem 0;
width: 100%;
}
a, a.button, .background-black .gform_footer input.gform_button, .gform_footer input.gform_button, input[type=password], form.post-password-form input[type=submit], button {
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, #menu-cta-menu li a, li.button, button {
border-radius: var(--radius-xl);
padding: 1.25rem;
text-decoration: none;
}
@media screen and (max-width: 47.9375rem) {
a.button, #menu-cta-menu li a, li.button, button {
padding: 1rem;
}
}
a.tertiary {
padding: 0rem;
}
a.text-link, p.text-link {
text-decoration: none;
}
a.button:hover, nav a:hover, input[type=password]:hover, form.post-password-form input[type=submit]:hover, .gform_footer input.gform_button:hover, form.post-password-form input[type=submit]:hover, body .gform_wrapper .gform_footer input[type=submit]:hover, button:hover {
opacity: .6!important;
}
a.button.tertiary, a.text-link, p.text-link {
display: flex;
align-items: center;
}
a.button.tertiary:after,
a.text-link:after,
p.text-link:after {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
margin-left: .625rem;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 16'><path d='M1.7998 6.70117C1.24752 6.70117 0.799805 7.14889 0.799805 7.70117C0.799805 8.25346 1.24752 8.70117 1.7998 8.70117V7.70117V6.70117ZM14.5069 8.40828C14.8974 8.01775 14.8974 7.38459 14.5069 6.99407L8.14295 0.630104C7.75243 0.23958 7.11926 0.23958 6.72874 0.630104C6.33821 1.02063 6.33821 1.65379 6.72874 2.04432L12.3856 7.70117L6.72874 13.358C6.33821 13.7486 6.33821 14.3817 6.72874 14.7722C7.11926 15.1628 7.75243 15.1628 8.14295 14.7722L14.5069 8.40828ZM1.7998 7.70117V8.70117H13.7998V7.70117V6.70117H1.7998V7.70117Z'/></svg>") no-repeat center;
-webkit-mask-size: contain;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 16'><path d='M1.7998 6.70117C1.24752 6.70117 0.799805 7.14889 0.799805 7.70117C0.799805 8.25346 1.24752 8.70117 1.7998 8.70117V7.70117V6.70117ZM14.5069 8.40828C14.8974 8.01775 14.8974 7.38459 14.5069 6.99407L8.14295 0.630104C7.75243 0.23958 7.11926 0.23958 6.72874 0.630104C6.33821 1.02063 6.33821 1.65379 6.72874 2.04432L12.3856 7.70117L6.72874 13.358C6.33821 13.7486 6.33821 14.3817 6.72874 14.7722C7.11926 15.1628 7.75243 15.1628 8.14295 14.7722L14.5069 8.40828ZM1.7998 7.70117V8.70117H13.7998V7.70117V6.70117H1.7998V7.70117Z'/></svg>") no-repeat center;
mask-size: contain;
}
a.button.tertiary:after:hover {
margin-left: .75rem;
}
.button-container .button.tertiary:only-child, .single-button {
padding-left: 0 !important;
}.ginput_container input, .ginput_container .textarea {
text-align: left !important;
background-color: var(--color-cream) !important;
}
.ginput_container input:focus {
outline: none !important;
border: none !important;
}
.ginput_container input, .ginput_container .textarea {
outline: none !important;
border: none !important;
}
.ginput_container input, .gform-button, .gform_button, .ginput_container .textarea{
font-family: "basted-clubs", sans-serif !important;
font-size: var(--text-base) !important;
font-weight: var(--font-weight-normal) !important;
line-height: 1.5 !important;
letter-spacing: 0.15rem !important;
text-transform: uppercase !important;
text-decoration: none !important;
border-radius: var(--radius-lg)!important;
}
.gfield_label {
font-family: "basted-clubs", sans-serif !important;
font-size: var(--text-xl) !important;
font-weight: var(--font-weight-normal) !important;
color: var(--color-blue) !important;
letter-spacing: 0.15rem !important;
text-transform: uppercase !important;
}
.gfield_required_text {
display: none !important;
} .ginput_container input:is([type="text"], [type="email"], [type="tel"]), .gform-button {
height: 4rem !important;
}
.gfield-choice-input {
height: 1.5rem !important;
}
.ginput_container input, .ginput_container .textarea {
color: var(--color-dust) !important;
padding-left: 1.25rem !important;
}
#gform_submit_button_1{
background-color: var(--color-mint) !important;
color: var(--color-brown) !important;
}
#gform_submit_button_2 {
background-color: var(--color-green) !important;
color: var(--color-cream) !important;
}
#gform_submit_button_3 {
background-color: var(--color-blue) !important;
color: var(--color-cream) !important;
}
#gform_fields_1, #gform_fields_2 {
align-items: baseline;
} #gform_fields_3 input, .ginput_container .textarea {
border: solid 0.125rem var(--color-brown) !important;
padding-left: 1.25rem !important;
}
.gfield input:focus,
.gfield textarea:focus {
color: var(--color-brown) !important;
}
.ginput_container input[type=text], .ginput_container input[type=email], .ginput_container textarea.textarea {
padding: .625rem!important;
font-size: var(--text-base)!important;
border-radius: var(--radius-lg)!important;
min-height: 2rem!important;
padding-left: 1.25rem !important;
}
.section-comments form textarea, .section-comments form input {
padding: .625rem;!important;
font-size: var(--text-base)!important;
border: none;
padding-left: 1.25rem !important;
}
.gform_footer input.gform_button, input[type=password], form.post-password-form input[type=submit], .section-comments form input[type=submit] {
font-size: var(--text-base)!important;
padding: .75rem!important;
}
.gform-theme--foundation .gfield textarea.medium, .section-comments form textarea {
min-height: 10rem!important;
}
.section-comments form input:not(p.comment-form-cookies-consent input, .section-comments form input[type=submit]) {
width: 100%;
}
.section-comments form textarea, .section-comments form input:not(p.comment-form-cookies-consent input) {
max-width: calc(100% - 3rem);
border-radius: var(--radius-small);
}
.section-comments form label:not(p.comment-form-cookies-consent label, label.gform-field-label--type-inline) {
width: 100%;
float: left;
}
.mktoForm .mktoRequiredField label.mktoLabel { font-size: 16px !important; }.global-nav {
width: 100%;
}
.navigation {
display: inline-block;
}
.nav-backdrop {
position: absolute;
inset: 0;
height: 100%;
backdrop-filter: blur(1rem);
mask-image: linear-gradient(
to bottom,
black 0% 50%,
transparent 50% 100%
);
}
.navigation__logo .logo {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 11.75rem;
height: 5.313rem;
display: block;
}
.main-menu ul {
display: flex;
width: 100%;
justify-content: space-between;
}
.menu-1 {
padding-right: 5rem;
}
.menu-2 {
margin-left: -5rem;
}
.faq-drawer input[type="checkbox"] {
display: none;
}
.menu-item-has-children::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-left: 0.5rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
margin-bottom: 0.5rem;
transform: rotate(45deg);
transition: transform 300ms;
vertical-align: middle;
}
.menu-item-has-children:hover:after {
transform: rotate(-135deg);
margin-bottom: 0;
}
.footer-menu a {
color: var(--color-mint);
}
footer .logo img {
max-width: 26rem;
}
.social-icons img {
width: 2.25rem;
height: 2.25rem;
}
.social-icons {
display: flex;
gap: 1.5rem;
}
.footer-info h5 {
padding-top: 1.5rem;
}
.footer-info a  {
color: var(--color-mint);
}
.sub-menu .badge a {
position: relative;
display: block;
width: 100%;
height: 13.73375rem;
text-indent: -9999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.sub-menu li {
width: 20%;
}
.sub-menu .badge.camp a {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/about-camp.svg);
}
.sub-menu .badge.life a {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/about-life.svg);
}
.sub-menu .badge.haven a {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/about-haven.svg);
}
.sub-menu .badge.flora a {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/about-flora.svg);
}
.sub-menu .badge.craft a {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/nav/about-craft.svg);
}
@media screen and ( min-width: 48rem ) {
.menu-item-has-children {
padding-bottom: 3rem;
padding-top: 3rem;
}
.global-nav .menu-item-has-children .submenu-wrapper {
display: none;
position: fixed;
z-index: 5;
background-color: inherit;
width: 100vw;
left: 0;
margin-top: 2.5rem;
}
.menu-item-has-children:hover .submenu-wrapper {
display: flex;
justify-content: center;
}
.menu-item-has-children .sub-menu {
padding: 3rem;
padding-top: 2.5rem;
display: flex;
justify-content: flex-start;
max-width: 84rem;
}
.menu-item-has-children .submenu-wrapper {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: transform 0.4s ease, opacity 0.2s ease, visibility 0.4s ease;
}
.scrolling_down .menu-item-has-children:hover .submenu-wrapper {
visibility: hidden;
transform: translateY(-15rem);
}
.scrolling_down.page-faq .menu-item-has-children:hover .submenu-wrapper {
display: none;
}
}
@media screen and ( max-width: 47.9375rem ) {
.global-nav {
top: 0;
}
.navigation {
position: relative;
padding: .125rem 0 .125rem .125rem;
}
.navigation__logo {
width: 8rem;
}
.navigation__wrapper {
flex-grow: 1;
padding-right: .25rem!important;
top: 2rem;
}
.navigation__links {
position: fixed;
width: 100%;
height: 100vh;
right: -63rem;
top: 0rem;
transition: right .2s ease-in;
background: var(--color-white);
color: var(--color-black);
list-style: none;
flex-direction: column;
justify-content: flex-start;
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.navigation__links li {
padding: .5rem 0rem;
text-align: center;
width: 100%;
flex-basis: 0;
}
.navigation__links a {
text-decoration: none;
font-size: 1.3rem;
}
#hamburger {
visibility: hidden;
width: 0;
}
.navigation__button {
position: relative;
display: inline-block;
width: 2.25rem;
height: 2rem;
background: transparent;
cursor: pointer;
z-index: 999;
}
.navigation__button span {
position: absolute;
right: 0;
display: inline-block;
width: 1.5rem;
height: .125rem;
background-color: var(--color-cream);
transform-origin: center;
transition: opacity 0.2s linear, all 0.3s linear;
}
.navigation__button span:nth-of-type(1) {
top: .5625rem;
}
.navigation__button span:nth-of-type(2) {
top: .9375rem;
}
.navigation__button span:nth-of-type(3) {
top: 1.3125rem;
} #hamburger:checked ~ .navigation__links { right: 0;
} #hamburger:checked ~ .navigation__button span:nth-of-type(1) {
transform: rotate(45deg);
top: 1rem;
}
#hamburger:checked ~ .navigation__button span:nth-of-type(2) {
opacity: 0;
}
#hamburger:checked ~ .navigation__button span:nth-of-type(3) {
transform: rotate(-45deg);
top: 1rem;
} .faq-drawer__content-wrapper {
line-height: 1.35;
max-height: 0rem;
overflow: hidden;
transition: 0.25s ease-in-out;
}
.faq-drawer__title {
display: block;
padding: 0;
position: relative;
margin-bottom: 0;
transition: all 0.2s ease-out;
}
.faq-drawer__title::after {
border-style: solid;
border-width: .0625rem .0625rem 0 0;
content: " ";
display: inline-block;
float: right;
height: .625rem;
left: -.125rem;
position: relative;
right: 1.5em;
top: .125rem;
transform: rotate(135deg);
transition: 0.3s ease-in-out;
vertical-align: top;
width: .625rem;
}
.faq-drawer__trigger:checked + .faq-drawer__title + .faq-drawer__content-wrapper {
max-height: 100vh;
}
.faq-drawer__trigger:checked + .faq-drawer__title::after {
transform: rotate(-45deg);
transition: 0.2s ease-in-out;
} .navigation__links li a {
font-weight: 600;
}
.navigation__links .sub-menu li a {
font-weight: 400;
}
.navigation__links .menu-item-has-children .sub-menu {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
.navigation__links .menu-item-has-children {
border-bottom: solid .125rem var(--light-gray);
}
.navigation__links .menu-item-has-children ul li {
padding-right: 0;
}
.navigation__links .menu-item-has-children li:after {
content: '›';
margin-left: .5rem;
}
}.blog-img-padding {
padding-bottom: 2.25rem;
}
.blog-item img {
max-height: 14.125rem;
object-fit: cover;
}
.blog-main {
max-height: 39.75rem;
object-fit: cover;
}
.post-content img {
border-radius: var(--radius-3xl);
}
.blog-category, .gallery-category, .event-category {
border-radius: 2.5rem !important;
padding: 1.25rem 2.5rem !important;
margin-right: .75rem;
margin-bottom: .75rem;
}
@media screen and (max-width: 47.9375rem) {
.blog-category, .gallery-category, .event-category {
padding: .75rem .75rem !important;
}
}
.category-links {
padding-bottom: 2rem;
}
.blog-category.active, .gallery-category.active, .event-category.active {
background-color: var(--color-blue);
color: var(--color-cream) !important;
}
.clear-all {
color: var(--color-blue) !important;
opacity: 0.4;
}
.category-links:has(.category-link.active) .clear-all {
opacity: 1;
} .bubble-icon {
max-width: 6.21019rem;
}
.bubble-text-image .bubble, .bubble-padding {
padding: 3rem;
}
@media screen and (max-width: 47.9375rem) {
.bubble-text-image .bubble, .bubble-padding {
padding: 1.5rem;
}
.bubble-icon {
max-width: 3.21019rem;
}
.bubble {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
} .bubble {
border-radius: var(--radius-3xl);
background-size: cover;
}
.rounded-img img {
border-radius: var(--radius-3xl);
}
.rounded {
border-radius: var(--radius-3xl);
}
.height-inherit {
height: inherit;
}
ul.split-list {
columns: 2;
-webkit-columns: 2; -moz-columns: 2; padding-top: .625rem;
}
@media screen and (max-width: 47.9375rem) {
ul.split-list{
columns: 1;
-webkit-columns: 1; -moz-columns: 1; }
}
.bubbles p {
font-size: 1rem;
}
.split-list li {
margin-block-start: 0;
margin-block-end: 1rem;
font-size: var(--text-base);
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.no-background {
background-color: transparent;
} .bubble-details h2 {
margin-block-start: 0;
}
.bubble-details .background-green .details-dropdown__title {
color: var(--color-yellow);
}
.bubble-details .background-mint .details-dropdown__title {
color: var(--color-brown);
}
.bubble-details .background-yellow .details-dropdown__title {
color: var(--color-blue);
}
.flex-1 {
flex: 1;
} .tab-sessions {
border-radius: var(--radius-3xl);
}
.tab-info h2 {
color: var(--color-red);
}
.tab-border {
border: solid .25rem var(--color-red);
border-radius: 1.25rem;
padding-left: 3rem;
padding-right: 3rem;
}
@media screen and (max-width: 48rem) {
.tab-border {
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-top: 2rem;
}
.mobile-no-border {
padding-left: 0rem;
padding-right: 0rem;
border: 0 !important;
}
.camp-tabs .tab-content-wrapper {
padding-top: 4rem;
}
}
.camps-tabs-list {
padding-inline-start: 0rem;
gap: 1.5rem;
display: flex;
margin-top: -3rem;
}
@media (max-width: 47.9375rem) {
.camps-tabs-list {
gap: 0rem;
}
}
.camps-tab-item {
color: var(--color-dust); display: flex;
align-items: center;
cursor: pointer;
display: flex;
padding: .5rem 1rem;
align-items: center;
gap: 1rem;
border-radius: 2.5rem;
border: solid .25rem var(--color-dust);
background-color: var(--color-cream);
}
.tab-sessions > :first-child {
padding-right: 1.5rem;
}
.tab-sessions > :second-child {
padding-left: 1.5rem;
}
.tab-sessions {
padding: 3rem;
}
@media screen and (max-width: 47.9375rem) {
.tab-sessions {
padding: 1.5rem;
}
.tab-sessions > :first-child {
padding-right: 0rem;
}
.tab-sessions > :second-child {
padding-left: 0rem;
}
}
.session-text p {
font-size: 1rem;
}
.camps-tab-item svg {
width: 3rem;
fill: currentColor; flex-shrink: 0;
}
.camps-tab-item.active {
color: var(--color-cream); background-color: var(--color-red);
border: solid .25rem var(--color-red);
}
.details-dropdown__title {
cursor: pointer;
padding-right: 2rem; padding-top: 1.5rem;
padding-bottom: 1.5rem;
margin-bottom: 0;
position: relative;
}
.event-section .details-dropdown__title {
padding-top: 0rem;
}
.details-dropdown__title::after {
border-style: solid;
border-width: .125rem .125rem 0 0;
content: " ";
display: inline-block;
height: 1.5rem;
position: absolute;
right: 0;
transform: rotate(135deg);
transition: 0.3s ease-in-out;
vertical-align: top;
width: 1.5rem;
bottom: 2rem;
left: auto;
}
.details-dropdown-wrapper.active .details-dropdown__title::after {
transform: rotate(-45deg);
}
.background-mint.bubble {
padding-top: 3rem;
padding-bottom: 3rem;
}
@media screen and (max-width: 47.9375rem) {
.background-mint.bubble {
padding-top: 1rem;
padding-bottom: 1rem;
}
.mobile-margin-bottom {
margin-bottom: 1rem;
}
}
.pricing-table th {
color: var(--color-cream);
}
.pricing-table th,
.pricing-table td {
text-align: left;
padding: 0.5rem 0.5rem;
width: 50%;
}
.pricing-table td {
background-color: var(--color-cream);
}
.pricing-table table {
border: 0.125rem solid var(--color-brown);
border-radius: 0.5rem;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
width: 100%;
background-color: var(--color-brown);
}
.pricing-table tbody tr:not(:first-child) td {
border-top: 0.125rem solid var(--color-brown);
}
.pricing-table tbody td:not(:last-child) {
border-right: 0.125rem solid var(--color-brown);
}
.background-cream.camp-tabs .swiper-button-prev, .background-cream.camp-tabs .swiper-button-next {
color: var(--color-red) !important;
}
.background-cream.camp-tabs.tabs-horizontal .swiper-button-prev, .background-cream.camp-tabs.tabs-horizontal .swiper-button-next {
color: var(--color-blue) !important;
}
.camp-tabs .mobile-arrows {
height: 2rem;
padding-bottom: 5rem;
}
.mobile-camp-tab {
position: absolute;
top: 0rem;
left: 50%;
transform: translateX(-50%);
width: 80%;
}
@media (max-width: 47.9375rem) {
.display-block-mobile {
display: block;
}
}
.desktop-tabs, .desktop-tab-content { display: block; }
.mobile-display-flex, .mobile-display-block, .camp-swiper, .mobile-swiper-nav { display: none; }
@media (max-width: 47.9375rem) {
.desktop-tabs, .desktop-tab-content { display: none !important; }
.mobile-display-flex { display: flex !important; }
.mobile-display-block { display: block !important; }
} .icon img {
width: 2.5rem;
}
.link {
color: inherit;
text-decoration: underline;
} .background-dots {
position: relative;
z-index: 0; }
.background-dots {
position: relative;
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/backgrounds/dots-background.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: lighten;
}
.tabs .background-dots {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/backgrounds/background-dots-tabs.png);
}
.background-dots.background-yellow, .background-dots.background-pink, .background-dots.background-mint {
background-blend-mode: screen;
}
.call-to-action .background-dots::before {
opacity: 50%;
}
.call-to-action.background-yellow .button.primary {
background-color: var(--color-green);
color: var(--color-yellow);
}
.call-to-action.background-yellow .button.secondary {
background-color: var(--transparent);
border: solid .125rem var(--color-green);
color: var(--color-green);
}
.call-to-action.background-yellow .subhead-1 {
color: var(--color-green);
} .mobile-arrows {
display: none;
position: relative;
}
.mobile-arrows.swiper-button-prev {
left: 0;
}
.mobile-arrows.swiper-button-next {
right: 0;
}
.mobile-arrow-container {
padding-top: 4rem;
}
.events-association .event-image img {
height: 25rem;
object-fit: cover;
}
.single-event .bubble .grid-60 img {
max-width: 10rem!important;
}
@media (max-width: 47.9375rem) {
.desktop-arrows {
display: none;
}
.mobile-arrows {
display: block;
}
.events-association .event-image img {
height: 18rem;
}
}
.event-info, .event-info p {
font-size: var(--text-base);
}
.event-info h4 {
color: var(--color-blue);
}
.blue-event-info h4 {
color: var(--color-yellow);
}
.event-image img {
border-radius: var(--radius-3xl);
}
.price h4 {
padding-left: .2rem;
}
.truncate {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1rem;
}
.events .event-details h4 {
color: var(--color-blue);
}
.events .event, .blog-item {
border-top: .125rem solid var(--color-blue);
}
.related-event, .related-blog {
border-radius: 1.25rem;
border: .25rem solid var(--color-blue);
padding: 2rem;
}
.related-container .grid-33 {
padding-right: 2rem;
}
@media screen and (max-width: 47.9375rem) {
.related-container .grid-33 {
padding-right: 0rem;
}
}
.event-block-start {
padding-top: 2.25rem;
} .faqs.background-yellow .button {
border-color: var(--color-blue) !important;
color: var(--color-blue) !important;
} .faq-sticky {
position: sticky;
top: 0;
}
@media screen and (max-width: 47.9375rem) {
.faq-sticky {
position: relative;
padding-bottom: 2rem;
}
}
.faq-sticky .button-container {
padding-top: 1rem;
}
.page-faq {
position: relative;
}
.faq-full.intro {
padding-top: 3rem;
}
.faq-full :target {
scroll-margin-top: 2rem;
} section.image-gallery .swiper-button-next, section.image-gallery .swiper-button-prev {
position: relative;
}
.gallery-container *,
.gallery-container {
user-select: none;
}
.masonry-grid {
column-count: 4;
column-gap: 24px;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 24px;
width: 100%;
cursor: pointer;
}
#gallery-modal .modal-swiper {
color: var(--color-yellow) !important;
position: absolute !important;
top: 50%;
}
.modal-swiper-prev{
left: 0;
}
.modal-swiper-next{
right: 0;
}
.modal-image-wrapper {
height: 70vh;
}
@media screen and (max-width: 47.9375rem) {
.masonry-grid {
column-count: 2;
}
.modal-image-wrapper {
height: 40vh;
}
}
.slider-image {
height: 100%;
object-fit: contain;
}
.gallery-modal {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: var(--color-brown);
mix-blend-mode: multiply;
backdrop-filter: blur(4.150000095367432px);
justify-content: center;
align-items: center;
z-index: 100;
overflow-x: hidden;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;    
-ms-user-select: none;      
cursor: default;
}
.gallery-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
}
.gallery-modal-content {
position: relative;
background: none;
padding-left: 10px;
padding-right: 10px;
max-height: 90%;
overflow: hidden;
}
.body-lock-scroll {
overflow: hidden;
width: 100%;
position: relative;
}
.gallery-modal-close-icon {
width: 50px;
height: 50px;
position: absolute;
cursor: pointer;
z-index: 101;
padding: 0;
border: 0;
background: transparent;
}
.gallery-modal-close-icon::before,
.gallery-modal-close-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 2px;
transform-origin: center;
}
.gallery-modal-close-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.gallery-modal-close-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.gallery-modal-close-icon::before,
.gallery-modal-close-icon::after {
background-color: var(--color-yellow);
}
.gallery-modal-close-icon {
top: 10px;
right: 15px;
}
.modal-image-wrapper img {
}
.gallery-item img {
border-radius: var(--radius-3xl);
}
.gallery-container img[data-dominant-color]:not(.has-transparency) {
background-color: transparent !important;
}
.gallery-pagination-container {
margin-top: 1.875rem;
text-align: center;
width: 100%;
clear: both;
}
.gallery-pagination ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
gap: 0.625rem;
flex-wrap: wrap;
}
.gallery-pagination li {
display: inline-block;
}
.gallery-pagination a,
.gallery-pagination span {
padding: 8px 12px;
border: 2px solid var(--color-blue);
color: var(--color-blue);
text-decoration: none;
transition: all 0.3s;
height: 1.2rem;
display: flex;
border-radius: .5rem;
align-items: center;
}
.gallery-pagination .current,
.gallery-pagination a:hover {
background-color: var(--color-blue);
color: var(--color-cream);
} .image-column-bubble {
border-radius: 7rem;
margin-top: -6rem;
padding: 3rem;
z-index: 5;
}
@media (max-width: 47.9375rem) {
.image-column-bubble {
padding: 1rem;
margin-top: 0rem;
}
.icon {
padding-bottom: 1rem;
}
} .intro-camp-icon img {
margin-top: -4rem;
position: relative;
}
.intro-camp {
padding-bottom: 4rem;
} .no-padding {
padding-left: 0;
padding-right: 0;
}
.intro-inner li {
margin-left: 1rem;
}
@media screen and (max-width: 47.9375rem) {
.intro-inner .tab-logo {
bottom: 0.5rem;
}
} .intro {
padding-top: 10rem;
}
.dhr-parallax {
position: absolute;
background-size: contain;
background-repeat: no-repeat;
width: 18.75rem; 
height: 18.75rem;
z-index: 1;
}
.horizontal-scroll-wrapper {
position: relative;
width: 100vw;
padding-bottom: 3rem;
overflow: hidden;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
}
.horizontal-scroll-track {
display: flex;
height: 100%;
will-change: transform;
position: sticky;
top: 0;
gap: 0.75rem;
width: max-content;
}
.scroll-image-item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.scroll-image-item img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
}
.horizontal-scroll-track::-webkit-scrollbar {
display: none;
}
.horizontal-scroll-track {
scrollbar-width: none;
-ms-overflow-style: none;
height: 20.1875rem;
margin-left: -5rem;
}
body, html {
scroll-behavior: smooth;
}
@media (max-width: 47.9375rem) {
.intro {
padding-top: 7rem;
}
.horizontal-scroll-track {
height: 14.1875rem;
}
.scroll-image-item img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
}
.horizontal-scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
scrollbar-width: none;
} .horizontal-scroll-wrapper::-webkit-scrollbar {
display: none;
} .newsletter-discount h2 {
color: var(--color-green);
padding-bottom: 2rem;
}
@media screen and (max-width: 47.9375rem) {
.newsletter-discount h2 {
padding-bottom: 1rem;
padding-top: 1rem;
}
} .stat-icon img {
width: 2.8125rem;
height: 2.8125rem;
padding-right: 1.5rem;
}
.stat-text h3 {
margin-block-start: 0rem;
} .tabs ul {
list-style-type: none;
}
.tab-item {
border-top: .125rem solid var(--color-cream);
cursor: pointer;
}
.button-0.primary {
color: var(--color-mint) !important;
}
.button-2.primary {
color: var(--color-brown) !important;
}
.button-3.primary {
color: var(--color-green) !important;
}
.button-4.primary {
color: var(--color-pink) !important;
}
.background-tabs::before {
background-image: url(//www.downhomeranch.org/wp-content/themes/down-home-ranch/assets/images/backgrounds/tabs-background.png);
}
.tab-logo {
position:absolute;
bottom:-3.5rem;
left:-0.5rem;
}
.tab-stars {
position:absolute;
top:-3.5rem; 
right:-0.5rem;
}
.tabs .tab-logo {
bottom: -7rem;
left:-5rem !important;
}
.tabs .tab-stars {
top: -1rem;
right:-5rem !important;
}
@media screen and (max-width: 80rem) {
.tabs .tab-logo {
left:-3rem !important;
}
.tabs .tab-stars {
right:-3rem !important;
}
}
.tab-logo,
.tab-stars {
position: absolute;
will-change: transform;
transition: transform 0.1s linear;
}
.tabs {
position: relative;
}
.tabs-background-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
z-index: -1;
}
.tabs-background-left,
.tabs-background-right {
flex: 1;
transition: background-color 0.3s ease;
}
.tabs-background-left {
background-color: var(--color-red);
}
.tabs-background-right {
background-color: var(--color-mint);
}
.tab-left,
.tab-right {
position: relative;
z-index: 1;
}
.tabs-list {
list-style: none;
margin: 0;
padding: 0;
}
.tab-item {
border-top: 2px solid var(--color-red);
cursor: pointer;
transition: border-color 0.3s ease;
}
.tab-item.active {
border-top-color: var(--color-brown);
}
.tabs-main h2 {
font-size: 2.5rem;
}
@media screen and (max-width: 47.9375rem) {
.tabs:not(.tabs-vertical) {
position: static;
padding-top: 0;
}
.tabs .tab-image-container svg {
width: 7.51875rem !important;
height: 7.51875rem !important;
}
.tabs-background-container {
position: static;
flex-direction: column;
}
.tabs-background-left,
.tabs-background-right {
flex: none;
width: 100%;
position: relative;
}
.tab-left,
.tab-right {
position: static;
}
.tab-image-container {
padding-left: 1rem;
padding-right: 1rem;
}
.tabs .tab-logo {
left: 0rem !important;
bottom: -3rem;
}
.tabs .tab-stars {
right: 0rem !important;
top: 1rem;
}
.tabs .tab-image img {
height: 18rem;
object-fit: cover;
border-radius: var(--radius-3xl);
}
} .tabs-horizontal h2 {
color: var(--color-blue);
}
.tabs-horizontal .bubble-text h2 {
color: var(--color-red);
}
.tabs-horizontal .bubble img {
max-width: 21.5625rem;;
}
.tabs-horizontal .price h2 {
color: var(--color-brown);
}
.tabs-horizontal .tab-border {
border: solid .25rem var(--color-blue);
}
.tabs-horizontal .camps-tab-item.active {
background-color: var(--color-blue);
border-color: var(--color-blue);
}
.tabs-horizontal .camps-tab-item img {
width: 2.13494rem;
} .tabs-vertical.background-blue .tab-border,  .tabs-vertical.background-blue .tab-border .tab-item{
color: var(--color-yellow);
border-color: var(--color-yellow);
}
.tabs-vertical.background-blue .active, .tabs-vertical.background-blue .active a {
color: var(--color-cream) !important;
border-color: var(--color-cream) !important;
}
.tabs-vertical.background-brown .tab-border,  .tabs-vertical.background-brown .tab-border .tab-item{
color: var(--color-pink);
border-color: var(--color-pink);
}
.tabs-vertical.background-brown .active {
color: var(--color-cream) !important;
border-color: var(--color-cream) !important;
}
.tabs-vertical.background-green .tab-border,  .tabs-vertical.background-green .tab-border .tab-item{
color: var(--color-yellow);
border-color: var(--color-yellow);
}
.tabs-vertical.background-green .active {
color: var(--color-cream) !important;
border-color: var(--color-cream) !important;
}
.tabs-vertical.background-cream .tab-border,  .tabs-vertical.background-cream .tab-border .tab-item{
color: var(--color-green);
border-color: var(--color-green);
}
.tabs-vertical.background-cream .active {
color: var(--color-brown) !important;
border-color: var(--color-brown) !important;
}
.tabs-vertical.background-cream .active .button {
background-color: var(--color-brown) !important;
color: var(--color-cream) !important;
border-color: var(--color-cream) !important;
}
.tabs-vertical .tab-text ul {
list-style: initial;
}
.tabs-vertical .tab-title img {
width: 3rem;
padding-top: .5rem;
}
.tabs-vertical .tab-image img {
max-height: 37.5rem;
border-radius: 1.5rem;
object-fit: cover;
}
.tabs-vertical .tab-right {
overflow-y: auto;
scrollbar-width: none; -ms-overflow-style: none; } .tabs .tab-right::-webkit-scrollbar,
.tabs .tab-right .tabs-list::-webkit-scrollbar {
display: none;
} .tabs .tabs-list {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-right: 10px;
margin-block-start: 0;
}
@media screen and (max-width: 47.9375rem) {
.tabs-vertical .tab-image img {
height: 13rem;
object-position: center 13%;
}
} .team-image img {
border-radius: var(--radius-3xl);
object-fit: cover;
} .team-craft-modal h5 {
color: var(--color-pink) !important;
}
.team-craft-modal p {
color: var(--color-cream) !important;
}
.team-craft-modal#gallery-modal .modal-swiper {
color: var(--color-pink) !important;
}
.team-close::before, .team-close::after {
background-color: var(--color-pink) !important;
}
.craft-info svg {
margin-top: .1rem;
}
@media screen and (max-width: 47.9375rem) {
.team-craft .swiper-slide img {
height: 18rem;
object-fit: cover;
border-radius: 10px;
}
}
@media screen and (max-width: 47.9375rem) {
.team-craft-modal .gallery-modal-content {
max-height: 90vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.team-craft-modal .gallery-container {
padding-top: 2rem;
max-height: 90vh;
overflow-y: auto;
}
.team-craft-modal .swiper-slide > div:last-child {
overflow-y: auto;
max-height: calc(90vh - 100px);
}
} .pos-top-left {
top: auto !important;
bottom: 140% !important;
right: auto !important;
}
.pos-top-right {
top: auto !important;
bottom: 140% !important;
left: auto !important;
}
.pos-bottom-left {
top: 150% !important;
right: auto !important;
}
.pos-bottom-right {
top: 150% !important;
left: auto !important;
}
.pos-center {
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: auto !important;
}
.parallax-1 {
width: 13.56rem !important;
height: 14.81rem !important;
z-index: 2;
}
.parallax-2 {
width: 30.13rem !important;
height: 29.56rem !important;
z-index: 1;
}
.parallax-3 {
width: 20.31rem !important;
height: 14.25rem !important;
z-index: 2;
}
@media screen and (max-width: 47.9375rem) {
.pos-top-left {
bottom: 50% !important;
}
.pos-top-right {
bottom: 50% !important;
}
.pos-bottom-left {
top: 60% !important;
}
.pos-bottom-right {
top: 60% !important;
}
.parallax-1 {
width: 13rem !important;
height: 13rem !important;
}
.parallax-2 {
width: 100% !important;
top:25% !important;
}
.parallax-3 {
width: 13rem !important;
height: 13rem !important;
}
} @media screen and (max-width: 47.9375rem) {
.text-form {
padding-top: 4rem;
}
} .video-embed {
position: relative;
width: 100%;
padding-bottom: 56.25%; height: 0;
}
.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .background-cream .swiper-button-next, .background-cream .swiper-button-prev {
color: var(--color-blue) !important;
}
.background-blue .swiper-button-next, .background-blue .swiper-button-prev {
color: var(--color-yellow) !important;
} .footer-menu ul, .socials-menu ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
@media screen and (max-width: 47.9375rem) {
.footer-menu ul {
align-items: center;
justify-content: center;
}
}
.footer-menu li, .socials-menu li {
width: calc(33% - .75rem);
margin-bottom: .75rem;
}
.socials-menu li {
width: calc(100% - .75rem);
margin-bottom: .75rem;
}
.footer-watermark img {
opacity: .05;
margin-bottom: -7.5rem;
}
.footer-border {
border-top: solid 0.125rem var(--color-cream);
}
.hyphenate-desktop {
word-wrap: break-word;
hyphens: auto;
text-transform: lowercase;
}
@media screen and (max-width: 47.9375rem) {
.hyphenate {
word-wrap: break-word;
hyphens: auto;
text-transform: lowercase;
}
.services-accordion .accordion-panel p {
margin: 0;
}
.frame-border {
border-width: 1rem;
border-radius: 2rem;
}
.border-2 {
border-radius: 0rem;
}
.cards .card {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.order-initial{
order: initial;
}
.order-mobile-1 {
order: 1;
}
.order-mobile-2 {
order: 2;
}
.order-mobile-3 {
order: 3;
}
.order-mobile-4 {
order: 4;
}
.order-mobile-5 {
order: 5;
}
.order-mobile-6 {
order: 6;
}
.order-mobile-7 {
order: 7;
}
.order-mobile-8 {
order: 8;
}
.order-mobile-9 {
order: 9;
}
.order-mobile-10 {
order: 10;
}
.mobile-height-100 {
height: 100vh;
}
.footer-menu li, .socials-menu li {
width: calc(50%);
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
.footer-menu ul, .footer-info {
text-align: center;
}
.footer-wrap a {
width: 100%;
}
#menu-footer-mobile-menu {
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media screen and (max-width: 37.5rem) {
.services-accordion #wrapper {
display: flex;
flex-flow: column wrap;
height: auto;
min-height: 100vh;
}
.services-accordion .accordion-panel {
min-height: 25rem;
background-position: center top;
}
}
.dhr-video { aspect-ratio: 16 / 9; }
.dhr-video-play { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; color: #fff; }
.dhr-video-play img { width: 100%; height: 100%; object-fit: cover; }
.dhr-video iframe { display: block; width: 100%; height: 100%; border: 0; }.accordion .faq-drawer__content-wrapper {
line-height: 1.35;
max-height: 0rem;
overflow: hidden;
transition: 0.25s ease-in-out;
}
.accordion .faq-drawer {
margin-bottom: 1rem;
border-radius: .5rem;
position: relative;
}
.accordion .faq-drawer__title {
display: block;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
margin-bottom: 0;
transition: all 0.2s ease-out;
cursor: pointer;
font-size: 1.5rem;
border-top: .125rem solid var(--color-red);
}
.faq-full .faq-drawer__title {
border-top: .125rem solid var(--color-blue);
}
.accordion .faq-drawer__title::after {
border-style: solid;
border-width: .125rem .125rem 0 0;
content: " ";
display: inline-block;
height: 1.5rem;
position: absolute;
right: 0;
left: auto;
top: 2rem;
transform: rotate(135deg);
transition: 0.3s ease-in-out;
vertical-align: top;
width: 1.5rem;
}
span.label-text {
width: 90%;
display: block;
}
@media (max-width: 47.9375rem) {
.accordion .faq-drawer__title {
font-size: var(--text-xl);
}
}
.accordion .faq-drawer__trigger:checked + .faq-drawer__title + .faq-drawer__content-wrapper {
max-height: 100vh;
}
.accordion .faq-drawer__trigger:checked + .faq-drawer__title::after {
transform: rotate(-45deg);
transition: 0.2s ease-in-out;
}
.background-yellow .faq-drawer__title {
border-top: .125rem solid var(--color-blue);
color: var(--color-blue);
}.js-scroll {
opacity: 0;
transition: opacity 500ms;
}
.logged-in .js-scroll, .paged .js-scroll, .page-template-proposal .js-scroll, .single-crb_proposal .js-scroll {
opacity: 1!important;
}
.js-scroll.scrolled {
opacity: 1;
}
.scrolled.fade-in, .fade-in {
animation: fade-in 500ms ease-in-out both;
}
.scrolled.fade-in-top, .fade-in-top {
animation: fade-in-top 500ms ease-in-out both;
}
.scrolled.fade-in-bottom, .fade-in-bottom {
animation: fade-in-bottom 500ms ease-in-out both;
}
.scrolled.slide-in-left, .slide-in-left {
animation: slide-in-left 500ms ease-in-out both;
}
.scrolled.slide-in-right, .slide-in-right {
animation: slide-in-right 500ms ease-in-out both;
} @keyframes slide-in-left {
0% {
-webkit-transform: translateX(-6.25rem);
transform: translateX(-6.25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(6.25rem);
transform: translateX(6.25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes fade-in-top {
0% {
-webkit-transform: translateY(-3.125rem);
transform: translateY(-3.125rem);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(3.125rem);
transform: translateY(3.125rem);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} @keyframes infinite-scroll {
from {transform: translateX(0)}
to {transform: translateX(-50%)}
}
.infinite-scroll-wrapper {
width: 100%;
overflow-x: hidden;
}
.infinite-scroll-container {
display: flex;
width: 125rem;
animation-name: infinite-scroll;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.infinite-scroll-item {
white-space: nowrap;
} @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);
}
div.sticky-article {
flex-basis: 0;
flex-grow: 999;
}
div.sticky-aside {
--offset: var(--space);
flex-grow: 1;
align-self: start;
position: sticky;
top: var(--offset);
}
} :root {
--wipe-in: inset(0 0 0 0);
--wipe-bottom: inset(100% 0 0 0);
--wipe-left: inset(0 100% 0 0);
--wipe-top: inset(0 0 100% 0);
--wipe-right: inset(0 0 0 100%);
}
[transition-style] {
animation-delay: var(--transition__delay, 0);
animation-duration: var(--transition__duration, 2.5s);
animation-timing-function: var(--transition__easing, cubic-bezier(.25, 1, .3, 1));
animation-fill-mode: both;
will-change: clip-path
}
@media (prefers-reduced-motion: reduce), print {
[transition-style] {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
animation-iteration-count:1 !important
}
}
@keyframes wipe-in-top {
0% {
-webkit-clip-path: var(--wipe-top);
clip-path:var(--wipe-top)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:down"], [transition-style="in:wipe:top"] {
animation-name:wipe-in-top
}
@keyframes wipe-in-right {
0% {
-webkit-clip-path: var(--wipe-left);
clip-path:var(--wipe-left)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:right"] {
animation-name:wipe-in-right
}
@keyframes wipe-in-bottom {
0% {
-webkit-clip-path: var(--wipe-bottom);
clip-path:var(--wipe-bottom)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:bottom"], [transition-style="in:wipe:up"] {
animation-name:wipe-in-bottom
}
@keyframes wipe-in-left {
0% {
-webkit-clip-path: var(--wipe-right);
clip-path:var(--wipe-right)
}
to {
-webkit-clip-path: var(--wipe-in);
clip-path: var(--wipe-in)
}
}
[transition-style="in:wipe:left"] {
animation-name:wipe-in-left
}
.scrolled.wipe-top, .wipe-top {
animation: wipe-in-top 1000ms ease-in-out both;
}
.scrolled.wipe-bottom, .wipe-bottom {
animation: wipe-in-bottom 1000ms ease-in-out both;
}
.scrolled.wipe-right, .wipe-right {
animation: wipe-in-right 1000ms ease-in-out both;
}
.scrolled.wipe-left, .wipe-left {
animation: wipe-in-left 1000ms ease-in-out both;
} .transition-delay-200 {
animation-delay: 200ms;
}
.transition-delay-400 {
animation-delay: 400ms;
}
.transition-delay-600 {
animation-delay: 600ms;
}
.transition-delay-800 {
animation-delay: 800ms;
}
.transition-delay-1000 {
animation-delay: 1000ms;
}
.transition-delay-1200 {
animation-delay: 1200ms;
}