/*
Dynamic Responsive Image
*/
/*
Font Declarations
Using the `.web-font` and `.web-font-svg` mixins, declare webfonts using the
"bulletproof" `@font-face` syntax.
See: (http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax/)
*/
/**
* Geogrotesque
*/
@font-face {
font-family: 'Geogrotesque';
font-style: normal;
font-weight: 700;
src: url('/wp-content/themes/dallaszoo/resources/fonts/geogrotesque/3A167B_0_0.eot');
/* IE9 Compat Modes */
src: url('/wp-content/themes/dallaszoo/resources/fonts/geogrotesque/3A167B_0_0.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/wp-content/themes/dallaszoo/resources/fonts/geogrotesque/3A167B_0_0.woff2') format('woff2'), /* Super Modern Browsers */ url('/wp-content/themes/dallaszoo/resources/fonts/geogrotesque/3A167B_0_0.woff') format('woff'), /* Modern Browsers */ url('/wp-content/themes/dallaszoo/resources/fonts/geogrotesque/3A167B_0_0.ttf') format('truetype');
/* Safari, Android, iOS */
}
/**
* UniversLtPro 55 Roman
*/
@font-face {
font-family: 'UniversLTPro-55Roman';
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_1_0.eot');
/* IE9 Compat Modes */
src: url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_1_0.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_1_0.woff2') format('woff2'), /* Super Modern Browsers */ url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_1_0.woff') format('woff'), /* Modern Browsers */ url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_1_0.ttf') format('truetype');
/* Safari, Android, iOS */
}
/**
* UniversLtPro 75 Black
*/
@font-face {
font-family: 'UniversLTPro-75Black';
font-style: normal;
font-weight: 700;
src: url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_2_0.eot');
/* IE9 Compat Modes */
src: url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_2_0.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_2_0.woff2') format('woff2'), /* Super Modern Browsers */ url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_2_0.woff') format('woff'), /* Modern Browsers */ url('/wp-content/themes/dallaszoo/resources/fonts/UniversLTPro/3A167B_2_0.ttf') format('truetype');
/* Safari, Android, iOS */
}
/*
Font Classes
Each font family and weight used in the site is given its own LEGO-block class
to enable quick use and modularity.
*/
.styles__geogrotesque,
h1,
h2,
h3,
h4,
h5,
h6,
.styles__primary-heading,
.button__base,
[class*="button__"],
.button__primary,
.button__secondary {
font-family: "Geogrotesque", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
.styles__univers-roman,
body,
.styles__body-text {
font-family: "UniversLTPro-55Roman", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 400;
}
.styles__univers-black,
.elementor-text-editor a,
.elementor-tab-content a,
.links__link,
.lists__horizontal--pgs a[href],
a:not([class*="button__"]) {
font-family: "UniversLTPro-75Black", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
/*
Heading Styles
In Motif, typography is broken into pieces that separate skin from structure.
In this case, that means the font sizing (structure) is separate from the
styling (skin) -- which includes font family, color, etc.
Heading styles are some of the type skins, and we start out with
`.primary-heading` (which is also the `h`-tag default) and
`.secondary-heading`. Add as necessary.
````primary-heading
Primary Heading
````
*/
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 2.5rem;
}
h1,
.styles__primary-heading {
letter-spacing: 0.04761905em;
color: #0D587C;
text-transform: uppercase;
}
@media all and (min-width: 48em) {
h1,
.styles__primary-heading {
font-size: 88px;
font-size: 5.5rem;
line-height: 1;
letter-spacing: 0.02272727em;
}
}
h2,
.styles__secondary-heading {
letter-spacing: 0.03333333em;
color: #D27600;
text-transform: uppercase;
}
@media all and (min-width: 48em) {
h2,
.styles__secondary-heading {
font-size: 58px;
font-size: 3.625rem;
line-height: 0.89655172;
letter-spacing: 0.01724138em;
}
}
h3,
.styles__tertiary-heading {
letter-spacing: 0.03846154em;
text-transform: uppercase;
color: #83933E;
}
@media all and (min-width: 48em) {
h3,
.styles__tertiary-heading {
font-size: 42px;
font-size: 2.625rem;
line-height: 1.04761905;
letter-spacing: 0.02380952em;
}
}
h4,
.styles__quaternary-heading {
letter-spacing: 0.02272727em;
color: #0D587C;
}
@media all and (min-width: 48em) {
h4,
.styles__quaternary-heading {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.13333333;
letter-spacing: 0.01666667em;
}
}
h5,
.styles__quinary-heading {
letter-spacing: 0.02777778em;
color: #221D1D;
}
h6,
.styles__senary-heading {
letter-spacing: 0.03125em;
color: #221D1D;
}
/*
Body Text
Another type style, but this mimicks the default body text of the site.
````body-text
This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised . Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.
````
*/
/*
Blockquote
A basic blockquote.
````blockquote
At last we will reveal ourselves to the the Jedi. At last we will have
our revenge.
Darth Maul
````
*/
.styles__blockquote {
padding-left: 1.125rem;
}
.styles__blockquote blockquote {
padding: 0;
}
.styles__blockquote-cite {
display: block;
}
.styles__blockquote-cite:before {
content: "\2014";
}
.styles__wavy-underline {
position: relative;
padding-bottom: 2.5rem;
margin-bottom: 2.5rem;
}
.styles__wavy-underline:after {
content: '';
background-image: url("/wp-content/themes/dallaszoo/resources/icons/wavy-line-large-orange.svg");
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 9px;
width: 136px;
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.styles__label,
.styles__label--large {
font-family: "UniversLTPro-75Black", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
letter-spacing: 0.03142857em;
color: #221D1D;
text-transform: uppercase;
}
@media all and (min-width: 48em) {
.styles__label,
.styles__label--large {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
letter-spacing: 0.0275em;
}
}
.styles__label--large {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
letter-spacing: 0.0275em;
}
@media all and (min-width: 48em) {
.styles__label--large,
.styles__label--large--large {
font-size: 26px;
font-size: 1.625rem;
line-height: 1.07692308;
letter-spacing: 0.35730769em;
}
}
/*
Typographic Scale
The building blocks for the site's type sizes. Almost exclusively, an element's
font size is assigned with one of these classes. If a new size is needed, a new
class is created here so it can be used and reused elsewhere.
The list of type sizes can grow or shrink, but be vigilant in keeping the
number of sizes to a minimum. A nice rule of thumb is that no two sizes can one
pixel in difference (forcing you to choose one over the other, giving you one
class where you previously had two).
````typographic-scale
Canon Text (38px)
Paragon Text (30px)
Primer Text (24px)
Tertia Text (18px)
Normal Text (14px)
Petite Text (12px)
````
Long Modifiers
The type sizes are given the `--long` modifier, allowing you to use
each type size with varying line heights.
I'm just a small bit of text, my `line-height`
can be tight.
I'm a long paragraph, so my `line-height`
should be longer to enhance legibility. ...
*/
.hierarchy__long-text {
line-height: 1.5;
}
/*
Inch Text
*/
.hierarchy__inch-text {
font-size: 88px;
font-size: 5.5rem;
line-height: 1;
}
/*
Meridian Text
*/
.hierarchy__meridian-text {
font-size: 58px;
font-size: 3.625rem;
line-height: 0.89655172;
}
/*
Tertia Text
*/
.hierarchy__tertia-text,
h1,
.styles__primary-heading {
font-size: 42px;
font-size: 2.625rem;
line-height: 1.04761905;
}
/*
Paragon Text
*/
.hierarchy__paragon-text,
h2,
.styles__secondary-heading {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.13333333;
}
/*
Columbian Text
*/
.hierarchy__columbian-text,
h3,
.styles__tertiary-heading {
font-size: 26px;
font-size: 1.625rem;
line-height: 1.07692308;
}
/*
Grand Text
*/
.hierarchy__grand-text,
h4,
.styles__quaternary-heading,
.button__base,
[class*="button__"],
.button__primary,
.button__secondary {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
}
/*
Primer Text
*/
.hierarchy__primer-text,
h5,
.styles__quinary-heading,
body,
.styles__body-text {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.44444444;
}
/*
Normal Text
*/
.hierarchy__normal-text,
h6,
.styles__senary-heading {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
}
/*
Petite Text
*/
.hierarchy__petite-text,
.styles__label,
.styles__label--large {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.28571429;
}
/*
Minion Text
*/
.hierarchy__minion-text {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.33333333;
}
/*
Micro Text
*/
.hierarchy__micro-text {
font-size: 10px;
font-size: 0.625rem;
line-height: 1.4;
}
/*
Interactive Elements
*/
/*
button
Default interactive button styles. This `.btn` class can be applied to ``,
``, or `Default
Primary
Danger
````
*/
button {
font-size: 100%;
margin: 0;
-webkit-appearance: button;
display: inline-block;
cursor: pointer;
line-height: normal;
}
button[disabled] {
cursor: default;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
.button__base,
[class*="button__"],
.button__primary,
.button__secondary {
letter-spacing: 0.04545455em;
width: auto;
height: auto;
margin: 0;
line-height: normal;
text-align: center;
text-decoration: none;
position: relative;
-webkit-appearance: none;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
outline: 0;
overflow: visible;
cursor: pointer;
vertical-align: middle;
display: inline-block;
background: #fff;
color: #221D1D;
padding: 8px 50px 8px 1.125rem;
border-radius: 4px;
margin-top: 1.25rem;
border: 0;
}
@media all and (min-width: 48em) {
.button__base,
[class*="button__"],
.button__primary,
.button__secondary {
font-size: 26px;
font-size: 1.625rem;
line-height: 1.07692308;
letter-spacing: 0.03846154em;
padding: 12px 50px 12px 1.125rem;
}
}
p > .button__base,
p > [class*="button__"],
p > .button__primary,
p > .button__secondary {
margin-top: 0;
}
.button__base:hover,
[class*="button__"]:hover,
.button__base:focus,
[class*="button__"]:focus,
.button__base.is-current,
[class*="button__"].is-current,
.button__primary:hover,
.button__primary:focus,
.button__primary.is-current,
.button__secondary:hover,
.button__secondary:focus,
.button__secondary.is-current {
background: #ffffff;
}
.button__base[disabled],
[class*="button__"][disabled],
.button__primary[disabled],
.button__secondary[disabled] {
background: #DFDFC7;
color: #221D1D;
padding: 8px 1.125rem;
}
.button__base[disabled]:before,
[class*="button__"][disabled]:before,
.button__base[disabled]:after,
[class*="button__"][disabled]:after,
.button__primary[disabled]:before,
.button__primary[disabled]:after,
.button__secondary[disabled]:before,
.button__secondary[disabled]:after {
display: none;
}
.button__base[disabled]:hover,
[class*="button__"][disabled]:hover,
.button__base[disabled]:focus,
[class*="button__"][disabled]:focus,
.button__primary[disabled]:hover,
.button__primary[disabled]:focus,
.button__secondary[disabled]:hover,
.button__secondary[disabled]:focus {
background: #DFDFC7;
color: #221D1D;
}
/*
Button Variations
*/
.button__primary,
.button__secondary {
z-index: 0;
overflow: hidden;
color: #fff;
background-color: #D27600;
background-image: url("/wp-content/themes/dallaszoo/resources/icons/button-side-orange.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: 100% 50%;
-webkit-transition: background-position 0.65s cubic-bezier(0.39, 0.575, 0.565, 1);
-o-transition: background-position 0.65s cubic-bezier(0.39, 0.575, 0.565, 1);
transition: background-position 0.65s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.button__primary:before,
.button__secondary:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #A65523;
z-index: -2;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-clip-path: polygon(0% 0%, calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0% 100%);
clip-path: polygon(0% 0%, calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0% 100%);
}
@media all and (min-width: 48em) {
.button__primary:before,
.button__secondary:before {
-webkit-clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%);
clip-path: polygon(0% 0%, calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%);
}
}
.button__primary:after,
.button__secondary:after {
content: '';
position: absolute;
top: 50%;
right: 20px;
width: 9px;
height: 16px;
background-image: url("/wp-content/themes/dallaszoo/resources/icons/arrow-right--white.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
z-index: -1;
-webkit-transform: matrix(1, 0, 0, 1, 0, -8);
-ms-transform: matrix(1, 0, 0, 1, 0, -8);
transform: matrix(1, 0, 0, 1, 0, -8);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media all and (min-width: 48em) {
.button__primary:after,
.button__secondary:after {
width: 11px;
height: 19px;
-webkit-transform: matrix(1, 0, 0, 1, 0, -10);
-ms-transform: matrix(1, 0, 0, 1, 0, -10);
transform: matrix(1, 0, 0, 1, 0, -10);
}
}
.button__primary:hover,
.button__primary:focus,
.button__primary.is-current,
.button__secondary:hover,
.button__secondary:focus,
.button__secondary.is-current {
background-color: #D27600;
background-image: url("/wp-content/themes/dallaszoo/resources/icons/button-side-orange.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: calc(100% + 32px) 50%;
color: #fff;
}
.button__primary:hover:before,
.button__primary:focus:before,
.button__primary.is-current:before,
.button__secondary:hover:before,
.button__secondary:focus:before,
.button__secondary.is-current:before {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.button__primary:hover:after,
.button__primary:focus:after,
.button__primary.is-current:after,
.button__secondary:hover:after,
.button__secondary:focus:after,
.button__secondary.is-current:after {
-webkit-transform: matrix(1, 0, 0, 1, 8, -8);
-ms-transform: matrix(1, 0, 0, 1, 8, -8);
transform: matrix(1, 0, 0, 1, 8, -8);
}
@media all and (min-width: 48em) {
.button__primary:hover:after,
.button__primary:focus:after,
.button__primary.is-current:after,
.button__secondary:hover:after,
.button__secondary:focus:after,
.button__secondary.is-current:after {
-webkit-transform: matrix(1, 0, 0, 1, 8, -10);
-ms-transform: matrix(1, 0, 0, 1, 8, -10);
transform: matrix(1, 0, 0, 1, 8, -10);
}
}
.button__secondary {
background-color: #07A2C6;
background-image: url("/wp-content/themes/dallaszoo/resources/icons/button-side-blue.svg");
}
.button__secondary:before {
background: #0D587C;
}
.button__secondary:hover,
.button__secondary:focus,
.button__secondary.is-current {
background-color: #07A2C6;
background-image: url("/wp-content/themes/dallaszoo/resources/icons/button-side-blue.svg");
}
.button__small {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
letter-spacing: 0.0625em;
padding: 6px 50px 6px 1.125rem;
}
@media all and (min-width: 48em) {
.button__small {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.44444444;
letter-spacing: 0.05555556em;
padding: 8px 50px 8px 1.125rem;
}
}
@media all and (min-width: 48em) {
.button__small:after {
width: 9px;
height: 16px;
-webkit-transform: matrix(1, 0, 0, 1, 0, -8);
-ms-transform: matrix(1, 0, 0, 1, 0, -8);
transform: matrix(1, 0, 0, 1, 0, -8);
}
}
.button__small:before {
-webkit-clip-path: polygon(0% 0%, calc(100% - 16px) 0%, 100% 50%, calc(100% - 16px) 100%, 0% 100%);
clip-path: polygon(0% 0%, calc(100% - 16px) 0%, 100% 50%, calc(100% - 16px) 100%, 0% 100%);
}
@media all and (min-width: 48em) {
.button__small:before {
-webkit-clip-path: polygon(0% 0%, calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0% 100%);
clip-path: polygon(0% 0%, calc(100% - 22px) 0%, 100% 50%, calc(100% - 22px) 100%, 0% 100%);
}
}
@media all and (min-width: 48em) {
.button__small:hover:after,
.button__small:focus:after,
.button__small.is-current:after {
-webkit-transform: matrix(1, 0, 0, 1, 8, -8);
-ms-transform: matrix(1, 0, 0, 1, 8, -8);
transform: matrix(1, 0, 0, 1, 8, -8);
}
}
.button__full-width {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.button__no-arrow {
padding: 8px 1.125rem;
background-image: none;
}
.button__no-arrow:after {
display: none;
}
.button__no-arrow:before {
-webkit-clip-path: none;
clip-path: none;
}
@media all and (min-width: 48em) {
.button__no-arrow:before {
-webkit-clip-path: none;
clip-path: none;
}
}
.button__no-arrow:hover,
.button__no-arrow:focus,
.button__no-arrow.is-current {
background-image: none;
}
.button__no-button {
border: 0;
background: transparent;
color: #221D1D;
font-size: initial;
padding: 0;
}
/*
Link Styles
Very basic stuff. The primary link color can be altered in the `config.less`
file. Hover, focus, and current states are accounted for.
*/
a:focus,
a:active,
a:hover {
outline: 0;
}
a {
color: #221D1D;
text-decoration: none;
}
a:hover,
a:focus,
a.is-current {
color: #83933E;
text-decoration: none;
}
.elementor-text-editor a,
.elementor-tab-content a,
.links__link,
.lists__horizontal--pgs a[href],
a:not([class*="button__"]) {
color: #221D1D;
position: relative;
display: inline-block;
vertical-align: baseline;
text-decoration: none !important;
}
.elementor-text-editor a:before,
.elementor-tab-content a:before,
.links__link:before,
.lists__horizontal--pgs a[href]:before,
a:not([class*="button__"]):before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 6px;
background-image: url("/wp-content/themes/dallaszoo/resources/icons/wavy-line-orange.svg");
background-repeat: repeat-x;
display: block;
overflow: hidden;
border-radius: 10px;
}
.elementor-text-editor a:hover,
.elementor-tab-content a:hover,
.links__link:hover,
.elementor-text-editor a:focus,
.elementor-tab-content a:focus,
.links__link:focus,
.elementor-text-editor a.is-current,
.elementor-tab-content a.is-current,
.links__link.is-current,
.lists__horizontal--pgs a[href]:hover,
.lists__horizontal--pgs a[href]:focus,
.lists__horizontal--pgs a[href].is-current,
a:not([class*="button__"]):hover,
a:not([class*="button__"]):focus,
a:not([class*="button__"]).is-current {
color: #83933E;
}
.elementor-text-editor a:hover:before,
.elementor-tab-content a:hover:before,
.links__link:hover:before,
.elementor-text-editor a:focus:before,
.elementor-tab-content a:focus:before,
.links__link:focus:before,
.elementor-text-editor a.is-current:before,
.elementor-tab-content a.is-current:before,
.links__link.is-current:before,
.lists__horizontal--pgs a[href]:hover:before,
.lists__horizontal--pgs a[href]:focus:before,
.lists__horizontal--pgs a[href].is-current:before,
a:not([class*="button__"]):hover:before,
a:not([class*="button__"]):focus:before,
a:not([class*="button__"]).is-current:before {
-webkit-animation: link__background 0.5s linear infinite;
animation: link__background 0.5s linear infinite;
}
@-webkit-keyframes link__background {
0% {
background-position: 0 50%;
}
100% {
background-position: 15px 50%;
}
}
@keyframes link__background {
0% {
background-position: 0 50%;
}
100% {
background-position: 15px 50%;
}
}
/*
Unlink
Basic class to remove some link styling.
@TODO: Put in `presentational.less` file?
*/
.links__unlink {
text-decoration: none;
}
.links__unlink:before {
content: none !important;
}
/*
Skip-To Link
*/
.links__skip-to {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
.links__skip-to:not(:focus) {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.links__skip-to:not(:focus).focusable:active,
.links__skip-to:not(:focus).focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .links__skip-to:not(:focus) a,
body:hover .links__skip-to:not(:focus) input,
body:hover .links__skip-to:not(:focus) button {
display: none;
}
/*
Wrapper
This is the site-wide containing class. Put it around anything you want to be
contained in the "site width". By default, caps off at `1150px`.
*/
.wrappers__wrapper {
width: 92%;
margin-left: auto;
margin-right: auto;
}
@media all and (min-width: 62em) {
.wrappers__wrapper {
max-width: 1150px;
}
}
.wrappers__break-out {
width: calc(100% + (4.34782608695652% * 2));
position: relative;
left: -4.34782608695652%;
}
@media all and (min-width: 78.125em) {
.wrappers__break-out {
width: calc(100% + ((100vw - 1150px)));
left: calc(((100vw - 1150px)) / -2);
}
}
/*
Spacing Helpers
Spacing helpers are quick but powerful classes that add margin or padding to
any given element. These classes are `!important`, so they override all other
styles.
* `p`, `m` = padding, margin
* `a`, `t`, `r`, `b`, `l`, `h`, `v` = all, top, right, bottom, left, horizontal, vertical
* `s`, `m`, `l`, `x`, `n` = small (~`5px`), medium (~`10px`), large (~`20px`), x-large (~`40px`) none (`0`)
For example: `.spacing__pam` means "padding, all, medium".
**Note:** These are all based on the current element's font size and the
project's vertical rhythm (even on the sides, to provide uniform spacing).
As such, they require `vars.less`.
*/
.spacing__ptn,
.spacing__pvn,
.spacing__pan {
padding-top: 0 !important;
}
.spacing__pts,
.spacing__pvs,
.spacing__pas {
padding-top: 0.3125rem !important;
}
.spacing__ptm,
.spacing__pvm,
.spacing__pam {
padding-top: 0.625rem !important;
}
.spacing__ptl,
.spacing__pvl,
.spacing__pal {
padding-top: 1.25rem !important;
}
.spacing__ptx,
.spacing__pvx,
.spacing__pax {
padding-top: 2.5rem !important;
}
.spacing__prn,
.spacing__phn,
.spacing__pan {
padding-right: 0 !important;
}
.spacing__prs,
.spacing__phs,
.spacing__pas {
padding-right: 0.3125rem !important;
}
.spacing__prm,
.spacing__phm,
.spacing__pam {
padding-right: 0.625rem !important;
}
.spacing__prl,
.spacing__phl,
.spacing__pal {
padding-right: 1.25rem !important;
}
.spacing__prx,
.spacing__phx,
.spacing__pax {
padding-right: 2.5rem !important;
}
.spacing__pbn,
.spacing__pvn,
.spacing__pan {
padding-bottom: 0 !important;
}
.spacing__pbs,
.spacing__pvs,
.spacing__pas {
padding-bottom: 0.3125rem !important;
}
.spacing__pbm,
.spacing__pvm,
.spacing__pam {
padding-bottom: 0.625rem !important;
}
.spacing__pbl,
.spacing__pvl,
.spacing__pal {
padding-bottom: 1.25rem !important;
}
.spacing__pbx,
.spacing__pvx,
.spacing__pax {
padding-bottom: 2.5rem !important;
}
.spacing__pln,
.spacing__phn,
.spacing__pan {
padding-left: 0 !important;
}
.spacing__pls,
.spacing__phs,
.spacing__pas {
padding-left: 0.3125rem !important;
}
.spacing__plm,
.spacing__phm,
.spacing__pam {
padding-left: 0.625rem !important;
}
.spacing__pll,
.spacing__phl,
.spacing__pal {
padding-left: 1.25rem !important;
}
.spacing__plx,
.spacing__phx,
.spacing__pax {
padding-left: 2.5rem !important;
}
.spacing__mtn,
.spacing__mvn,
.spacing__man {
margin-top: 0 !important;
}
.spacing__mts,
.spacing__mvs,
.spacing__mas {
margin-top: 0.3125rem !important;
}
.spacing__mtm,
.spacing__mvm,
.spacing__mam {
margin-top: 0.625rem !important;
}
.spacing__mtl,
.spacing__mvl,
.spacing__mal {
margin-top: 1.25rem !important;
}
.spacing__mtx,
.spacing__mvx,
.spacing__max {
margin-top: 2.5rem !important;
}
.spacing__mrn,
.spacing__mhn,
.spacing__man {
margin-right: 0 !important;
}
.spacing__mrs,
.spacing__mhs,
.spacing__mas {
margin-right: 0.3125rem !important;
}
.spacing__mrm,
.spacing__mhm,
.spacing__mam {
margin-right: 0.625rem !important;
}
.spacing__mrl,
.spacing__mhl,
.spacing__mal {
margin-right: 1.25rem !important;
}
.spacing__mrx,
.spacing__mhx,
.spacing__max {
margin-right: 2.5rem !important;
}
.spacing__mbn,
.spacing__mvn,
.spacing__man {
margin-bottom: 0 !important;
}
.spacing__mbs,
.spacing__mvs,
.spacing__mas {
margin-bottom: 0.3125rem !important;
}
.spacing__mbm,
.spacing__mvm,
.spacing__mam {
margin-bottom: 0.625rem !important;
}
.spacing__mbl,
.spacing__mvl,
.spacing__mal {
margin-bottom: 1.25rem !important;
}
.spacing__mbx,
.spacing__mvx,
.spacing__max {
margin-bottom: 2.5rem !important;
}
.spacing__mln,
.spacing__mhn,
.spacing__man {
margin-left: 0 !important;
}
.spacing__mls,
.spacing__mhs,
.spacing__mas {
margin-left: 0.3125rem !important;
}
.spacing__mlm,
.spacing__mhm,
.spacing__mam {
margin-left: 0.625rem !important;
}
.spacing__mll,
.spacing__mhl,
.spacing__mal {
margin-left: 1.25rem !important;
}
.spacing__mlx,
.spacing__mhx,
.spacing__max {
margin-left: 2.5rem !important;
}
.spacing__block {
padding-top: 5rem;
position: relative;
}
.spacing__block:first-child {
padding-top: 0;
}
.spacing__block:last-child {
padding-bottom: 5rem;
}
.wp-block-column .spacing__block:last-child {
padding-bottom: 0;
}
.spacing__block--typicalHeader + .spacing__block--infoBar {
padding-top: 0;
}
.spacing__block--featuredHeader + .spacing__block--quickLinks {
padding-top: 0;
}
.spacing__block--cardGroup + .spacing__block--callToAction {
padding-top: 0;
}
.spacing__block--featuredHeader + .spacing__block--relatedContent,
.spacing__block--featuredHeader + .spacing__block--categoryCardGroup {
padding-top: 0;
}
.spacing__block--typicalHeader + .spacing__block--relatedContent,
.spacing__block--typicalHeader + .spacing__block--categoryCardGroup {
padding-top: 0;
}
.spacing__block--wysiwyg + .spacing__block--categoryCardGroup,
h4 + .spacing__block--categoryCardGroup {
padding-top: 0;
}
.spacing__block--relatedContent:last-child,
.spacing__block--cardGroup:last-child,
.spacing__block--categoryCardGroup:last-child,
.spacing__block--callToAction:last-child {
padding-bottom: 0;
}
/*
Text Align
Simple classes to adjust your text alignment. They can be added to individual elements or on wrapping elements (an outer `div`, perhaps) to adjust the alignment of all the child elements.
*/
.presentational__align-left {
text-align: left;
}
.presentational__align-center {
text-align: center;
}
.presentational__align-right {
text-align: right;
}
.presentational__align-sub {
vertical-align: sub;
}
.presentational__align-middle {
vertical-align: middle;
}
.presentational__align-top {
vertical-align: top;
}
/*
Floats
Next, we have classes for floating elements.
*/
.presentational__float-left {
float: left;
}
.presentational__float-center {
margin-left: auto;
margin-right: auto;
}
.presentational__float-right {
float: right;
}
.presentational__float-none {
float: none;
}
.presentational__clear {
clear: both;
}
/*
"New Line"
Turns an `inline` or `inline-block` element into a `block` one.
*/
.presentational__new-line {
display: block;
}
.presentational__group,
.lists__breadcrumb {
/* Mixins */
}
.presentational__group:before,
.presentational__group:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.presentational__group:after {
clear: both;
}
/*
"Is Hidden"
Visually hides content in a way that leaves it accessible to screen readers.
Like more magic, makes the visible invisible.
*/
.presentational__is-hidden {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.presentational__is-hidden.focusable:active,
.presentational__is-hidden.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden a,
body:hover .presentational__is-hidden input,
body:hover .presentational__is-hidden button {
display: none;
}
@media all and (max-width: 47.9375em) {
.presentational__is-hidden-small {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.presentational__is-hidden-small.focusable:active,
.presentational__is-hidden-small.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-small a,
body:hover .presentational__is-hidden-small input,
body:hover .presentational__is-hidden-small button {
display: none;
}
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.presentational__is-hidden-medium {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.presentational__is-hidden-medium.focusable:active,
.presentational__is-hidden-medium.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-medium a,
body:hover .presentational__is-hidden-medium input,
body:hover .presentational__is-hidden-medium button {
display: none;
}
}
@media all and (min-width: 62em) {
.presentational__is-hidden-large {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.presentational__is-hidden-large.focusable:active,
.presentational__is-hidden-large.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-large a,
body:hover .presentational__is-hidden-large input,
body:hover .presentational__is-hidden-large button {
display: none;
}
}
.presentational__display-none {
display: none;
}
/*
"Isn't Hidden"
Undoes `.is-hidden`.
*/
.presentational__isnt-hidden {
/* Mixins */
width: auto;
height: auto;
margin: 0;
position: relative;
clip: auto;
}
body:hover .presentational__isnt-hidden a,
body:hover .presentational__isnt-hidden input,
body:hover .presentational__isnt-hidden button {
display: inline-block;
}
.lte7 body:hover .presentational__isnt-hidden a,
.lte7 body:hover .presentational__isnt-hidden input,
.lte7 body:hover .presentational__isnt-hidden button {
display: inline;
zoom: 1;
}
/*
"Relative Container"
Exactly what it sounds like.
*/
.presentational__relative-container {
position: relative;
}
/*
"No Scroll"
Paired with "motif.utitlies.js" to make the page non-scrollable
*/
html.presentational__no-scroll,
body.presentational__no-scroll {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
}
/*
Responsive Grid
The default responsive grid in Motif is built with a few rules in mind:
1. Each row of columns must be wrapped in a row element
2. There's no need to specify if a column is first or last
With that in mind, there is a basic syntax to learn for what classes to use.
Our breakpoints are classified as:
- Base
- Small
- Medium
- Large
- Extra Large
Our default responsive grid system only uses 3 grids to cover all of our bases:
- `grid, small` covers Base and Small viewports, but cuts off at Medium
- `grid, medium` covers only Medium
- `grid, large` starts at Large and covers Extra Large as well (there is no max
cutoff value for `grid, large`)
Understanding that, the syntax should be easy to understand. In these examples,
we will talk about `grid, small`:
- **Rows**: `.grid__sm-row` (Grid, Small, Row)
- **Columns**: `.grid__sm` (Grid, Column, Small)
- **Column Width**: `.grid__sm-half` (Grid, Small, Half-Width)
However, to be slightly more succinct, you can use the condensed column syntax:
- **Columns (Condensed)**: `.grid__sm-half` (Grid, Column, Small, Half-Width)
In brief, the way the grid works is that `.grid__sm` floats the element to the left
(by default), and adds padding to both the left and the right. `-half` gives
it a width of `50%`. The combined padding of the two columns bumped up against
each other form the full "gutter". The `.grid__sm-row` then clears the floats and has
a *negative* margin on both the left and the right that pops the columns out to
the sides the exact width of their paddings, meaning the column content lines
up with the site boundaries on the left and right without the need to specify
"first" or "last" column classes.
To use this responsively, then, you just add the classes by breakpoint:
By default, the column breakdown of each grid breakpoint:
- `grid, small`: 4 columns
- `grid, medium`: 9 columns
- `grid, large`: 12 columns
For the larger grids, the classes follow the numbers closely...
- `.grid__lg-10of12
- `.grid__med-4of9`
...in just about every combination (based on their total column number), but
all of the grids also have a few "fuzzy" shortcuts as well:
- `half`
- `third`
- `quarter`
- `three-quarters`
- `two-thirds`
*/
.grid__halves,
.grid__thirds,
.grid__quarters {
margin-left: -0.75rem;
margin-right: -0.75rem;
/* Pretty */
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__halves:before,
.grid__thirds:before,
.grid__quarters:before,
.grid__halves:after,
.grid__thirds:after,
.grid__quarters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.grid__halves:after,
.grid__thirds:after,
.grid__quarters:after {
clear: both;
}
ul.grid__halves,
ul.grid__thirds,
ul.grid__quarters {
padding-left: 0;
list-style: none outside none;
}
.grid__halves > *,
.grid__thirds > *,
.grid__quarters > * {
display: inline;
float: left;
padding-left: 0.75rem;
padding-right: 0.75rem;
/* Display & Box Model */
display: inline-block;
/* Positioning */
float: none;
/* Pretty */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.grid__halves > * {
width: 50%;
}
.grid__thirds > * {
width: 33.33333%;
}
.grid__quarters > * {
width: 25%;
}
.opera-only :-o-prefocus,
.grid__thirds {
word-spacing: -0.43em;
}
/**
* Mobile Grid
*/
@media all and (max-width: 47.9375em) {
[class*="grid__sm-row"],
.grid__sm-quarters,
.grid__sm-thirds,
.grid__sm-halves {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
[class*="grid__sm-row"]:before,
[class*="grid__sm-row"]:after,
.grid__sm-quarters:before,
.grid__sm-quarters:after,
.grid__sm-thirds:before,
.grid__sm-thirds:after,
.grid__sm-halves:before,
.grid__sm-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__sm-row"]:after,
.grid__sm-quarters:after,
.grid__sm-thirds:after,
.grid__sm-halves:after {
clear: both;
}
ul[class*="grid__sm-row"],
ul.grid__sm-quarters,
ul.grid__sm-thirds,
ul.grid__sm-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__sm-row--ltr > [class*="grid__sm"] {
float: left;
}
[class*="grid__sm"]:not([class*="grid__sm-row"]) {
display: inline;
float: left;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.grid__sm-row--rtl > [class*="grid__sm"] {
float: right;
}
.grid__sm-quarter,
.grid__sm-quarters > * {
width: 25%;
}
.grid__sm-third,
.grid__sm-thirds > * {
width: 33.33333%;
}
.grid__sm-half,
.grid__sm-halves > * {
width: 50%;
}
.grid__sm-two-thirds {
width: 66.66667%;
}
.grid__sm-three-quarters {
width: 75%;
}
.grid__sm-full {
width: 100%;
}
.grid__sm-row--flex,
.grid__sm-quarters,
.grid__sm-thirds,
.grid__sm-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__sm-row--flex > [class*="grid__sm"],
.grid__sm-quarters > *,
.grid__sm-thirds > *,
.grid__sm-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__sm-row--flex,
.grid__sm-quarters,
.grid__sm-thirds,
.grid__sm-halves {
word-spacing: -0.43em;
}
}
/**
* Tablet Grid
*/
@media all and (min-width: 48em) and (max-width: 61.9375em) {
[class*="grid__med-row"],
.grid__med-quarters,
.grid__med-thirds,
.grid__med-halves {
margin-left: -1rem;
margin-right: -1rem;
}
[class*="grid__med-row"]:before,
[class*="grid__med-row"]:after,
.grid__med-quarters:before,
.grid__med-quarters:after,
.grid__med-thirds:before,
.grid__med-thirds:after,
.grid__med-halves:before,
.grid__med-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__med-row"]:after,
.grid__med-quarters:after,
.grid__med-thirds:after,
.grid__med-halves:after {
clear: both;
}
ul[class*="grid__med-row"],
ul.grid__med-quarters,
ul.grid__med-thirds,
ul.grid__med-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__med-row--ltr > [class*="grid__med"] {
float: left;
}
[class*="grid__med"]:not([class*="grid__med-row"]) {
display: inline;
float: left;
padding-left: 1rem;
padding-right: 1rem;
}
.grid__med-row--rtl > [class*="grid__med"] {
float: right;
}
.grid__med-quarter,
[class*="grid__med-2of8"],
.grid__med-quarters > * {
width: 25%;
}
.grid__med-third,
[class*="grid__med-3of9"],
[class*="grid__med-2of6"],
.grid__med-thirds > * {
width: 33.33333%;
}
.grid__med-half,
[class*="grid__med-4of8"],
[class*="grid__med-3of6"],
.grid__med-halves > * {
width: 50%;
}
.grid__med-two-thirds,
[class*="grid__med-6of9"],
[class*="grid__med-4of6"] {
width: 66.66667%;
}
.grid__med-three-quarters,
[class*="grid__med-6of8"] {
width: 75%;
}
.grid__med-full {
width: 100%;
}
[class*="grid__med-8of9"] {
width: 88.88889%;
}
[class*="grid__med-7of9"] {
width: 77.77778%;
}
[class*="grid__med-5of9"] {
width: 55.55556%;
}
[class*="grid__med-4of9"] {
width: 44.44444%;
}
[class*="grid__med-2of9"] {
width: 22.22222%;
}
[class*="grid__med-1of9"] {
width: 11.11111%;
}
[class*="grid__med-7of8"] {
width: 87.5%;
}
[class*="grid__med-5of8"] {
width: 62.5%;
}
[class*="grid__med-3of8"] {
width: 37.5%;
}
[class*="grid__med-1of8"] {
width: 12.5%;
}
[class*="grid__med-6of7"] {
width: 85.71429%;
}
[class*="grid__med-5of7"] {
width: 71.42857%;
}
[class*="grid__med-4of7"] {
width: 57.14286%;
}
[class*="grid__med-3of7"] {
width: 42.85714%;
}
[class*="grid__med-2of7"] {
width: 28.57143%;
}
[class*="grid__med-1of7"] {
width: 14.28571%;
}
[class*="grid__med-5of6"] {
width: 83.33333%;
}
[class*="grid__med-1of6"] {
width: 16.66667%;
}
[class*="grid__med-4of5"] {
width: 80%;
}
[class*="grid__med-3of5"] {
width: 60%;
}
[class*="grid__med-2of5"] {
width: 40%;
}
[class*="grid__med-1of5"] {
width: 20%;
}
.grid__med-row--flex,
.grid__med-quarters,
.grid__med-thirds,
.grid__med-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__med-row--flex > [class*="grid__med"],
.grid__med-quarters > *,
.grid__med-thirds > *,
.grid__med-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__med-row--flex,
.grid__med-quarters,
.grid__med-thirds,
.grid__med-halves {
word-spacing: -0.43em;
}
}
/**
* Desktop Grid
*/
/*
````desktop-grid
````
*/
@media all and (min-width: 62em) {
[class*="grid__lg-row"],
.grid__lg-quarters,
.grid__lg-thirds,
.grid__lg-halves {
margin-left: -1.125rem;
margin-right: -1.125rem;
}
[class*="grid__lg-row"]:before,
[class*="grid__lg-row"]:after,
.grid__lg-quarters:before,
.grid__lg-quarters:after,
.grid__lg-thirds:before,
.grid__lg-thirds:after,
.grid__lg-halves:before,
.grid__lg-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__lg-row"]:after,
.grid__lg-quarters:after,
.grid__lg-thirds:after,
.grid__lg-halves:after {
clear: both;
}
ul[class*="grid__lg-row"],
ul.grid__lg-quarters,
ul.grid__lg-thirds,
ul.grid__lg-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__lg-row--ltr > [class*="grid__lg"] {
float: left;
}
[class*="grid__lg"]:not([class*="grid__lg-row"]) {
display: inline;
float: left;
padding-left: 1.125rem;
padding-right: 1.125rem;
}
.grid__lg-row--rtl > [class*="grid__lg"] {
float: right;
}
.grid__lg-quarter,
.grid__lg-quarter,
[class*="grid__lg-3of12"],
[class*="grid__lg-3of12"],
[class*="grid__lg-2of8"],
[class*="grid__lg-2of8"],
.grid__lg-quarters > *,
.grid__lg-quarters > * {
width: 25%;
}
.grid__lg-third,
.grid__lg-third,
[class*="grid__lg-4of12"],
[class*="grid__lg-4of12"],
[class*="grid__lg-3of9"],
[class*="grid__lg-3of9"],
[class*="grid__lg-2of6"],
[class*="grid__lg-2of6"],
.grid__lg-thirds > *,
.grid__lg-thirds > * {
width: 33.33333%;
}
.grid__lg-half,
.grid__lg-half,
[class*="grid__lg-6of12"],
[class*="grid__lg-6of12"],
[class*="grid__lg-5of10"],
[class*="grid__lg-5of10"],
[class*="grid__lg-4of8"],
[class*="grid__lg-4of8"],
[class*="grid__lg-3of6"],
[class*="grid__lg-3of6"],
.grid__lg-halves > *,
.grid__lg-halves > * {
width: 50%;
}
.grid__lg-two-thirds,
.grid__lg-two-thirds,
[class*="grid__lg-8of12"],
[class*="grid__lg-8of12"],
[class*="grid__lg-6of9"],
[class*="grid__lg-6of9"],
[class*="grid__lg-4of6"],
[class*="grid__lg-4of6"] {
width: 66.66667%;
}
.grid__lg-three-quarters,
.grid__lg-three-quarters,
[class*="grid__lg-9of12"],
[class*="grid__lg-9of12"],
[class*="grid__lg-6of8"],
[class*="grid__lg-6of8"] {
width: 75%;
}
.grid__lg-full,
.grid__lg-full {
width: 100%;
}
[class*="grid__lg-11of12"] {
width: 91.66667%;
}
[class*="grid__lg-10of12"] {
width: 83.33333%;
}
[class*="grid__lg-7of12"] {
width: 58.33333%;
}
[class*="grid__lg-5of12"] {
width: 41.66667%;
}
[class*="grid__lg-2of12"] {
width: 16.66667%;
}
[class*="grid__lg-1of12"] {
width: 8.33333%;
}
[class*="grid__lg-10of11"] {
width: 90.90909%;
}
[class*="grid__lg-9of11"] {
width: 81.81818%;
}
[class*="grid__lg-8of11"] {
width: 72.72727%;
}
[class*="grid__lg-7of11"] {
width: 63.63636%;
}
[class*="grid__lg-6of11"] {
width: 54.54545%;
}
[class*="grid__lg-5of11"] {
width: 45.45455%;
}
[class*="grid__lg-4of11"] {
width: 36.36364%;
}
[class*="grid__lg-3of11"] {
width: 27.27273%;
}
[class*="grid__lg-2of11"] {
width: 18.18182%;
}
[class*="grid__lg-1of11"] {
width: 9.09091%;
}
[class*="grid__lg-9of10"] {
width: 90%;
}
[class*="grid__lg-8of10"] {
width: 80%;
}
[class*="grid__lg-7of10"] {
width: 70%;
}
[class*="grid__lg-6of10"] {
width: 60%;
}
[class*="grid__lg-4of10"] {
width: 40%;
}
[class*="grid__lg-3of10"] {
width: 30%;
}
[class*="grid__lg-2of10"] {
width: 20%;
}
[class*="grid__lg-1of10"] {
width: 10%;
}
[class*="grid__lg-8of9"] {
width: 88.88889%;
}
[class*="grid__lg-7of9"] {
width: 77.77778%;
}
[class*="grid__lg-5of9"] {
width: 55.55556%;
}
[class*="grid__lg-4of9"] {
width: 44.44444%;
}
[class*="grid__lg-2of9"] {
width: 22.22222%;
}
[class*="grid__lg-1of9"] {
width: 11.11111%;
}
[class*="grid__lg-7of8"] {
width: 87.5%;
}
[class*="grid__lg-5of8"] {
width: 62.5%;
}
[class*="grid__lg-3of8"] {
width: 37.5%;
}
[class*="grid__lg-1of8"] {
width: 12.5%;
}
[class*="grid__lg-6of7"] {
width: 85.71429%;
}
[class*="grid__lg-5of7"] {
width: 71.42857%;
}
[class*="grid__lg-4of7"] {
width: 57.14286%;
}
[class*="grid__lg-3of7"] {
width: 42.85714%;
}
[class*="grid__lg-2of7"] {
width: 28.57143%;
}
[class*="grid__lg-1of7"] {
width: 14.28571%;
}
[class*="grid__lg-5of6"] {
width: 83.33333%;
}
[class*="grid__lg-1of6"] {
width: 16.66667%;
}
[class*="grid__lg-4of5"] {
width: 80%;
}
[class*="grid__lg-3of5"] {
width: 60%;
}
[class*="grid__lg-2of5"] {
width: 40%;
}
[class*="grid__lg-1of5"] {
width: 20%;
}
/*
Media Grid
The Media Grid allows you to place a grid of photos or videos (catalog or
retail products, etc.) without floating them, alleviating the need to concern
yourself with clearing the floats with rows should an object extend further
than another. Also, because they are not floating, it allows you to align
the entire group center, making sure any "orphaned" grid entries are centered.
The syntax is simply the same as the regular responsive grid system, except
the row class has a `--flex` modifier.
````media-grid
Alderaan is peaceful. We have no weapons.
Alderaan is peaceful. We have no weapons.
Alderaan is peaceful. We have no weapons.
````
*/
.grid__lg-row--flex,
.grid__lg-quarters,
.grid__lg-thirds,
.grid__lg-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__lg-row--flex > [class*="grid__lg"],
.grid__lg-quarters > *,
.grid__lg-thirds > *,
.grid__lg-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__lg-row--flex,
.grid__lg-quarters,
.grid__lg-thirds,
.grid__lg-halves {
word-spacing: -0.43em;
}
}
.wp-block-columns.has-category-card .wp-block-column {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.wp-block-columns .wp-block-column {
margin-bottom: 0;
}
.lists__ordered-list {
list-style: none;
counter-reset: lists__ordered-list;
padding: 0;
}
.lists__ordered-list li {
counter-increment: lists__ordered-list;
padding-left: 50px;
min-height: 32px;
margin-top: 1.25rem;
position: relative;
}
.lists__ordered-list li:before {
content: counter(lists__ordered-list);
background: #221D1D;
border: 3px solid #83933E;
color: #D27600;
border-radius: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
height: 32px;
width: 32px;
position: absolute;
left: 0;
}
.lists__unordered-list {
list-style: none;
padding: 0;
}
.lists__unordered-list li {
padding-left: 20px;
margin-top: 1.25rem;
position: relative;
}
.lists__unordered-list li:before {
content: "";
font-size: 58px;
font-size: 3.625rem;
line-height: 0.89655172;
color: #D27600;
display: block;
position: absolute;
height: 15px;
width: 6px;
background-image: url("/wp-content/themes/dallaszoo/resources/icons/dots.svg");
background-size: contain;
background-repeat: no-repeat;
left: 0;
top: 5px;
}
/*
Unstyled List
A basic stripping of list styles.
*/
.lists__unstyled,
.lists__horizontal,
.lists__horizontal--forceful,
.lists__horizontal--links,
.lists__horizontal--pgs,
.lists__breadcrumb-list,
.lists__horizontal--buttons {
padding-left: 0;
list-style: none outside none;
}
/*
Horizontal List
The basic horizontal list module simply removes bullets from lists and inlines the list
items, making the link `inline-block`. The idea is to give the skeleton of a
horizontal list/navigation without adding too much style (yet).
*/
.lists__horizontal li,
.lists__horizontal--links li,
.lists__horizontal--pgs li,
.lists__breadcrumb-list li,
.lists__horizontal--buttons li {
display: inline;
}
.lists__horizontal a,
.lists__horizontal--links a,
.lists__horizontal--pgs a,
.lists__breadcrumb-list a,
.lists__horizontal--buttons a {
display: inline-block;
}
/*
Horizontal List (Forceful)
Rather than making the list `inline-block`, it floats the list elements
(except on the smallest screen sizes, where it remains vertical). More precise
than the default Horizontal List.
*/
@media all and (min-width: 30em) {
.lists__horizontal--forceful:before,
.lists__horizontal--forceful:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.lists__horizontal--forceful:after {
clear: both;
}
}
.lists__horizontal--forceful li {
display: block;
}
@media all and (min-width: 30em) {
.lists__horizontal--forceful li {
float: left;
}
}
.lists__horizontal--forceful a {
display: block;
}
/*
Link List
A basic extension of the Horizontal List, this adds some margin to the links in
the list for a more pleasant looking list of links.
````link-list
````
*/
.lists__horizontal--links a {
margin-right: 30px;
}
.lists__horizontal--links li:last-child a {
margin-right: 0;
}
/*
Pagination
An extension of the basic horizontal list module that simply adds enough padding on
the links for pagination.
*/
.lists__horizontal--pgs a {
padding: 0 0.625em;
}
.lists__horizontal--pgs a,
.lists__horizontal--pgs a:hover,
.lists__horizontal--pgs a:focus {
color: inherit;
}
/*
Breadcrumb
Another extension of the horizontal list module, adding a breadcrumb `label`
and floating it and the ordered list.
````breadcrumb
Breadcrumb Link
Breadcrumb Link
Breadcrumb Link
````
*/
.lists__breadcrumb {
margin-top: 1.25em;
}
.lists__breadcrumb-label {
margin: 0 0.5625rem 0 0;
float: left;
}
.lists__breadcrumb-list {
margin: 0;
float: left;
}
.lists__breadcrumb-list li {
margin-right: 0.5625rem;
}
/*
Button List
````button-list
````
*/
.lists__horizontal--buttons {
margin-top: 0;
overflow: hidden;
}
.lists__horizontal--buttons li {
display: block;
float: left;
}
.lists__horizontal--buttons a {
display: block;
}
h1 {
margin-top: 0;
}
h2,
h3,
h4,
h5,
h6 {
margin-top: 2.5rem;
}
ol {
list-style: none;
counter-reset: lists__ordered-list;
padding: 0;
}
ol li {
counter-increment: lists__ordered-list;
padding-left: 50px;
min-height: 32px;
margin-top: 1.25rem;
position: relative;
}
ol li:before {
content: counter(lists__ordered-list);
background: #221D1D;
border: 3px solid #83933E;
color: #D27600;
border-radius: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
height: 32px;
width: 32px;
position: absolute;
left: 0;
}
ul {
list-style: none;
padding: 0;
}
ul li {
padding-left: 20px;
margin-top: 1.25rem;
position: relative;
}
ul li:before {
content: "";
font-size: 58px;
font-size: 3.625rem;
line-height: 0.89655172;
color: #D27600;
display: block;
position: absolute;
height: 15px;
width: 6px;
background-image: url("/wp-content/themes/dallaszoo/resources/icons/dots.svg");
background-size: contain;
background-repeat: no-repeat;
left: 0;
top: 5px;
}
/*# sourceMappingURL=../../build/css/maps/editor.css.map */