@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
*/

.Button {
  color: #000;
  background-color: #a9c0b5;
  border: 0;
  border-radius: 6px;
  display: inline-block;
  padding: 6px 12px;
  text-decoration: none;
}

.Button:visited,
.pseudo-class-visited.Button {
  color: #000;
}

.Button:focus,
.pseudo-class-focus.Button {
  color: #000;
}

.Button:hover,
.pseudo-class-hover.Button {
  color: #000;
}

.Button:active,
.pseudo-class-acgtive.Button {
  color: #000;
}

.Button:hover,
.pseudo-class-hover.Button {
  background-color: #d7e2dd;
}

.Button:active,
.pseudo-class-acgtive.Button {
  background-color: #8bc42a;
}

.Button:hover {
  text-decoration: none;
}

.-outlined.Button {
  color: #fff;
  background-color: transparent;
  border: 2px solid currentColor;
}

.-outlined.Button:visited,
.-outlined.pseudo-class-visited.Button {
  color: #fff;
}

.-outlined.Button:focus,
.-outlined.pseudo-class-focus.Button {
  color: #fff;
}

.-outlined.Button:hover,
.-outlined.pseudo-class-hover.Button {
  color: #fff;
}

.-outlined.Button:active,
.-outlined.pseudo-class-acgtive.Button {
  color: #fff;
}

.-outlined.Button:hover,
.-outlined.pseudo-class-hover.Button {
  background-color: #a9c0b5;
}

.-outlined.Button:active,
.-outlined.pseudo-class-acgtive.Button {
  background-color: #006535;
}

.-reversed.Button {
  color: #006535;
  background-color: #fff;
}

.-reversed.Button:visited,
.-reversed.pseudo-class-visited.Button {
  color: #006535;
}

.-reversed.Button:focus,
.-reversed.pseudo-class-focus.Button {
  color: #fff;
}

.-reversed.Button:hover,
.-reversed.pseudo-class-hover.Button {
  color: #000;
}

.-reversed.Button:active,
.-reversed.pseudo-class-acgtive.Button {
  color: #fff;
}

.-reversed.Button:visited,
.-reversed.pseudo-class-visited.Button {
  background-color: #fff;
}

.-reversed.Button:focus,
.-reversed.pseudo-class-focus.Button {
  background-color: #8bc42a;
}

.-reversed.Button:hover,
.-reversed.pseudo-class-hover.Button {
  background-color: #d7e2dd;
}

.-reversed.Button:active,
.-reversed.pseudo-class-acgtive.Button {
  background-color: #8bc42a;
}

.-fullwidth.Button {
  display: block;
  text-align: center;
  width: 100%;
}

+ .-fullwidth.Button {
  margin-top: 0.5em;
}

.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,
.Container,
.Banner__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

@media (max-width: 1056px) {
  .Grid.-contained,
  .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,
  .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,
  .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,
.Header,
p,
html {
  font-size: 16px;
  font-style: "normal";
  font-weight: "400";
  line-height: 1.5;
}

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

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

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

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;
}

/*
#.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
*/

/*
#.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;
}

/*
#.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;
  }
}

/*
#.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;
}

/*
#.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;
}

/*
#.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;
}

/*
#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%;
}

/*
#.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
*/

/*
#.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%;
  }
}

/*
#.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;
  }
}

/*
#.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;
}



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