@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic|Source+Code+Pro:300,400,700,900|Satisfy&display=swap);
@charset "UTF-8";

/*
#Functions

Sass @functions. no dependencies.

Styleguide Functions
*/

/*
#image-url()

the `image-url` function helps with css URLs for images, putting them in the correct path.

Usage:

```scss
background-image: image-url('someimage.png');
```

Produces:

```scss
background-image: url('/_resources/themes/main/images/someimage.png');
```


Styleguide Functions.imageurl
*/

/*
#Settings

Site-wide, sass variable settings. may use functions. may not use mixins.
Suffix these with `-settings` to help with searching for things, like `_layout-settings.scss`.

Styleguide Settings
*/

/*
#Breakpoints

We use the include media mixin <https://include-media.com> to manage media queries.

Examples:
```scss
@include media('>tablet') {...}
@include media('>=tablet') {...}
@include media('<tablet') {...}
@include media('<=tablet') {...}
@include media('>phone', '<=tablet') {...}
@include media('>phone', '<=20em') {...}
@include media('>phone', '<=1024px') {...}
@include media('<=tablet', 'retina2x') {...}
@include media('<=tablet', 'retina3x') {...}
@include media('<=tablet', 'landscape') {...}
@include media('<=tablet', 'portrait') {...}
@include media('print') {...}
@include media('retina2x', 'portrait', 'screen', 'handheld') {...}
```
## Our Defined Breakpoints

```
$breakpoints: (
    'phone-portrait': 320px,
    'phone-landscape': 480px,
    'tablet-small': 600px,
    'tablet-portrait': 768px,
    'desktop-small': 980px,
    'tablet-landscape': 1024px,
    'desktop-large': 1382px) !default;
);
```

Styleguide Settings.Breakpoints
*/

/*
#Colors

Color pallette for the site. Try not to use them directly,
and use the applied colors instead.

SectionTemplate: BenManu/StyleGuide/Includes/SGColorPalette

$color-white - #fff
$color-black - #000
$color-yellow - #fc0
$color-yellow-faded - #ffeb99
$color-yellow-lightest - #fff5cc
$color-yellow-gray - #806600
$color-blue - #567EA5
$color-blue-light - #98b1c9
$color-red - #BB0000
$color-green-lime - #8bc42a
$color-green-light - #d7e2dd
$color-green-medium - #a9c0b5
$color-green-dark - #7b9e8d
$color-gray-lightest - #eee
$color-gray-lighter - #ddd
$color-gray-light - #ccc
$color-gray-medium - #999
$color-gray-dark - #666
$color-gray-darker - #444
$color-gray-yellow - #806600


Styleguide Settings.Colors
*/

/* color palette */

/* text colors */

/* anchor colors */

/* misc colors */

/* table colors */

/*
#Fonts

Custom fonts come it 2 different types. Local ones, where we server them up
locally from our server. And hosted fonts from a service like Google or TypeKit.

For local fonts, we want to load them with `@font-face` properties, including
`WOFF` and `WOFF2` files (which cover IE9+). We also want to set the
`font-display` properties to something like `swap` so that we can use native
fonts from our font stack until the custom one is availble. This is not
yet supported in most browsers, but it is in development.

<https://css-tricks.com/font-display-masses/>

For hosted service fonts, we will use the `@import` declaration. Most hosted
services don't use the `font-display` option at all. If you are defining more
than one font from a service that allows you to combine fonts into an `@import`
like Google Fonts, you can pre-define a sass variable with the URL and use the
same one as the value of the 'import' item for each face.

The font definitions in `settings/_fonts.scss`, include what fonts to load, as
well as what native font stacks to use as a fallback.

Styleguide Settings.Fonts
*/

/* stylelint-disable */

/* TEXT SIZES =============================================================== */

/* The base font sizes. */

/* The base line height determines the basic unit of vertical rhythm. */

/*
#Layout

These settings are for sitewide sizes and other layout things.

View the CSS to see them.

Styleguide Settings.Layout
*/

/* stylelint-disable */

/* stylelint-enable */

/*
#Mixins

Sass @mixins

Styleguide Mixins
*/

/*
#Container

Container margins for large and small viewports.

Example Usage:

```
.MyClass {
    @extend %container;
}
```

Markup:
<div class="%container">Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.</div>

Variables in: `settings/_layout-settings.scss`

$container-max-width        - max width that contained content can get
$container-margin           - margins when contained, but not mobile
$container-margin-mobile    - margins when mobile


Styleguide Traits.Container
*/

/* stylelint-disable */

/* https://au.si/css-container-element-queries */

/*
#@mixin font-family()

TBD

Styleguide Mixins.fontfamily
*/

/*
#@mixin font-loader()

TBD

Styleguide Mixins.fontloader
*/

/*
#@mixin include-media()

TBD

Styleguide Mixins.includemedia
*/

/*
#@mixin link-colors()

Set all the colors for a link with one mixin call. Order of arguments is:

1. normal
2. hover
3. active
4. visited
5. focus

Those states not specified will inherit. Example:

```
a {
    @include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
```

Styleguide Mixins.linkcolors
*/

/*
#@mixin styleguide-only()

TBD

Styleguide Mixins.styleguideonly
*/

/*
#@mixin svg-bg()

Apply an SVG image as the background. Path should be relative to the images folder. Do not use leading '/' or trailing '.svg'.

```
div {
    @include svg-bg(path/to/file);
}
```

Styleguide Mixins.svgbg
*/

/*
#@mixin z-index()

TBD

Styleguide Mixins.zindex
*/

/*
#Traits

Extendable traits to reuse in other classes. CSS classes used in example only for styleguide.

Styleguide Traits
*/

/*
#Button

Buttons on the site

.-fullwidth - Full width button
.-outlined - White outlined version
.-reversed - Solid white version
:hover - hover state
:active - active state
:visited - visited state
:focus - focus state

Markup:
<a class="%button $modifierClass" href="#">Button</a>
<div style="background-color: #999; padding: 1em; margin-top: 1em;">
    <a class="%button $modifierClass" href="#">On Grey</a>
</div>

Styleguide Traits.Button
*/

input[type=submit],
input[type=reset],
.Button {
  color: #000;
  background-color: #a9c0b5;
  border: 0;
  border-radius: 6px;
  display: inline-block;
  padding: 6px 12px;
  text-decoration: none;
}

input[type=submit]:visited,
input[type=reset]:visited,
.Button:visited,
input.pseudo-class-visited[type=submit],
input.pseudo-class-visited[type=reset],
.pseudo-class-visited.Button {
  color: #000;
}

input[type=submit]:focus,
input[type=reset]:focus,
.Button:focus,
input.pseudo-class-focus[type=submit],
input.pseudo-class-focus[type=reset],
.pseudo-class-focus.Button {
  color: #000;
}

input[type=submit]:hover,
input[type=reset]:hover,
.Button:hover,
input.pseudo-class-hover[type=submit],
input.pseudo-class-hover[type=reset],
.pseudo-class-hover.Button {
  color: #000;
}

input[type=submit]:active,
input[type=reset]:active,
.Button:active,
input.pseudo-class-acgtive[type=submit],
input.pseudo-class-acgtive[type=reset],
.pseudo-class-acgtive.Button {
  color: #000;
}

input[type=submit]:hover,
input[type=reset]:hover,
.Button:hover,
input.pseudo-class-hover[type=submit],
input.pseudo-class-hover[type=reset],
.pseudo-class-hover.Button {
  background-color: #d7e2dd;
}

input[type=submit]:active,
input[type=reset]:active,
.Button:active,
input.pseudo-class-acgtive[type=submit],
input.pseudo-class-acgtive[type=reset],
.pseudo-class-acgtive.Button {
  background-color: #8bc42a;
}

input[type=submit]:hover,
input[type=reset]:hover,
.Button:hover {
  text-decoration: none;
}

input.-outlined[type=submit],
input.-outlined[type=reset],
.-outlined.Button {
  color: #fff;
  background-color: transparent;
  border: 2px solid currentColor;
}

input.-outlined[type=submit]:visited,
input.-outlined[type=reset]:visited,
.-outlined.Button:visited,
input.-outlined.pseudo-class-visited[type=submit],
input.-outlined.pseudo-class-visited[type=reset],
.-outlined.pseudo-class-visited.Button {
  color: #fff;
}

input.-outlined[type=submit]:focus,
input.-outlined[type=reset]:focus,
.-outlined.Button:focus,
input.-outlined.pseudo-class-focus[type=submit],
input.-outlined.pseudo-class-focus[type=reset],
.-outlined.pseudo-class-focus.Button {
  color: #fff;
}

input.-outlined[type=submit]:hover,
input.-outlined[type=reset]:hover,
.-outlined.Button:hover,
input.-outlined.pseudo-class-hover[type=submit],
input.-outlined.pseudo-class-hover[type=reset],
.-outlined.pseudo-class-hover.Button {
  color: #fff;
}

input.-outlined[type=submit]:active,
input.-outlined[type=reset]:active,
.-outlined.Button:active,
input.-outlined.pseudo-class-acgtive[type=submit],
input.-outlined.pseudo-class-acgtive[type=reset],
.-outlined.pseudo-class-acgtive.Button {
  color: #fff;
}

input.-outlined[type=submit]:hover,
input.-outlined[type=reset]:hover,
.-outlined.Button:hover,
input.-outlined.pseudo-class-hover[type=submit],
input.-outlined.pseudo-class-hover[type=reset],
.-outlined.pseudo-class-hover.Button {
  background-color: #a9c0b5;
}

input.-outlined[type=submit]:active,
input.-outlined[type=reset]:active,
.-outlined.Button:active,
input.-outlined.pseudo-class-acgtive[type=submit],
input.-outlined.pseudo-class-acgtive[type=reset],
.-outlined.pseudo-class-acgtive.Button {
  background-color: #006535;
}

input.-reversed[type=submit],
input.-reversed[type=reset],
.-reversed.Button {
  color: #006535;
  background-color: #fff;
}

input.-reversed[type=submit]:visited,
input.-reversed[type=reset]:visited,
.-reversed.Button:visited,
input.-reversed.pseudo-class-visited[type=submit],
input.-reversed.pseudo-class-visited[type=reset],
.-reversed.pseudo-class-visited.Button {
  color: #006535;
}

input.-reversed[type=submit]:focus,
input.-reversed[type=reset]:focus,
.-reversed.Button:focus,
input.-reversed.pseudo-class-focus[type=submit],
input.-reversed.pseudo-class-focus[type=reset],
.-reversed.pseudo-class-focus.Button {
  color: #fff;
}

input.-reversed[type=submit]:hover,
input.-reversed[type=reset]:hover,
.-reversed.Button:hover,
input.-reversed.pseudo-class-hover[type=submit],
input.-reversed.pseudo-class-hover[type=reset],
.-reversed.pseudo-class-hover.Button {
  color: #000;
}

input.-reversed[type=submit]:active,
input.-reversed[type=reset]:active,
.-reversed.Button:active,
input.-reversed.pseudo-class-acgtive[type=submit],
input.-reversed.pseudo-class-acgtive[type=reset],
.-reversed.pseudo-class-acgtive.Button {
  color: #fff;
}

input.-reversed[type=submit]:visited,
input.-reversed[type=reset]:visited,
.-reversed.Button:visited,
input.-reversed.pseudo-class-visited[type=submit],
input.-reversed.pseudo-class-visited[type=reset],
.-reversed.pseudo-class-visited.Button {
  background-color: #fff;
}

input.-reversed[type=submit]:focus,
input.-reversed[type=reset]:focus,
.-reversed.Button:focus,
input.-reversed.pseudo-class-focus[type=submit],
input.-reversed.pseudo-class-focus[type=reset],
.-reversed.pseudo-class-focus.Button {
  background-color: #8bc42a;
}

input.-reversed[type=submit]:hover,
input.-reversed[type=reset]:hover,
.-reversed.Button:hover,
input.-reversed.pseudo-class-hover[type=submit],
input.-reversed.pseudo-class-hover[type=reset],
.-reversed.pseudo-class-hover.Button {
  background-color: #d7e2dd;
}

input.-reversed[type=submit]:active,
input.-reversed[type=reset]:active,
.-reversed.Button:active,
input.-reversed.pseudo-class-acgtive[type=submit],
input.-reversed.pseudo-class-acgtive[type=reset],
.-reversed.pseudo-class-acgtive.Button {
  background-color: #8bc42a;
}

input.-fullwidth[type=submit],
input.-fullwidth[type=reset],
.-fullwidth.Button {
  display: block;
  text-align: center;
  width: 100%;
}

+ input.-fullwidth[type=submit],
+ input.-fullwidth[type=reset],
+ .-fullwidth.Button {
  margin-top: 0.5em;
}

input[type=submit] img,
input[type=reset] img,
.Button img {
  vertical-align: middle;
}

/*
#Container

Container margins for large and small viewports.

Example Usage:

```
.MyClass {
    @extend %container;
}
```

Markup:
<div class="%container">Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.</div>

Variables in: `settings/_layout-settings.scss`

$container-max-width        - max width that contained content can get
$container-margin           - margins when contained, but not mobile
$container-margin-mobile    - margins when mobile


Styleguide Traits.Container
*/

.Grid.-contained,
.Gallery:not(.-scroller),
.Container,
.PrevNextPage__container,
.Banner__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

@media (max-width: 1056px) {
  .Grid.-contained,
  .Gallery:not(.-scroller),
  .Container,
  .PrevNextPage__container,
  .Banner__container {
    margin-left: 48px;
    margin-left: calc(env(safe-area-inset-left) + 48px);
    margin-left: max(env(safe-area-inset-left), 48px);
    margin-right: 48px;
    margin-right: calc(env(safe-area-inset-right) + 48px);
    margin-right: max(env(safe-area-inset-right), 48px);
  }
}

@media (max-width: 980px) {
  .Grid.-contained,
  .Gallery:not(.-scroller),
  .Container,
  .PrevNextPage__container,
  .Banner__container {
    margin-left: 24px;
    margin-left: calc(env(safe-area-inset-left) + 24px);
    margin-left: max(env(safe-area-inset-left), 24px);
    margin-right: 24px;
    margin-right: calc(env(safe-area-inset-right) + 24px);
    margin-right: max(env(safe-area-inset-right), 24px);
  }
}

@media print {
  .Grid.-contained,
  .Gallery:not(.-scroller),
  .Container,
  .PrevNextPage__container,
  .Banner__container {
    margin-left: 24px;
    margin-right: 24px;
  }
}

/*
#Typography

Extendable typography traits to reuse in other classes. CSS classes used in example only for styleguide.

Example Usage:

```
.MyClass {
    @extend %typography-h1;
}
```

Markup:
<div class="$modifierClass">The quick brown fox jumped over the lazy dog</div>

.%typography-base - Base type like in normal p tags
.%typography-h1 - Heading level 1
.%typography-h2 - Heading level 2
.%typography-h3 - Heading level 3
.%typography-h4 - Heading level 4
.%typography-h5 - Heading level 5
.%typography-h6 - Heading level 6

Styleguide Traits.Typography
*/

.Element__content,
textarea,
.Header,
p,
html,
.Badge {
  font-size: 16px;
  font-style: "normal";
  font-weight: "400";
  line-height: 1.5;
}

.Badge {
  font-size: 14px;
}

.Subtitle {
  font-family: "Satisfy", cursive;
  font-size: 24px;
  line-height: 1;
}

h6,
h5,
h4,
h3,
.ImageText__title,
h2,
.PageListItem__title,
.Headline,
h1 {
  font-weight: bold;
  line-height: 1;
  margin: 24px 0 12px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.PageListItem__title,
.Headline,
h1 {
  font-family: "ChunkFive", "Arial Black", "Avenir-Black", "AvenirNext-Heavy", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 36px;
  font-weight: normal;
}

.ImageText__title,
h2 {
  font-family: "ChunkFive", "Arial Black", "Avenir-Black", "AvenirNext-Heavy", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 24px;
  font-weight: normal;
}

h3 {
  color: #999;
  font-size: 24px;
  font-weight: 900;
}

h4 {
  font-size: 18px;
  font-weight: 600;
}

h5 {
  color: #999;
  font-size: 18px;
  font-weight: 600;
}

h6 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/*
#Foundation

`<html>` & `<body>` styles for things like css reset, base type settings, box-sizing, etc. This is also where base typographic tags are styled like p, headings, lists, etc.

Styleguide Foundation
*/

/*
#Reset

TBD

Styleguide Foundation.0reset
*/

html {
  box-sizing: border-box;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

img {
  height: auto;
  max-width: 100%;
}

/*
#<html>

Base `<html>` styles.

Styleguide Foundation.1html
*/

html {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
}

/*
#<body>

Base `<body>` styles.

Styleguide Foundation.2body
*/

body {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  overflow-x: hidden;
}

/*
#Links

Links (`<a>`)

:link - normal link
:visited - visited link
:hover - hovered link
:active - active link

Markup:
<a href="path/to/page/" class="$modifierClass" title="Optional Title">Link text</a>


Styleguide Foundation.links
*/

a {
  color: #006535;
}

a:visited,
a.pseudo-class-visited {
  color: #036235;
}

a:hover,
a.pseudo-class-hover {
  color: #8bc42a;
}

a:active,
a.pseudo-class-acgtive {
  color: #a9c0b5;
}

/*
#<abbr>

Links (`<a>`)

:link - normal link
:visited - visited link
:hover - hovered link
:active - active link

Markup:
<abbr title="In My Humble Opinion">IMHO</abbr>


Styleguide Foundation.abbr
*/

abbr[title] {
  border-bottom: 1px dotted;
}

/*
#<aside>

Blockquote

Markup:
<aside>
    <blockquote>
        <p>A content management system (CMS) is a computer application that allows publishing, editing, modifying, organizing, deleting, and maintaining content from a central interface. Such systems of content management provide procedures to manage workflow in a collaborative environment. These procedures can be manual steps or an automated cascade. CMS have been available since the late 1990s.</p>
        <cite><a href="https://en.wikipedia.org/wiki/Content_management_system">Wikipedia</a></cite>
    </blockquote>
</aside>

Styleguide Foundation.aside
*/

aside {
  background-color: #fff5cc;
  border-radius: 0.75em;
  margin: 1em 0;
  padding: 20px;
  width: 100%;
}

aside > *:first-child {
  margin-top: 0;
}

aside > *:last-child {
  margin-bottom: 0;
}

aside p,
aside ul,
aside ol,
aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6 {
  max-width: none;
}

aside p:first-child,
aside ul:first-child,
aside ol:first-child,
aside h1:first-child,
aside h2:first-child,
aside h3:first-child,
aside h4:first-child,
aside h5:first-child,
aside h6:first-child {
  margin-top: 0;
}

aside p:last-child,
aside ul:last-child,
aside ol:last-child,
aside h1:last-child,
aside h2:last-child,
aside h3:last-child,
aside h4:last-child,
aside h5:last-child,
aside h6:last-child {
  margin-bottom: 0;
}

aside p code,
aside ul code,
aside ol code,
aside h1 code,
aside h2 code,
aside h3 code,
aside h4 code,
aside h5 code,
aside h6 code {
  font-size: inherit;
}

@media (min-width: 980px) {
  aside.left {
    float: left;
    margin: 0 1.5rem 1em 0;
    width: 50%;
  }
}

aside.right {
  float: none;
}

@media (min-width: 980px) {
  aside.right {
    float: right;
    margin: 0 0 1em 1.5rem;
    width: 50%;
  }
}

aside.Pullquote {
  background-color: transparent;
  padding: 0;
}

/*
#<blockquote>

Blockquote

Markup:
<blockquote>
	<p>Quinn Interactive proves every week that pictures really are worth a thousand words. They’ve designed over 150 fresh and exciting graphics to help make ours a top-rated website.</p>
	<cite><strong>Tucker W. “Bill” Main</strong>, Chairman,Bill Main&nbsp;&amp;&nbsp;Associates</cite>
</blockquote>


Styleguide Foundation.Blockquote
*/

blockquote {
  color: #666;
  font-weight: normal;
  margin: 1em 0;
  position: relative;
}

@media (min-width: 480px) {
  blockquote {
    margin: 1em 0 1em 28px;
  }
}

@media (min-width: 1024px) {
  blockquote {
    margin: 1em 0;
  }
}

aside blockquote {
  margin: 1em 0;
}

aside blockquote::before {
  display: none;
}

aside blockquote > p:first-of-type::before {
  font-family: "ChunkFive", "Arial Black", "Avenir-Black", "AvenirNext-Heavy", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  content: "“";
  display: inline-block;
  font-size: 36px;
  height: 18px;
  line-height: 1.1;
  padding-right: 0.2em;
  vertical-align: top;
}

blockquote::before {
  font-family: "ChunkFive", "Arial Black", "Avenir-Black", "AvenirNext-Heavy", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  content: "“";
  display: block;
  font-size: 36px;
  height: 30px;
  line-height: 1;
  overflow: hidden;
}

@media (min-width: 480px) {
  blockquote::before {
    left: -26px;
    position: absolute;
    top: 2px;
  }
}

blockquote > p:last-of-type::after {
  font-family: "ChunkFive", "Arial Black", "Avenir-Black", "AvenirNext-Heavy", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  content: "”";
  font-size: 36px;
  line-height: 1.1;
  padding-left: 0.2em;
  position: absolute;
}

blockquote cite {
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  color: #666;
  display: block;
  font-weight: normal;
}

@media (min-width: 768px) {
  blockquote cite {
    text-align: right;
  }
}

blockquote cite::before {
  content: "~";
}

/*
#Paragraphs

Paragraph Tags

Markup:
<p>Some pararaph text to test spacing. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Some pararaph text to test spacing. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>

Styleguide Foundation.paragraphs
*/

p {
  margin: 0.75em 0;
}

/*
#Headings

Headings

Markup:
<h1>h1: The quick brown fox jumped over the lazy dog</h1>
<h2>h2: The quick brown fox jumped over the lazy dog</h2>
<h3>h3: The quick brown fox jumped over the lazy dog</h3>
<h4>h4: The quick brown fox jumped over the lazy dog</h4>
<h5>h5: The quick brown fox jumped over the lazy dog</h5>
<h6>h6: The quick brown fox jumped over the lazy dog</h6>

Styleguide Foundation.headings
*/

/*
#Lists

Lists

Markup:
<h2>Unordered List</h2>
<ul>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
        <ul>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
        </ul>
    </li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<h2>Ordered List</h2>
<ol>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nulla vitae elit libero, a pharetra augue.
        <ul>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
        </ul>
    </li>
    <li>Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.</li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nulla vitae elit libero, a pharetra augue.
        <ol>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
        </ol>
    </li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
    <li>Nulla vitae elit libero, a pharetra augue.</li>
</ol>

Styleguide Foundation.lists
*/

ul {
  list-style-type: disc;
  margin: 12px 0 12px 1.25em;
  padding: 0;
}

ol {
  list-style-type: decimal;
  margin: 12px 0 12px 2em;
  padding: 0;
}

li {
  margin: 12px 0;
  padding: 0;
}

/*
#TinyMCE

TinyMCE rich text editor specific styles

Styleguide Foundation.TinyMCE
*/

/*
#text

TinyMCE rich text editor text specific styles

.text-left - Left aligned
.text-right - Right aligned
.text-center - Center aligned

Markup:
<p class="$modifierClass">Left aligned. Aenean lacinia bibendum nulla sed consectetur.</p>

Styleguide Foundation.TinyMCE.01_text
*/

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

/*
#images

TinyMCE rich text editor image styles

.left - Left floated
.right - Right floated

Markup:
<div style="overflow: hidden;">
<p>
<img
    class="$modifierClass"
    width="200"
    src="/_resources/themes/main/images/logos/csud.svg"
    alt="Chico Unified School District" />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Curabitur blandit tempus porttitor.
</p>
</div>

Styleguide Foundation.TinyMCE.02_images
*/

img.left,
img.right {
  float: left;
  margin-bottom: 1.5rem;
  margin-right: 1.5rem;
  max-width: 50%;
}

img.right {
  float: right;
  margin-left: 1.5rem;
  margin-right: 0;
}

/*
#.captionImage

TinyMCE rich text editor image styles

.left - Left floated
.right - Right floated

Markup:
<div style="overflow: hidden;">
<p>
<div class="captionImage $modifierClass" style="width: 300px;">
    <img class="$modifierClass ss-htmleditorfield-file image" src="/_resources/themes/main/images/logos/csud.svg" alt="SilverStripe Professional Partner" width="300" />
    <p class="caption $modifierClass">Caption</p>
</div>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Curabitur blandit tempus porttitor.
</p>
</div>

Styleguide Foundation.TinyMCE.03_captionedImage
*/

.captionImage.left,
.captionImage.right {
  float: left;
  margin-bottom: 1.5rem;
  margin-right: 1.5rem;
  max-width: 50%;
}

.captionImage.right {
  float: right;
  margin-left: 1.5rem;
  margin-right: 0;
}

.captionImage img,
.captionImage p.caption {
  display: block;
  float: none;
}

/*
#.hide/only

Helper classes for hide/only on mobile or desktop.

.hide-mobile - hide on mobile
.only-mobile - only show on mobile
.hide-desktop - hide on desktop
.only-desktop - only show on desktop
.only-js - only show if javascript
.hide-js - hide if javascript

Markup:
<p class="$modifierClass">class: <code>$modifierClass</code></p>

Styleguide Foundation.hide
*/

@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}

@media (min-width: 768px) {
  .only-mobile {
    display: none;
  }
}

@media (min-width: 980px) {
  .hide-desktop {
    display: none;
  }
}

@media (max-width: 979px) {
  .only-desktop {
    display: none;
  }
}

html.no-js .only-js {
  display: none;
}

html.js .hide-js {
  display: none;
}

/*
#Font Loader

Loads any webfonts

Styleguide Foundation.fontloader
*/

@font-face {
  font-family: "ChunkFive";
  src: url("/_resources/themes/main/fonts/chunkfive/Chunkfive.woff?m=173456830501476.6") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
#Atoms

Base building block classes for things like buttons. These things will not include other tags or components.

Styleguide Atoms
*/

/*
#.Button

Buttons on the site

.-fullwidth - Full width button
:hover - hover state
:active - active state
:visited - visited state
:focus - focus state

Markup:
<a class="Button $modifierClass" href="#">Button</a>

Styleguide Atoms.Button
*/

/*
#Columns

Lists

Markup:
<div class="$modifierClass">
	<ul>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
		<li>Nulla vitae elit libero, a pharetra augue.</li>
	</ul>
</div>

.Columns--two - Make list 2 columns on larger screens.
.Columns--three - Make list 3 columns on larger screens.


Styleguide Blocks.Columns
*/

@media (min-width: 768px) {
  .Columns {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .Columns > * {
    margin-top: 0;
  }

  .Columns h2 {
    -moz-column-break-before: column;
         break-before: column;
  }

  .Columns p {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

  .Columns li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    margin: 0;
    padding-bottom: 12px;
  }
}

@media (min-width: 980px) {
  .Columns.-two {
    -moz-columns: 2;
         columns: 2;
  }
}

@media (min-width: 768px) {
  .Columns.-three {
    -moz-columns: 2;
         columns: 2;
  }
}

@media (min-width: 980px) {
  .Columns.-three {
    -moz-columns: 3;
         columns: 3;
  }
}

/*
#.Headline

Fancy headline for a page or the first Element on a page

Markup:
<h1 class="Headline -short">Short Headline</h1>
<h1 class="Headline -medium">Medium Sized Headline</h1>
<h1 class="Headline -long">Long Headline That Needs More Room</h1>

Styleguide Atoms.Button
*/

.Headline {
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  line-height: 1;
  margin: 0 0 20px;
  padding: 26px 0 21px;
  position: relative;
  text-align: center;
}

.Headline.-short {
  font-size: 48px;
}

html.js .Headline.-short.\:container\(width\>\=480px\).\:container\(width\>\=480px\) {
  font-size: 60px;
}

html.js .Headline.-short.\:container\(width\>\=768px\).\:container\(width\>\=768px\) {
  font-size: 72px;
}

html.js .Headline.-short.\:container\(width\>\=980px\).\:container\(width\>\=980px\) {
  font-size: 84px;
}

html.js .Headline.-short.\:container\(width\>\=1382px\).\:container\(width\>\=1382px\) {
  font-size: 96px;
}

@media (min-width: 480px) {
  html.no-js .Headline.-short {
    font-size: 60px;
  }
}

@media (min-width: 768px) {
  html.no-js .Headline.-short {
    font-size: 72px;
  }
}

@media (min-width: 980px) {
  html.no-js .Headline.-short {
    font-size: 84px;
  }
}

@media (min-width: 1382px) {
  html.no-js .Headline.-short {
    font-size: 96px;
  }
}

.Headline.-medium {
  font-size: 36px;
}

html.js .Headline.-medium.\:container\(width\>\=480px\).\:container\(width\>\=480px\) {
  font-size: 48px;
}

html.js .Headline.-medium.\:container\(width\>\=768px\).\:container\(width\>\=768px\) {
  font-size: 60px;
}

html.js .Headline.-medium.\:container\(width\>\=980px\).\:container\(width\>\=980px\) {
  font-size: 72px;
}

html.js .Headline.-medium.\:container\(width\>\=1382px\).\:container\(width\>\=1382px\) {
  font-size: 84px;
}

@media (min-width: 480px) {
  html.no-js .Headline.-medium {
    font-size: 48px;
  }
}

@media (min-width: 768px) {
  html.no-js .Headline.-medium {
    font-size: 60px;
  }
}

@media (min-width: 980px) {
  html.no-js .Headline.-medium {
    font-size: 72px;
  }
}

@media (min-width: 1382px) {
  html.no-js .Headline.-medium {
    font-size: 84px;
  }
}

.Headline.-long {
  font-size: 36px;
}

html.js .Headline.-long.\:container\(width\>\=768px\).\:container\(width\>\=768px\) {
  font-size: 48px;
}

html.js .Headline.-long.\:container\(width\>\=980px\).\:container\(width\>\=980px\) {
  font-size: 60px;
}

html.js .Headline.-long.\:container\(width\>\=1382px\).\:container\(width\>\=1382px\) {
  font-size: 72px;
}

@media (min-width: 768px) {
  html.no-js .Headline.-long {
    font-size: 48px;
  }
}

@media (min-width: 980px) {
  html.no-js .Headline.-long {
    font-size: 60px;
  }
}

@media (min-width: 1382px) {
  html.no-js .Headline.-long {
    font-size: 72px;
  }
}

.Headline::before,
.Headline::after {
  background-image: url("/_resources/themes/main/images/icons/diamond-black.svg?m=173456830520676.7");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 15px;
  left: 50%;
  margin-left: -7px;
  margin-top: -8px;
  position: absolute;
  top: 0;
  width: 15px;
}

.Headline::after {
  bottom: 0;
  margin-bottom: -8px;
  top: auto;
}

/*
#.Img

Helper class for images, either an SVGs or raster image (png, jpg, jpeg, etc). Sets the width to `100%` and the height to `auto`.

Markup:
<p>
<img
    class="Img"
    src="/_resources/themes/main/images/logos/csud.svg"
    alt="Chico Unified School District" />
<img
    class="Img"
    src="/_resources/themes/main/images/logos/plone.png"
    alt="Plone" />
</p>

Styleguide Atoms.Img
*/

.Img {
  display: inline-block;
  height: auto;
  width: 100%;
}

/*
#.Logo

Company Logo

.-reversed - reversed logo for use on dark backgrounds

Template: Includes/Logo

Styleguide Atoms.Logo
*/

.Logo {
  background-image: url("/_resources/themes/main/images/icons/qi-logo-color-long.svg?m=173456830521076.72");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 0;
  padding: 55px 305px 0 0;
  width: 0;
}

.Logo.-reversed {
  background-image: url("/_resources/themes/main/images/icons/qi-logo-color-long-reversed.svg?m=173456830521076.72");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(#000 0 0 5px);
}

.Logo__title {
  display: none;
}

.Screenshot {
  background-color: #666;
  border-radius: 2%;
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.Screenshot.-desktop {
  border-radius: 1.5% / 2.6666666667%;
  padding: 3%;
}

.Screenshot.-tablet {
  border-radius: 2% / 1.5%;
  padding: 5%;
}

.Screenshot.-mobile {
  border-radius: 4% / 2.2535211268%;
  padding: 8%;
}

.Screenshot[href] {
  transition: transform 0.25s ease;
}

.Screenshot[href]:hover {
  transform: scale(1.1);
}

.Screenshot__wrapper {
  background-color: #000;
  height: 0;
  overflow: hidden;
  position: relative;
}

.Screenshot__wrapper.-desktop {
  padding-bottom: calc(100% / 1.7777777778);
}

.Screenshot__wrapper.-tablet {
  padding-bottom: calc(100% / 0.75);
}

.Screenshot__wrapper.-mobile {
  padding-bottom: calc(100% / 0.5633802817);
}

.Screenshot__img {
  background-color: #fff;
  display: block;
  height: auto;
  position: absolute;
  top: 0;
  width: 100%;
  width: 100%;
}

/*
#.Subtitle

Fancy headline for a page or the first Element on a page

Markup:
<div class="Subtitle">Pithy subtitle goes here</div>

Styleguide Atoms.Subtitle
*/

.Subtitle {
  color: #666;
  font-size: 24px;
  text-align: center;
}

html.js .Subtitle.\:container\(width\<600px\).\:container\(width\<600px\) {
  font-size: 22px;
}

html.js .Subtitle.\:container\(width\<480px\).\:container\(width\<480px\) {
  font-size: 20px;
}

/*
#Molecules

More complex objects that contain other components or modules. Like navbars, footers, media objects, etc.

Styleguide Molecules
*/

/*
#.Badge

A logo or badge with optional label and description. It can also be linked.
A size modifier can be added to make change the width of the image relative to the rest of the badge.

Usage:
~~~html
<% include Badge Image=$Image, Link=$SomePage.Link, Size=$Size, Title=$Title, Description=$Description %>
~~~

.-small     - Small Badge
.-medium    - Medium Badge (default)
.-large     - Large Badge

Template: Includes/Badge

Styleguide Molecules.Badge
*/

.Badge {
  color: #000;
  position: relative;
  text-align: center;
  text-decoration: none;
}

.Badge:visited {
  color: #000;
}

.Badge__imgWrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1.5rem;
}

.Badge__img {
  height: 5em;
  margin-bottom: 1.5rem;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

.Badge__img.-small {
  height: 4em;
}

.Badge__img.-medium {
  height: 10em;
}

.Badge__img.-large {
  height: 15em;
}

.Badge__title {
  font-weight: bold;
}

/*
#.Banner

Image banner with big headline text

Template: Includes/Banner

Styleguide Molecules.Banner
*/

.Banner {
  background-color: #000;
  background-size: cover;
  border: 1px solid #000;
  border-width: 1px 0;
  padding-bottom: 2rem;
  padding-top: 2rem;
  position: relative;
}

@media (min-width: 768px) {
  .Banner {
    padding-bottom: 4rem;
    padding-top: 4rem;
  }
}

.Banner::after {
  background-image: url("/_resources/themes/main/images/icons/diamond-black.svg?m=173456830520676.7");
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: "";
  display: block;
  height: 15px;
  left: 50%;
  margin-bottom: -8px;
  margin-left: -7px;
  position: absolute;
  width: 15px;
}

.Banner::before {
  background-image: url("/_resources/themes/main/images/icons/diamond-black.svg?m=173456830520676.7");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 15px;
  left: 50%;
  margin-bottom: -8px;
  margin-left: -7px;
  position: absolute;
  top: -7.5px;
  width: 15px;
}

.Banner.-first {
  border-top: 0;
}

@media (min-width: 768px) {
  .Banner.-first {
    padding-top: calc(5rem + 49px);
  }
}

.Banner.-first::before {
  display: none;
}

.Banner.-last::after {
  display: none;
}

.Banner__container {
  color: #fff;
  position: relative;
  text-align: center;
}

.Banner__title {
  border: 0;
  color: #fff;
  font-size: 60px;
  margin-bottom: 2rem;
  text-shadow: #000 0 0 10px;
}

@media (min-width: 480px) {
  .Banner__title {
    font-size: 72px;
  }
}

@media (min-width: 768px) {
  .Banner__title {
    font-size: 84px;
  }
}

@media (min-width: 980px) {
  .Banner__title {
    font-size: 96px;
  }
}

.Banner__title::before,
.Banner__title::after {
  display: none;
}

.Banner__subtitle {
  color: #fff;
  position: relative;
  text-shadow: #000 0 0 10px;
}

.Banner__content {
  position: relative;
  text-shadow: #000 0 0 10px;
}

.Banner__content > *:last-child {
  margin-bottom: 0;
}

.Banner__content .Button {
  text-shadow: none;
}

.Banner__videoWrapper {
  background-size: cover;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

.Banner__video {
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .Banner__video {
    display: none;
  }
}

/*
# #BetterNavigator

CMS and developer editing tool. We tweak the styles to re-position it, and hide it on mobile.

Styleguide Molecules.BetterNavigator
*/

/* stylelint-disable selector-max-id */

html #BetterNavigator {
  display: none;
  top: 50%;
}

@media (min-width: 768px) {
  html #BetterNavigator {
    display: block;
  }
}

html #BetterNavigator.open {
  top: 80px;
}

/*
#.Branding

Site branding. Hides when viewport smaller than 768px.

Template: Includes/Branding

Styleguide Molecules.Branding
*/

.Branding {
  display: none;
  width: 100%;
}

@media (min-width: 768px) {
  .Branding {
    display: block;
  }
}

.Branding.-reversed {
  z-index: 3000;
  margin-top: 49px;
  position: absolute;
}

.Branding__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  padding-bottom: 25px;
  padding-top: 32px;
}

@media (max-width: 1056px) {
  .Branding__inner {
    margin-left: 48px;
    margin-left: calc(env(safe-area-inset-left) + 48px);
    margin-left: max(env(safe-area-inset-left), 48px);
    margin-right: 48px;
    margin-right: calc(env(safe-area-inset-right) + 48px);
    margin-right: max(env(safe-area-inset-right), 48px);
  }
}

@media (max-width: 980px) {
  .Branding__inner {
    margin-left: 24px;
    margin-left: calc(env(safe-area-inset-left) + 24px);
    margin-left: max(env(safe-area-inset-left), 24px);
    margin-right: 24px;
    margin-right: calc(env(safe-area-inset-right) + 24px);
    margin-right: max(env(safe-area-inset-right), 24px);
  }
}

@media print {
  .Branding__inner {
    margin-left: 24px;
    margin-right: 24px;
  }
}

.Branding__subtitle {
  font-family: "Satisfy", cursive;
  color: #000;
  float: right;
  font-size: 18px;
  line-height: 68px;
}

@media (min-width: 980px) {
  .Branding__subtitle {
    font-size: 24px;
  }
}

.Branding.-reversed .Branding__subtitle {
  color: #ccc;
  filter: drop-shadow(#000 0 0 5px);
}

/*
#.Breadcrumbs

Site Breadcrumbs

Markup:
<div class="Breadcrumbs">
    <a href="/">Home</a>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1792 1792" data-inject-url="https://local.quinn.com:3000/_resources/themes/main/images/icons/angle-right.svg?m=1506967070" class="Breadcrumbs__delimiter" data-svg-inject=""><path d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"></path></svg>
    <a href="/about-us/">About Us</a>
    <svg width="18" height="18" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg" data-inject-url="https://local.quinn.com:3000/_resources/themes/main/images/icons/angle-right.svg?m=1506967070" class="Breadcrumbs__delimiter" data-svg-inject=""><path d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"></path></svg>
    <span>Site Credits</span>
</div>


Styleguide Molecules.Breadcrumbs
*/

.Breadcrumbs {
  margin: 0.5em 0 0.25em;
  padding: 0 24px;
  padding-bottom: 1px !important;
  padding-top: 6px !important;
  text-align: right;
  width: 100%;
}

@media (min-width: 980px) {
  .Breadcrumbs {
    margin: 0 auto;
    max-width: 960px;
    padding: 0;
  }
}

.Breadcrumbs__delimiter {
  fill: #999;
  height: 18px;
  margin-top: -3px;
  width: 18px;
}

.Breadcrumbs > * {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  vertical-align: top;
}

.Breadcrumbs a {
  text-decoration: none;
}

.Breadcrumbs a:hover {
  text-decoration: underline;
}

/*
#Focuspoint

Use Focuspoint and image-focus to auto crop image. Instead of relying on a class, this depends on the existance of
`[data-focus-x]` and `[data-focus-y]`.


Markup:
<div style="width: 100%; height: 300px;">
    <img
        src="/_resources/themes/main/images/home-bkgnd/ggb-night-large.jpg"
        width="1980"
        height="1080"
        data-focus-x="0.25"
        data-focus-y="0.75"
        data-image-w="1980"
        data-image-h="1080"
    />
</div>

Styleguide Molecules.Focused
*/

/*
#.Footer

Site Footer

Template: Includes/Footer

SectionTemplate: BenManu/StyleGuide/SGResponsivePlaygroundNoPad


Styleguide Molecules.Footer
*/

.Footer {
  background-color: #000;
}

.Footer__inner {
  margin: auto;
  max-width: 960px;
  padding: 12px;
  text-align: center;
}

@media (min-width: 768px) {
  .Footer__inner {
    text-align: left;
  }
}

@media (min-width: 980px) {
  .Footer__inner {
    padding: 12px 0;
  }
}

.Footer__socialLinks {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .Footer__socialLinks {
    float: right;
    margin-left: 12px;
  }
}

.Footer__socialLinkItem {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 0;
  position: relative;
}

.Footer__icon {
  display: block;
  fill: #a9c0b5;
  height: 100%;
  width: auto;
}

.Footer__icon:hover {
  fill: #fc0;
}

.Footer__companyInfo {
  color: #fff;
  font-size: 18px;
}

@media (min-width: 768px) {
  .Footer__companyInfo {
    margin-top: -3px;
  }

  .Footer__companyInfo div {
    display: inline-block;
  }

  .Footer__companyInfo div::after {
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
    content: "~";
    font-size: 16px;
    margin: 0 6px;
  }

  .Footer__companyInfo div:last-child::after {
    content: "";
  }
}

.Footer__tagline {
  font-family: "Satisfy", cursive;
  margin-bottom: -1px;
}

.Footer__companyName {
  font-weight: 700;
}

/*
#.Header

Fancy headline, date, and subtitle group for a page or the first Element on a page

Template: Includes/Header

Styleguide Molecules.Header
*/

.Header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.Header__date {
  margin: 0.75em 0;
}

.Header__subtitle {
  font-family: "Satisfy", cursive;
  color: #666;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}

/*
#ImageText (full/default)

Image and Text that stacks on mobile.

Template: Styleguide/ImageText

.-left                                          - Image on the left (default)
.-right                                         - Image on the right
.-left.-constrained                             - Image is constrained to fit in container area
.-right.-constrained                            - Right Image Constrained
.-left.-dropshadow                              - Image has dropshadow
.-right.-dropshadow                             - Right Image w/Dropshadow
.-left.-screenborder                            - Image has screen-like border
.-right.-screenborder                           - Right Image w/Screenborder
.-left.-constrained.-dropshadow                 - Image is constrained to fit in container area
.-right.-constrained.-dropshadow                - Right Image Constrained
.-left.-constrained.-screenborder               - Image is constrained to fit in container area
.-right.-constrained.-screenborder              - Right Image Constrained
.-left.-constrained.-screenborder.-dropshadow   - Image is constrained to fit in container area
.-right.-constrained.-screenborder.-dropshadow  - Right Image Constrained

SectionTemplate: BenManu/StyleGuide/SGResponsivePlaygroundNoPad

Styleguide Molecules.ImageText
*/

/*
#.ImageText (bleed/focuspoint)

Image that bleeds and is cropped with Focuspoint and image-focus with Text that stacks on mobile.

Template: Styleguide/ImageTextBleed

.-left                      - Image on the left (default)
.-right                     - Image on the right

SectionTemplate: BenManu/StyleGuide/SGResponsivePlaygroundNoPad

Styleguide Molecules.ImageTextBleed
*/

.ImageText {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .ImageText {
    align-items: center;
    flex-direction: row;
  }

  .ImageText.-bleed {
    min-height: 22rem;
  }
}

.ImageText__asset {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .ImageText__asset {
    align-self: stretch;
    flex: 0 0 auto;
    margin-left: calc(-50vw + 50% + 3rem);
    margin-right: 3rem;
    order: 1;
    position: relative;
    width: calc(50vw - 3rem);
  }
}

@media (min-width: 768px) {
  .ImageText.-right .ImageText__asset {
    margin-left: 3rem;
    margin-right: calc(-50vw + 50% + 3rem);
    order: 2;
  }
}

@media (min-width: 768px) {
  .ImageText.-constrained .ImageText__asset {
    margin-left: 0;
    width: 50%;
  }
}

@media (min-width: 768px) {
  .ImageText.-constrained.-right .ImageText__asset {
    margin-left: 3rem;
    margin-right: 0;
  }
}

.ImageText.-bleed .ImageText__asset {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  margin-left: -24px;
  margin-right: -24px;
  min-height: 18rem;
}

@media (min-width: 768px) {
  .ImageText.-bleed .ImageText__asset {
    margin-left: calc(-50vw + 50%);
    margin-right: 3rem;
    overflow: hidden;
    width: 50vw;
  }
}

@media (min-width: 768px) {
  .ImageText.-bleed.-left .ImageText__asset {
    border-right: 1px solid #ccc;
  }
}

@media (min-width: 768px) {
  .ImageText.-bleed.-right .ImageText__asset {
    border-left: 1px solid #ccc;
    margin-left: 3rem;
    margin-right: calc(-50vw + 50%);
  }
}

.ImageText__image {
  height: auto;
  width: 100%;
}

.ImageText.-bleed .ImageText__image {
  display: block;
  left: -24px;
  max-height: none;
  max-width: none;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 0;
  width: auto;
}

@media (min-width: 768px) {
  .ImageText.-bleed .ImageText__image {
    left: 0;
  }
}

.ImageText.-dropshadow .ImageText__image {
  box-shadow: 0 0 6px 0 #666;
}

.ImageText.-screenborder .ImageText__image {
  background-color: #666;
  border-radius: 2vw;
  padding: 3%;
}

@media (min-width: 768px) {
  .ImageText.-screenborder .ImageText__image {
    border-radius: 1vw;
  }
}

@media (min-width: 768px) {
  .ImageText__content {
    flex: 1 1 auto;
    margin-left: 3rem;
    order: 2;
    width: 50%;
  }

  .ImageText.-right .ImageText__content {
    margin-left: 0;
    margin-right: 3rem;
    order: 1;
  }
}

/*
#.MobileTools

Mobile tool bar at the top of the page on mobile devices. (Make display area <768px to see them)

Template: Includes/MobileTools


Styleguide Molecules.MobileTools
*/

.MobileTools {
  background-color: #fc0;
  display: none;
  height: 40px;
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .MobileTools {
    display: block;
  }
}

.MobileTools__home {
  padding-left: 24px;
}

.MobileTools__home img {
  margin-top: 5px;
}

.MobileTools__menu {
  float: right;
  margin-top: 10px;
  padding-right: 24px;
  transition: margin 0.25s ease;
}

body.-show-mobile-nav .MobileTools__menu {
  display: none;
}

.MobileTools__menu:hover,
.MobileTools__menu:active,
.MobileTools__menu:focus {
  fill: #fff;
}

.MobileTools__bodyButton {
  display: none;
}

body.-show-mobile-nav .MobileTools__bodyButton {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 14rem;
  top: 36px;
  z-index: 99;
}

/*
#.Page

Main page type. All other pages inhert from this and include these styles. This class includes some of the sticky-footer stuff.

Styleguide Molecules.Page
*/

.Page {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.Page__wrapper {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.Page__wrapper > * {
  flex: 0 0 auto;
}

.Page__wrapper > .Layout {
  flex: 1 0 auto;
}

/*
#.PageListItem

List item from a list of pages, like on an Index Page

Template: Includes/PageListItem

Styleguide Molecules.PageListItem
*/

.PageListItem {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.PageListItem__title {
  margin: 0;
}

.PageListItem__link {
  display: block;
  margin: 0 -24px;
  padding: 0.75rem;
  text-decoration: none;
}

@media (max-width: 980px) {
  .PageListItem__link {
    margin: 0-0.75rem;
  }
}

.PageListItem__link:hover {
  background-color: #d7e2dd;
  color: #000;
}

.PageListItem__content {
  color: #000;
  margin: 0;
}

/*
#.PrevNextPage

Previous and Next buttons at the bottom of a page

Template: Includes/PrevNextPage

SectionTemplate: BenManu/StyleGuide/SGResponsivePlaygroundNoPad

Styleguide Molecules.PrevNextPage
*/

.PrevNextPage {
  background-color: #666;
  padding: 12px 0;
}

.PrevNextPage__container {
  overflow: visible;
}

.PrevNextPage__prev {
  float: left;
  padding-left: 0.5em;
}

.PrevNextPage__prev::before {
  background-image: url("/_resources/themes/main/images/icons/angle-left.svg?m=173456830520676.7");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 1em;
  margin-bottom: -0.125em;
  width: 1em;
}

.PrevNextPage__next {
  float: right;
  padding-right: 0.5em;
}

.PrevNextPage__next::after {
  background-image: url("/_resources/themes/main/images/icons/angle-right.svg?m=173456830520676.7");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 1em;
  margin-bottom: -0.125em;
  width: 1em;
}

.PrevNextPage__label {
  display: none;
}

@media (max-width: 600px) {
  .PrevNextPage__label {
    display: inline;
  }
}

@media (max-width: 600px) {
  .PrevNextPage__title {
    display: none;
  }
}

/*
#SearchForm

Search Form in Navigation

Markup:
<form id="SearchForm_SearchForm" action="/search/SearchForm" method="get" enctype="application/x-www-form-urlencoded" class="SearchForm">
	<p id="SearchForm_SearchForm_error" class="message " style="display: none"></p>
	<fieldset>
		<div id="Search" class="field text nolabel">
			<div class="middleColumn">
				<input type="text" name="Search" class="text nolabel" id="SearchForm_SearchForm_Search" placeholder="Search">
			</div>
		</div>
		<input type="submit" name="action_results" value="Go" class="action" id="SearchForm_SearchForm_action_results">
	</fieldset>
</form>

Styleguide Blocks.SearchForm
*/

.SearchForm {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .SearchForm {
    width: 200px;
  }
}

.SearchForm label {
  display: none;
}

.SearchForm fieldset,
.SearchForm .field {
  border: 0;
  margin: 0;
  padding: 0;
}

.SearchForm input.text {
  background-color: #ffeb99;
  border: 0;
  border-radius: 0;
  height: 48px;
  padding: 12px;
  width: 100%;
}

.SearchForm button.action {
  background-color: transparent;
  border: 0;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  /* stylelint-disable selector-max-compound-selectors */
  /* stylelint-enable selector-max-compound-selectors */
}

.SearchForm button.action svg path {
  fill: #fc0;
}

.SearchForm button.action:hover svg path {
  fill: #fff;
}

.SearchForm .middleColumn.middleColumn.middleColumn {
  float: none;
  width: 100%;
}

/*
#.Tweet

Tweet card

.hasMedia - This tweet has media attachments

Template: Includes/Tweet

Styleguide Molecules.Tweet
*/

.Tweet {
  border: 1px solid #ccc;
  border-width: 0 0 1px;
  font-size: 14px;
  line-height: 1.4;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 12px;
  position: relative;
  text-align: left;
  vertical-align: top;
}

@media (min-width: 768px) {
  .Tweet {
    border-width: 0;
    padding: 0 12px;
    width: 400px;
  }

  .Tweet.first {
    margin-left: 24px;
  }
}

.Tweet.last {
  border-bottom: 0;
}

.Tweet a {
  text-decoration: none;
}

.Tweet a[href]:hover {
  text-decoration: underline;
}

.Tweet.-hasMedia {
  overflow: hidden;
}

.Tweet.-readMore {
  background-color: #ccc;
  font-size: 16px;
  text-align: center;
}

@media (min-width: 768px) {
  .Tweet.-readMore {
    text-align: left;
  }
}

.Tweet__avatar {
  filter: drop-shadow(2px 2px 1px #666);
  float: left;
  height: 48px;
  margin-right: 9px;
  padding: 0 3px 3px 0;
  width: 48px;
}

.Tweet__label > * {
  white-space: no-wrap;
}

.Tweet.-hasMedia .Tweet__label {
  margin-right: 15%;
}

.Tweet__name {
  font-weight: bold;
}

.Tweet__date {
  float: right;
  padding-left: 12px;
}

.Tweet__media {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 20%;
  z-index: -1;
}

.Tweet__media::after {
  background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
}

.Tweet__media.-video {
  background-position: center center;
}

.Tweet__content {
  overflow: hidden;
}

.Tweet.-hasMedia .Tweet__content {
  margin-right: 15%;
}

/*
#Forms

Forms, fields, etc.

Styleguide Forms
*/

/*
#.field

SilverStripe field wrapper.

Markup:
<div class="field $modifierClass">
    <label class="left" for="someInputID">Label</label>
    <div class="middleColumn">
        <input type="text" class="text" placeholder="Some Text" id="someInputID" />
    </div>
</div>

Styleguide Forms.field
*/

.field {
  margin-bottom: 0.5em;
}

.field:last-child {
  margin-bottom: 0;
}

/*
#.fieldgroup

SilverStripe optionset of radio buttons or checkboxes

Markup:
<div id="CityStateZip" class="field field CompositeField fieldgroup form-group--no-label">
    <div class="middleColumn fieldgroup">
        <div class="fieldgroup-field first odd">
            <div class="fieldholder-small text" id="Form_SGTestForm_City_Holder">
                <label class="fieldholder-small-label -optional" for="Form_SGTestForm_City">City</label>
                <input type="text" name="City" class="text" id="Form_SGTestForm_City" placeholder="San Francisco">
            </div>
        </div>
        <div class="fieldgroup-field  even">
            <div class="fieldholder-small statedropdown dropdown" id="Form_SGTestForm_State_Holder">
                <label class="fieldholder-small-label -optional" for="Form_SGTestForm_State">State</label>
                <select name="State" class="statedropdown dropdown" id="Form_SGTestForm_State">
                    <option value="" selected="selected">Choose State
                    </option>
                    <option value="AL">Alabama
                    </option>
                    <option value="AK">Alaska
                    </option>
                    <option value="AZ">Arizona
                    </option>
                </select>
            </div>
        </div>
        <div class="fieldgroup-field last odd">
            <div class="fieldholder-small text" id="Form_SGTestForm_Zip_Holder">
                <label class="fieldholder-small-label -optional" for="Form_SGTestForm_Zip">Zip</label>
                <input type="text" name="Zip" class="text" id="Form_SGTestForm_Zip" placeholder="12345"
                    pattern="(\d{5}([\-]\d{4})?)">
            </div>
        </div>
    </div>
</div>

Styleguide Forms.fieldgroup
*/

.fieldgroup,
.userformsgroup {
  border: 0;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .fieldgroup.middleColumn,
  .fieldgroup > .middleColumn,
  .userformsgroup.middleColumn,
  .userformsgroup > .middleColumn {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1.5rem;
  }

  .fieldgroup .fieldgroup-field,
  .fieldgroup > .middleColumn > .field,
  .userformsgroup .fieldgroup-field,
  .userformsgroup > .middleColumn > .field {
    flex: 1 0 auto;
    margin-left: 1.5rem;
  }

  .fieldgroup select,
  .userformsgroup select {
    min-width: 100%;
  }
}

/*
#<fieldset>

`<fieldset>`

Markup:
<fieldset>
    <input val="something">
</fieldset>


Styleguide Forms.1_fieldset
*/

fieldset,
.userformsgroup.userformsgroup {
  border: 0;
  padding: 0;
}

/*
#<form>

Styling for forms on the site.

Template: Styleguide/Form

Styleguide Forms.0_form
*/

/*
#checkbox

Form text inputs.

Markup:
<input id="Form_SGTestForm_Fruit" class="checkbox" name="Fruit" type="checkbox" value="0">
<label for="Form_SGTestForm_Fruit">Apple</label>

Styleguide Forms.input.checkbox
*/

input[type=checkbox] {
  display: inline-block;
  width: auto;
}

input[type=checkbox] + label {
  display: inline-block;
  margin-left: 0.25em;
  width: auto;
}

input[type=checkbox] + label.-optional::after {
  content: "";
}

/*
#radio

Form text inputs.

Markup:
<input id="Form_SGTestForm_Fruit" class="radio" name="Fruit" type="radio" value="0">
<label for="Form_SGTestForm_Fruit">Apple</label>

Styleguide Forms.input.radio
*/

input[type=radio] {
  display: inline-block;
  width: auto;
}

input[type=radio] + label {
  display: inline-block;
  margin-left: 0.25em;
  width: auto;
}

input[type=radio] + label.-optional::after {
  content: "";
}

/*
#submit

Form text inputs.

Markup:
<input type="submit" name="action_doLogin" value="Log in" class="action" id="MemberLoginForm_LoginForm_action_doLogin">

Styleguide Forms.input.submit
*/

input[type=submit],
input[type=reset] {
  width: auto;
}

/*
#text

Form text inputs.

Markup:
<input type="text" class="text" placeholder="Some Text" />

Styleguide Forms.input.text
*/

/*
#<input>

Form inputs.

Markup:
<input />

Styleguide Forms.input
*/

input {
  font-size: 16px;
  line-height: 1.5;
  padding: 0.25em;
  width: 100%;
}

/*
#<label>

Form field labels

Markup:
<div class="field">
    <label class="left" for="someInputID">First Label</label>
    <div class="middleColumn">
        <input type="text" class="text" placeholder="Optional Text" id="someInputID" />
    </div>
</div>
<div class="field">
    <label class="left" for="requiredInputID">Second Label</label>
    <div class="middleColumn">
        <input type="text" class="text" placeholder="Required Text" required="true" id="requiredInputID" />
    </div>
</div>

Styleguide Forms.label
*/

label.-optional::after {
  content: " (optional)";
  font-style: italic;
}

/*
#.optionset

SilverStripe optionset of radio buttons or checkboxes

Markup:
<ul class="optionset" id="Form_SGTestForm_Colors" role="listbox">
    <li class="odd val0">
        <input id="Form_SGTestForm_Colors_0" class="radio" name="Colors" type="radio" value="0">
        <label for="Form_SGTestForm_Colors_0">Red</label>
    </li>
    <li class="even val1">
        <input id="Form_SGTestForm_Colors_1" class="radio" name="Colors" type="radio" value="1">
        <label for="Form_SGTestForm_Colors_1">Orange</label>
    </li>
    <li class="odd val2">
        <input id="Form_SGTestForm_Colors_2" class="radio" name="Colors" type="radio" value="2">
        <label for="Form_SGTestForm_Colors_2"l">Yellow</label>
    </li>
</ul>

Styleguide Forms.optionset
*/

.optionset {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.optionset > li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.optionset.-inline > li {
  display: inline-block;
  margin-right: 1.5em;
}

/*
#<select>

SilverStripe optionset of radio buttons or checkboxes

Markup:
<div id="Form_SGTestForm_Sizes_Holder" class="field dropdown">
	<label class="left" for="Form_SGTestForm_Sizes">Sizes</label>
	<div class="middleColumn">
		<select name="Sizes" class="dropdown" id="Form_SGTestForm_Sizes">
            <option value="" selected="selected">Choose Size</option>
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="large">Large</option>
        </select>
	</div>
</div>

Styleguide Forms.select
*/

select {
  display: block;
  font-size: 16px;
}

/*
#<textarea>

Form text inputs.

Markup:
<div id="Form_SGTestForm_Comment_Holder" class="field textarea">
	<label class="left" for="Form_SGTestForm_Comment">Comment</label>
	<div class="middleColumn">
		<textarea name="Comment" class="textarea" id="Form_SGTestForm_Comment" placeholder="Your comment…" rows="5" cols="20"></textarea>
	</div>
	<label class="right" for="Form_SGTestForm_Comment">This is a RightTitle note.</label>
</div>

Styleguide Forms.textarea
*/

textarea {
  border-color: #ccc;
  padding: 0.5em;
  width: 100%;
}

/*
#Organisms

Organisms are relatively complex UI components or layout patterns composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

Styleguide Organisms
*/

/*
#.Container

Container wrapper around content or other components. Uses the `%container` trait.

Markup:
<div class="Container">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis vestibulum.
</div>

Styleguide Organisms.Container
*/

/*
#.Gallery

A collection of zoomable images, either in a grid or horizontal scroller

~~~php
'GridStyle' => "Enum('grid, scroller','grid')",
'ClipStyle' => "Enum('fit, fill','fill')",
'Ratio' => "Enum('16x9, 4x3, 1x1','16x9')",
'Padding' => "Enum('pad-none, pad-small, pad-medium, pad-large', 'pad-small')",
'Borders' => "Enum('borders-none, borders-rule, borders-screen','borders-none')",
~~~

.-grid              - grid of images (default)
.-scroller          - horizontal scroller of images
.-small             - small images (default)
.-medium            - medium images
.-large             - large images
.-fill              - images cropped to fill boxes (default)
.-fit               - images fit inside boxes
.-16x9              - 16x9 ratio (default)
.-4x3               - 4x3 ratio
.-1x1               - 1x1 ratio
.-pad-none          - no padding between images
.-pad-small         - small padding between images (default)
.-pad-medium        - medium padding between images
.-pad-large         - large padding between images
.-border-none       - no borders around images (default)
.-border-rule       - simple line border around images
.-border-screen     - screen-like border around images

Template: Includes/Gallery

SectionTemplate: BenManu/StyleGuide/SGResponsivePlaygroundNoPad

Styleguide Organisms.Gallery
*/

.Gallery.-scroller {
  overflow-x: auto;
}

.Gallery__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.Gallery__list.-scroller {
  overflow-x: auto;
}

@media (min-width: 768px) {
  .Gallery__list.-scroller {
    display: table;
    list-style-type: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    table-layout: fixed;
    width: 100%;
  }
}

@supports (flex-wrap: wrap) {
@media (min-width: 320px) {
    .Gallery__list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
}
}

.Gallery__item {
  list-style-type: none;
  margin: 0;
  padding: 0.75rem;
  width: 100%;
}

@media (min-width: 320px) {
  .Gallery__item {
    display: inline-block;
    width: 50%;
  }

  .Gallery__item.-medium {
    width: 100%;
  }

  .Gallery__item.-large {
    width: 100%;
  }
}

@media (min-width: 480px) {
  .Gallery__item {
    width: 33.333%;
  }

  .Gallery__item.-medium {
    width: 50%;
  }

  .Gallery__item.-large {
    width: 100%;
  }
}

@media (min-width: 600px) {
  .Gallery__item {
    width: 25%;
  }

  .Gallery__item.-medium {
    width: 33.333%;
  }

  .Gallery__item.-large {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .Gallery__item.-scroller {
    display: table-cell;
    vertical-align: top;
    width: 240px;
  }

  .Gallery__item.-scroller.-medium {
    width: 360px;
  }

  .Gallery__item.-scroller.-large {
    width: 480px;
  }

  .Gallery__item.-scroller:first-child {
    margin-left: 1.5rem;
  }

  .Gallery__item.-scroller:last-child {
    margin-right: 1.5rem;
  }
}

.Gallery__item.-pad-none {
  padding: 0;
}

.Gallery__item.-pad-small {
  padding: 0.75rem;
}

.Gallery__item.-pad-medium {
  padding: 1.5rem;
}

.Gallery__item.-pad-large {
  padding: 3rem;
}

.Gallery__link {
  display: block;
  line-height: 1;
  transition: transform 0.25s ease;
}

.Gallery__link:hover {
  cursor: pointer;
  cursor: move;
  transform: scale(1.1);
  z-index: 1;
}

.Gallery__link.-ext-svg {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.Gallery__img {
  border: 0;
}

.Gallery__img.-border-rule {
  border: 1px solid #ccc;
}

.Gallery__img.-border-screen {
  border: 10px solid #ccc;
  border-radius: 4px;
}

.Gallery__img.-border-screen.-medium .Gallery__img.-border-screen {
  border: 10px solid #ccc;
  border-radius: 4px;
}

@media (min-width: 480px) {
  .Gallery__img.-border-screen.-medium .Gallery__img.-border-screen {
    border: 12px solid #ccc;
  }
}

.Gallery__img.-border-screen.-large .Gallery__img.-border-screen {
  border: 10px solid #ccc;
  border-radius: 4px;
}

@media (min-width: 480px) {
  .Gallery__img.-border-screen.-large .Gallery__img.-border-screen {
    border: 14px solid #ccc;
  }
}

.-background-alternate .Gallery__img.-border-screen {
  border-color: #999;
}

/*
#.Grid

A responsive grid of items.

.-contained     - use container traits to limit max-width

Markup:
<ul class="Grid $modifierClass">
    <li class="Grid__item">
        <p>Donec sed odio dui. Nulla vitae elit libero</p>
    </li>
    <li class="Grid__item">
        <p>Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </li>
    <li class="Grid__item">
        <p>Curabitur blandit tempus porttitor.</p>
    </li>
    <li class="Grid__item">
        <p>Curabitur blandit tempus porttitor.</p>
    </li>
    <li class="Grid__item">
        <p>Curabitur blandit tempus porttitor.</p>
    </li>
    <li class="Grid__item">
        <p>Curabitur blandit tempus porttitor.</p>
    </li>
</ul>

Styleguide Organisms.Grid
*/

.Grid {
  font-size: 0;
  list-style-type: none;
  margin: 0 -0.75rem;
  padding: 0;
  text-align: center;
  vertical-align: top;
}

@supports (flex-wrap: wrap) {
  .Grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: inherit;
    justify-content: center;
  }
}

.Grid__item {
  display: inline-block;
  font-size: 16px;
  list-style-type: none;
  margin: 0;
  padding: 0 0.75rem 1.5rem;
  vertical-align: top;
  width: 50%;
}

@supports (flex-wrap: wrap) {
  .Grid__item {
    flex: 0 0 auto;
  }
}

.Grid__item.\:container\(width\>\=420px\).\:container\(width\>\=420px\) {
  width: 33.333%;
}

.Grid__item.\:container\(width\>\=768px\).\:container\(width\>\=768px\) {
  width: 25%;
}

@media (min-width: 480px) {
  .Grid__item html.no-js {
    width: 33.333%;
  }
}

@media (min-width: 768px) {
  .Grid__item html.no-js {
    width: 25%;
  }
}

/*
#.HorizScroller

A responsive grid of items.

.-large - large width cells
.-medium - medium width cells (default)
.-small - small width cells
.-topMargin - small width cells

Markup:
<div class="HorizScroller $modifierClass">
    <ul class="HorizScroller__list">
        <li>
            <p>Donec sed odio dui. Nulla vitae elit libero</p>
        </li>
        <li>
            <p>Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </li>
        <li>
            <p>Curabitur blandit tempus porttitor.</p>
        </li>
        <li>
            <p>Curabitur blandit tempus porttitor.</p>
        </li>
        <li>
            <p>Curabitur blandit tempus porttitor.</p>
        </li>
        <li>
            <p>Curabitur blandit tempus porttitor.</p>
        </li>
        <li>
            <p>Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </li>
        <li>
            <p>Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </li>
        <li>
            <p>Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </li>
    </ul>
</div>

Styleguide Organisms.HorizScroller
*/

.HorizScroller {
  overflow-x: auto;
}

@media (min-width: 768px) {
  .HorizScroller__list {
    display: table;
    list-style-type: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    table-layout: fixed;
    width: 100%;
  }

  .HorizScroller__list > li {
    display: table-cell;
    vertical-align: top;
  }

  .HorizScroller__list > li:first-child {
    margin-left: 1.5rem;
  }

  .HorizScroller__list > li:last-child {
    margin-right: 1.5rem;
  }

  .HorizScroller.-small .HorizScroller__list > li {
    width: 300px;
  }

  .HorizScroller.-medium .HorizScroller__list > li {
    width: 400px;
  }

  .HorizScroller.-large .HorizScroller__list > li {
    width: 600px;
  }
}

.HorizScroller.-topMargin {
  margin-top: 1em;
}

/*
#.Navigation

Navigation for the site, for all screens

Template: Includes/Navigation


Styleguide Organisms.Navigation
*/

.Navigation {
  display: none;
}

@media (min-width: 768px) {
  .Navigation {
    z-index: 4000;
    background-color: #fc0;
    border-bottom: 1px solid #666;
    display: block;
    margin: 0 auto;
    transition: margin-bottom 0.25s ease;
    width: 100%;
  }

  .Navigation.-has-subnav,
  body.-is-hover-subnav:not(.-absolute-subnavs) .Navigation {
    margin-bottom: 48px;
  }

  .Navigation.-subnav {
    background-color: #666;
    height: 0;
    left: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    top: 48px;
    transition: height 0.25s ease;
    width: 100%;
    z-index: 10;
  }

  .Navigation.-subnav .Navigation__menu > li.first {
    padding-left: 0;
  }

  .Navigation.-subnav .Navigation__menu > li.first.current,
  .Navigation.-subnav .Navigation__menu > li.first.section {
    margin-left: -24px;
  }

  .Navigation__item.current .Navigation.-subnav,
  .Navigation__item.section .Navigation.-subnav,
  .Navigation__item:hover .Navigation.-subnav {
    height: 48px;
  }

  .-is-hover-subnav .Navigation__item.current:not(:hover) .Navigation.-subnav {
    height: 0;
  }

  .Navigation__inner {
    position: relative;
  }

  .Navigation__menu {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 1056px) {
  .Navigation__menu {
    margin-left: 48px;
    margin-left: calc(env(safe-area-inset-left) + 48px);
    margin-left: max(env(safe-area-inset-left), 48px);
    margin-right: 48px;
    margin-right: calc(env(safe-area-inset-right) + 48px);
    margin-right: max(env(safe-area-inset-right), 48px);
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .Navigation__menu {
    margin-left: 24px;
    margin-left: calc(env(safe-area-inset-left) + 24px);
    margin-left: max(env(safe-area-inset-left), 24px);
    margin-right: 24px;
    margin-right: calc(env(safe-area-inset-right) + 24px);
    margin-right: max(env(safe-area-inset-right), 24px);
  }
}

@media print and (min-width: 768px) {
  .Navigation__menu {
    margin-left: 24px;
    margin-right: 24px;
  }
}

@media (min-width: 768px) {
  .Navigation__item {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .Navigation__item.current,
  .Navigation__item.section {
    background-image: url("/_resources/themes/main/images/icons/nav-here-arrow.png?m=173456830521076.72");
    background-image: url("/_resources/themes/main/images/icons/nav-here-arrow.svg?m=173456830521076.72");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: initial;
  }

  .-is-hover-subnav .Navigation__item.current,
  .-is-hover-subnav .Navigation__item.section {
    background: none;
  }

  .-is-hover-subnav .Navigation__item.current:hover,
  .-is-hover-subnav .Navigation__item.section:hover {
    background-image: url("/_resources/themes/main/images/icons/nav-here-arrow.png?m=173456830521076.72");
    background-image: url("/_resources/themes/main/images/icons/nav-here-arrow.svg?m=173456830521076.72");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: initial;
  }

  .Navigation__item:hover {
    background-image: url("/_resources/themes/main/images/icons/nav-here-arrow.png?m=173456830521076.72");
    background-image: url("/_resources/themes/main/images/icons/nav-here-arrow.svg?m=173456830521076.72");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: initial;
  }

  .Navigation__item:hover > a {
    position: relative;
    text-decoration: underline;
  }

  .Navigation__item:hover > a::after {
    bottom: 0;
    content: "";
    left: -24px;
    position: absolute;
    right: -24px;
    top: 0;
  }

  .Navigation__item:hover.-has-children .Navigation.-subnav {
    height: 48px;
    z-index: 20;
  }

  .Navigation__item.-subnav {
    border-right: 1px solid #999;
    display: inline-block;
    float: left;
    height: 48px;
    margin: 0;
    padding: 0;
    padding: 10px 12px 0;
    vertical-align: top;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .Navigation__item.-subnav.first {
    padding-left: 24px;
  }

  .Navigation__item.-subnav.last {
    border-right: 0;
  }

  .Navigation__item.-subnav.current,
  .Navigation__item.-subnav.section {
    background-color: #444;
    background-image: none !important;
  }

  .Navigation__item.-subnav.current.first,
  .Navigation__item.-subnav.section.first {
    padding-left: 24px !important;
  }

  .Navigation__link {
    color: #000 !important;
    display: inline-block;
    line-height: 48px;
    padding: 0 12px;
    text-decoration: none;
  }

  .Navigation__item .Navigation__link {
    font-weight: bold;
  }

  .Navigation__link.first {
    padding-left: 0;
  }

  .Navigation__link.-subnav {
    color: #fff !important;
    font-size: 12px;
    font-weight: normal;
    height: 100%;
    line-height: 1.2;
    padding: 0;
    vertical-align: top;
  }

  .Navigation__link.-subnav::after {
    display: none;
  }

  .Navigation__searchForm {
    float: right;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 768px) and (min-width: 980px) {
  html.no-flexbox .Navigation__searchForm {
    margin-right: -20px;
  }
}

/*
#.Navigation (mobile)

Navigation for the site, for mobile (Make display area >768px to see it)

Template: Includes/Navigation


Styleguide Organisms.NavigationMobile
*/

@media (max-width: 767px) {
  .Navigation {
    background-color: #666;
    bottom: 0;
    box-shadow: #666 0 0 10px;
    display: block;
    left: auto;
    overflow-x: auto;
    position: fixed;
    right: calc(-14rem - 10px);
    top: 0;
    transition: right 0.25s ease;
    width: 14rem;
  }

  .sg-section .Navigation {
    position: relative;
    right: 0;
    z-index: 100;
  }

  .-show-mobile-nav .Navigation {
    right: 0;
    z-index: 100;
  }

  .Navigation.-subnav {
    box-shadow: none;
    position: static;
  }

  .Navigation__menu {
    margin: 0;
    padding: 0;
  }

  .Navigation__item {
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding: 0;
  }

  .Navigation.-subnav .Navigation__item {
    background-color: #999;
    border-bottom: 0;
    border-top: 1px solid #ccc;
  }

  .Navigation__link {
    color: #fff !important;
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
    padding: 3px 10px;
    text-decoration: none;
  }

  .Navigation__link.current,
  .Navigation__link.section {
    border-right: 6px solid #fc0;
  }

  .Navigation__link.current {
    color: #fc0 !important;
  }

  .Navigation.-subnav .Navigation__link {
    font-weight: normal;
  }

  .Navigation.-subnav .Navigation__link br {
    display: none;
  }

  .Navigation__searchForm {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
  }
}

/*
#.ResponsiveScreens


Template: Includes/ResponsiveScreens

SectionTemplate: BenManu/StyleGuide/SGResponsivePlaygroundNoPad

Styleguide Organisms.ResponsiveScreens
*/

.ResponsiveScreens {
  height: 0;
  list-style-type: none;
  margin: 0;
  overflow: visible;
  padding: 0;
  padding-bottom: 76.25%;
  position: relative;
  width: 100%;
}

.ResponsiveScreens__item {
  position: absolute;
}

.ResponsiveScreens__item.-desktop {
  right: 0;
  width: 93%;
}

.ResponsiveScreens__item.-tablet {
  top: 10%;
  width: 45%;
}

.ResponsiveScreens__item.-mobile {
  bottom: 0;
  left: 37%;
  width: 20%;
}

.ResponsiveScreens__item > .Screenshot {
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.75);
}

/*
#.Slideshow

A collection of zoomable images, that rotates with a pager

.-fill              - images cropped to fill boxes (default)
.-fit               - images fit inside boxes
.-ratio-auto        - auto ratio (default)
.-ratio-16x9        - 16x9 ratio
.-ratio-4x3         - 4x3 ratio
.-ratio-1x1         - 1x1 ratio
.-border-none       - no borders around images (default)
.-border-rule       - simple line border around images
.-border-screen     - screen-like border around images

Template: Includes/Slideshow

Styleguide Organisms.Slideshow
*/

.Slideshow__list {
  height: 0;
  list-style-type: none;
  margin: 0;
  padding: 0 0 100%;
  perspective: 1000px;
  position: relative;
}

.Slideshow__list.-ratio-16x9 {
  padding-bottom: 56.25%;
}

.Slideshow__list.-ratio-4x3 {
  padding-bottom: 75%;
}

.Slideshow__list.-ratio-1x1 {
  padding-bottom: 100%;
}

.Slideshow__item {
  height: 100%;
  left: 0;
  list-style-type: none;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 0;
  transform: rotateX(180deg);
  transform-style: preserve-3d;
  transition: transform 0.5s ease, opacity 0.5s ease;
  width: 100%;
  z-index: 1;
}

.Slideshow__item.-current {
  opacity: 1;
  transform: rotateX(0);
}

.Slideshow__item.-prev {
  opacity: 0;
  transform: rotateX(-180deg);
}

.Slideshow__item.-border-screen {
  background-color: #666;
  border-radius: 1em;
  margin: 0;
  overflow: hidden;
  padding: 3%;
}

.Slideshow__link {
  display: block;
}

.Slideshow__link.-border-screen {
  box-sizing: content-box;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.Slideshow__img {
  display: block;
  height: auto;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  width: auto;
}

.Slideshow__img.-ratio-16x9,
.Slideshow__img.-ratio-4x3,
.Slideshow__img.-ratio-1x1 {
  height: auto;
  left: 0;
  max-height: none;
  max-width: none;
  top: 0;
  transform: none;
  width: 100%;
}

.Slideshow__pager {
  margin: 1em 0;
  text-align: center;
}

.Slideshow__pager html.no-js {
  display: none;
}

.Slideshow__pager__item {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #eee;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  height: 2em;
  line-height: 0.75;
  margin: 0.25em;
  padding: 0.5em;
  transition: background-color 0.5s ease, color 0.5s ease;
  width: 2em;
}

.Slideshow__pager__item.-current {
  background-color: #006535;
  color: #fff;
}

/*
#.Stack

A stack of items. Can be a list <`ul>` or a `<div>`.

Markup:
<ul class="Stack $modifierClass">
    <li>
        Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.
    </li>
    <li>
        Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.
    </li>
    <li>
        Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.
    </li>
</ul>

Styleguide Organisms.Stack
*/

.Stack {
  list-style-type: none;
  margin: 1.5rem 0;
  padding: 0;
}

/*
#Elements

All the Elements.
We only import the one we want everywhere in styles.css.
The rest are loaded as needed.

Styleguide Elements
*/

/*
#.Element

Default class for "elements" which are reorderable content chunks.

Styleguide Elements.Element
*/

.Element {
  display: block;
  margin-bottom: 3rem;
  margin-top: 3rem;
}

.Element.-first {
  margin-top: 0;
}

.Element.ElementTweets.-last {
  margin-bottom: 0;
}

.Element.-background-alternate {
  background-color: #eee;
  padding-bottom: 2.25rem;
  padding-top: 2.25rem;
}

.Element.-background-alternate.-last {
  margin-bottom: 0;
}

.ElementBanner + .Element:not(.ElementBanner) {
  margin-top: 1.5rem;
}

.Element__title {
  text-align: center;
}

/*
#Third Party

Third party styles and assets

Styleguide ThirdParty
*/

.lazyload .-blur-up {
  filter: blur(5px);
  transition: filter 0.25s;
}

.lazyload.-blur-up {
  filter: blur(0);
}

/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */

/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */

/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/

/*

	1. Buttons

 */

/* <button> css reset */

.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  transition: opacity 0.2s;
  box-shadow: none;
}

.pswp__button:focus,
.pswp__button:hover {
  opacity: 1;
}

.pswp__button:active {
  outline: none;
  opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */

.pswp__ui--over-close .pswp__button--close {
  opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: url("/_resources/themes/main/images/photoswipe/default-skin.png?m=173456830521876.72") 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */

  .pswp--svg .pswp__button,
  .pswp--svg .pswp__button--arrow--left:before,
  .pswp--svg .pswp__button--arrow--right:before {
    background-image: url("/_resources/themes/main/images/photoswipe/default-skin.svg?m=173456830521876.72");
  }

  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}

.pswp__button--close {
  background-position: 0 -44px;
}

.pswp__button--share {
  background-position: -44px -44px;
}

.pswp__button--fs {
  display: none;
}

.pswp--supports-fs .pswp__button--fs {
  display: block;
}

.pswp--fs .pswp__button--fs {
  background-position: -44px 0;
}

.pswp__button--zoom {
  display: none;
  background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0;
}

/* no arrows on touch screens */

.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden;
}

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/

.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute;
}

.pswp__button--arrow--left {
  left: 0;
}

.pswp__button--arrow--right {
  right: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: "";
  top: 35px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 32px;
  position: absolute;
}

.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px;
}

.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px;
}

/*

	2. Share modal/popup and links

 */

.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__share-modal--hidden {
  display: none;
}

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transform: translateY(6px);
  transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.pswp__share-tooltip a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
}

.pswp__share-tooltip a:hover {
  text-decoration: none;
  color: #000;
}

.pswp__share-tooltip a:first-child {
  /* round corners on the first/last list item */
  border-radius: 2px 2px 0 0;
}

.pswp__share-tooltip a:last-child {
  border-radius: 0 0 2px 2px;
}

.pswp__share-modal--fade-in {
  opacity: 1;
}

.pswp__share-modal--fade-in .pswp__share-tooltip {
  transform: translateY(0);
}

/* increase size of share links on touch devices */

.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px;
}

a.pswp__share--facebook:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}

a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF;
}

a.pswp__share--facebook:hover:before {
  border-bottom-color: #3E5C9A;
}

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF;
}

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D;
}

a.pswp__share--download:hover {
  background: #DDD;
}

/*

	3. Index indicator ("1 of X" counter)

 */

.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #FFF;
  opacity: 0.75;
  padding: 0 10px;
}

/*

	4. Caption

 */

.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px;
}

.pswp__caption small {
  font-size: 11px;
  color: #BBB;
}

.pswp__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #CCC;
}

.pswp__caption--empty {
  display: none;
}

/* Fake caption element, used to calculate height of next/prev image */

.pswp__caption--fake {
  visibility: hidden;
}

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */

.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr;
}

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px;
}

.pswp__preloader--active {
  opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
  /* We use .gif in browsers that don't support CSS animation */
  background: url("/_resources/themes/main/images/photoswipe/preloader.gif?m=173456830521876.72") 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
  opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
  animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
  animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0;
}

.pswp--css_animation .pswp__preloader__cut {
  /*
  	The idea of animating inner circle is based on Polymer ("material") loading indicator
  	 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
  */
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right;
  }
}

@keyframes clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes donut-rotate {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-140deg);
  }

  100% {
    transform: rotate(0);
  }
}

/*

	6. Additional styles

 */

/* root element of UI */

.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550;
}

/* top black bar with buttons and "1 of X" indicator */

.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible;
}

.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */

.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3);
}

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */

.pswp__ui--idle .pswp__top-bar {
  opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0;
}

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001;
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none;
}

.pswp__element--disabled {
  display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
  background: none;
}

/* pswp = photoswipe */

.pswp {
  z-index: 5000;
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp__button {
  font-size: 0;
}

/* style is added when JS option showHideOpacity is set to true */

.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/

.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp-white-bkgnd .pswp__bg {
  background-color: #fff;
}

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Prevent selection and tap highlights */

.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  transform-origin: left top;
  /* for open/close transition */
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  transition: none;
}

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
}

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/

.pswp__img--placeholder {
  -webkit-backface-visibility: hidden;
}

/*
	div element that matches size of large image
	large image loads on top of it
*/

.pswp__img--placeholder--blank {
  background: #222;
}

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0;
}

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/

.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC;
}

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline;
}



/*# sourceMappingURL=styles.css.map*/