@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Cardo:400,400i,700|Work+Sans:100,200,300,400,500,600,700,800,900");
/**
* Margins and Padding
The base text size of the site is 16px/1rem, which we are also using as our default
size for our padding and margins. All spacing should be defined using rem units
as multiples of the base 1rem spacing size.
* Markup:
Extra small padding and bottom margin (.25rem/4px)
Small padding and bottom margin (.5rem/8px)
Medium/Default padding and bottom margin (1rem/16px)
Large padding and bottom margin (2rem/32px)
Extra Large padding and bottom margin (4rem/64px)
*
* Weight: -1
*
* Styleguide: spacing.margins
*/
/**
* Breakpoints
We are customizing the layout and sizing for five different screen sizes using the following breakpoints:
Small : any screen less than 640 pixels .
Medium : any screen between 640 pixels and 1024 pixels .
Large : any screen between 1024 pixels and 1200 pixels .
Extra Large : any screen between 1200 pixels and 1440 pixels .
Extra Extra Large : any screen wider than 1440 pixels .
.sponsor-paragraph.grid .field--name-field-sponsor .field__item img*
* Weight: 0
*
* Styleguide: spacing.breakpoint-configuration
*/
/**
* Grid Basics
*
The grid is made up of a parent element that is given either the .grid-x or .grid-y class, and child elements that have the .cell class.
There are 12 columns in the grid, and you use classes such as .small-6 or .large-8 to define how many columns each cell should take at the different window sizes.
In this guide we are using a notation in the cell contents like 12/6/4 so you can easily know what classes are applied. In this case the element has the .small-12, medium-6, and large-4 classes.
Resize your broswer to see how the cells in the third example below change ratios depending on the window size, and wrap to seperate lines at a mobile size.
You can read the full grid documentation at: https://foundation.zurb.com/sites/docs/xy-grid.html
*
* Markup:
12 (full width) cell
12 (full width) cell
*
* Weight: 1
*
* Styleguide: spacing.basics
*/
/**
* Gutters and Padding
*
* The defining feature of the XY grid is the ability to use margin AND padding grids in harmony. Without defining a gutter type the cells will simply split up the space without any gutters.
To add gutters between the cells, simply use the .grid-margin-x class on the grid element. Gutters are configured to be 32px wide with 16px of gutter on either side of a cell. To add padding within a cell, use the .grid-padding-x class on the main grid element.
In the first example below, the cells have margins, but no padding. In the second, there is padding but no margins.
*
* Markup:
12/6/4 cells
12/6/8 cells
12/6/4 cells
12/6/8 cells
*
* Weight: 2
*
* Styleguide: spacing.gutters
*/
/**
* Grid Container
*
* The grid defaults to the full width of the available space. To contain it use the grid-container class. The container will be centered and have a max-width equal to your $grid-container setting (1400 by default), along with padding on the left/right equal to half your $grid-container-padding setting.
*
* Markup:
*
* Weight: 3
*
* Styleguide: spacing.grid-container
*/
/**
* Grid Container Fluid
*
* To stretch the content to the full width of the available space, simply add the class fluid to your grid-container.
*
* Markup:
*
* Weight: 4
*
* Styleguide: spacing.grid-container-fluid
*/
/**
* Grid Container Full
*
* To stretch the content to the full width of the available space and remove grid container padding, simply add the class full to your grid-container. Note that this variation is primarily for use for the grid-margin-x it works with grid-padding-x too, but will work the same as .grid-container.fluid.
*
* Markup:
*
* Weight: 5
*
* Styleguide: spacing.grid-container-full
*/
/**
* Offsets
*
* Offsets work by applying margin-left (or margin-top for a vertical grid) to a grid.
*
* Markup:
Offset 2 on large
4 cells
*
* Weight: 6
*
* Styleguide: spacing.offsets
*/
/**
* Block Grids
*
* To define cell widths within a direction-level, instead of the individual cell level, add the class .[size]-up-[n] to a grid-x or grid-y, where [n] is the number of cells to display per direction, and [size] is the breakpoint at which to apply the effect.
*
* Markup:
cell
cell
cell
cell
cell
cell
*
* Weight: 7
*
* Styleguide: spacing.block-grids
*/
/**
* Cell Alignment
*
* Cells in the xy grid can be aligned across the horizontal or vertical axis of their parent grid.
*
* Weight: 8
*
* Styleguide: spacing.cell-alignment
*/
/**
* Horizontal Alignment
*
* Cells can be aligned the same way you would align text in a paragraph. By default, all cells align to the left (or the right in RTL), but this can be overridden with by adding the .align-[dir] class to the parent grid.
*
* Markup:
Aligned to
the space around
*
* Styleguide: spacing.cell-alignment.horizontal
*/
/**
* Vertical Alignment
*
* By default, all columns in an xy grid stretch to be equal height. This behavior can be changed with another set of alignment classes. That's right, middle alignment in CSS !
* Your options for vertical alignment are top, middle, bottom, and stretch. Note that we use the word middle for vertical alignment, and center for horizontal alignment.
* Applying a vertical alignment class to the grid will affect every column directly inside it.
*
* Markup:
I'm in the middle!
I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
These cell small-6 align to the top.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.
*
* Styleguide: spacing.cell-alignment.vertical
*/
/**
* Vertical Alignment of child columns (individually)
*
* Similar alignment classes can also be applied to individual columns, which use the format .align-self-* instead of .align-*.
*
* Markup:
Align bottom
Align middle
Align top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?
*
* Styleguide: spacing.cell-alignment.vertical-individual
*/
/**
* Source Ordering
*
* Columns within a row will be sorted by their order property. Lower numbers are placed first. If multiple columns have the same number, they're sorted in the order they appear in the HTML.
* We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes.
*
* Weight: 9
*
* Markup:
This column will come second on small, and first on medium and larger.
This column will come first on small, and second on medium and larger.
*
* Styleguide: spacing.source-ordering
*/
/**
* Visibility Classes
*
* Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.
*
* Weight: 10
*
* Styleguide: spacing.visibility
*/
/**
* Show by Screen Size
*
* In this example, we use the .show visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.
* These classes automatically hide the element on screen sizes below what's specified in the class. So .show-for-medium will hide the element on small, and show it on medium and larger.
* A separate set of classes allow you to show content only on a certain screen size. Just add -only to the end of the class.
*
* Markup:
You are on a small screen or larger.
You are on a medium screen or larger.
You are on a large screen or larger.
You are on a xlarge screen or larger.
You are on a xxlarge screen or larger.
You are definitely on a small screen.
You are definitely on a medium screen.
You are definitely on a large screen.
You are definitely on a xlarge screen.
You are definitely on a xxlarge screen.
*
* Styleguide: spacing.visibility.show
*/
/**
* Hide by Screen Size
*
* This example shows the opposite: It uses the .hide visibility classes to state which elements should disappear based on the device's screen size.
*
* Markup:
You are not on a medium screen or larger.
You are not on a large screen or larger.
You are not on a xlarge screen or larger.
You are not on a xxlarge screen or larger.
You are definitely not on a small screen.
You are definitely not on a medium screen.
You are definitely not on a large screen.
You are definitely not on a xlarge screen.
You are definitely not on a xxlarge screen.
*
* Styleguide: spacing.visibility.hide
*/
/**
* Generic Hide Classes
*
* And if you really just need something hidden no matter what, there are classes for that as well. The .hide and .invisible classes respectively set display: none and visibility: hidden on an element. Note that both of these classes hide content from screen readers.
*
* Markup:
Can't touch this.
Can sort of touch this.
*
* Styleguide: spacing.visibility.generic
*/
/**
* Body Text
*
* Markup: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
*
* Weight: 0
*
* Styleguide: typography.body
*/
/**
* h1
*/
/**
* h1
*
* Markup: h1.twig
*
* Weight: 1
*
* Styleguide: typography.h1
*/
/**
* H1 Intro
*
* Markup: h1-intro.twig
*
* Weight: 12
*
* Styleguide: typography.h1-intro
*/
.h1-intro {
font-family: "Cardo", serif;
font-style: italic;
position: relative;
font-size: 1.375rem;
margin: 0 auto; }
.h1-intro:before {
position: absolute;
top: -.5rem;
left: 50%;
transform: translate(-50%);
width: 2.5rem;
height: 2px;
content: '';
background: #4a4a4a;
border-radius: 1000rem; }
@media print, screen and (min-width: 40em) {
.h1-intro {
font-size: 1.875rem; }
.h1-intro:before {
top: -1rem;
left: 50%;
transform: translate(-50%);
width: 5rem;
height: 4px; } }
@media print, screen and (min-width: 64em) {
.h1-intro {
font-size: 2.5rem; } }
/**
* h2
*/
/**
* h2
*
* Markup: h2.twig
*
* Weight: 2
*
* Styleguide: typography.h2
*/
h2,
.h2, .hero--pattern .hero__content h1, .search-form .search-form__input {
color: #33302a; }
/**
* H2 Intro
*
* Markup: h2-intro.twig
*
* Weight: 13
*
* Styleguide: typography.h2-intro
*/
.h2-intro {
color: #33302a;
line-height: 1;
font-family: "Cardo", serif;
font-style: italic;
font-size: 1.375rem;
margin: 0 auto; }
@media print, screen and (min-width: 40em) {
.h2-intro {
font-size: 1.6875rem; } }
@media print, screen and (min-width: 64em) {
.h2-intro {
font-size: 2rem; } }
/**
* h3
*/
/**
* h3
*
* Markup: h3.twig
*
* Weight: 3
*
* Styleguide: typography.h3
*/
h3,
.h3, .full-width .full-width__text, .full-width--orange .full-width__text, .full-width-callout .full-width-callout__text, .full-width-callout--orange .full-width-callout__text {
color: #00663c; }
/**
* h4
*/
/**
* h4
*
* Markup: Naturebridge at Olympic
*
* Weight: 4
*
* Styleguide: typography.h4
*/
/**
* h4 with link
*
* Markup:
*
* Weight: 4
*
* Styleguide: typography.h4a
*/
h4 a, .h4 a, .jump-menu__header a, .card-orientation-horizontal .card h4 a, .card.card-orientation-horizontal h4 a {
color: #33302a; }
/**
* h5
*/
/**
* h5
*
* Markup: h5.twig
*
* Weight: 4
*
* Styleguide: typography.h5
*/
/**
* Strong
*
* Markup: Lorem ipsum dolor sit amet
*
* Weight: 7
*
* Styleguide: typography.strong
*/
/**
* Emphasis
*
* Markup: Lorem ipsum dolor sit amet
*
* Weight: 8
*
* Styleguide: typography.em
*/
/**
* Small
*
* Markup: Lorem ipsum dolor sit amet
*
* Weight: 9
*
* Styleguide: typography.small
*/
/**
* Figcaption
*
* Markup: Lorem ipsum dolor sit amet
*
* Weight: 10
*
* Styleguide: typography.figcaption
*/
/**
* Blockquote
*
* Markup: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
*
* Weight: 11
*
* Styleguide: typography.blockquote
*/
blockquote {
font-family: "Cardo", serif;
font-size: 1rem;
padding: 0 1rem !important;
line-height: 1.7 !important;
font-weight: bold;
margin: 2rem 0 !important; }
@media print, screen and (min-width: 40em) {
blockquote {
font-size: 1.375rem; } }
@media print, screen and (min-width: 64em) {
blockquote {
font-size: 1.625rem; } }
@media screen and (min-width: 75em) {
blockquote {
font-size: 2.125rem; } }
@media print, screen and (min-width: 40em) {
blockquote {
padding: 0 2rem !important; } }
@media print, screen and (min-width: 40em) {
blockquote {
line-height: 1.7 !important; } }
@media print, screen and (min-width: 64em) {
blockquote {
line-height: 1.5 !important; } }
blockquote cite {
font-family: "Work Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.75rem;
margin-top: 2rem; }
@media print, screen and (min-width: 40em) {
blockquote cite {
font-size: 0.875rem; } }
@media print, screen and (min-width: 64em) {
blockquote cite {
font-size: 1.125rem; } }
@media screen and (min-width: 75em) {
blockquote cite {
font-size: 1.25rem; } }
@media print, screen and (min-width: 40em) {
blockquote cite {
margin-top: 2rem; } }
@media print, screen and (min-width: 64em) {
blockquote cite {
margin-top: 4rem; } }
/**
* Button Text
*
* Markup: VIEW ALL EVENTS
*
* Weight: 16
*
* Styleguide: typography.button-text
*/
.button-text {
color: #191919;
font-size: 18px;
text-transform: uppercase; }
/**
* Newsletter Button text
*
* Markup: Sign Up
*
* Weight: 17
*
* Styleguide: typography.newsletter-button-text
*/
.newsletter-button-text {
color: #191919;
text-transform: uppercase; }
/**
* Dropdown Menu Header
*
* Markup:
*
* Weight: 18
*
* Styleguide: typography.dropdown-menu-h4
*/
.dropdown-menu h4 {
color: #00663c; }
/**
* Dropdown Menu Link
*
* Markup:
*
* Weight: 19
*
* Styleguide: typography.dropdown-menu-a
*/
.dropdown-menu a {
color: #33302a; }
/**
* Jump Menu Header
*/
/**
* Jump Menu Header
*
* Markup: [type='checkbox'],
label > [type='radio'] {
margin-right: 0.5rem; }
[type='file'] {
width: 100%; }
label {
display: block;
margin: 0;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.75;
color: #191919; }
label.middle {
margin: 0 0 1rem;
padding: 0.5625rem 0; }
.help-text {
margin-top: -0.5rem;
font-size: 0.8125rem;
font-style: italic;
color: #191919; }
.input-group {
display: flex;
width: 100%;
margin-bottom: 1rem;
align-items: stretch; }
.input-group > :first-child, .input-group > :first-child.input-group-button > * {
border-radius: 0 0 0 0; }
.input-group > :last-child, .input-group > :last-child.input-group-button > * {
border-radius: 0 0 0 0; }
.input-group-label, .input-group-field, .input-group-button, .input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label {
margin: 0;
white-space: nowrap; }
.input-group-label {
padding: 0 1rem;
border: 1px solid #979797;
background: #cecece;
color: #191919;
text-align: center;
white-space: nowrap;
display: flex;
flex: 0 0 auto;
align-items: center; }
.input-group-label:first-child {
border-right: 0; }
.input-group-label:last-child {
border-left: 0; }
.input-group-field {
border-radius: 0;
flex: 1 1 0px;
min-width: 0; }
.input-group-button {
padding-top: 0;
padding-bottom: 0;
text-align: center;
display: flex;
flex: 0 0 auto; }
.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label {
align-self: stretch;
height: auto;
padding-top: 0;
padding-bottom: 0;
font-size: 1rem; }
fieldset {
margin: 0;
padding: 0;
border: 0; }
legend {
max-width: 100%;
margin-bottom: 0.5rem; }
.fieldset {
margin: 1.125rem 0;
padding: 1.25rem;
border: 1px solid #979797; }
.fieldset legend {
margin: 0;
margin-left: -0.1875rem;
padding: 0 0.1875rem; }
select {
height: 2.6875rem;
margin: 0 0 1rem;
padding: 0.5rem;
appearance: none;
border: 1px solid #979797;
border-radius: 0;
background-color: #ffffff;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.75;
color: #191919;
background-image: url("data:image/svg+xml;utf8, Yosemite
*
* Weight: 14
*
* Styleguide: typography.card-tag
*/
.card__tag,
.card-tag {
font-size: 87.5%;
text-transform: uppercase;
color: #191919;
position: relative;
display: flex;
flex-flow: row nowrap;
padding: .35em 1em; }
.card__tag:first-of-type,
.card-tag:first-of-type {
padding-left: 0; }
@media print, screen and (min-width: 64em) {
.card__tag,
.card-tag {
padding: .5em 0; }
.card__tag:first-of-type,
.card-tag:first-of-type {
padding-left: 0; } }
.card__tag .card__tag__icon, .card-tag .card__tag__icon {
margin-right: .5rem;
text-align: center;
width: 1.25em;
flex-basis: 1.25em;
height: 1.25em; }
@media print, screen and (min-width: 64em) {
.card__tag .card__tag__icon, .card-tag .card__tag__icon {
margin-right: 1rem;
width: 1.75em;
flex-basis: 1.75em;
height: 1.5em; } }
.card__tag .card__tag__icon svg, .card-tag .card__tag__icon svg {
z-index: 1;
width: 100%;
height: 100%;
background-size: cover !important;
transform-origin: center center;
object-position: 50% 50%;
object-fit: cover;
font-family: 'object-fit: contain;object-position: 50% 50%'; }
.card__tag .card__tag__text, .card-tag .card__tag__text {
width: calc(100% - 1.25em);
flex-basis: calc(100% - 1.25em); }
@media print, screen and (min-width: 64em) {
.card__tag .card__tag__text, .card-tag .card__tag__text {
width: calc(100% - 1.75em);
flex-basis: calc(100% - 1.75em); } }
/**
* Card text
*
* Markup: Immerse yourself in backpacking, in environmental science, and in the wonder of exploring a national park on this exceptional 13-day experience.
*
* Weight: 15
*
* Styleguide: typography.card-text
*/
.card__text,
.card-text {
font-size: 87.5%;
color: #191919; }
/*
Drop Cap
Text area's contain paragraphs and related text copy and offer a drop cap feature for the first contained paragraph.
Markup: drop-cap.twig
Styleguide typography.drop-cap
*/
.drop-cap {
float: left;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 800;
font-size: 5em;
line-height: 1;
margin-right: .15em;
margin-top: -.15em;
padding: 0 .075em;
color: #dc582b; }
@supports ((-webkit-text-stroke-color: #dc582b) and (-webkit-text-fill-color: #ffffff)) or ((-moz-text-stroke-color: #dc582b) and (-moz-text-fill-color: #ffffff)) {
.drop-cap {
-moz-text-fill-color: #ffffff;
-webkit-text-fill-color: #ffffff;
-moz-text-stroke-color: #dc582b;
-webkit-text-stroke-color: #dc582b;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px; }
.paper .drop-cap {
-moz-text-fill-color: #f2efed;
-webkit-text-fill-color: #f2efed; } }
.drop-cap:after {
background: #dc582b;
display: block;
position: relative;
clear: both;
width: calc(100% + 8px);
margin-left: -4px;
height: 7px;
border-radius: 1000rem;
content: ''; }
.has-drop-cap p.drop-cap-added {
display: block; }
.has-drop-cap p.drop-cap-added::first-letter {
font-size: 0; }
.hamburger {
margin-right: .5rem; }
.hamburger > span {
width: 2rem;
text-align: center; }
.hamburger > span svg {
margin: auto; }
.hamburger .close {
display: block; }
.hamburger .open {
display: none; }
.closed.hamburger .close {
display: none; }
.closed.hamburger .open {
display: block; }
.responsive-embed, .plyr.plyr--video {
margin-bottom: 0; }
/**
* Select List
*
* Markup: select.twig
*
* Styleguide: html.forms.select
*/
select {
display: block; }
svg {
max-width: 100%;
height: auto; }
p {
font-size: 0.875rem; }
@media print, screen and (min-width: 40em) {
p {
font-size: 1rem; } }
.pager {
margin-top: 2rem; }
.pager__items {
margin: 0; }
/*
Picture
A responsive picture element with srcset
Markup: picture.html.twig
*/
picture {
display: block; }
figcaption {
font-size: 0.625rem;
padding-top: 0.5rem; }
@media print, screen and (min-width: 40em) {
figcaption {
font-size: 0.75rem; } }
@media print, screen and (min-width: 40em) {
figcaption {
padding-top: 1rem; } }
.search-toggle {
display: inline-block; }
.search-toggle > span {
width: 2rem;
text-align: center; }
.search-toggle > span svg {
margin: auto; }
.search-toggle .close {
display: block; }
.search-toggle .open {
display: none; }
.closed.search-toggle .close {
display: none; }
.closed.search-toggle .open {
display: block; }
table.recaptchaTable tr td {
padding: 0 !important; }
table.recaptchaTable tbody {
background-color: transparent; }
table.recaptchaTable tbody tr:nth-child(2n) {
background-color: transparent; }
.input-group {
position: relative;
margin-bottom: 2.5rem; }
.input-group div[style*="red"] {
position: absolute;
top: 3.3rem;
background: white; }
.input-group div[style*="red"]::first-letter {
text-transform: capitalize; }
.input-group tbody tr:nth-child(2n) {
background-color: transparent; }
.bg--neutral-paper .input-group div[style*="red"] {
background: #f2efed; }
.recaptchaTable tbody tr:nth-child(n+3) {
display: none; }
.menu--primary {
width: 100%;
margin-left: 0 !important; }
.menu--primary ul.menu, .menu--primary ul.social-sharing {
margin-left: 0 !important; }
@media print, screen and (min-width: 64em) {
.menu--primary {
width: auto; } }
.menu--primary > li {
padding-left: 0;
border-bottom: 1px solid #cecece; }
@media print, screen and (min-width: 64em) {
.menu--primary > li {
border-bottom: none; } }
.menu--primary > li > a {
font-size: 1.25rem;
color: #00663c;
font-weight: bold;
padding: 1rem 1.25rem; }
@media screen and (max-width: 63.99875em) {
.menu--primary > li > a {
display: block !important; }
.menu--primary > li > a:after {
display: none; } }
@media print, screen and (min-width: 40em) {
.menu--primary > li > a {
font-size: 1.25rem; } }
@media print, screen and (min-width: 64em) {
.menu--primary > li > a {
font-size: 1rem; } }
@media print, screen and (min-width: 64em) {
.menu--primary > li > a {
color: #4a4a4a;
font-weight: normal;
padding: .7rem .5rem !important;
position: relative; }
.menu--primary > li > a:after {
top: unset;
bottom: 0 !important; }
.menu--primary > li > a.active {
font-weight: bold; }
.menu--primary > li > a.active:after {
width: 2rem; } }
@media screen and (min-width: 75em) {
.menu--primary > li > a {
padding: 0.7rem 1rem !important; } }
@media screen and (max-width: 63.99875em) {
.menu--primary > li.is-accordion-submenu-parent.has-submenu-toggle > a {
margin-right: 4rem; }
.menu--primary > li.is-accordion-submenu-parent ul {
margin-bottom: 1rem; }
.menu--primary > li.is-accordion-submenu-parent ul li {
padding-left: 1.25rem; }
.menu--primary > li.is-accordion-submenu-parent ul li a {
color: #756e5f; }
.menu--primary > li.is-accordion-submenu-parent ul li a:hover {
color: #33302a;
text-decoration: underline; }
.menu--primary > li.is-accordion-submenu-parent > button.submenu-toggle {
transform: rotate(0deg) !important;
display: block !important;
left: unset !important;
right: 1.25rem !important;
top: 1rem !important;
height: 1.5rem !important;
width: 1.5rem !important;
background: transparent url("assets/images/icons/icon--dropdown.svg") no-repeat center center !important;
background-size: contain !important; }
.menu--primary > li.is-accordion-submenu-parent > button.submenu-toggle:after {
display: none !important; }
@supports (mask-image: none) or (-webkit-mask-image: none) {
.menu--primary > li.is-accordion-submenu-parent > button.submenu-toggle {
background: #00663c !important;
-webkit-mask-image: url("assets/images/icons/icon--dropdown.svg");
mask-image: url("assets/images/icons/icon--dropdown.svg");
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat; } }
.menu--primary > li.is-accordion-submenu-parent > button.submenu-toggle[aria-expanded='true'] {
transform: rotate(0deg) scaleY(-1) !important; }
.menu--primary > li.is-accordion-submenu-parent > button.submenu-toggle[aria-expanded='true']:after {
display: none !important; } }
@media print, screen and (min-width: 64em) {
.menu--primary > li:not(.is-dropdown-submenu-parent) > ul {
display: none !important; } }
.menu--primary > li.is-dropdown-submenu-parent > ul.is-dropdown-submenu {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
top: auto !important;
border: none;
margin-top: 1.4rem; }
@media print, screen and (min-width: 64em) {
.menu--primary > li.is-dropdown-submenu-parent > ul.is-dropdown-submenu {
padding: 1.5rem; } }
.menu--primary > li.is-dropdown-submenu-parent > ul.is-dropdown-submenu li {
padding-left: 0; }
.menu--primary > li.is-dropdown-submenu-parent > ul.is-dropdown-submenu a {
color: #756e5f;
padding: .5rem; }
.menu--primary > li.is-dropdown-submenu-parent > ul.is-dropdown-submenu a:hover {
color: #33302a;
text-decoration: underline; }
.menu--primary > li.is-dropdown-submenu-parent.opens-right > ul.is-dropdown-submenu.mega-menu-wrapper {
right: auto !important;
left: 0 !important; }
.menu--primary > li.is-dropdown-submenu-parent.opens-left > ul.is-dropdown-submenu.mega-menu-wrapper {
right: 0 !important;
left: auto !important; }
.menu--primary > li.is-dropdown-submenu-parent.opens-inner > ul.is-dropdown-submenu.mega-menu-wrapper {
position: fixed !important;
right: 0 !important;
left: 0 !important;
margin-left: auto;
margin-right: auto; }
.menu--primary .mega-menu-wrapper.js-dropdown-active {
display: block !important; }
@media print, screen and (min-width: 64em) {
.menu--primary .mega-menu-wrapper {
display: none !important;
padding: 1.5rem .5rem !important;
width: 60rem !important; } }
.menu--primary .mega-menu-column {
padding: 0; }
@media print, screen and (min-width: 64em) {
.menu--primary .mega-menu-column {
border-right: 1px solid rgba(117, 110, 95, 0.15); }
.menu--primary .mega-menu-column:last-of-type {
border-right: none; } }
.menu--primary .mega-menu-column > ul.menu, .menu--primary .mega-menu-column > ul.social-sharing {
margin-bottom: 0; }
@media print, screen and (min-width: 64em) {
.menu--primary .mega-menu-column > ul.menu, .menu--primary .mega-menu-column > ul.social-sharing {
padding: 0 1.5rem;
margin-bottom: 2rem; } }
.menu--primary .mega-menu-column > ul.menu.hide-for-large, .menu--primary .mega-menu-column > ul.hide-for-large.social-sharing {
font-weight: bold; }
@media print, screen and (min-width: 64em) {
.menu--primary .mega-menu-column > ul.menu:last-child, .menu--primary .mega-menu-column > ul.social-sharing:last-child {
margin-bottom: 0; } }
@media print, screen and (min-width: 64em) {
.menu--primary .mega-menu-column > ul.menu li, .menu--primary .mega-menu-column > ul.social-sharing li {
display: block; } }
.menu--primary .mega-menu-column > ul.menu li:first-child, .menu--primary .mega-menu-column > ul.social-sharing li:first-child {
display: block; }
.menu--primary .mega-menu-column > ul.menu li:first-child > a, .menu--primary .mega-menu-column > ul.social-sharing li:first-child > a {
font-size: 1rem; }
@media print, screen and (min-width: 40em) {
.menu--primary .mega-menu-column > ul.menu li:first-child > a, .menu--primary .mega-menu-column > ul.social-sharing li:first-child > a {
font-size: 1rem; } }
@media print, screen and (min-width: 64em) {
.menu--primary .mega-menu-column > ul.menu li:first-child > a, .menu--primary .mega-menu-column > ul.social-sharing li:first-child > a {
font-size: 1.125rem; } }
@media print, screen and (min-width: 64em) {
.menu--primary .mega-menu-column > ul.menu li:first-child > a, .menu--primary .mega-menu-column > ul.social-sharing li:first-child > a {
margin-bottom: 0;
font-weight: bold;
color: #00663c; } }
/*
1. Grid and Spacing
Guidelines on the layout of elements and the spacing between them.
weight: 1
Styleguide spacing
*/
/*
2. Colors
Palette of colors that will be used throughout the site.
$c-green-canopy - #00663c
$c-green-moss - #6b9e34
$c-orange - #dc582b;
$c-yellow - #efc210
$c-neutral-bark - #33302a
$c-neutral-earth - #756e5f
$c-neutral-sand - #cac4bc
$c-neutral-paper - #f2efed
$c-blue-sky - #0087b7
$c-blue-ocean - #51b1b6
$c-blue-ice - #8ed1dd
$c-white - #ffffff
$c-gray-darker - #191919
$c-gray-dark - #4a4a4a
$c-gray-medium - #979797
$c-gray-light - #cecece
weight: 2
Styleguide color-swatches
*/
/*
3. Typography
All of the different font styles that will be used on the site.
weight: 3
Styleguide typography
*/
/*
4. Icons and Patterns
All of the icon and pattern graphics that can be included in other components.
weight: 4
Styleguide icons-patterns
*/
/*
Icons
These icons can be included in other components using <div class="icon--COLOR">{% include "@icons/icon--NAME.svg" %}</div> with the adjacent names below.
Weight: 0
Styleguide icons-patterns.icons
*/
svg {
vertical-align: middle; }
/*
Icons: Card Details
Icons used in card details. Colored with .icon-color--gray-dark and sized with .icon-size--small
Markup:
{% include "@icons/icon--calendar.svg" %} calendar
{% include "@icons/icon--age.svg" %} age
{% include "@icons/icon--grade.svg" %} grade
{% include "@icons/icon--cost.svg" %} cost
{% include "@icons/icon--location.svg" %} location
Styleguide icons-patterns.icons.card-details
*/
.icon-color--gray-dark svg,
svg.icon-color--gray-dark, .card .card__tag, .card-orientation-horizontal .card .card__tag,
.card.card-orientation-horizontal .card__tag, .card-orientation-horizontal .card .card__link,
.card.card-orientation-horizontal .card__link, .stats__item__icon, .focus.search-form .search-form__icon {
fill: #4a4a4a;
stroke: #4a4a4a; }
.icon-size--small svg,
svg.icon-size--small {
width: 21px;
height: 21px; }
/*
Icons: Headings
Icons used in headings. Colored with .icon-color--orange with size .icon-size--large
Markup:
{% include "@icons/icon--mountain.svg" %} mountain
{% include "@icons/icon--calendar.svg" %} calendar
{% include "@icons/icon--chat.svg" %} chat
{% include "@icons/icon--map.svg" %} map
{% include "@icons/icon--pen-and-paper.svg" %} pen-and-paper
{% include "@icons/icon--gallery.svg" %} gallery
{% include "@icons/icon--meeting.svg" %} meeting
{% include "@icons/icon--note.svg" %} note
{% include "@icons/icon--study.svg" %} study
{% include "@icons/icon--checkbox.svg" %} checkbox
{% include "@icons/icon--book.svg" %} book
Styleguide icons-patterns.icons.headings
*/
.icon-color--orange svg,
svg.icon--orange, .section-header .section-header__icon svg {
fill: #dc582b;
stroke: #dc582b; }
.icon-size--large svg,
svg.icon-size--large, .section-header .section-header__icon svg {
width: 44px;
height: 44px; }
/*
Icons: Social
Icons for social media. Colored with .icon-color--blue-sky and sized with .icon-size--medium
Markup:
{% include "@icons/icon--facebook.svg" %} facebook
{% include "@icons/icon--instagram.svg" %} instagram
{% include "@icons/icon--linkedin.svg" %} linkedin
{% include "@icons/icon--twitter.svg" %} twitter
{% include "@icons/icon--youtube.svg" %} youtube
Styleguide icons-patterns.icons.social
*/
.icon-color--blue-sky svg,
svg.icon-color--blue-sky, .social-sharing .social-sharing__provider__icon {
fill: #0087b7;
stroke: #0087b7; }
a:hover .icon-color--blue-sky svg,
a.icon-color--blue-sky:hover svg,
a:hover svg.icon-color--blue-sky, .social-sharing .social-sharing__provider__icon:hover {
background: #0087b7;
border-color: #0087b7;
fill: #ffffff;
stroke: #ffffff; }
.icon-size--medium svg,
svg.icon-size--medium, .social-sharing .social-sharing__provider__icon svg, footer .footer--social a svg {
width: 40px;
height: 40px; }
/*
Icons: Navigation
Icons used in the site navigation. Colored with the class: .icon-color--green-canopy
Markup:
{% include "@icons/icon--close.svg" %} close
{% include "@icons/icon--hamburger.svg" %} hamburger
{% include "@icons/icon--dropdown.svg" %} dropdown
{% include "@icons/icon--search.svg" %} search
Weight: 4
Styleguide icons-patterns.icons.nav-icons
*/
.hamburger, .icon-color--green-canopy svg,
svg.icon-color--green-canopy {
fill: #00663c;
stroke: #00663c; }
/*
Icons: Button elements
Arrow used for the read more button. Colored with the class: .icon-color--neutral-bark
Markup:
{% include "@icons/icon--arrows-right.svg" %} arrows-right
Weight: 5
Styleguide icons-patterns.icons.button
*/
.icon-color--neutral-bark svg, .search-toggle svg, .card .card__link svg,
svg.icon-color--neutral-bark, svg.search-toggle, .card svg.card__link, .link--arrow {
fill: #33302a;
stroke: #33302a; }
/*
Icons: Button elements hover state
Arrow used for the read more button hover state. Colored with the class: .icon-color--blue-ocean
Markup:
{% include "@icons/icon--arrows-right.svg" %} arrows-right
Weight: 5
Styleguide icons-patterns.icons.button-hover
*/
.icon-color--blue-ocean svg, .card.with-link:hover .card__link svg,
svg.icon-color--blue-ocean, .card.with-link:hover svg.card__link, .link--arrow:hover, .link--arrow:focus {
fill: #51b1b6;
stroke: #51b1b6; }
/*
Icons: Hero elements
Design elements used in the hero. Colored with the class: .icon-color--white
Markup:
{% include "@icons/icon--arrow-down.svg" %} arrow-down
Weight: 7
Styleguide icons-patterns.icons.hero
*/
.icon-color--white svg,
svg.icon-color--white, .vertical-slides__container .home-page-slide__content__text a.link--arrow, .hero--photo .hero__icon, .hero--pattern .hero__content .hero__icon, footer .footer--social a {
fill: #ffffff;
stroke: #ffffff; }
footer .footer--social a:hover {
background: #ffffff;
border-color: #ffffff;
fill: #4a4a4a;
stroke: #4a4a4a; }
/*
Icons: Search Form
Icons used in the search form. Colored with the class: .icon-color--neutral-sand
Markup:
{% include "@icons/icon--search.svg" %} search
Weight: 8
Styleguide icons-patterns.icons.search-icons
*/
.icon-color--neutral-sand svg,
svg.icon-color--neutral-sand, .search-form .search-form__icon {
fill: #cac4bc;
stroke: #cac4bc; }
/*
Backgrounds
A list of background colors and patterns used throughout the NatureBridge project.
Markup:
.bg--neutral-paper - Color Neutral Paper
.bg--green-canopy - Color Green Canopy
.bg--green-moss - Color Green Moss
.bg--orange - Color Orange
.bg--blue-ice - Color Blue Ice
.bg--stump - Stump pattern
.bg--stump--lighter - Stump pattern lighter
.scheme--COLOR
class to the parent, and children can set properties using .scheme__background-pattern,
.scheme__background-color, .scheme__color, and .scheme__border-color.
Markup:
.scheme--green
.scheme--orange
Weight: 2
Styleguide icons-patterns.brand-patterns
*/
.scheme--green .scheme__background-pattern {
background: url(assets/images/patterns/pattern--green.png); }
.scheme--green .scheme__background-color {
background-color: #00663c; }
.scheme--green .scheme__color {
color: #efc210; }
.scheme--green .scheme__border-color {
border-color: #efc210; }
.scheme--orange .scheme__background-pattern {
background: url(assets/images/patterns/pattern--orange.png); }
.scheme--orange .scheme__background-color {
background-color: #dc582b; }
.scheme--orange .scheme__color {
color: #8ed1dd; }
.scheme--orange .scheme__border-color {
border-color: #8ed1dd; }
.scheme--fifty_green .scheme__background-pattern {
background: url(assets/images/patterns/pattern--fifty_green.png); }
.scheme--fifty_green .scheme__background-color {
background-color: #00663c; }
.scheme--fifty_green .scheme__color {
color: #efc210; }
.scheme--fifty_green .scheme__border-color {
border-color: #efc210; }
.scheme--fifty_transparent .scheme__background-pattern {
background: url(assets/images/patterns/pattern--fifty_transparent.png); }
.scheme--fifty_transparent .scheme__background-color {
background-color: #dc582b; }
.scheme--fifty_transparent .scheme__color {
color: #8ed1dd; }
.scheme--fifty_transparent .scheme__border-color {
border-color: #8ed1dd; }
.scheme--fifty_white .scheme__background-pattern {
background: url(assets/images/patterns/pattern--fifty_white.png); }
.scheme--fifty_white .scheme__background-color {
background-color: #dc582b; }
.scheme--fifty_white .scheme__color {
color: #8ed1dd; }
.scheme--fifty_white .scheme__border-color {
border-color: #8ed1dd; }
.scheme--fifty_green .scheme__background-pattern,
.scheme--fifty_white .scheme__background-pattern,
.scheme--fifty_transparent .scheme__background-pattern {
background-size: 8em !important; }
/*
5. HTML elements
All of the basic HTML elements that can be included in other components.
weight: 5
Styleguide html
*/
/**
* Links
*
* Styleguide: html.a
*/
/**
* Link: Basic
*
* This is a basic link.
*
* Markup: Lorem ipsum
*
* Weight: 0
*
* Styleguide: html.a.link-basic
*/
/**
* Link: Arrow
*
* This is an arrow link.
*
* Markup: Read more
*
* Weight: 1
*
* Styleguide: html.a.link-arrow
*/
/**
* Link: Tag
*
* This is a tag link for taxonomy terms.
*
* Markup: Environmental Education
*
* Weight: 2
*
* Styleguide: html.a.link-tag
*/
.link--arrow {
color: #33302a;
text-decoration: none;
position: relative; }
.link--arrow:hover, .link--arrow:focus {
color: #51b1b6;
text-decoration: none; }
.link--arrow svg {
display: inline-block;
position: relative;
width: 3em;
height: 1em; }
.search-toggle, .menu--primary > li > a, a.bottom-line {
display: inline-block;
position: relative; }
.search-toggle:after, .menu--primary > li > a:after, a.bottom-line:after {
content: '';
position: absolute;
height: .25rem;
background: #51b1b6;
border-radius: 1rem;
width: 0;
left: 50%;
transform: translate(-50%);
bottom: -.5rem;
transition: all .25s ease; }
.search-toggle:hover:after, .menu--primary > li > a:hover:after, a.bottom-line:hover:after {
width: 2rem; }
.link--tag, .taxonomy-terms a {
display: inline-block;
font-size: 0.75rem;
text-decoration: none;
padding: .25rem 1rem;
border: 2px solid #8ed1dd;
border-radius: .25rem; }
@media print, screen and (min-width: 40em) {
.link--tag, .taxonomy-terms a {
font-size: 0.875rem; } }
.link--tag:hover, .taxonomy-terms a:hover {
background: white; }
/**
* Buttons
*
* Markup: button.styleguide.twig
*
* Styleguide: html.buttons
*/
.button,
button,
input[type="submit"],
input[type="button"] {
text-transform: uppercase;
text-decoration: none;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
font-size: 1rem;
font-weight: bold;
border-width: 2px;
background: transparent;
color: #4a4a4a;
border-color: #4a4a4a; }
@media print, screen and (min-width: 40em) {
.button,
button,
input[type="submit"],
input[type="button"] {
font-size: 1rem; } }
@media print, screen and (min-width: 64em) {
.button,
button,
input[type="submit"],
input[type="button"] {
font-size: 1.125rem; } }
.button:hover,
button:hover,
input:hover[type="submit"],
input:hover[type="button"], .button:active,
button:active,
input:active[type="submit"],
input:active[type="button"], .button:focus,
button:focus,
input:focus[type="submit"],
input:focus[type="button"] {
color: #ffffff;
background: #4a4a4a; }
.disabled.button,
button.disabled,
input.disabled[type="submit"],
input.disabled[type="button"], .button[disabled],
button[disabled],
input[disabled][type="submit"],
input[disabled][type="button"] {
color: #979797 !important;
border-color: #979797 !important;
background-color: transparent !important; }
.button--white, footer .footer--newsletter input[type='submit'], footer .footer--newsletter button, .full-width .full-width__button, .full-width--orange .full-width__button, .full-width-callout .full-width-callout__button, .full-width-callout--orange .full-width-callout__button, .call-to-action--orange, .vertical-slides__container .home-page-slide__content__button .button, .hero--photo.with-button .hero__button a {
border-color: #ffffff;
background-color: #ffffff;
color: #4a4a4a; }
.button--white:hover, .call-to-action__button:hover, footer .footer--newsletter input:hover[type='submit'], footer .footer--newsletter button:hover, .full-width .full-width__button:hover, .full-width--orange .full-width__button:hover, .full-width-callout .full-width-callout__button:hover, .full-width-callout--orange .full-width-callout__button:hover, .vertical-slides__container .home-page-slide__content__button .button:hover, .hero--photo.with-button .hero__button a:hover, .button--white:active, footer .footer--newsletter input:active[type='submit'], footer .footer--newsletter button:active, .full-width .full-width__button:active, .full-width--orange .full-width__button:active, .full-width-callout .full-width-callout__button:active, .full-width-callout--orange .full-width-callout__button:active, .vertical-slides__container .home-page-slide__content__button .button:active, .hero--photo.with-button .hero__button a:active, .button--white:focus, footer .footer--newsletter input:focus[type='submit'], footer .footer--newsletter button:focus, .full-width .full-width__button:focus, .full-width--orange .full-width__button:focus, .full-width-callout .full-width-callout__button:focus, .full-width-callout--orange .full-width-callout__button:focus, .vertical-slides__container .home-page-slide__content__button .button:focus, .hero--photo.with-button .hero__button a:focus {
background-color: transparent;
color: #ffffff; }
.button--action,
.button--donate,
.button--blue,
input[type="submit"],
button[type="submit"], .hero-action__button {
border-color: #0087b7;
background-color: #0087b7;
color: #ffffff; }
.button--action:hover,
.button--donate:hover,
.button--blue:hover,
input:hover[type="submit"],
button:hover[type="submit"], .hero-action__button:hover, .button--action:active,
.button--donate:active,
.button--blue:active,
input:active[type="submit"],
button:active[type="submit"], .hero-action__button:active, .button--action:focus,
.button--donate:focus,
.button--blue:focus,
input:focus[type="submit"],
button:focus[type="submit"], .hero-action__button:focus {
background-color: #ffffff;
color: #0087b7; }
.button--outline {
border-color: #0087b7;
background-color: #ffffff;
color: #0087b7;
}
.button--outline:hover, .button--outline:focus {
background-color: #0087b7;
color: #ffffff;
}
.close-button {
box-shadow: none; }
.close-button:hover {
background: transparent; }
/**
* Form Inputs
*
* Styleguide: html.forms
*/
/**
* Text Input
*
* Markup: Lorem ipsum
* Dolor sit amet
*
* Styleguide: html.forms.radio
*/
/**
* Fieldset
*
* Markup:
* Fieldset name
* Fields go in here.
*
*
* Styleguide: html.forms.fieldset
*/
/**
* Horizontal Rule
*
* Markup: Click to reveal the modal
*
* Weight: 8
*
* Styleguide: containers.modal.button
*/
/**
* Modal: Window
*
* An example of a modal window rendered when triggered by a modal button. Note: modal's are hidden on page load.
*
* Markup: modal.twig
*
* Weight: 9
*
* Styleguide: containers.modal.window
*/
.reveal {
padding: 1rem;
margin: calc(1rem - 8px) 1rem;
min-height: calc(100vh - 2rem);
max-width: calc(100vw - 1rem);
max-height: calc(100vh - 2rem);
border: 7px solid #ffffff; }
@media print, screen and (min-width: 40em) {
.reveal {
padding: 1rem 1.5rem; } }
@media print, screen and (min-width: 64em) {
.reveal {
padding: 1.5rem 2rem; } }
@media screen and (min-width: 75em) {
.reveal {
padding: 2rem 3rem; } }
@media print, screen and (min-width: 40em) {
.reveal {
margin: auto; } }
@media print, screen and (min-width: 40em) {
.reveal {
min-height: auto; } }
.reveal .section-header {
margin-top: 1.5rem; }
.reveal > .section-header:first-child {
margin-bottom: 0; }
.reveal.bg--green-canopy, .reveal.bg--green-moss, .reveal.bg--orange, .reveal.bg--blue-ice {
color: #ffffff; }
.reveal.bg--green-canopy h1, .reveal.bg--green-canopy h2, .reveal.bg--green-canopy h3, .reveal.bg--green-canopy h4, .reveal.bg--green-canopy h5, .reveal.bg--green-canopy h6, .reveal.bg--green-moss h1, .reveal.bg--green-moss h2, .reveal.bg--green-moss h3, .reveal.bg--green-moss h4, .reveal.bg--green-moss h5, .reveal.bg--green-moss h6, .reveal.bg--orange h1, .reveal.bg--orange h2, .reveal.bg--orange h3, .reveal.bg--orange h4, .reveal.bg--orange h5, .reveal.bg--orange h6, .reveal.bg--blue-ice h1, .reveal.bg--blue-ice h2, .reveal.bg--blue-ice h3, .reveal.bg--blue-ice h4, .reveal.bg--blue-ice h5, .reveal.bg--blue-ice h6 {
color: #ffffff; }
.reveal.bg--green-canopy .h1-intro, .reveal.bg--green-canopy .h2-intro, .reveal.bg--green-moss .h1-intro, .reveal.bg--green-moss .h2-intro, .reveal.bg--orange .h1-intro, .reveal.bg--orange .h2-intro, .reveal.bg--blue-ice .h1-intro, .reveal.bg--blue-ice .h2-intro {
color: #ffffff; }
.reveal.bg--green-canopy .close-button, .reveal.bg--green-moss .close-button, .reveal.bg--orange .close-button, .reveal.bg--blue-ice .close-button {
color: #ffffff; }
.reveal.bg--green-canopy .close-button:hover, .reveal.bg--green-moss .close-button:hover, .reveal.bg--orange .close-button:hover, .reveal.bg--blue-ice .close-button:hover {
color: rgba(255, 255, 255, 0.75); }
.reveal .fsBody {
background: transparent;
padding: 0; }
.reveal .fsBody .fsForm {
margin: 0;
padding: 0;
background: transparent; }
.reveal .fsBody .fsForm .fsSubmit {
margin-top: 0;
padding: 0; }
.reveal .fsBody .fsForm .fsSubmit .fsSubmitButton {
background-color: #0087b7 !important;
border: 2px solid #0087b7 !important;
border-radius: 7.5px !important;
color: #ffffff !important;
box-shadow: none; }
.reveal .fsBody .fsForm .fsSubmit .fsSubmitButton:hover {
color: #0087b7 !important;
background: transparent !important; }
.paragraph form.webform-submission-form {
max-width: 600px;
margin: 0 auto; }
.modal-block-type p {
line-height:1em;
}
/**
* Section
*
* Sections define content regions and create separation form surrounding components.
*
* Markup: section.twig
*
* Weight: 4
*
* Styleguide: containers.section
*/
.section.paper-background {
margin: 0 auto;
padding: 4rem 0 1rem; }
@media print, screen and (min-width: 40em) {
.section.paper-background {
margin: 0 auto; } }
@media print, screen and (min-width: 64em) {
.section.paper-background {
margin: 0 auto; } }
.section.paper-background .section-header {
margin-top: 0;
margin-bottom: 2rem; }
@media print, screen and (min-width: 40em) {
.section.paper-background .section-header {
margin-top: 0; } }
@media print, screen and (min-width: 64em) {
.section.paper-background .section-header {
margin-top: 0; } }
@media print, screen and (min-width: 40em) {
.section.paper-background .section-header {
margin-bottom: 2rem; } }
@media print, screen and (min-width: 64em) {
.section.paper-background .section-header {
margin-bottom: 3rem; } }
/**
* Sub-Section
*
* Sub-Sections create lower-level sections which contain limited content components.
*
* Markup: sub-section.twig
*
* Weight: 4
*
* Styleguide: containers.sub-section
*/
/**
* View
*
* A view that is embedded in the page.
*
* Markup: view-embed.twig
*
* Weight: 4
*
* Styleguide: containers.view-embed
*/
.view-embed__more-button {
text-align: center; }
/**
* View Sub-Section
*
* A subsection that contains a view.
*
* Markup: view-sub-section.twig
*
* Weight: 4
*
* Styleguide: containers.view-sub-section
*/
/**
* Text with Media
*
* The text with media component is used to display a 2 column layout containing both text and media.
*
* Markup: text-with-media.twig
*
* .text-on-left - Text on left
* .text-on-right - Text on Right
*
* Weight: 2
*
* Styleguide: containers.text-with-media
*/
.text-with-media {
text-align: center;
margin-bottom: 3rem; }
.text-with-media__media {
margin-bottom: 2rem; }
@media print, screen and (min-width: 40em) {
.text-with-media__media {
margin-bottom: 0; } }
.text-with-media__text {
text-align: center;
padding-top: 1rem; }
@media print, screen and (min-width: 40em) {
.text-with-media__text {
text-align: left; } }
.text-with-media:not(.text-on-right) .text-with-media__text {
padding-left: 0;
padding-right: 0; }
@media print, screen and (min-width: 40em) {
.text-with-media:not(.text-on-right) .text-with-media__text {
padding-left: 1rem; } }
@media print, screen and (min-width: 64em) {
.text-with-media:not(.text-on-right) .text-with-media__text {
padding-left: 0; } }
@media print, screen and (min-width: 40em) {
.text-with-media:not(.text-on-right) .text-with-media__text {
padding-right: 1rem; } }
.text-with-media.text-on-right .text-with-media__text {
padding-left: 0; }
@media print, screen and (min-width: 40em) {
.text-with-media.text-on-right .text-with-media__text {
padding-left: 1rem; } }
@media print, screen and (min-width: 64em) {
.text-with-media.text-on-right .text-with-media__text {
padding-left: 2rem; } }
@media print, screen and (min-width: 40em) {
.text-with-media {
margin-bottom: 4rem; } }
/**
* Home page slides
*
* There are two types of slideshows that can be added to the home page.
*
* Weight: 4
*
* Styleguide: containers.home-page-slides
*/
/**
* Vertical slides
*
* Vertically oriented slides for the home page.
*
* Markup: vertical-slides.twig
*
* Weight: 0
*
* Styleguide: containers.home-page-slides.vertical
*/
.vertical-slides__container {
color: #ffffff; }
.vertical-slides__container .vertical-slides {
background: #00663c;
position: relative; }
.vertical-slides__container .vertical-slides:before {
content: "";
background: #ffffff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30vw; }
@media screen and (min-width: 90em) {
.vertical-slides__container .vertical-slides:before {
height: 24rem; } }
.vertical-slides__container .home-page-slide__picture {
padding: 0 0.5rem 0.5rem 0.5rem;
margin: 0 -1rem;
position: relative;
background: #ffffff; }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .home-page-slide__picture {
padding: 0 0.5rem 0.5rem 0.5rem; } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .home-page-slide__picture {
padding: 0 1rem 1rem 1rem; } }
.vertical-slides__container .home-page-slide__content__text a.link--arrow {
font-weight: bold;
color: #ffffff; }
.vertical-slides__container .home-page-slide__content__button {
text-align: center; }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .home-page-slide__content__button {
text-align: center; } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .home-page-slide__content__button {
text-align: right; } }
.vertical-slides__container .home-page-slide__content__button .button {
margin-top: 1rem; }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .home-page-slide__content__button .button {
margin-top: 4rem; } }
.vertical-slides__container .slider {
max-width: 100%;
background: transparent;
margin: auto !important; }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .slider {
max-width: calc(100% - 6rem); } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slider {
max-width: calc(100% - 9.5rem); } }
@media screen and (min-width: 90em) {
.vertical-slides__container .slider {
max-width: calc(90rem - 9.5rem); } }
.vertical-slides__container .slick-track {
padding-bottom: 2rem;
padding-top: 0; }
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
background-color: #cecece !important;
display: none !important; }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
width: 4rem; } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
width: 5rem; } }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
height: 4rem; } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
height: 5rem; } }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
top: calc(30vw - 2.5rem); } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
top: calc(30vw - 3.5rem); } }
@media screen and (min-width: 90em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
top: calc(24rem - 3.5rem); } }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
display: none !important; } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-prev,
.vertical-slides__container .slick-next {
display: block !important; } }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .slick-prev {
left: -3rem; } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-prev {
left: -4rem; } }
@media print, screen and (min-width: 40em) {
.vertical-slides__container .slick-next {
right: -3rem; } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-next {
right: -4rem; } }
.vertical-slides__container .slick-dots {
position: relative;
bottom: auto;
top: -4rem;
text-align: center; }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-dots {
top: 1rem; } }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-dots {
text-align: right; } }
.vertical-slides__container .slick-dots li button {
border: 2px solid #ffffff;
background-color: transparent;
box-shadow: 0px 0px 4px #4a4a4a;
opacity: 1; }
@media print, screen and (min-width: 64em) {
.vertical-slides__container .slick-dots li button {
box-shadow: none; } }
.vertical-slides__container .slick-dots li button:hover, .vertical-slides__container .slick-dots li button:focus {
background-color: #ffffff; }
.vertical-slides__container .slick-dots li.slick-active button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='1'] .slick-dots li:nth-child(2) button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='2'] .slick-dots li:nth-child(3) button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='3'] .slick-dots li:nth-child(4) button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='4'] .slick-dots li:nth-child(5) button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='5'] .slick-dots li:nth-child(6) button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='6'] .slick-dots li:nth-child(7) button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='7'] .slick-dots li:nth-child(8) button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='8'] .slick-dots li:nth-child(9) button {
opacity: 1;
background-color: #ffffff; }
.vertical-slides__container .slick-slide[data-slick-index='9'] .slick-dots li:nth-child(10) button {
opacity: 1;
background-color: #ffffff; }
/**
* Horizontal slides
*
* Horizontally oriented slides for the home page.
*
* Markup: horizontal-slides.twig
*
* Weight: 0
*
* Styleguide: containers.home-page-slides.horizontal
*/
.horizontal-slides {
position: relative;
padding-bottom: 2rem; }
@media print, screen and (min-width: 40em) {
.horizontal-slides {
padding-bottom: 4rem; } }
@media screen and (min-width: 90em) {
.horizontal-slides {
padding-bottom: 6rem; } }
.horizontal-slides__background {
position: absolute;
bottom: 0;
height: 70%;
left: 0;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw; }
@media screen and (min-width: 75em) {
.horizontal-slides__background {
height: 50%; } }
.horizontal-slides__slider {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
margin: 0 !important; }
.horizontal-slides__slider .slick-list {
margin-right: 0; }
@media print, screen and (min-width: 40em) {
.horizontal-slides__slider .slick-list {
margin-right: 0; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides__slider .slick-list {
margin-right: 2rem; } }
.horizontal-slides__slider .slick-track {
padding: 0; }
.horizontal-slides__slider .slick-slide {
line-height: 0; }
.horizontal-slides .home-page-slide__nav {
position: relative;
height: 0;
bottom: auto;
width: 100%;
left: auto; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav {
position: absolute; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav {
height: 6rem; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav {
bottom: 1rem; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav {
width: 33.3%; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav {
right: 0; } }
.horizontal-slides .home-page-slide__nav .slick-dots {
position: relative;
top: -3rem;
right: 0;
left: auto;
text-align: center; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav .slick-dots {
top: 2.8rem; } }
@media print, screen and (min-width: 40em) {
.horizontal-slides .home-page-slide__nav .slick-dots {
right: 0; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav .slick-dots {
right: 1.5rem; } }
@media print, screen and (min-width: 40em) {
.horizontal-slides .home-page-slide__nav .slick-dots {
text-align: center; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav .slick-dots {
text-align: right; } }
.horizontal-slides .home-page-slide__nav .slick-dots li {
margin: 0 0.75rem; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav .slick-dots li {
margin: 0 0.5rem; } }
.horizontal-slides .home-page-slide__nav .slick-dots li button {
box-shadow: 0px 0px 4px #4a4a4a;
opacity: 1;
background: transparent;
border-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav .slick-dots li button {
box-shadow: none; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav .slick-dots li button {
border-color: #4a4a4a; } }
.horizontal-slides .home-page-slide__nav .slick-dots li button:hover {
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav .slick-dots li button:hover {
background-color: #4a4a4a; } }
.horizontal-slides .home-page-slide__nav .slick-dots li.slick-active button {
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__nav .slick-dots li.slick-active button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-next,
.horizontal-slides .slick-prev {
display: none !important;
top: unset;
left: unset;
bottom: .5rem;
background-color: transparent !important;
border: 4px solid #4a4a4a;
border-radius: 7.5px;
opacity: 1; }
@media print, screen and (min-width: 40em) {
.horizontal-slides .slick-next,
.horizontal-slides .slick-prev {
display: none !important; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-next,
.horizontal-slides .slick-prev {
display: block !important; } }
.horizontal-slides .slick-next:hover,
.horizontal-slides .slick-prev:hover {
filter: invert(100%);
background-color: #b5b5b5 !important;
border-color: #b5b5b5; }
.horizontal-slides .slick-next {
right: calc(33% - 7rem);
left: auto;
transform: scale(0.5); }
.horizontal-slides .slick-prev {
right: calc(33% - 4rem);
left: auto;
transform: scale(0.5) rotate(180deg); }
.horizontal-slides .home-page-slide__picture picture {
height: 100%; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__picture picture {
min-height: 640px; } }
.horizontal-slides .home-page-slide__picture picture img {
height: 100%;
object-fit: cover; }
.horizontal-slides .home-page-slide__content {
padding: 2rem;
padding-top: 2rem;
padding-bottom: 2rem; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__content {
padding-top: 4rem; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides .home-page-slide__content {
padding-bottom: 6rem; } }
.horizontal-slides .home-page-slide__content__button {
display: block;
margin-top: 2.5rem;
text-align: center; }
.horizontal-slides.alignment--left .horizontal-slides__slider .slick-list {
margin-right: 0;
margin-left: 0; }
@media print, screen and (min-width: 40em) {
.horizontal-slides.alignment--left .horizontal-slides__slider .slick-list {
margin-left: 0; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides.alignment--left .horizontal-slides__slider .slick-list {
margin-left: 2rem; } }
.horizontal-slides.alignment--left .slick-next {
left: calc(33% - 4rem);
right: auto; }
.horizontal-slides.alignment--left .slick-prev {
left: calc(33% - 7rem);
right: auto; }
.horizontal-slides.alignment--left .home-page-slide__nav {
right: auto; }
@media print, screen and (min-width: 64em) {
.horizontal-slides.alignment--left .home-page-slide__nav {
left: 0; } }
.horizontal-slides.alignment--left .home-page-slide__nav .slick-dots {
text-align: center;
left: 0;
right: auto; }
@media print, screen and (min-width: 40em) {
.horizontal-slides.alignment--left .home-page-slide__nav .slick-dots {
text-align: center; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides.alignment--left .home-page-slide__nav .slick-dots {
text-align: left; } }
@media print, screen and (min-width: 40em) {
.horizontal-slides.alignment--left .home-page-slide__nav .slick-dots {
left: 0; } }
@media print, screen and (min-width: 64em) {
.horizontal-slides.alignment--left .home-page-slide__nav .slick-dots {
left: 1.5rem; } }
.horizontal-slides.style--solid .horizontal-slides__slider {
background-image: none; }
.horizontal-slides.style--solid .slick-list {
margin: 0 !important; }
.horizontal-slides.style--solid .slick-next {
right: calc(33% - 8.5rem); }
.horizontal-slides.style--solid .slick-prev {
right: calc(33% - 5.5rem); }
.horizontal-slides.style--solid.alignment--left .slick-next {
left: calc(33% - 5.5rem); }
.horizontal-slides.style--solid.alignment--left .slick-prev {
left: calc(33% - 8.5rem); }
.horizontal-slides.style--pattern .horizontal-slides__background {
background: #f2efed;
opacity: .5; }
.horizontal-slides .slick-slide[data-slick-index='1'] .slick-dots li:nth-child(2) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='1'] .slick-dots li:nth-child(2) button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-slide[data-slick-index='2'] .slick-dots li:nth-child(3) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='2'] .slick-dots li:nth-child(3) button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-slide[data-slick-index='3'] .slick-dots li:nth-child(4) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='3'] .slick-dots li:nth-child(4) button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-slide[data-slick-index='4'] .slick-dots li:nth-child(5) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='4'] .slick-dots li:nth-child(5) button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-slide[data-slick-index='5'] .slick-dots li:nth-child(6) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='5'] .slick-dots li:nth-child(6) button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-slide[data-slick-index='6'] .slick-dots li:nth-child(7) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='6'] .slick-dots li:nth-child(7) button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-slide[data-slick-index='7'] .slick-dots li:nth-child(8) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='7'] .slick-dots li:nth-child(8) button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-slide[data-slick-index='8'] .slick-dots li:nth-child(9) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='8'] .slick-dots li:nth-child(9) button {
background-color: #4a4a4a; } }
.horizontal-slides .slick-slide[data-slick-index='9'] .slick-dots li:nth-child(10) button {
opacity: 1;
background-color: #ffffff; }
@media print, screen and (min-width: 64em) {
.horizontal-slides .slick-slide[data-slick-index='9'] .slick-dots li:nth-child(10) button {
background-color: #4a4a4a; } }
/**
* Jump Section
*
* A collection of sections with a jump menu.
*
* Markup: jump-sections.twig
*
* Weight: 6
*
* Styleguide: containers.jump-sections
*/
/*
9. Heros, headers, and footer
The header, footer, and dropdown menus.
weight: 9
Styleguide template
*/
/**
* Hero
*
* The hero at the top of pages containing the title and photo.
*
* Weight: 0
*
* Styleguide: template.hero
*/
/**
* Photo Hero
*
* This is a hero with background image for landing pages
*
* Markup: hero--photo.twig
*
* Weight: 0
*
* Styleguide: template.hero.photo
*/
.hero--photo {
position: relative;
color: #ffffff; }
.hero--photo .h1-intro:before {
background: #ffffff; }
.hero--photo h1 {
line-height: 1; }
@media screen and (min-width: 75em) {
.hero--photo h1 {
margin: 0; } }
.hero--photo h1 .field--name-title {
font-size: 3.125rem;
line-height: 1;
margin: 1rem 0 2rem 0; }
@media print, screen and (min-width: 40em) {
.hero--photo h1 .field--name-title {
font-size: 4.0625rem; } }
@media print, screen and (min-width: 64em) {
.hero--photo h1 .field--name-title {
font-size: 5.625rem; } }
@media screen and (min-width: 75em) {
.hero--photo h1 .field--name-title {
font-size: 6.25rem; } }
@media screen and (min-width: 90em) {
.hero--photo h1 .field--name-title {
line-height: 1.3; } }
.hero--photo .hero__bg {
position: relative;
overflow: hidden;
padding-bottom: 137.5%;
background-color: #cecece; }
@media print, screen and (min-width: 40em) {
.hero--photo .hero__bg {
padding-bottom: 50%; } }
@media print, screen and (min-width: 64em) {
.hero--photo .hero__bg {
padding-bottom: 44.4%; } }
.hero--photo .hero__bg picture,
.hero--photo .hero__bg img {
position: absolute;
width: 100%;
height: auto; }
@media print, screen and (min-width: 40em) {
.hero--photo .hero__bg .video {
position: absolute;
width: 100%;
height: auto;
transform: scale(1.2); } }
@media print, screen and (min-width: 64em) {
.hero--photo .hero__bg .video {
transform: scale(1);
top: -5rem; } }
.hero--photo .hero__content {
position: absolute;
top: 0;
width: 100%;
height:100%; }
.hero--photo .hero__content .image-with-text {
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
height: 100%; }
@media print, screen and (min-width: 40em) {
.hero--photo .hero__content {
justify-content: center; } }
@media print, screen and (min-width: 40em) {
.hero--photo.with-arrow .hero__content {
justify-content: flex-end; } }
@media screen and (min-width: 75em) {
.hero--photo.with-arrow .hero__content {
/*height: 50%;*/ } }
.hero--photo.with-button h1 {
font-size: 1.875rem;
line-height: 1;
margin: 1rem 0 2rem 0;
color: #ffffff; }
@media print, screen and (min-width: 40em) {
.hero--photo.with-button h1 {
font-size: 2.5rem; } }
@media print, screen and (min-width: 64em) {
.hero--photo.with-button h1 {
font-size: 3.125rem; } }
@media screen and (min-width: 75em) {
.hero--photo.with-button h1 {
font-size: 3.875rem; } }
@media screen and (min-width: 90em) {
.hero--photo.with-button h1 {
line-height: 1.3; } }
.hero--photo.with-button .hero__content {
justify-content: center;
background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.5) 90%); }
.hero--photo.with-button .hero__content > .grid-container, .hero--photo.with-button .hero__content > .section-header, .hero--photo.with-button .hero__content > .cards-container, .hero--photo.with-button .vertical-slides__container .hero__content > .home-page-slide, .vertical-slides__container .hero--photo.with-button .hero__content > .home-page-slide, .hero--photo.with-button .vertical-slides__container .hero__content > .slider, .vertical-slides__container .hero--photo.with-button .hero__content > .slider, .hero--photo.with-button .hero__content > .horizontal-slides, .hero--photo.with-button .search-form .hero__content > .search-form__inner, .search-form .hero--photo.with-button .hero__content > .search-form__inner, .hero--photo.with-button nav.tabs .hero__content > .tabs.primary, nav.tabs .hero--photo.with-button .hero__content > .tabs.primary {
max-width: 60rem; }
.hero--photo.with-button .hero__button a {
margin-bottom: 0; }
@media screen and (max-width: 39.99875em) {
.hero--photo.overlay .hero__content {
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.7) 80%); } }
@media print, screen and (min-width: 40em) {
.hero--photo.overlay .hero__bg img {
filter: brightness(0.85); } }
.hero--photo .hero__icon {
margin: 0; }
@media screen and (min-width: 75em) {
.hero--photo .hero__icon {
margin: 10rem 0 0 ;
width: 100%; } }
.hero--photo .hero__icon svg {
width: 12px; }
@media print, screen and (min-width: 40em) {
.hero--photo .hero__icon svg {
width: 18px;
margin: auto; } }
@media screen and (min-width: 75em) {
.hero--photo .hero__icon svg {
width: 24px; } }
.hero--photo .hero__icon.anniversary svg {
width: 88px;
left: calc(50% - 44px);
margin-top: 0.5em; }
.hero--photo .h1-intro:before {
transition: width 1s ease-in-out; }
.hero--photo .h1-intro__text,
.hero--photo h1,
.hero--photo .hero__button {
transition: opacity 1s ease-in 0.5s; }
.hero--photo svg {
transition: opacity 1s ease-in 1.0s, top 2s ease-out 0.5s; }
.hero--photo.before-load h1, .hero--photo.before-load .h1-intro__text, .hero--photo.before-load .hero__button {
transition: none !important;
opacity: 0; }
.hero--photo.before-load .h1-intro::before {
transition: none !important;
width: 0; }
.hero--photo.before-load svg {
transition: none !important;
opacity: 0;
top: -30px; }
@media screen and (min-width: 75em) {
.hero--photo.before-load .hero-icon {
justify-content: start; } }
/**
* Pattern Hero
*
* Hero with a pattern scheme and optional photo for basic and blog pages.
*
* Markup: hero--pattern.twig
*
* .scheme--green - Green
* .scheme--orange - Orange
*
* Weight: 0
*
* Styleguide: template.hero.pattern
*/
.hero--pattern {
margin-bottom: 3rem;
color: #ffffff;
text-align: center;
position: relative; }
.hero--pattern .hero__content {
position: relative;
z-index: 1;
margin: 0 auto;
padding: 1px 1rem;
padding-top: 4rem; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__content {
padding-top: 4rem; } }
@media print, screen and (min-width: 64em) {
.hero--pattern .hero__content {
padding-top: 5rem; } }
@media screen and (min-width: 75em) {
.hero--pattern .hero__content {
padding-top: 6rem; } }
.hero--pattern .hero__content.has-picture {
padding-top: 4rem;
padding-bottom: 6rem; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__content.has-picture {
padding-top: 4rem; } }
@media print, screen and (min-width: 64em) {
.hero--pattern .hero__content.has-picture {
padding-top: 4rem; } }
@media screen and (min-width: 75em) {
.hero--pattern .hero__content.has-picture {
padding-top: 4rem; } }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__content {
background-position: left -20rem bottom -20rem; } }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__content::before {
background-position: right -15rem top -15rem;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: " "; } }
.hero--pattern .hero__content > * {
position: relative;
z-index: 1; }
@media print, screen and (min-width: 64em) {
.hero--pattern .hero__content > * {
max-width: 66%; } }
.hero--pattern .hero__content .h1-intro::before {
display: none; }
.hero--pattern .hero__content h1 {
margin: 0 auto;
color: #ffffff;
line-height: 1.2; }
@media screen and (max-width: 39.99875em) {
.hero--pattern .hero__content h1 {
font-size: 2.2rem; } }
.hero--pattern .hero__content.no-h1-intro h1 {
padding-top: 2rem; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__content.no-h1-intro h1 {
padding-top: 3rem; } }
@media print, screen and (min-width: 64em) {
.hero--pattern .hero__content.no-h1-intro h1 {
padding-top: 4rem; } }
.hero--pattern .hero__content .hero__icon {
margin: 1rem auto; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__content .hero__icon {
margin: 2rem auto; } }
@media print, screen and (min-width: 64em) {
.hero--pattern .hero__content .hero__icon {
margin: 3rem auto; } }
.hero--pattern .hero__content .hero__icon svg {
width: 12px; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__content .hero__icon svg {
width: 15px; } }
@media print, screen and (min-width: 64em) {
.hero--pattern .hero__content .hero__icon svg {
width: 18px; } }
.hero--pattern .hero__content.has-picture .hero__icon {
margin: 1.5rem auto 2rem; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__content.has-picture .hero__icon {
margin: 1.5rem auto 2rem; } }
@media print, screen and (min-width: 64em) {
.hero--pattern .hero__content.has-picture .hero__icon {
margin: 1.5rem auto 2rem; } }
.hero--pattern .hero__border {
height: 1.5rem;
background-repeat: repeat-x !important; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__border {
height: 2rem; } }
.hero--pattern .hero__picture {
position: relative;
z-index: 2;
margin-top: -7.5rem; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__picture {
margin-top: -8rem; } }
.hero--pattern .hero__picture .video-wrapper,
.hero--pattern .hero__picture picture {
background: white;
padding: 1rem 1rem 0 1rem;
margin: 0; }
@media print, screen and (min-width: 40em) {
.hero--pattern .hero__picture .video-wrapper,
.hero--pattern .hero__picture picture {
margin: 0; } }
@media print, screen and (min-width: 64em) {
.hero--pattern .hero__picture .video-wrapper,
.hero--pattern .hero__picture picture {
margin: 0 -1rem; } }
.hero--pattern .hero__picture .video-wrapper img,
.hero--pattern .hero__picture picture img {
width: 100%; }
/**
* Hero with paper
*
* A photo hero with overlapping paper component, used on landing page and home page.
*
* Markup: hero-with-paper.twig
*
* Weight: 4
*
* Styleguide: template.hero-with-paper
*/
.hero-with-paper .hero {
position: relative;
z-index: 0; }
.hero-with-paper .hero.with-button .hero__button {
margin-bottom: 3rem; }
@media print, screen and (min-width: 40em) {
.hero-with-paper .hero.with-button .hero__button {
margin-bottom: 2rem; } }
@media print, screen and (min-width: 64em) {
.hero-with-paper .hero.with-button .hero__button {
margin-bottom: 8rem; } }
.hero-with-paper .paper-area {
background-position: uset; }
@media screen and (max-width: 63.99875em) {
.hero-with-paper .paper-area {
background-image: none; } }
@media print, screen and (min-width: 40em) {
.hero-with-paper .paper-area {
background-position: unset; } }
@media print, screen and (min-width: 64em) {
.hero-with-paper .paper-area {
background-position: right -25rem top -4rem; } }
@media screen and (min-width: 75em) {
.hero-with-paper .paper-area {
background-position: right -22rem top -4rem; } }
.hero-with-paper .paper-wrapper {
position: relative;
z-index: 1;
margin-top: -4rem; }
@media print, screen and (min-width: 64em) {
.hero-with-paper .paper-wrapper {
margin-top: -9rem; } }
@media print, screen and (min-width: 64em) {
.site-header {
padding: 0 2rem;
margin: auto; } }
.site-header .title-bar {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
position: relative;
z-index: 1;
overflow: hidden; }
@media print, screen and (min-width: 64em) {
.site-header .title-bar {
display: none;
box-shadow: none; } }
.site-header .top-bar {
padding: 0; }
@media print, screen and (min-width: 64em) {
.site-header .top-bar {
padding: 1rem 0; } }
.site-header .title-bar-right {
display: inline-flex;
align-items: center; }
.site-header .top-bar-right {
width: 100%;
margin-left: 0; }
@media print, screen and (min-width: 64em) {
.site-header .top-bar-right {
width: auto;
margin-left: auto;
display: inline-flex;
align-items: center; } }
.site-header .logo {
margin-right: .5rem; }
.site-header .button--donate,
.site-header .button:first-child {
margin: 0 1rem 0 auto;
padding: .75em 1em; }
@media print, screen and (min-width: 64em) {
.site-header .button--donate,
.site-header .button:first-child {
margin: 0 .5rem;
padding: 0.85em 2em; } }
@media screen and (min-width: 75em) {
.site-header .button--donate,
.site-header .button:first-child {
margin: 0 1.5rem; } }
header.sticky-container {
z-index: 99;
display: flex;
flex-flow: column; }
header.sticky-container.open .site-header {
height: 100vh !important;
overflow-x: hidden;
overflow-y: auto; }
.site-header-wrapper {
background: #ffffff;
z-index: 5 !important;
max-width: none !important; }
@media print, screen and (min-width: 64em) {
.site-header-wrapper {
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25); } }
.site-header-wrapper > .grid-container, .site-header-wrapper > .section-header, .site-header-wrapper > .cards-container, .vertical-slides__container .site-header-wrapper > .home-page-slide, .vertical-slides__container .site-header-wrapper > .slider, .site-header-wrapper > .horizontal-slides, .search-form .site-header-wrapper > .search-form__inner, nav.tabs .site-header-wrapper > .tabs.primary {
padding: 0; }
.go-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
cursor: pointer;
font-size: 3em;
color:#fff;
box-shadow: none;
border-radius:0.5rem;
filter: drop-shadow(1px 5px 2px rgba(42, 41, 41, 0.3));
transition: translate 1s;
}
.go-to-top:hover {
transform:translate(0, -4px);
}
.paragraph-floating-cta {
z-index: 999;
position: fixed;
right: 5em;
bottom: 2em;
transition: translate 1s
}
.paragraph-floating-cta:hover {
transform:translate(0, -4px);
}
/*
Footer
The site footer.
weight: 1
Markup: site-footer.html.twig
Styleguide template.footer
*/
footer {
background: #00663c;
color: #ffffff;
padding: 2rem 1rem; }
@media print, screen and (min-width: 64em) {
footer {
padding: 4rem; } }
footer a {
font-weight: bold;
color: #ffffff; }
footer a:hover, footer a:active {
color: #ffffff;
text-decoration: underline; }
footer .footer--menu .menu li, footer .footer--menu .social-sharing li {
margin-bottom: 1rem;
float: left;
width: 50%; }
@media print, screen and (min-width: 64em) {
footer .footer--menu .menu li, footer .footer--menu .social-sharing li {
float: none;
width: 100%; } }
footer .footer--menu .menu li:last-child, footer .footer--menu .social-sharing li:last-child {
margin-bottom: 0; }
footer .footer--menu .menu li a, footer .footer--menu .social-sharing li a {
padding: 0; }
@media print, screen and (min-width: 64em) {
footer .footer--address {
border-right: 1px solid white; } }
@media screen and (max-width: 63.99875em) {
footer .footer--address {
border-top: 1px solid white;
padding-top: 2rem; } }
footer .footer--newsletter {
margin-bottom: 2rem; }
footer .footer--newsletter input {
display: inline-block;
vertical-align: middle;
width: auto;
border: 2px solid white !important;
margin: .5rem 0 0 0;
padding: .5em; }
footer .footer--newsletter input[type='textbox'] {
border-radius: 4px 0 0 4px !important;
background: #00663c;
color: #ffffff; }
footer .footer--newsletter input[type='textbox']::placeholder {
color: #ffffff;
opacity: 0.5; }
@media screen and (max-width: 63.99875em) {
footer .footer--newsletter input[type='textbox'] {
max-width: 60%; } }
footer .footer--newsletter input[type='submit'] {
border-radius: 0 4px 4px 0 !important;
border-left-width: 0 !important;
font-size: 1rem;
margin: 0.5rem 0 0 0;
padding: 0.7rem 1.5rem; }
footer .footer--newsletter button {
border-radius: 0 4px 4px 0 !important;
border-left-width: 0 !important;
font-size: 1rem;
margin: 0.5rem 0 0 0;
padding: 0.7rem 1.5rem; }
footer .footer--newsletter tr[style*="red"],
footer .footer--newsletter div[style*="red"] {
color: white !important;
background: #00663c;
font-size: .9rem;
font-style: italic; }
footer .footer--newsletter tr[style*="red"] td,
footer .footer--newsletter div[style*="red"] td {
font-size: .9rem; }
footer .footer--social a {
display: inline-block;
margin-right: .5rem;
border: 2px solid transparent;
border-radius: 6px; }
footer .footer--social a:hover {
fill: #00663c;
stroke: #00663c; }
footer .footer--social a:after {
background: #ffffff; }
/*
Search Form
The header search form.
weight: 2
Markup: search-form.twig
Styleguide template.search-form
*/
.search-form {
display: block;
padding: 1.25rem 0;
background: #ffffff;
width: 100vw; }
@media print, screen and (min-width: 64em) {
.search-form {
display: none;
padding: 2rem 0 3rem 0;
position: absolute;
z-index: 99;
top: 5rem;
left: 0;
width: 100vw; } }
.focus.search-form .search-form__input {
color: #4a4a4a; }
@media print, screen and (min-width: 64em) {
.focus.search-form .search-form__submit input[type="submit"] {
color: #4a4a4a; } }
.search-form .search-form__inner {
padding: 0 1.25rem;
position: relative; }
.search-form .search-form__icon {
position: absolute;
z-index: 2;
height: 2rem;
width: 2rem;
right: .75rem;
top: calc(50% - 1rem); }
@media print, screen and (min-width: 64em) {
.search-form .search-form__icon {
left: 2rem; } }
.search-form .search-form__icon svg {
transition: all .25s ease-in-out; }
.search-form .search-form__input {
font-size: 1rem;
transition: color .25s ease-in-out;
padding: 1rem 0;
line-height: 1;
margin: 0;
color: #cac4bc;
border: none !important;
box-shadow: none !important; }
@media print, screen and (min-width: 40em) {
.search-form .search-form__input {
font-size: 1rem; } }
@media print, screen and (min-width: 64em) {
.search-form .search-form__input {
font-size: 3.75rem; } }
@media print, screen and (min-width: 64em) {
.search-form .search-form__input {
padding: 2.5rem 0; } }
.search-form .search-form__input::placeholder {
color: #cac4bc; }
.search-form .search-form__submit {
margin: 0; }
.search-form .search-form__submit input[type="submit"] {
font-size: 1.25rem;
font-weight: 500;
margin: 0;
padding: 0;
background: transparent;
text-transform: lowercase;
color: transparent;
width: 2rem;
border: none !important;
box-shadow: none !important; }
@media print, screen and (min-width: 64em) {
.search-form .search-form__submit input[type="submit"] {
padding: 0 0 0 1rem;
width: auto;
color: #cac4bc; } }
.search-form form {
position: relative;
z-index: 1; }
.search-form form:after {
background: #51b1b6;
display: block;
position: relative;
clear: both;
width: 100%;
height: 3px;
border-radius: 1000rem;
content: ''; }
.search-form .input-group {
margin-bottom: 0; }
@media print, screen and (min-width: 64em) {
.search-form .input-group {
padding-left: 3rem; } }
.search-block-form div,
.search-block-form label {
display: inline-block; }
.search-block-form .form-type-search {
margin: 0;
width: 85%; }
@media print, screen and (min-width: 64em) {
.search-block-form .input-group .form-actions {
vertical-align: top;
margin-top: 25px; } }
body.path-search #block-naturebridge-content {
width: 66%;
margin-left: auto;
margin-right: auto; }
body.path-search #block-naturebridge-content form.search-form {
width: 100%; }
@media print, screen and (min-width: 64em) {
body.path-search #block-naturebridge-content form.search-form {
display: block;
position: static;
margin-top: 40px; } }
body.path-search #block-naturebridge-content form.search-form #edit-basic {
display: flex; }
body.path-search #block-naturebridge-content form.search-form .form-item-keys {
width: 100%;
margin: 0; }
body.path-search #block-naturebridge-content form.search-form .form-search {
margin-bottom: 0;
border-radius: 4px 0 0 4px;
border-width: 2px; }
body.path-search #block-naturebridge-content form.search-form .form-submit {
margin: 0;
border-radius: 0px 7.5px 7.5px 0px;
padding-top: 9px;
padding-bottom: 9px;
position: relative;
left: -2px; }
body.path-search ol.search-results {
margin-left: 0; }
body.path-search ol.search-results li {
margin-left: 0; }
/*
Page templates
Templates for all the different content types.
*/
/**
* Blog article
*
* Page template for blog articles.
*
*/
/**
* Basic page
*
* Page template for basic pages.
*
*/
/**
* Event page
*
* Page template for event pages.
*
*/
/**
* Home page
*
* Page template for the home page content type.
*
*/
/**
* Landing pages
*
* Page template for landing pages.
*
*/
.sponsor-paragraph {
max-width: 90em;
margin: 1em auto; }
.sponsor-paragraph.grid .field--name-field-sponsor {
display: grid;
grid-gap: 1em 0.25em;
align-items: center; }
.sponsor-paragraph.grid .field--name-field-sponsor .field__item {
text-align: center; }
@media print, screen and (min-width: 40em) {
.sponsor-paragraph.grid-three .field--name-field-sponsor {
grid-template-columns: repeat(3, 1fr); }
.sponsor-paragraph.grid-four .field--name-field-sponsor {
grid-template-columns: repeat(4, 1fr); }
.sponsor-paragraph.grid-five .field--name-field-sponsor {
grid-template-columns: repeat(5, 1fr); }
.sponsor-paragraph.grid-six .field--name-field-sponsor {
grid-template-columns: repeat(6, 1fr); }
.sponsor-paragraph.grid-seven .field--name-field-sponsor {
grid-template-columns: repeat(7, 1fr); }
.sponsor-paragraph.grid-eight .field--name-field-sponsor {
grid-template-columns: repeat(8, 1fr); } }
#modal-block--block-50thanniversary,
#modal-block--block-50thanniversarymodal {
width: 100%;
max-width: 100%;
background-color: transparent;
border: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
outline: none; }
@media print, screen and (min-width: 40em) {
#modal-block--block-50thanniversary,
#modal-block--block-50thanniversarymodal {
width: 70vw;
max-width: 70vw; } }
@media (min-width: 1200px) {
#anniversary-map-wrapper {
display: grid;
grid-gap: 3em;
grid-template-columns: 3fr 1fr;
margin-left: -120px;
width: 1200px; } }
#anniversary-map {
z-index: 10;
position: relative; }
@media print, screen and (min-width: 64em) {
#anniversary-map {
left: 0; } }
@media print, screen and (min-width: 64em) {
#anniversary-map > .park.olympic-national-park {
top: 2%;
left: 8%;
width: 15%;
height: 17%; }
#anniversary-map > .park.yosemite-national-park {
top: 32%;
left: 14%;
width: 13%;
height: 23%; }
#anniversary-map > .park.golden-gate-national-recreation-area {
top: 38%;
left: 1%;
width: 12.5%;
height: 17%; }
#anniversary-map > .park.prince-william-forest-park {
top: 35%;
right: 6%;
width: 13%;
height: 19%; } }
@media print, screen and (min-width: 64em) {
#anniversary-map > .park {
position: absolute; } }
#anniversary-map > .park .card {
padding: 1em;
margin-bottom: 2em; }
@media print, screen and (min-width: 64em) {
#anniversary-map > .park .card {
width: 400px;
position: absolute;
right: -400px;
opacity: 0;
margin-top: 1em; }
#anniversary-map > .park .card.right {
left: -400px; } }
#anniversary-map > .park .card h6 {
margin-bottom: 0.25em;
color: #6b9e34; }
#anniversary-map > .park:hover .card {
display: block;
opacity: 100%;
margin-top: 0;
transition: opacity 0.5s, margin 0.5s; }
#anniversary-infographic .card {
padding: 1em;
margin-bottom: 2em; }
#anniversary-infographic .card h5, #anniversary-infographic .card h6 {
text-align: center; }
#anniversary-infographic .card a {
text-decoration: none; }
#modal-block--block-50thanniversarymodal .field--name-body {
text-align: center; }
/**
* Location
*
* Page template for location pages.
*
*/
/**
* Press release
*
* Page template for press release.
*
*/
/**
* Leadership profile
*
* Page template for leadership profiles.
*
*/
/**
* Program page
*
* Page template for program pages.
*
*/
.node-text-view {
margin-bottom: 30px; }
figure[role="group"] {
margin-top: 10px;
margin-bottom: 10px; }
figure[role="group"].align-right {
margin-left: 10px; }
figure[role="group"].align-left {
margin-right: 10px; }
img.align-right {
margin-left: 10px; }
img.align-left {
margin-right: 10px; }
body.kstat-prototype::after,
body#kss-node::after {
position: fixed;
bottom: 0;
right: 0;
padding: .5rem 1rem;
opacity: .8;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff; }
@media screen and (max-width: 39.99875em) {
body.kstat-prototype::after,
body#kss-node::after {
content: "small";
background: #cecece; } }
@media screen and (min-width: 40em) and (max-width: 63.99875em) {
body.kstat-prototype::after,
body#kss-node::after {
content: "medium";
background: #dc582b; } }
@media screen and (min-width: 64em) and (max-width: 74.99875em) {
body.kstat-prototype::after,
body#kss-node::after {
content: "large";
background: #efc210; } }
@media screen and (min-width: 75em) and (max-width: 89.99875em) {
body.kstat-prototype::after,
body#kss-node::after {
content: "xlarge";
background: #6b9e34; } }
@media screen and (min-width: 90em) {
body.kstat-prototype::after,
body#kss-node::after {
content: "xxlarge";
background: #8ed1dd; } }
.title-block {
padding-left: 0; }
#kss-node .kss-section {
margin-bottom: 0; }
.kss-section--depth-3 {
margin-left: 2em;
border-left: 2px solid #dedede; }
.kss-title--level-1 {
font-size: 62px; }
.kss-title--level-2 {
font-size: 40px;
color: #4A4A4A; }
.kss-title--level-3 {
font-size: 24px;
color: #4A4A4A; }
.component_details .controls a {
background: #999; }
.kss-sidebar ul .kss-nav__menu-child a {
font-size: .8rem;
font-weight: normal;
padding: .25rem .25rem .25rem 2rem; }
.kss-margin-example div {
line-height: 1rem;
background: #8ed1dd;
width: 600px; }
.kss-margin-example div.margin-xs {
padding: .25rem;
margin-bottom: .25rem; }
.kss-margin-example div.margin-s {
padding: .5rem;
margin-bottom: .5rem; }
.kss-margin-example div.margin-m {
padding: 1rem;
margin-bottom: 1rem; }
.kss-margin-example div.margin-l {
padding: 2rem;
margin-bottom: 2rem; }
.kss-margin-example div.margin-xl {
padding: 4rem;
margin-bottom: 4rem; }
.breakpoint-demo {
background: #8ed1dd;
margin-bottom: .5rem;
padding: .5rem;
max-width: 100% !important; }
.breakpoint-demo.breakpoint-demo-small {
width: 640px; }
.breakpoint-demo.breakpoint-demo-medium {
width: 1024px; }
.breakpoint-demo.breakpoint-demo-large {
width: 1200px; }
.breakpoint-demo.breakpoint-demo-xlarge {
width: 1440px; }
.kss-default__example .grid-x.demo, .kss-default__example .menu--primary .demo.mega-menu, .menu--primary .kss-default__example .demo.mega-menu, .kss-default__example .card-orientation-horizontal .demo.card, .card-orientation-horizontal .kss-default__example .demo.card,
.kss-default__example .demo.card.card-orientation-horizontal, .kss-default__example .vertical-slides__container .demo.home-page-slide__content, .vertical-slides__container .kss-default__example .demo.home-page-slide__content, .kss-default__example .horizontal-slides .demo.home-page-slide, .horizontal-slides .kss-default__example .demo.home-page-slide,
.kss-default__example .grid-y.demo {
background: #cecece;
font-size: 12px;
line-height: 2rem;
margin-bottom: 1.5rem; }
.kss-default__example .grid-x.demo .cell:nth-child(odd), .kss-default__example .menu--primary .demo.mega-menu .cell:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .cell:nth-child(odd), .kss-default__example .card-orientation-horizontal .demo.card .cell:nth-child(odd), .card-orientation-horizontal .kss-default__example .demo.card .cell:nth-child(odd), .kss-default__example .demo.card.card-orientation-horizontal .cell:nth-child(odd), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .cell:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .cell:nth-child(odd), .kss-default__example .horizontal-slides .demo.home-page-slide .cell:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .cell:nth-child(odd), .kss-default__example .grid-x.demo .menu--primary .mega-menu-column:nth-child(odd), .menu--primary .kss-default__example .grid-x.demo .mega-menu-column:nth-child(odd), .kss-default__example .menu--primary .demo.mega-menu .mega-menu-column:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .mega-menu-column:nth-child(odd), .kss-default__example .card-orientation-horizontal .demo.card .menu--primary .mega-menu-column:nth-child(odd), .menu--primary .kss-default__example .card-orientation-horizontal .demo.card .mega-menu-column:nth-child(odd), .card-orientation-horizontal .kss-default__example .demo.card .menu--primary .mega-menu-column:nth-child(odd), .menu--primary .card-orientation-horizontal .kss-default__example .demo.card .mega-menu-column:nth-child(odd), .kss-default__example .demo.card.card-orientation-horizontal .menu--primary .mega-menu-column:nth-child(odd), .menu--primary .kss-default__example .demo.card.card-orientation-horizontal .mega-menu-column:nth-child(odd), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .menu--primary .mega-menu-column:nth-child(odd), .menu--primary .kss-default__example .vertical-slides__container .demo.home-page-slide__content .mega-menu-column:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .menu--primary .mega-menu-column:nth-child(odd), .menu--primary .vertical-slides__container .kss-default__example .demo.home-page-slide__content .mega-menu-column:nth-child(odd), .kss-default__example .horizontal-slides .demo.home-page-slide .menu--primary .mega-menu-column:nth-child(odd), .menu--primary .kss-default__example .horizontal-slides .demo.home-page-slide .mega-menu-column:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .menu--primary .mega-menu-column:nth-child(odd), .menu--primary .horizontal-slides .kss-default__example .demo.home-page-slide .mega-menu-column:nth-child(odd), .kss-default__example .grid-x.demo .video-player-with-overlay__player:nth-child(odd), .kss-default__example .menu--primary .demo.mega-menu .video-player-with-overlay__player:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .video-player-with-overlay__player:nth-child(odd), .kss-default__example .card-orientation-horizontal .demo.card .video-player-with-overlay__player:nth-child(odd), .card-orientation-horizontal .kss-default__example .demo.card .video-player-with-overlay__player:nth-child(odd), .kss-default__example .demo.card.card-orientation-horizontal .video-player-with-overlay__player:nth-child(odd), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .video-player-with-overlay__player:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .video-player-with-overlay__player:nth-child(odd), .kss-default__example .horizontal-slides .demo.home-page-slide .video-player-with-overlay__player:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .video-player-with-overlay__player:nth-child(odd), .kss-default__example .grid-x.demo .card-orientation-horizontal .card .card__image:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .grid-x.demo .card__image:nth-child(odd), .kss-default__example .menu--primary .demo.mega-menu .card-orientation-horizontal .card .card__image:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .menu--primary .demo.mega-menu .card__image:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .card-orientation-horizontal .card .card__image:nth-child(odd), .card-orientation-horizontal .card .menu--primary .kss-default__example .demo.mega-menu .card__image:nth-child(odd), .kss-default__example .card-orientation-horizontal .demo.card .card__image:nth-child(odd), .card-orientation-horizontal .kss-default__example .demo.card .card__image:nth-child(odd), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card-orientation-horizontal .card .card__image:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__image:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card-orientation-horizontal .card .card__image:nth-child(odd), .card-orientation-horizontal .card .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__image:nth-child(odd), .kss-default__example .horizontal-slides .demo.home-page-slide .card-orientation-horizontal .card .card__image:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .horizontal-slides .demo.home-page-slide .card__image:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .card-orientation-horizontal .card .card__image:nth-child(odd), .card-orientation-horizontal .card .horizontal-slides .kss-default__example .demo.home-page-slide .card__image:nth-child(odd),
.kss-default__example .grid-x.demo .card.card-orientation-horizontal .card__image:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .grid-x.demo .card__image:nth-child(odd),
.kss-default__example .menu--primary .demo.mega-menu .card.card-orientation-horizontal .card__image:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .menu--primary .demo.mega-menu .card__image:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .card.card-orientation-horizontal .card__image:nth-child(odd), .card.card-orientation-horizontal .menu--primary .kss-default__example .demo.mega-menu .card__image:nth-child(odd),
.kss-default__example .demo.card.card-orientation-horizontal .card__image:nth-child(odd),
.kss-default__example .vertical-slides__container .demo.home-page-slide__content .card.card-orientation-horizontal .card__image:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__image:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card.card-orientation-horizontal .card__image:nth-child(odd), .card.card-orientation-horizontal .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__image:nth-child(odd),
.kss-default__example .horizontal-slides .demo.home-page-slide .card.card-orientation-horizontal .card__image:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .horizontal-slides .demo.home-page-slide .card__image:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .card.card-orientation-horizontal .card__image:nth-child(odd), .card.card-orientation-horizontal .horizontal-slides .kss-default__example .demo.home-page-slide .card__image:nth-child(odd), .kss-default__example .grid-x.demo .card-orientation-horizontal .card .card__content:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .grid-x.demo .card__content:nth-child(odd), .kss-default__example .menu--primary .demo.mega-menu .card-orientation-horizontal .card .card__content:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .menu--primary .demo.mega-menu .card__content:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .card-orientation-horizontal .card .card__content:nth-child(odd), .card-orientation-horizontal .card .menu--primary .kss-default__example .demo.mega-menu .card__content:nth-child(odd), .kss-default__example .card-orientation-horizontal .demo.card .card__content:nth-child(odd), .card-orientation-horizontal .kss-default__example .demo.card .card__content:nth-child(odd), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card-orientation-horizontal .card .card__content:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__content:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card-orientation-horizontal .card .card__content:nth-child(odd), .card-orientation-horizontal .card .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__content:nth-child(odd), .kss-default__example .horizontal-slides .demo.home-page-slide .card-orientation-horizontal .card .card__content:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .horizontal-slides .demo.home-page-slide .card__content:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .card-orientation-horizontal .card .card__content:nth-child(odd), .card-orientation-horizontal .card .horizontal-slides .kss-default__example .demo.home-page-slide .card__content:nth-child(odd),
.kss-default__example .grid-x.demo .card.card-orientation-horizontal .card__content:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .grid-x.demo .card__content:nth-child(odd),
.kss-default__example .menu--primary .demo.mega-menu .card.card-orientation-horizontal .card__content:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .menu--primary .demo.mega-menu .card__content:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .card.card-orientation-horizontal .card__content:nth-child(odd), .card.card-orientation-horizontal .menu--primary .kss-default__example .demo.mega-menu .card__content:nth-child(odd),
.kss-default__example .demo.card.card-orientation-horizontal .card__content:nth-child(odd),
.kss-default__example .vertical-slides__container .demo.home-page-slide__content .card.card-orientation-horizontal .card__content:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__content:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card.card-orientation-horizontal .card__content:nth-child(odd), .card.card-orientation-horizontal .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__content:nth-child(odd),
.kss-default__example .horizontal-slides .demo.home-page-slide .card.card-orientation-horizontal .card__content:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .horizontal-slides .demo.home-page-slide .card__content:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .card.card-orientation-horizontal .card__content:nth-child(odd), .card.card-orientation-horizontal .horizontal-slides .kss-default__example .demo.home-page-slide .card__content:nth-child(odd), .kss-default__example .grid-x.demo .card-orientation-horizontal .card .card__details:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .grid-x.demo .card__details:nth-child(odd), .kss-default__example .menu--primary .demo.mega-menu .card-orientation-horizontal .card .card__details:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .menu--primary .demo.mega-menu .card__details:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .card-orientation-horizontal .card .card__details:nth-child(odd), .card-orientation-horizontal .card .menu--primary .kss-default__example .demo.mega-menu .card__details:nth-child(odd), .kss-default__example .card-orientation-horizontal .demo.card .card__details:nth-child(odd), .card-orientation-horizontal .kss-default__example .demo.card .card__details:nth-child(odd), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card-orientation-horizontal .card .card__details:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__details:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card-orientation-horizontal .card .card__details:nth-child(odd), .card-orientation-horizontal .card .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__details:nth-child(odd), .kss-default__example .horizontal-slides .demo.home-page-slide .card-orientation-horizontal .card .card__details:nth-child(odd), .card-orientation-horizontal .card .kss-default__example .horizontal-slides .demo.home-page-slide .card__details:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .card-orientation-horizontal .card .card__details:nth-child(odd), .card-orientation-horizontal .card .horizontal-slides .kss-default__example .demo.home-page-slide .card__details:nth-child(odd),
.kss-default__example .grid-x.demo .card.card-orientation-horizontal .card__details:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .grid-x.demo .card__details:nth-child(odd),
.kss-default__example .menu--primary .demo.mega-menu .card.card-orientation-horizontal .card__details:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .menu--primary .demo.mega-menu .card__details:nth-child(odd), .menu--primary .kss-default__example .demo.mega-menu .card.card-orientation-horizontal .card__details:nth-child(odd), .card.card-orientation-horizontal .menu--primary .kss-default__example .demo.mega-menu .card__details:nth-child(odd),
.kss-default__example .demo.card.card-orientation-horizontal .card__details:nth-child(odd),
.kss-default__example .vertical-slides__container .demo.home-page-slide__content .card.card-orientation-horizontal .card__details:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__details:nth-child(odd), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card.card-orientation-horizontal .card__details:nth-child(odd), .card.card-orientation-horizontal .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__details:nth-child(odd),
.kss-default__example .horizontal-slides .demo.home-page-slide .card.card-orientation-horizontal .card__details:nth-child(odd), .card.card-orientation-horizontal .kss-default__example .horizontal-slides .demo.home-page-slide .card__details:nth-child(odd), .horizontal-slides .kss-default__example .demo.home-page-slide .card.card-orientation-horizontal .card__details:nth-child(odd), .card.card-orientation-horizontal .horizontal-slides .kss-default__example .demo.home-page-slide .card__details:nth-child(odd),
.kss-default__example .grid-y.demo .cell:nth-child(odd),
.kss-default__example .grid-y.demo .menu--primary .mega-menu-column:nth-child(odd),
.menu--primary .kss-default__example .grid-y.demo .mega-menu-column:nth-child(odd),
.kss-default__example .grid-y.demo .video-player-with-overlay__player:nth-child(odd),
.kss-default__example .grid-y.demo .card-orientation-horizontal .card .card__image:nth-child(odd),
.card-orientation-horizontal .card .kss-default__example .grid-y.demo .card__image:nth-child(odd),
.kss-default__example .grid-y.demo .card.card-orientation-horizontal .card__image:nth-child(odd),
.card.card-orientation-horizontal .kss-default__example .grid-y.demo .card__image:nth-child(odd),
.kss-default__example .grid-y.demo .card-orientation-horizontal .card .card__content:nth-child(odd),
.card-orientation-horizontal .card .kss-default__example .grid-y.demo .card__content:nth-child(odd),
.kss-default__example .grid-y.demo .card.card-orientation-horizontal .card__content:nth-child(odd),
.card.card-orientation-horizontal .kss-default__example .grid-y.demo .card__content:nth-child(odd),
.kss-default__example .grid-y.demo .card-orientation-horizontal .card .card__details:nth-child(odd),
.card-orientation-horizontal .card .kss-default__example .grid-y.demo .card__details:nth-child(odd),
.kss-default__example .grid-y.demo .card.card-orientation-horizontal .card__details:nth-child(odd),
.card.card-orientation-horizontal .kss-default__example .grid-y.demo .card__details:nth-child(odd) {
background: #8ed1dd;
color: #191919; }
.kss-default__example .grid-x.demo .cell:nth-child(even), .kss-default__example .menu--primary .demo.mega-menu .cell:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .cell:nth-child(even), .kss-default__example .card-orientation-horizontal .demo.card .cell:nth-child(even), .card-orientation-horizontal .kss-default__example .demo.card .cell:nth-child(even), .kss-default__example .demo.card.card-orientation-horizontal .cell:nth-child(even), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .cell:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .cell:nth-child(even), .kss-default__example .horizontal-slides .demo.home-page-slide .cell:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .cell:nth-child(even), .kss-default__example .grid-x.demo .menu--primary .mega-menu-column:nth-child(even), .menu--primary .kss-default__example .grid-x.demo .mega-menu-column:nth-child(even), .kss-default__example .menu--primary .demo.mega-menu .mega-menu-column:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .mega-menu-column:nth-child(even), .kss-default__example .card-orientation-horizontal .demo.card .menu--primary .mega-menu-column:nth-child(even), .menu--primary .kss-default__example .card-orientation-horizontal .demo.card .mega-menu-column:nth-child(even), .card-orientation-horizontal .kss-default__example .demo.card .menu--primary .mega-menu-column:nth-child(even), .menu--primary .card-orientation-horizontal .kss-default__example .demo.card .mega-menu-column:nth-child(even), .kss-default__example .demo.card.card-orientation-horizontal .menu--primary .mega-menu-column:nth-child(even), .menu--primary .kss-default__example .demo.card.card-orientation-horizontal .mega-menu-column:nth-child(even), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .menu--primary .mega-menu-column:nth-child(even), .menu--primary .kss-default__example .vertical-slides__container .demo.home-page-slide__content .mega-menu-column:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .menu--primary .mega-menu-column:nth-child(even), .menu--primary .vertical-slides__container .kss-default__example .demo.home-page-slide__content .mega-menu-column:nth-child(even), .kss-default__example .horizontal-slides .demo.home-page-slide .menu--primary .mega-menu-column:nth-child(even), .menu--primary .kss-default__example .horizontal-slides .demo.home-page-slide .mega-menu-column:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .menu--primary .mega-menu-column:nth-child(even), .menu--primary .horizontal-slides .kss-default__example .demo.home-page-slide .mega-menu-column:nth-child(even), .kss-default__example .grid-x.demo .video-player-with-overlay__player:nth-child(even), .kss-default__example .menu--primary .demo.mega-menu .video-player-with-overlay__player:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .video-player-with-overlay__player:nth-child(even), .kss-default__example .card-orientation-horizontal .demo.card .video-player-with-overlay__player:nth-child(even), .card-orientation-horizontal .kss-default__example .demo.card .video-player-with-overlay__player:nth-child(even), .kss-default__example .demo.card.card-orientation-horizontal .video-player-with-overlay__player:nth-child(even), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .video-player-with-overlay__player:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .video-player-with-overlay__player:nth-child(even), .kss-default__example .horizontal-slides .demo.home-page-slide .video-player-with-overlay__player:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .video-player-with-overlay__player:nth-child(even), .kss-default__example .grid-x.demo .card-orientation-horizontal .card .card__image:nth-child(even), .card-orientation-horizontal .card .kss-default__example .grid-x.demo .card__image:nth-child(even), .kss-default__example .menu--primary .demo.mega-menu .card-orientation-horizontal .card .card__image:nth-child(even), .card-orientation-horizontal .card .kss-default__example .menu--primary .demo.mega-menu .card__image:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .card-orientation-horizontal .card .card__image:nth-child(even), .card-orientation-horizontal .card .menu--primary .kss-default__example .demo.mega-menu .card__image:nth-child(even), .kss-default__example .card-orientation-horizontal .demo.card .card__image:nth-child(even), .card-orientation-horizontal .kss-default__example .demo.card .card__image:nth-child(even), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card-orientation-horizontal .card .card__image:nth-child(even), .card-orientation-horizontal .card .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__image:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card-orientation-horizontal .card .card__image:nth-child(even), .card-orientation-horizontal .card .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__image:nth-child(even), .kss-default__example .horizontal-slides .demo.home-page-slide .card-orientation-horizontal .card .card__image:nth-child(even), .card-orientation-horizontal .card .kss-default__example .horizontal-slides .demo.home-page-slide .card__image:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .card-orientation-horizontal .card .card__image:nth-child(even), .card-orientation-horizontal .card .horizontal-slides .kss-default__example .demo.home-page-slide .card__image:nth-child(even),
.kss-default__example .grid-x.demo .card.card-orientation-horizontal .card__image:nth-child(even), .card.card-orientation-horizontal .kss-default__example .grid-x.demo .card__image:nth-child(even),
.kss-default__example .menu--primary .demo.mega-menu .card.card-orientation-horizontal .card__image:nth-child(even), .card.card-orientation-horizontal .kss-default__example .menu--primary .demo.mega-menu .card__image:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .card.card-orientation-horizontal .card__image:nth-child(even), .card.card-orientation-horizontal .menu--primary .kss-default__example .demo.mega-menu .card__image:nth-child(even),
.kss-default__example .demo.card.card-orientation-horizontal .card__image:nth-child(even),
.kss-default__example .vertical-slides__container .demo.home-page-slide__content .card.card-orientation-horizontal .card__image:nth-child(even), .card.card-orientation-horizontal .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__image:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card.card-orientation-horizontal .card__image:nth-child(even), .card.card-orientation-horizontal .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__image:nth-child(even),
.kss-default__example .horizontal-slides .demo.home-page-slide .card.card-orientation-horizontal .card__image:nth-child(even), .card.card-orientation-horizontal .kss-default__example .horizontal-slides .demo.home-page-slide .card__image:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .card.card-orientation-horizontal .card__image:nth-child(even), .card.card-orientation-horizontal .horizontal-slides .kss-default__example .demo.home-page-slide .card__image:nth-child(even), .kss-default__example .grid-x.demo .card-orientation-horizontal .card .card__content:nth-child(even), .card-orientation-horizontal .card .kss-default__example .grid-x.demo .card__content:nth-child(even), .kss-default__example .menu--primary .demo.mega-menu .card-orientation-horizontal .card .card__content:nth-child(even), .card-orientation-horizontal .card .kss-default__example .menu--primary .demo.mega-menu .card__content:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .card-orientation-horizontal .card .card__content:nth-child(even), .card-orientation-horizontal .card .menu--primary .kss-default__example .demo.mega-menu .card__content:nth-child(even), .kss-default__example .card-orientation-horizontal .demo.card .card__content:nth-child(even), .card-orientation-horizontal .kss-default__example .demo.card .card__content:nth-child(even), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card-orientation-horizontal .card .card__content:nth-child(even), .card-orientation-horizontal .card .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__content:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card-orientation-horizontal .card .card__content:nth-child(even), .card-orientation-horizontal .card .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__content:nth-child(even), .kss-default__example .horizontal-slides .demo.home-page-slide .card-orientation-horizontal .card .card__content:nth-child(even), .card-orientation-horizontal .card .kss-default__example .horizontal-slides .demo.home-page-slide .card__content:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .card-orientation-horizontal .card .card__content:nth-child(even), .card-orientation-horizontal .card .horizontal-slides .kss-default__example .demo.home-page-slide .card__content:nth-child(even),
.kss-default__example .grid-x.demo .card.card-orientation-horizontal .card__content:nth-child(even), .card.card-orientation-horizontal .kss-default__example .grid-x.demo .card__content:nth-child(even),
.kss-default__example .menu--primary .demo.mega-menu .card.card-orientation-horizontal .card__content:nth-child(even), .card.card-orientation-horizontal .kss-default__example .menu--primary .demo.mega-menu .card__content:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .card.card-orientation-horizontal .card__content:nth-child(even), .card.card-orientation-horizontal .menu--primary .kss-default__example .demo.mega-menu .card__content:nth-child(even),
.kss-default__example .demo.card.card-orientation-horizontal .card__content:nth-child(even),
.kss-default__example .vertical-slides__container .demo.home-page-slide__content .card.card-orientation-horizontal .card__content:nth-child(even), .card.card-orientation-horizontal .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__content:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card.card-orientation-horizontal .card__content:nth-child(even), .card.card-orientation-horizontal .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__content:nth-child(even),
.kss-default__example .horizontal-slides .demo.home-page-slide .card.card-orientation-horizontal .card__content:nth-child(even), .card.card-orientation-horizontal .kss-default__example .horizontal-slides .demo.home-page-slide .card__content:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .card.card-orientation-horizontal .card__content:nth-child(even), .card.card-orientation-horizontal .horizontal-slides .kss-default__example .demo.home-page-slide .card__content:nth-child(even), .kss-default__example .grid-x.demo .card-orientation-horizontal .card .card__details:nth-child(even), .card-orientation-horizontal .card .kss-default__example .grid-x.demo .card__details:nth-child(even), .kss-default__example .menu--primary .demo.mega-menu .card-orientation-horizontal .card .card__details:nth-child(even), .card-orientation-horizontal .card .kss-default__example .menu--primary .demo.mega-menu .card__details:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .card-orientation-horizontal .card .card__details:nth-child(even), .card-orientation-horizontal .card .menu--primary .kss-default__example .demo.mega-menu .card__details:nth-child(even), .kss-default__example .card-orientation-horizontal .demo.card .card__details:nth-child(even), .card-orientation-horizontal .kss-default__example .demo.card .card__details:nth-child(even), .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card-orientation-horizontal .card .card__details:nth-child(even), .card-orientation-horizontal .card .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__details:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card-orientation-horizontal .card .card__details:nth-child(even), .card-orientation-horizontal .card .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__details:nth-child(even), .kss-default__example .horizontal-slides .demo.home-page-slide .card-orientation-horizontal .card .card__details:nth-child(even), .card-orientation-horizontal .card .kss-default__example .horizontal-slides .demo.home-page-slide .card__details:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .card-orientation-horizontal .card .card__details:nth-child(even), .card-orientation-horizontal .card .horizontal-slides .kss-default__example .demo.home-page-slide .card__details:nth-child(even),
.kss-default__example .grid-x.demo .card.card-orientation-horizontal .card__details:nth-child(even), .card.card-orientation-horizontal .kss-default__example .grid-x.demo .card__details:nth-child(even),
.kss-default__example .menu--primary .demo.mega-menu .card.card-orientation-horizontal .card__details:nth-child(even), .card.card-orientation-horizontal .kss-default__example .menu--primary .demo.mega-menu .card__details:nth-child(even), .menu--primary .kss-default__example .demo.mega-menu .card.card-orientation-horizontal .card__details:nth-child(even), .card.card-orientation-horizontal .menu--primary .kss-default__example .demo.mega-menu .card__details:nth-child(even),
.kss-default__example .demo.card.card-orientation-horizontal .card__details:nth-child(even),
.kss-default__example .vertical-slides__container .demo.home-page-slide__content .card.card-orientation-horizontal .card__details:nth-child(even), .card.card-orientation-horizontal .kss-default__example .vertical-slides__container .demo.home-page-slide__content .card__details:nth-child(even), .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card.card-orientation-horizontal .card__details:nth-child(even), .card.card-orientation-horizontal .vertical-slides__container .kss-default__example .demo.home-page-slide__content .card__details:nth-child(even),
.kss-default__example .horizontal-slides .demo.home-page-slide .card.card-orientation-horizontal .card__details:nth-child(even), .card.card-orientation-horizontal .kss-default__example .horizontal-slides .demo.home-page-slide .card__details:nth-child(even), .horizontal-slides .kss-default__example .demo.home-page-slide .card.card-orientation-horizontal .card__details:nth-child(even), .card.card-orientation-horizontal .horizontal-slides .kss-default__example .demo.home-page-slide .card__details:nth-child(even),
.kss-default__example .grid-y.demo .cell:nth-child(even),
.kss-default__example .grid-y.demo .menu--primary .mega-menu-column:nth-child(even),
.menu--primary .kss-default__example .grid-y.demo .mega-menu-column:nth-child(even),
.kss-default__example .grid-y.demo .video-player-with-overlay__player:nth-child(even),
.kss-default__example .grid-y.demo .card-orientation-horizontal .card .card__image:nth-child(even),
.card-orientation-horizontal .card .kss-default__example .grid-y.demo .card__image:nth-child(even),
.kss-default__example .grid-y.demo .card.card-orientation-horizontal .card__image:nth-child(even),
.card.card-orientation-horizontal .kss-default__example .grid-y.demo .card__image:nth-child(even),
.kss-default__example .grid-y.demo .card-orientation-horizontal .card .card__content:nth-child(even),
.card-orientation-horizontal .card .kss-default__example .grid-y.demo .card__content:nth-child(even),
.kss-default__example .grid-y.demo .card.card-orientation-horizontal .card__content:nth-child(even),
.card.card-orientation-horizontal .kss-default__example .grid-y.demo .card__content:nth-child(even),
.kss-default__example .grid-y.demo .card-orientation-horizontal .card .card__details:nth-child(even),
.card-orientation-horizontal .card .kss-default__example .grid-y.demo .card__details:nth-child(even),
.kss-default__example .grid-y.demo .card.card-orientation-horizontal .card__details:nth-child(even),
.card.card-orientation-horizontal .kss-default__example .grid-y.demo .card__details:nth-child(even) {
background: #0087b7;
color: #ffffff; }
.kss-style code {
background: #f2efed;
border: 0; }
.icon-demo svg {
margin-left: 1rem;
margin-right: .25rem; }
#kssref-containers-cards-card .card {
max-width: 448px; }
#kssref-template-search-form .search-form {
width: auto;
top: 0;
display: block;
position: relative; }
/**
* Overrides for drupal elements.
*/
nav.tabs {
background: #6b9e34; }
nav.tabs .tabs.primary {
margin-bottom: 0;
background: transparent; }
nav.tabs .tabs.primary li {
margin: 0;
padding: 0; }
nav.tabs .tabs.primary li a {
color: #ffffff;
padding: .7em 1.5em; }
nav.tabs .tabs.primary li a:hover {
background: #85c144; }
nav.tabs .tabs.primary li.is-active a, nav.tabs .tabs.primary li.is-active a:hover {
background: #ffffff;
color: #4a4a4a; }
.toolbar-tray ul li {
padding-left: 0; }
.no-underline {
text-decoration:none; }
.sub-section-header h3 .anchor-link {
display:none; }
.sub-section-header h3:hover .anchor-link {
display:inline; }
/*# sourceMappingURL=main.css.map */
.call-to-action--paragraph {
padding: 5rem 0;
}
.call-to-action__button--orange:hover {
background: #dc582b;
border-color:white;
}
.call-to-action__button--green:hover {
background: #85c144;
border-color:white;
}
.g-recaptcha {
transform: scale(1) !important;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.menu--primary > li > a.icon-only {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 8px;
}
.menu--primary > li > a.icon-only span {
display: inline-block;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
text-indent: -9999px;
overflow: hidden;
white-space: nowrap;
}
.menu--primary > li > a.icon-only:after {
bottom: -8px !important;
}
.menu--primary > li > a.menu-icon--login span {
background-image: url("assets/images/icons/icon--login.svg");
}
/* Callout hero */
.callout-hero {
position: relative;
}
.hero.hero--photo.hero--dynamic {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
.hero__bg {
width: 100%;
height: 100%;
position: relative;
padding: 0;
}
picture {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* Callout */
.hero-callout--callout {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
.hero-callout--callout__content {
display: flex;
align-items: center;
flex-direction: column;
gap: 4rem;
max-width: 90rem;
margin: 0 auto;
height: calc(100% - 8rem);
padding-top: 4rem;
padding-bottom: 4rem;
/* @media print, screen and (min-width: 40em) {
grid-template-columns: repeat(2, 1fr);
} */
@media print, screen and (min-width: 64em) {
flex-direction: row;
padding-top: 16rem;
padding-bottom: 16rem;
align-items: stretch;
}
}
}
.callout-item {
padding: 1rem;
background: rgba(0, 0, 0, 0.65);
width: 100%;
display: flex;
flex-direction: column;
align-items: start;
@media print, screen and (min-width: 64em) {
flex: 1 1 50%;
}
.callout-item--text {
flex-grow: 1;
}
h3 {
color: #ffffff;
margin-bottom: 0;
}
.callout-item--subtitle {
color: #dc582b;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 500;
}
.callout-item--description {
font-size: 1.1rem;
color: #eeeeee;
}
}
.mb-0 {
margin-bottom: 0;
}
.hero-action--buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
}