/*

# LYQ - Style guide

*/
/*

# Settings

*/
/*

## Type


### Fonts used
<div class="sg-type-base">$font-family-base</div>
<div class="sg-type-heading">$font-family-heading</div>


### Vertical Rythym settings

All sizing is based off these values

`$size-base-font: 16px !default;`

```$size-line-height: 24px !default;```

*/
.sg-type-base:before {
  font-family: "museo-sans-n3", "museo-sans", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  content: '"museo-sans-n3", "museo-sans", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif';
}

.sg-type-heading:before {
  font-family: "futura-pt-n7", "futura-pt", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  content: '"futura-pt-n7", "futura-pt", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif';
}

/*

## Colors

*/
/*

### Consistent Colours

Set some default color variables to keep things consistent

<div class="sg-color-white">$white</div>
<div class="sg-color-lightest-grey">$lightest-grey</div>
<div class="sg-color-lighter-grey">$lighter-grey</div>
<div class="sg-color-light-grey">$light-grey</div>
<div class="sg-color-lightish-grey">$lightish-grey</div>
<div class="sg-color-grey">$grey</div>
<div class="sg-color-darkish-grey">$darkish-grey</div>
<div class="sg-color-dark-grey">$dark-grey</div>
<div class="sg-color-darker-grey">$darker-grey</div>
<div class="sg-color-darkest-grey">$darkest-grey</div>
<div class="sg-color-black">$black</div>

*/
.sg-color-white:before {
  background-color: white;
}
.sg-color-white:after {
  content: "white";
}

.sg-color-lightest-grey:before {
  background-color: #f2f2f2;
}
.sg-color-lightest-grey:after {
  content: "#f2f2f2";
}

.sg-color-lighter-grey:before {
  background-color: #e6e6e6;
}
.sg-color-lighter-grey:after {
  content: "#e6e6e6";
}

.sg-color-light-grey:before {
  background-color: #cccccc;
}
.sg-color-light-grey:after {
  content: "#cccccc";
}

.sg-color-lightish-grey:before {
  background-color: #b3b3b3;
}
.sg-color-lightish-grey:after {
  content: "#b3b3b3";
}

.sg-color-grey:before {
  background-color: gray;
}
.sg-color-grey:after {
  content: "gray";
}

.sg-color-darkish-grey:before {
  background-color: #4d4d4d;
}
.sg-color-darkish-grey:after {
  content: "#4d4d4d";
}

.sg-color-dark-grey:before {
  background-color: #333333;
}
.sg-color-dark-grey:after {
  content: "#333333";
}

.sg-color-darker-grey:before {
  background-color: #1a1a1a;
}
.sg-color-darker-grey:after {
  content: "#1a1a1a";
}

.sg-color-darkest-grey:before {
  background-color: #0d0d0d;
}
.sg-color-darkest-grey:after {
  content: "#0d0d0d";
}

.sg-color-black:before {
  background-color: black;
}
.sg-color-black:after {
  content: "black";
}

/*

### Project Colours

<div class="sg-color-primary">$color-primary</div>
<div class="sg-color-secondary">$color-secondary</div>
<div class="sg-color-tertiary">$color-tertiary</div>
<div class="sg-color-base-font">$color-base-font</div>

*/
.sg-color-primary:before {
  background-color: #0060aa;
}
.sg-color-primary:after {
  content: "#0060aa";
}

.sg-color-secondary:before {
  background-color: #ef9323;
}
.sg-color-secondary:after {
  content: "#ef9323";
}

.sg-color-tertiary:before {
  background-color: #cc6633;
}
.sg-color-tertiary:after {
  content: "#cc6633";
}

.sg-color-base-font:before {
  background-color: #222222;
}
.sg-color-base-font:after {
  content: "#222222";
}

/*

## Layout

### Basic settings

```$max-site-width: 75em !default;```

Only used IE 8 and below only ```$min-ie-width: 50em;```

*/
/*

### Grid Settings

The default amount of columns is ```$columns: 12 !default;```

The default grid padding is based of the vertical rhythm sizing ```$padding: ($size-line-height / $size-base-font) * 1em;```

*/
/*

### Breakpoint grids

Probably best to not touch these but it might be important to note that there are different grid columns at different widths

```$small-columns: 6;```

```$medium-columns: 8;```

```$large-columns: $columns !default;```

```$huge-columns: 12;```

*/
/*

### Block Grids

This is explained later in the layout section, but this sets the maximum amount of block grids

```$block-grid-elements: 6;```

*/
/*

### Breakpoints

Using [Compass Breakpoint plug-in](https://github.com/canarymason/breakpoint)

#### Breakpoint default settings

*/
/*

### Mobile first breakpoints values

Sets the min width values and some custom ones for easy use later

- ```$breakpoint-small       : 0;```
- ```$breakpoint-medium      : 35em;```
- ```$breakpoint-large       : 54em;```
- ```$breakpoint-huge        : 70em;```
- ```$breakpoint-hi-res      : 2 device-pixel-ratio;```
- ```$breakpoint-portrait    : orientation portrait;```
- ```$breakpoint-landscape   : orientation landscape;```
- ```$breakpoint-monochrome  : monochrome;```
- ```$breakpoint-print       : print;```

*/
/*

### Specific breakpoints

- Derived from mobile first breakpoint values, also written shorthand.
- Use ```, no-query: true``` after the variable if you want the styles from this breakpoint to be applied to ie8 and older


- ```$lte-small              : max-width $breakpoint-medium - .1;```
- ```$lte-medium             : max-width $breakpoint-large - .1;```
- ```$lte-large              : max-width $breakpoint-huge - .1; // true```
- ```$e-medium               : $breakpoint-medium $breakpoint-large - .1; // true```
- ```$e-large                : $breakpoint-large $breakpoint-huge - .1; // true```
- ```$gte-small              : $breakpoint-small; // true```
- ```$gte-medium             : $breakpoint-medium; // true```
- ```$gte-large              : $breakpoint-large; // true```
- ```$gte-huge               : $breakpoint-huge;```
- ```$high-res               : $breakpoint-hi-res;```
- ```$portrait               : $breakpoint-portrait;```
- ```$landscape              : $breakpoint-landscape;```
- ```$mono                   : $breakpoint-monochrome;```
- ```$print                  : $breakpoint-print;```

*/
/*

## CSS3 Defaults

Used these variables to keep the look consistent

- ```$default-border-radius: 2px;```
- ```$default-box-shadow: 0 1px 2px rgba($black, 0.2);```
- ```$default-box-shadow-inset: inset 0 1px 2px rgba($black, 0.1);```
- ```$default-text-shadow:  0 1px 2px rgba($black, 0.2);```
- ```$default-transition: all 0.2s linear;```

*/
/*
  Mixins are slightly modified from Benjamin Doherty's first implementations: http://gist.github.com/377912
  rgba-background mixin can now be passed an option $dir variable
*/
/*

# Elements

*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

h1 {
  font-size: 2em;
}

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

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  max-width: 100%;
  width: auto !important;
  height: auto !important;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

img,
object,
embed {
  max-width: 100%;
  height: auto;
  display: block;
}

object,
embed {
  height: 100%;
}

#map_canvas img,
.map_canvas img {
  max-width: none!important;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5em;
  overflow-y: scroll;
}

body {
  background: #eeeeee url('../img/../img/noise.png') repeat left top;
  font-family: "museo-sans-n3", "museo-sans", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  color: #222222;
  font-size: 1em;
  line-height: 1.5em;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/*

## Headings

### General headings

Used to section content and create hierarchy. Always use the right heading for the structure of the page not for looks.

**e.g.** If you want a `h2` to look like a `h3` use the `.gamma` class instead

```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```
```
<div class="alpha">Alpha</div>
<div class="beta">Beta</div>
<div class="gamma">Gamma</div>
<div class="delta">Delta</div>
<div class="epsilon">Epsilon</div>
<div class="zeta">Zeta</div>
```

*/
h1, .alpha, h2, .beta, h3, .gamma, h4, .delta, h5, .epsilon, h6, .zeta, .giga, .mega, .kilo {
  color: #222222;
  margin: 0;
  font-family: "futura-pt-n7", "futura-pt", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.5em;
}

h1, .alpha {
  font-size: 1.8em;
  line-height: 1.66667em;
  text-transform: uppercase;
  color: #0060aa;
}
h1 label, .alpha label {
  color: #0060aa;
  display: inline-block;
  margin: 0;
  font-size: 100%;
}

h1 {
  margin: 0px 0px 12px;
}

h2, .beta {
  font-size: 1.4em;
  line-height: 2.14286em;
  color: #0060aa;
}

h2 {
  margin: 12px 0px 0px;
}

h3, .gamma {
  font-size: 1.2em;
  line-height: 1.25em;
  color: #222222;
  font-weight: 300;
}

h3 {
  margin: 12px 0px 0px;
}

h4, .delta {
  font-size: 1.25em;
  line-height: 1.2em;
  color: #222222;
}

h4 {
  margin: 12px 0px 0px;
}

h5, .epsilon {
  font-size: 1em;
  line-height: 1.5em;
  color: #222222;
  font-weight: normal;
}

h5 {
  margin: 12px 0px 0px;
}

h6, .zeta {
  font-size: 0.875em;
  line-height: 1.71429em;
  color: #222222;
}

h6 {
  margin: 12px 0px 0px;
}

/*

### Large text styles

Just for when you need something **really** big

```
<div class="giga">Giga</div>
<div class="mega">Mega</div>
<div class="kilo">Kilo</div>
```

*/
.giga {
  font-size: 6em;
  line-height: 1em;
  color: #222222;
}

.mega {
  font-size: 4.5em;
  line-height: 1em;
  color: #222222;
}

.kilo {
  font-size: 3em;
  line-height: 1.5em;
  color: #222222;
  text-transform: uppercase;
}

/*

### Sub Heading

Sub-headings can be used when placing a heading under another heading.

```
<h2>Heading 2</h2>
<h3 class="sub-heading">Heading 3</h3>

<h4>Heading 4</h4>
<h5 class="sub-heading">Heading 5</h5>
```

*/
.sub-heading {
  margin-top: 0;
}

/*

### Heading group

When you want to group headings together

```
<hgroup>
<h1>Heading 1</h1>
<h2 class="sub-heading">Heading 2</h3>
</hgroup>

<hgroup>
<h2>Heading 4</h2>
<h3 class="sub-heading">Heading 3</h3>
</hgroup>
```

*/
hgroup {
  margin: 0px 0px 12px;
}
hgroup h1, hgroup h2, hgroup h3, hgroup h4, hgroup h5, hgroup h6 {
  margin: 0;
}

/*

### Heading secondary

When a slightly less conspicuous heading is needed

```
<h2 class="heading-secondary">Sub Heading 2</h2>
<h3 class="heading-secondary">Sub Heading 3</h3>
<h4 class="heading-secondary">Sub Heading 4</h4>
<h5 class="heading-secondary">Sub Heading 5</h5>
<h6 class="heading-secondary">Sub Heading 6</h6>
```

*/
.heading-secondary {
  text-transform: uppercase;
  color: #222222;
  margin: 0;
}

h2.heading-secondary {
  font-size: 1.4em;
  line-height: 2.14286em;
}

h3.heading-secondary {
  font-size: 1.2em;
  line-height: 1.25em;
}

h4.heading-secondary {
  font-size: 1em;
  line-height: 1.5em;
}

h5.heading-secondary {
  font-size: 0.8em;
  line-height: 1.875em;
}

h6.heading-secondary {
  font-size: 0.7em;
  line-height: 2.14286em;
}

/*

## Text

### Standard Paragraph

```
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
```

*/
p {
  margin: 0 0 1.5em;
  font-size: 1em;
  line-height: 1.5em;
}

/*

### Lead Paragraph

When you want to 'lead' into an article/page.

```
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
```

*/
.lede,
.lead {
  font-size: 1.125em;
  line-height: 1.6em;
}

/*
### Small / Small print

2 ways to implement depending on the situation

```
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</small>
```

```
<p class="smallprint">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
```

*/
small,
.smallprint,
.milli {
  font-size: 0.875em;
  line-height: 1.71429em;
}

/*

### Micro

Really small text

```
<p class="micro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
```

*/
.micro {
  font-size: 0.75em;
  line-height: 2em;
}

/*
### Blockquote

Used for references and quotes.

```
<blockquote>
  <p>Insanity: doing the same thing over and over again and expecting different results.</p>
  <cite class="source">Albert Einstein</cite>
</blockquote>
```

*/
q {
  quotes: "‘" "’" "“" "”";
}

q:before {
  content: "‘";
  content: open-quote;
}

q:after {
  content: "’";
  content: close-quote;
}

q q:before {
  content: "“";
  content: open-quote;
}

q q:after {
  content: "”";
  content: close-quote;
}

blockquote {
  quotes: "“" "”";
}

blockquote p:before {
  content: "“";
  content: open-quote;
}

blockquote p:after {
  content: "";
  content: no-close-quote;
}

blockquote p:last-of-type:after {
  content: "”";
  content: close-quote;
}

blockquote {
  /**
   * .4em is roughly equal to the width of the opening “ that we wish to hang.
   */
  padding: 12px 48px;
  margin: 24px 0px;
  text-indent: -0.4em;
  border-left: 4px solid #0060aa;
}
blockquote p {
  font-weight: 700;
}
blockquote p:last-of-type {
  margin-bottom: 0;
}

.source {
  display: block;
  text-indent: 0;
}
.source:before {
  content: "—";
}

hr {
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1.5em 0;
}

ins {
  background: #ff9;
  color: #222222;
}

mark {
  background: #ff0;
  color: #222222;
}

pre,
code,
kbd,
samp {
  font-family: Courier, monospace, serif;
  _font-family: Courier, monospace;
  font-size: 1em;
  line-height: 1.5em;
}

sub,
sup {
  font-size: 0.75em;
  line-height: 2em;
}

sup {
  top: -0.75em;
}

sub {
  bottom: -0.375em;
}

/*
### Alignment

When some basic text needs to be aligned, not floated.

```
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias hic asperiores iusto quis unde quae alias totam est obcaecati animi aliquam cum eveniet impedit dolorum quos recusandae soluta iste rerum!</p>
<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi veritatis quo rem delectus modi neque vero distinctio exercitationem ad omnis autem animi sapiente veniam amet repellendus. Totam dignissimos numquam quod.</p>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptas alias minus at explicabo cupiditate iste deleniti iusto ad eius eos nulla sapiente similique odit corporis accusantium consectetur neque. Culpa.</p>
```

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

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

.text-center, .l-example {
  text-align: center;
}

/*

## Links

```
<a href="#">Link</a>
<br>
<a class=":hover" href="#">Link (hover state)</a>
<br>
<a class=":focus" href="#">Link (focus state)</a>
<br>
<a class=":active" href="#">Link (active state)</a>
```

*/
a {
  color: #ef9323;
  text-decoration: none;
  line-height: inherit;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

a:hover,
a:focus,
.\3A hover,
.\3A focus {
  color: #b86b0d;
}

a.active,
a:active,
.\3A active {
  color: #714208;
}

p a,
p a:visited {
  line-height: inherit;
}

/*

## Lists

### Unordered List

```
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
```

### Ordered List

```
<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
```

*/
ul,
ol {
  margin: 24px 0px;
  padding: 0px 0px 0px 24px;
}

li {
  font-size: 1em;
  line-height: 1.5em;
}

/*

### Definition List

```
<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>
```

*/
dd {
  margin: 0px 0px 0px 24px;
}

/*

### Navigation list

```
<nav>
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
</nav>
```

*/
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

/*

### No Bullet List

```
<ul class="no-bullets">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
```

*/
.no-bullets, .icons, .toggle-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.no-bullets li, .icons li, .toggle-links ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

/*

### Slat List

```
<ul class="list-slat">
  <li class="list-slat--item">List item</li>
  <li class="list-slat--item"><a href="#">List item link</a></li>
  <li class="list-slat--item">List item</li>
  <li class="list-slat--item"><span class="list-slat--title">List item title</span></li>
</ul>
```

*/
.list-slat {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-slat li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

.list-slat--item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 0px;
}
.list-slat--item > a {
  display: block;
}
.list-slat--item:first-child {
  border-top: none;
}
.list-slat--item.l-1of2:nth-child(2) {
  border-top: none;
}

.list-slat--title {
  margin: 0;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5em;
}

/*

## Tables

We have a lot at our disposal for making very complex table constructs.

```
<table>
  <colgroup>
    <col class="t10">
    <col class="t10">
    <col class="t10">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th colspan="3">Foo</th>
      <th>Bar</th>
    </tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th class="numerical">Dolor</th>
      <th>Sit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">Sit</th>
      <td>Dolor</td>
      <td class="numerical">03.788</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">32.210</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">47.797</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <th rowspan="2">Sit</th>
      <td>Dolor</td>
      <td class="numerical">09.640</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">12.117</td>
      <td>Lorem</td>
    </tr>
  </tbody>
</table>
```

*/
table {
  width: 100%;
  overflow-x: scroll;
  display: block;
}

th,
td {
  padding: 0.375em;
  text-align: left;
}

[colspan] {
  text-align: center;
}

[colspan="1"] {
  text-align: left;
}

[rowspan] {
  vertical-align: middle;
}

[rowspan="1"] {
  vertical-align: top;
}

.numerical {
  text-align: right;
}

/*

### Table helpers

In the HTML above we see several `col` elements with classes whose numbers
represent a percentage width for that column. We leave one column free of a
class so that column can soak up the effects of any accidental breakage in
the table.

**e.g.** `.t5` is `5%` or `.t70` is `70%`

Class from `t5` to `t95` are available.

*/
.t5 {
  width: 5%;
}

.t10 {
  width: 10%;
}

.t12 {
  width: 12.5%;
}

.t15 {
  width: 15%;
}

.t20 {
  width: 20%;
}

.t25 {
  width: 25%;
}

.t30 {
  width: 30%;
}

.t33 {
  width: 33.333%;
}

.t35 {
  width: 35%;
}

.t37 {
  width: 37.5%;
}

.t40 {
  width: 40%;
}

.t45 {
  width: 45%;
}

.t50 {
  width: 50%;
}

.t55 {
  width: 55%;
}

.t60 {
  width: 60%;
}

.t62 {
  width: 62.5%;
}

.t65 {
  width: 65%;
}

.t66 {
  width: 66.666%;
}

.t70 {
  width: 70%;
}

.t75 {
  width: 75%;
}

.t80 {
  width: 80%;
}

.t85 {
  width: 85%;
}

.t87 {
  width: 87.5%;
}

.t90 {
  width: 90%;
}

.t95 {
  width: 95%;
}

/*

### Table Bordered

```
<table class="table-bordered">
  <colgroup>
    <col class="t10">
    <col class="t10">
    <col class="t10">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th colspan="3">Foo</th>
      <th>Bar</th>
    </tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th class="numerical">Dolor</th>
      <th>Sit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">Sit</th>
      <td>Dolor</td>
      <td class="numerical">03.788</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">32.210</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">47.797</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <th rowspan="2">Sit</th>
      <td>Dolor</td>
      <td class="numerical">09.640</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">12.117</td>
      <td>Lorem</td>
    </tr>
  </tbody>
</table>
```

*/
.table-bordered th,
.table-bordered td {
  border: 1px solid #cccccc;
  /* Override this color in your theme stylesheet */
}
.table-bordered th:empty,
.table-bordered td:empty {
  border: none;
}

/*

###  Table Striped

```
<table class="table-striped">
  <colgroup>
    <col class="t10">
    <col class="t10">
    <col class="t10">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th colspan="3">Foo</th>
      <th>Bar</th>
    </tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th class="numerical">Dolor</th>
      <th>Sit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">Sit</th>
      <td>Dolor</td>
      <td class="numerical">03.788</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">32.210</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">47.797</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <th rowspan="2">Sit</th>
      <td>Dolor</td>
      <td class="numerical">09.640</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">12.117</td>
      <td>Lorem</td>
    </tr>
  </tbody>
</table>
```

*/
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f2f2f2;
  /* Override this color in your theme stylesheet */
}

/*

### Table Data

Adjust font size to be smaller and better for data output

```
<table class="table-data">
  <colgroup>
    <col class="t10">
    <col class="t10">
    <col class="t10">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th colspan="3">Foo</th>
      <th>Bar</th>
    </tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th class="numerical">Dolor</th>
      <th>Sit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">Sit</th>
      <td>Dolor</td>
      <td class="numerical">03.788</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">32.210</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">47.797</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <th rowspan="2">Sit</th>
      <td>Dolor</td>
      <td class="numerical">09.640</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td>Dolor</td>
      <td class="numerical">12.117</td>
      <td>Lorem</td>
    </tr>
  </tbody>
</table>
```

*/
.table-data {
  font-size: 0.875em;
  line-height: 1.71429em;
}

/*

## Forms

*/
form {
  margin: 0px 0px 12px;
  font-family: "museo-sans-n3", "museo-sans", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}

.l-row form .l-row {
  margin: 0px -6px;
}
.l-row form .l-row .l-column,
.l-row form .l-row .l-columns {
  padding: 0px 6px;
}
.l-row form .l-row.l-collapse {
  margin: 0;
}
.l-row form .l-row.l-collapse .l-column,
.l-row form .l-row.l-collapse .l-columns {
  padding: 0;
}

/*

### Basic Elements

Complex layouts can be achieved using the grid classes.

```
<div class="l-row">
  <form>
   <label for="basic-input">This is a label.</label>
   <input type="text" id="basic-input" name="basic-input" placeholder="Standard Input">
   <label>Address</label>
   <input type="text" class="l-twelve" placeholder="Street">
   <div class="l-row">
     <div class="l-six l-columns">
       <input type="text" placeholder="City">
     </div>
     <div class="l-three l-columns">
       <input type="text" placeholder="State">
     </div>
     <div class="l-three l-columns">
       <input type="text" placeholder="ZIP">
     </div>
   </div>
   <textarea placeholder="Message"></textarea>
  </form>
</div>
```

*/
label {
  font-size: 0.875em;
  line-height: 1.71429em;
  color: #222222;
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-weight: bold;
  margin-bottom: 6px;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  font-size: 0.875em;
  line-height: 1.71429em;
  height: 48px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  display: block;
  width: 100%;
  border-color: #cccccc;
  background-color: #f7f7f7;
  color: #333333;
  font-family: inherit;
  border-style: solid;
  border-width: 0.07143em;
  padding: 0.35714em;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0px 0px 14px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  background: white;
  outline: none !important;
  border-color: #333333;
}
input[type="text"][disabled],
input[type="password"][disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="email"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
textarea[disabled] {
  background-color: #cccccc;
}

textarea {
  height: auto;
}

select {
  width: 100%;
}

/*

### Fieldsets

```
<form>
 <fieldset>
   <legend>Fieldset Name</legend>
   <label>This is a label.</label>
   <input type="text" placeholder="Standard Input">
   <label>Address</label>
   <input type="text">
   <input type="text" class="six">
 </fieldset>
</form>
```

*/
fieldset {
  border-color: #e6e6e6;
  border-style: solid;
  border-width: 0.07143em;
  padding: 0.78571em;
  padding-bottom: 0;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  margin: 18px 0px;
}
fieldset legend {
  font-weight: bold;
  background: white;
  padding: 0px 3px;
  margin: 0;
  margin-left: -3px;
}

/*
### Form item

Generally for a label and input element together

```
<form>
 <div class="form-item">
   <label for="full-name">Full Name</label>
   <input type="text" class="field text fn" id="full-name" name="full-name" />
 </div>
</form>
```

*/
.form-item {
  margin: 0px 0px 14px;
  *zoom: 1;
}
.form-item:after {
  content: "";
  display: table;
  clear: both;
}

/*

### Form Helpers

#### Form Inline

```
<form action="" class="form-inline">
  <div class="l-row l-collapse">
    <div class="l-eight l-columns"><input type="email" placeholder="mail@example.com"></div>
    <div class="l-four l-columns"><input type="submit" class="button-large button-full" value="Signup"></div>
  </div>
</form>
```

*/
.form-inline {
  margin-bottom: 0;
}
.form-inline input,
.form-inline textarea,
.form-inline .form-item {
  margin-bottom: 0;
}

.label-sub {
  font-weight: 400;
  color: #2f2f2f;
  margin-bottom: 0;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
}
.label-sub {
  *display: inline;
}

/*

### Radio Buttons

```
<form>
  <div class="l-row">
    <div class="l-six l-columns">
      <div class="form-item">
        <label>Radio Buttons</label>
        <div class="radio">
          <input name="radios" type="radio" id="radio1">
          <label for="radio1" class="label-sub">Radio 1</label>
        </div>
        <div class="radio">
          <input name="radios" type="radio" id="radio2">
          <label for="radio2" class="label-sub">Radio 2</label>
        </div>
      </div>
    </div>
  </div>
</form>
```

### Checkboxes

```
<form>
  <div class="l-row">
    <div class="l-six l-columns">
      <div class="form-item">
        <label>Checkboxes</label>
        <div class="checkbox">
          <input name="checkboxes" type="checkbox" id="checkbox1">
          <label for="checkbox1" class="label-sub">Check 1</label>
        </div>
        <div class="checkbox">
          <input name="checkboxes" type="checkbox" id="checkbox2">
          <label for="checkbox2" class="label-sub">Check 2</label>
        </div>
      </div>
    </div>
  </div>
</form>
```

*/
/*

## Miscellaneous UI

Used for separating chunks of content

```
<hr>
```

*/
hr {
  border-color: rgba(0, 0, 0, 0.1);
}

.file-icon {
  display: inline;
}

/*

# Layout

*/
/*

## The Grid

A flexible grid that control almost all the layout of the site

*/
.l-row {
  max-width: 75em;
  margin: 0 auto;
  padding: 0;
  min-width: 50em;
}
.l-row.l-collapse {
  padding: 0;
}
.l-row.l-collapse .l-column, .l-row.l-collapse .l-columns {
  padding: 0;
}
.l-row.l-collapse .l-row {
  margin: 0;
}
.l-row .l-row {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0 -0.75em;
  overflow: hidden;
}
.l-row .l-row.l-collapse {
  margin: 0;
}

.l-column,
.l-columns {
  float: left;
  min-height: 1px;
  padding: 0 0.75em;
  position: relative;
  width: 100%;
}
.l-column.l-centered,
.l-columns.l-centered {
  float: none;
  margin: 0 auto;
}
.l-column.l-right,
.l-columns.l-right {
  float: right;
}

[class*="l-column"] + [class*="l-column"].l-end {
  float: left;
}

/*

### Default Grids

- This layout effects all but the small screens.
- They revert to a single column layout.
- Grids are available from `.one` to `.twelve` columns
- `.l-example` is only used for illustration, it should not be used on production site.

**Always** use grid classes separate to non-layout classes. Otherwise layouts could become

```
<div class="l-row">
  <div class="l-twelve l-columns"><div class="l-example">Twelve Columns (.l-six .l-columns)</div></div>
</div>

<div class="l-row">
  <div class="l-ten l-columns"><div class="l-example">Ten Columns</div></div>
  <div class="l-two l-column"><div class="l-example">Two Columns</div></div>
</div>

<div class="l-row">
  <div class="l-eight l-columns"><div class="l-example">Eight Columns</div></div>
  <div class="l-four l-column"><div class="l-example">Four Columns</div></div>
</div>

<div class="l-row">
  <div class="l-six l-columns"><div class="l-example">Six Columns</div></div>
  <div class="l-three l-column"><div class="l-example">Three Columns</div></div>
  <div class="l-three l-column"><div class="l-example">Three Columns</div></div>
</div>

<div class="l-row">
  <div class="l-four l-column"><div class="l-example">Four Columns</div></div>
  <div class="l-four l-column"><div class="l-example">Four Columns</div></div>
  <div class="l-four l-column"><div class="l-example">Four Columns</div></div>
</div>
```

*/
.l-example {
  margin-bottom: 1.5em;
  background: #e6e6e6;
  padding: 3em 0.75em;
}

/*

### Small Grids

If you need a grid on small screens it will override the default grid on **small screens only**.

The grid is available up to `.six` columns

```
<div class="l-row">
  <div class="l-ten l-s-two l-columns"><div class="l-example">Ten (Small Two) Columns</div></div>
  <div class="l-two l-s-four l-column"><div class="l-example">Two (Small Four) Columns</div></div>
</div>

<div class="l-row">
  <div class="l-four l-s-three l-column"><div class="l-example">Four (Small Three) Columns</div></div>
  <div class="l-four l-s-three l-column"><div class="l-example">Four (Small Three) Columns</div></div>
  <div class="l-four l-s-six l-column"><div class="l-example">Four (Small Six) Columns</div></div>
</div>
```

*/
/*

### Medium Grids

If you need a grid on medium screens it will override the default grid on **medium screens only**.

The grid is available up to `.eight` columns

```
<div class="l-row">
  <div class="l-ten l-m-five l-columns"><div class="l-example">Ten (Medium Five) Columns</div></div>
  <div class="l-two l-m-three l-column"><div class="l-example">Two (Medium Three) Columns</div></div>
</div>

<div class="l-row">
  <div class="l-four l-m-two l-column"><div class="l-example">Four (Medium Two) Columns</div></div>
  <div class="l-four l-m-six l-column"><div class="l-example">Four (Medium Six) Columns</div></div>
  <div class="l-four l-m-eight l-column"><div class="l-example">Four (Medium Eight) Columns</div></div>
</div>
```

*/
/*

### Large Grids

If you need a grid on large screens it will override the default grid on **large screens only**.

The grid is available up to `.twelve` columns

```
<div class="l-row">
  <div class="l-ten l-l-six l-columns"><div class="l-example">Ten (Large Five) Columns</div></div>
  <div class="l-two l-l-six l-column"><div class="l-example">Two (Large Three) Columns</div></div>
</div>

<div class="l-row">
  <div class="l-four l-l-eight l-column"><div class="l-example">Four (Large Eight) Columns</div></div>
  <div class="l-four l-column"><div class="l-example">Four (Large Four) Columns</div></div>
  <div class="l-four l-l-twelve l-column"><div class="l-example">Four (Large Twelve) Columns</div></div>
</div>
```

*/
/*

### Huge Grids

If you need a grid on huge screens it will override the default grid on **huge screens only**.

The grid is available up to `.twelve` columns

```
<div class="l-row">
  <div class="l-ten l-h-six l-columns"><div class="l-example">Ten (Huge Five) Columns</div></div>
  <div class="l-two l-h-six l-column"><div class="l-example">Two (Huge Three) Columns</div></div>
</div>

<div class="l-row">
  <div class="l-four l-h-eight l-column"><div class="l-example">Four (Huge Eight) Columns</div></div>
  <div class="l-four l-column"><div class="l-example">Four (Huge Four) Columns</div></div>
  <div class="l-four l-h-twelve l-column"><div class="l-example">Four (Huge Twelve) Columns</div></div>
</div>
```

*/
/*

## Block Grids

These are 2-up, 3-up, 4-up, 5-up and 6-up grid items, suited
for repeating blocks of content.

Use `.l-collapse-vertical` for more compact grids.

```
<div class="l-block-grid l-four-up l-collapse-vertical">
  <div class="l-block-grid--item"><div class="l-example">Four up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Four up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Four up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Four up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Four up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Four up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Four up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Four up grid</div></div>
</div>

<div class="l-block-grid l-six-up">
  <div class="l-block-grid--item"><div class="l-example">Six up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Six up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Six up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Six up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Six up grid</div></div>
  <div class="l-block-grid--item"><div class="l-example">Six up grid</div></div>
</div>
```

*/
.l-block-grid {
  display: block;
  overflow: hidden;
  padding: 0 0.75em;
}
.l-row .l-block-grid {
  padding: 0;
}

.clearfix, .l-row, .pager,
.l-cf,
.teaser-micro .teaser--body-link,
.tabs,
.breadcrumb {
  *zoom: 1;
}
.clearfix:after, .l-row:after, .pager:after,
.l-cf:after,
.teaser-micro .teaser--body-link:after,
.tabs:after,
.breadcrumb:after {
  content: "";
  display: table;
  clear: both;
}

.l-trailer {
  margin-bottom: 24px;
}

.l-leader {
  margin-top: 24px;
}

.l-header {
  background: #0060aa;
}
.l-header .l-row {
  position: relative;
}

.l-main {
  padding-top: 24px;
  padding-bottom: 24px;
}

.l-footer {
  padding-top: 24px;
  padding-bottom: 24px;
}

.content-left {
  margin-left: auto;
  margin-right: auto;
}

.content-right {
  margin-left: auto;
  margin-right: auto;
}

.content-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mceContentBody {
  max-width: 760px;
  background: white;
}

/*

# Componenents

*/
@font-face {
  font-family: "FontAwesome";
  src: url('../fonts/font-awesome/fontawesome-webfont.eot');
  src: url('../fonts/font-awesome/fontawesome-webfont.eot?#iefix') format('eot'), url('../fonts/font-awesome/fontawesome-webfont.woff') format('woff'), url('../fonts/font-awesome/fontawesome-webfont.ttf') format('truetype'), url('../fonts/font-awesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*

## Icons

### Font Awesome Icons

*/
/*

#### Icon Displays

```
<i class="icon-home"></i>
```
```
<i class="icon-home icon-large"></i>
```
```
<a href="#" class="icon-home">Home</a>
```
```
<a href="#" class="icon-home button">Home</a>
```

*/
.accordion .accordion--title:after, .flex-direction-nav a:after,
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  text-decoration: inherit;
  line-height: 1em;
}
.accordion .accordion--title:after, .flex-direction-nav a:after,
[class^="icon-"]:before,
[class*=" icon-"]:before {
  *display: inline;
}

a[class^="icon-"],
a[class*=" icon-"] {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  text-decoration: inherit;
}
a[class^="icon-"],
a[class*=" icon-"] {
  *display: inline;
}
a[class^="icon-"]:before,
a[class*=" icon-"]:before {
  margin-right: 6px;
}

.icon-large:before {
  vertical-align: middle;
  font-size: 1.5em;
  line-height: 2em;
}

/*

#### Icon Lists

```
<ul class="icons">
  <li class="icon-home">icon-heart</li>
  <li class="icon-music">icon-music</li>
  <li class="icon-search">icon-search</li>
  <li class="icon-heart">icon-heart</li>
</ul>
```

*/
li [class^="icon-"],
li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}

.icons {
  margin-bottom: 24px;
}
.icons li[class^="icon-"], .icons li[class*=" icon-"] {
  padding: 6px 0px;
}
.icons li[class^="icon-"]:before, .icons li[class*=" icon-"]:before {
  width: 1em;
  text-align: center;
  margin-right: 12px;
}
.icons li.icon-large:before, .icons li.icon-large:before {
  vertical-align: initial;
}

/*

#### Available Icons

**Note:** Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers
do not read off random characters that represent icons

<div class="l-row">
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-glass">icon-glass</li>
      <li class="icon-music">icon-music</li>
      <li class="icon-search">icon-search</li>
      <li class="icon-envelope">icon-envelope</li>
      <li class="icon-heart">icon-heart</li>
      <li class="icon-star">icon-star</li>
      <li class="icon-star-empty">icon-star-empty</li>
      <li class="icon-user">icon-user</li>
      <li class="icon-film">icon-film</li>
      <li class="icon-th-large">icon-th-large</li>
      <li class="icon-th">icon-th</li>
      <li class="icon-th-list">icon-th-list</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-ok">icon-ok</li>
      <li class="icon-remove">icon-remove</li>
      <li class="icon-zoom-in">icon-zoom-in</li>
      <li class="icon-zoom-out">icon-zoom-out</li>
      <li class="icon-off">icon-off</li>
      <li class="icon-signal">icon-signal</li>
      <li class="icon-cog">icon-cog</li>
      <li class="icon-trash">icon-trash</li>
      <li class="icon-home">icon-home</li>
      <li class="icon-file">icon-file</li>
      <li class="icon-time">icon-time</li>
      <li class="icon-road">icon-road</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-download-alt">icon-download-alt</li>
      <li class="icon-download">icon-download</li>
      <li class="icon-upload">icon-upload</li>
      <li class="icon-inbox">icon-inbox</li>
      <li class="icon-play-circle">icon-play-circle</li>
      <li class="icon-repeat">icon-repeat</li>
      <li class="icon-refresh">icon-refresh</li>
      <li class="icon-list-alt">icon-list-alt</li>
      <li class="icon-lock">icon-lock</li>
      <li class="icon-flag">icon-flag</li>
      <li class="icon-headphones">icon-headphones</li>
      <li class="icon-volume-off">icon-volume-off</li>
      <li class="icon-volume-down">icon-volume-down</li>
      <li class="icon-volume-up">icon-volume-up</li>
    </ul>
  </div>
</div>

<div class="l-row">
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-qrcode">icon-qrcode</li>
      <li class="icon-barcode">icon-barcode</li>
      <li class="icon-tag">icon-tag</li>
      <li class="icon-tags">icon-tags</li>
      <li class="icon-book">icon-book</li>
      <li class="icon-bookmark">icon-bookmark</li>
      <li class="icon-print">icon-print</li>
      <li class="icon-camera">icon-camera</li>
      <li class="icon-font">icon-font</li>
      <li class="icon-bold">icon-bold</li>
      <li class="icon-italic">icon-italic</li>
      <li class="icon-text-height">icon-text-height</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-text-width">icon-text-width</li>
      <li class="icon-align-left">icon-align-left</li>
      <li class="icon-align-center">icon-align-center</li>
      <li class="icon-align-right">icon-align-right</li>
      <li class="icon-align-justify">icon-align-justify</li>
      <li class="icon-list">icon-list</li>
      <li class="icon-indent-left">icon-indent-left</li>
      <li class="icon-indent-right">icon-indent-right</li>
      <li class="icon-facetime-video">icon-facetime-video</li>
      <li class="icon-picture">icon-picture</li>
      <li class="icon-pencil">icon-pencil</li>
      <li class="icon-map-marker">icon-map-marker</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-adjust">icon-adjust</li>
      <li class="icon-tint">icon-tint</li>
      <li class="icon-edit">icon-edit</li>
      <li class="icon-share">icon-share</li>
      <li class="icon-check">icon-check</li>
      <li class="icon-move">icon-move</li>
      <li class="icon-step-backward">icon-step-backward</li>
      <li class="icon-fast-backward">icon-fast-backward</li>
      <li class="icon-backward">icon-backward</li>
      <li class="icon-play">icon-play</li>
      <li class="icon-pause">icon-pause</li>
      <li class="icon-stop">icon-stop</li>
      <li class="icon-forward">icon-forward</li>
    </ul>
  </div>
</div>

<div class="l-row">
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-fast-forward">icon-fast-forward</li>
      <li class="icon-step-forward">icon-step-forward</li>
      <li class="icon-eject">icon-eject</li>
      <li class="icon-chevron-left">icon-chevron-left</li>
      <li class="icon-chevron-right">icon-chevron-right</li>
      <li class="icon-plus-sign">icon-plus-sign</li>
      <li class="icon-minus-sign">icon-minus-sign</li>
      <li class="icon-remove-sign">icon-remove-sign</li>
      <li class="icon-ok-sign">icon-ok-sign</li>
      <li class="icon-question-sign">icon-question-sign</li>
      <li class="icon-info-sign">icon-info-sign</li>
      <li class="icon-screenshot">icon-screenshot</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-remove-circle">icon-remove-circle</li>
      <li class="icon-ok-circle">icon-ok-circle</li>
      <li class="icon-ban-circle">icon-ban-circle</li>
      <li class="icon-arrow-left">icon-arrow-left</li>
      <li class="icon-arrow-right">icon-arrow-right</li>
      <li class="icon-arrow-up">icon-arrow-up</li>
      <li class="icon-arrow-down">icon-arrow-down</li>
      <li class="icon-share-alt">icon-share-alt</li>
      <li class="icon-resize-full">icon-resize-full</li>
      <li class="icon-resize-small">icon-resize-small</li>
      <li class="icon-plus">icon-plus</li>
      <li class="icon-minus">icon-minus</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-asterisk">icon-asterisk</li>
      <li class="icon-exclamation-sign">icon-exclamation-sign</li>
      <li class="icon-gift">icon-gift</li>
      <li class="icon-leaf">icon-leaf</li>
      <li class="icon-fire">icon-fire</li>
      <li class="icon-eye-open">icon-eye-open</li>
      <li class="icon-eye-close">icon-eye-close</li>
      <li class="icon-warning-sign">icon-warning-sign</li>
      <li class="icon-plane">icon-plane</li>
      <li class="icon-calendar">icon-calendar</li>
      <li class="icon-random">icon-random</li>
      <li class="icon-comment">icon-comment</li>
    </ul>
  </div>
</div>

<div class="l-row">
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-magnet">icon-magnet</li>
      <li class="icon-chevron-up">icon-chevron-up</li>
      <li class="icon-chevron-down">icon-chevron-down</li>
      <li class="icon-retweet">icon-retweet</li>
      <li class="icon-shopping-cart">icon-shopping-cart</li>
      <li class="icon-folder-close">icon-folder-close</li>
      <li class="icon-folder-open">icon-folder-open</li>
      <li class="icon-resize-vertical">icon-resize-vertical</li>
      <li class="icon-resize-horizontal">icon-resize-horizontal</li>
      <li class="icon-bar-chart">icon-bar-chart</li>
      <li class="icon-twitter-sign">icon-twitter-sign</li>
      <li class="icon-facebook-sign">icon-facebook-sign</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-camera-retro">icon-camera-retro</li>
      <li class="icon-key">icon-key</li>
      <li class="icon-cogs">icon-cogs</li>
      <li class="icon-comments">icon-comments</li>
      <li class="icon-thumbs-up">icon-thumbs-up</li>
      <li class="icon-thumbs-down">icon-thumbs-down</li>
      <li class="icon-star-half">icon-star-half</li>
      <li class="icon-heart-empty">icon-heart-empty</li>
      <li class="icon-signout">icon-signout</li>
      <li class="icon-linkedin-sign">icon-linkedin-sign</li>
      <li class="icon-pushpin">icon-pushpin</li>
      <li class="icon-external-link">icon-external-link</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-signin">icon-signin</li>
      <li class="icon-trophy">icon-trophy</li>
      <li class="icon-github-sign">icon-github-sign</li>
      <li class="icon-upload-alt">icon-upload-alt</li>
      <li class="icon-lemon">icon-lemon</li>
      <li class="icon-phone">icon-phone</li>
      <li class="icon-check-empty">icon-check-empty</li>
      <li class="icon-bookmark-empty">icon-bookmark-empty</li>
      <li class="icon-phone-sign">icon-phone-sign</li>
      <li class="icon-twitter">icon-twitter</li>
      <li class="icon-facebook">icon-facebook</li>
      <li class="icon-github">icon-github</li>
    </ul>
  </div>
</div>

<div class="l-row">
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-unlock">icon-unlock</li>
      <li class="icon-credit-card">icon-credit-card</li>
      <li class="icon-rss">icon-rss</li>
      <li class="icon-hdd">icon-hdd</li>
      <li class="icon-bullhorn">icon-bullhorn</li>
      <li class="icon-bell">icon-bell</li>
      <li class="icon-certificate">icon-certificate</li>
      <li class="icon-hand-right">icon-hand-right</li>
      <li class="icon-hand-left">icon-hand-left</li>
      <li class="icon-hand-up">icon-hand-up</li>
      <li class="icon-hand-down">icon-hand-down</li>
      <li class="icon-circle-arrow-left">icon-circle-arrow-left</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-circle-arrow-right">icon-circle-arrow-right</li>
      <li class="icon-circle-arrow-up">icon-circle-arrow-up</li>
      <li class="icon-circle-arrow-down">icon-circle-arrow-down</li>
      <li class="icon-globe">icon-globe</li>
      <li class="icon-wrench">icon-wrench</li>
      <li class="icon-tasks">icon-tasks</li>
      <li class="icon-filter">icon-filter</li>
      <li class="icon-briefcase">icon-briefcase</li>
      <li class="icon-fullscreen">icon-fullscreen</li>
      <li class="icon-group">icon-group</li>
      <li class="icon-link">icon-link</li>
      <li class="icon-cloud">icon-cloud</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-beaker">icon-beaker</li>
      <li class="icon-cut">icon-cut</li>
      <li class="icon-copy">icon-copy</li>
      <li class="icon-paper-clip">icon-paper-clip</li>
      <li class="icon-save">icon-save</li>
      <li class="icon-sign-blank">icon-sign-blank</li>
      <li class="icon-reorder">icon-reorder</li>
      <li class="icon-list-ul">icon-list-ul</li>
      <li class="icon-list-ol">icon-list-ol</li>
      <li class="icon-strikethrough">icon-strikethrough</li>
      <li class="icon-underline">icon-underline</li>
      <li class="icon-table">icon-table</li>
    </ul>
  </div>
</div>

<div class="l-row">
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-magic">icon-magic</li>
      <li class="icon-truck">icon-truck</li>
      <li class="icon-pinterest">icon-pinterest</li>
      <li class="icon-pinterest-sign">icon-pinterest-sign</li>
      <li class="icon-google-plus-sign">icon-google-plus-sign</li>
      <li class="icon-google-plus">icon-google-plus</li>
      <li class="icon-money">icon-money</li>
      <li class="icon-caret-down">icon-caret-down</li>
      <li class="icon-caret-up">icon-caret-up</li>
      <li class="icon-caret-left">icon-caret-left</li>
      <li class="icon-caret-right">icon-caret-right</li>
      <li class="icon-columns">icon-columns</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-sort">icon-sort</li>
      <li class="icon-sort-down">icon-sort-down</li>
      <li class="icon-sort-up">icon-sort-up</li>
      <li class="icon-envelope-alt">icon-envelope-alt</li>
      <li class="icon-linkedin">icon-linkedin</li>
      <li class="icon-undo">icon-undo</li>
      <li class="icon-legal">icon-legal</li>
      <li class="icon-dashboard">icon-dashboard</li>
      <li class="icon-comment-alt">icon-comment-alt</li>
      <li class="icon-comments-alt">icon-comments-alt</li>
      <li class="icon-bolt">icon-bolt</li>
      <li class="icon-sitemap">icon-sitemap</li>
    </ul>
  </div>
  <div class="l-four l-columns">
    <ul class="icons">
      <li class="icon-umbrella">icon-umbrella</li>
      <li class="icon-paste">icon-paste</li>
      <li class="icon-user-md">icon-user-md</li>
    </ul>
  </div>
</div>

*/
.icon-glass:before {
  content: "\f000";
}

.icon-music:before {
  content: "\f001";
}

.icon-search:before {
  content: "\f002";
}

.icon-envelope:before {
  content: "\f003";
}

.icon-heart:before {
  content: "\f004";
}

.icon-star:before {
  content: "\f005";
}

.icon-star-empty:before {
  content: "\f006";
}

.icon-user:before {
  content: "\f007";
}

.icon-film:before {
  content: "\f008";
}

.icon-th-large:before {
  content: "\f009";
}

.icon-th:before {
  content: "\f00a";
}

.icon-th-list:before {
  content: "\f00b";
}

.icon-ok,
.icon-ok:before {
  content: "\f00c";
}

.icon-remove:before {
  content: "\f00d";
}

.icon-zoom-in:before {
  content: "\f00e";
}

.icon-zoom-out:before {
  content: "\f010";
}

.icon-off:before {
  content: "\f011";
}

.icon-signal:before {
  content: "\f012";
}

.icon-cog:before {
  content: "\f013";
}

.icon-trash:before {
  content: "\f014";
}

.icon-home:before {
  content: "\f015";
}

.icon-file:before {
  content: "\f016";
}

.icon-time:before {
  content: "\f017";
}

.icon-road:before {
  content: "\f018";
}

.icon-download-alt:before {
  content: "\f019";
}

.icon-download:before {
  content: "\f01a";
}

.icon-upload:before {
  content: "\f01b";
}

.icon-inbox:before {
  content: "\f01c";
}

.icon-play-circle:before {
  content: "\f01d";
}

.icon-repeat:before {
  content: "\f01e";
}

.icon-refresh:before {
  content: "\f021";
}

.icon-list-alt:before {
  content: "\f022";
}

.icon-lock:before {
  content: "\f023";
}

.icon-flag:before {
  content: "\f024";
}

.icon-headphones:before {
  content: "\f025";
}

.icon-volume-off:before {
  content: "\f026";
}

.icon-volume-down:before {
  content: "\f027";
}

.icon-volume-up:before {
  content: "\f028";
}

.icon-qrcode:before {
  content: "\f029";
}

.icon-barcode:before {
  content: "\f02a";
}

.icon-tag:before {
  content: "\f02b";
}

.icon-tags:before {
  content: "\f02c";
}

.icon-book:before {
  content: "\f02d";
}

.icon-bookmark:before {
  content: "\f02e";
}

.icon-print:before {
  content: "\f02f";
}

.icon-camera:before {
  content: "\f030";
}

.icon-font:before {
  content: "\f031";
}

.icon-bold:before {
  content: "\f032";
}

.icon-italic:before {
  content: "\f033";
}

.icon-text-height:before {
  content: "\f034";
}

.icon-text-width:before {
  content: "\f035";
}

.icon-align-left:before {
  content: "\f036";
}

.icon-align-center:before {
  content: "\f037";
}

.icon-align-right:before {
  content: "\f038";
}

.icon-align-justify:before {
  content: "\f039";
}

.icon-list:before {
  content: "\f03a";
}

.icon-indent-left:before {
  content: "\f03b";
}

.icon-indent-right:before {
  content: "\f03c";
}

.icon-facetime-video:before {
  content: "\f03d";
}

.icon-picture:before {
  content: "\f03e";
}

.icon-pencil:before {
  content: "\f040";
}

.icon-map-marker:before {
  content: "\f041";
}

.icon-adjust:before {
  content: "\f042";
}

.icon-tint:before {
  content: "\f043";
}

.icon-edit:before {
  content: "\f044";
}

.icon-share:before {
  content: "\f045";
}

.icon-check:before {
  content: "\f046";
}

.icon-move:before {
  content: "\f047";
}

.icon-step-backward:before {
  content: "\f048";
}

.icon-fast-backward:before {
  content: "\f049";
}

.icon-backward:before {
  content: "\f04a";
}

.icon-play:before {
  content: "\f04b";
}

.icon-pause:before {
  content: "\f04c";
}

.icon-stop:before {
  content: "\f04d";
}

.icon-forward:before {
  content: "\f04e";
}

.icon-fast-forward:before {
  content: "\f050";
}

.icon-step-forward:before {
  content: "\f051";
}

.icon-eject:before {
  content: "\f052";
}

.icon-chevron-left:before, .flex-direction-nav a:after {
  content: "\f053";
}

.icon-chevron-right:before, .flex-direction-nav .flex-next:after {
  content: "\f054";
}

.icon-plus-sign:before {
  content: "\f055";
}

.icon-minus-sign:before {
  content: "\f056";
}

.icon-remove-sign:before {
  content: "\f057";
}

.icon-ok-sign:before {
  content: "\f058";
}

.icon-question-sign:before {
  content: "\f059";
}

.icon-info-sign:before {
  content: "\f05a";
}

.icon-screenshot:before {
  content: "\f05b";
}

.icon-remove-circle:before {
  content: "\f05c";
}

.icon-ok-circle:before {
  content: "\f05d";
}

.icon-ban-circle:before {
  content: "\f05e";
}

.icon-arrow-left:before {
  content: "\f060";
}

.icon-arrow-right:before {
  content: "\f061";
}

.icon-arrow-up:before {
  content: "\f062";
}

.icon-arrow-down:before {
  content: "\f063";
}

.icon-share-alt:before {
  content: "\f064";
}

.icon-resize-full:before {
  content: "\f065";
}

.icon-resize-small:before {
  content: "\f066";
}

.icon-plus:before {
  content: "\f067";
}

.icon-minus:before {
  content: "\f068";
}

.icon-asterisk:before {
  content: "\f069";
}

.icon-exclamation-sign:before {
  content: "\f06a";
}

.icon-gift:before {
  content: "\f06b";
}

.icon-leaf:before {
  content: "\f06c";
}

.icon-fire:before {
  content: "\f06d";
}

.icon-eye-open:before {
  content: "\f06e";
}

.icon-eye-close:before {
  content: "\f070";
}

.icon-warning-sign:before {
  content: "\f071";
}

.icon-plane:before {
  content: "\f072";
}

.icon-calendar:before {
  content: "\f073";
}

.icon-random:before {
  content: "\f074";
}

.icon-comment:before {
  content: "\f075";
}

.icon-magnet:before {
  content: "\f076";
}

.icon-chevron-up:before, .accordion .accordion--item.is-active .accordion--title:after {
  content: "\f077";
}

.icon-chevron-down:before, .accordion .accordion--title:after {
  content: "\f078";
}

.icon-retweet:before {
  content: "\f079";
}

.icon-shopping-cart:before {
  content: "\f07a";
}

.icon-folder-close:before {
  content: "\f07b";
}

.icon-folder-open:before {
  content: "\f07c";
}

.icon-resize-vertical:before {
  content: "\f07d";
}

.icon-resize-horizontal:before {
  content: "\f07e";
}

.icon-bar-chart:before {
  content: "\f080";
}

.icon-twitter-sign:before {
  content: "\f081";
}

.icon-facebook-sign:before {
  content: "\f082";
}

.icon-camera-retro:before {
  content: "\f083";
}

.icon-key:before {
  content: "\f084";
}

.icon-cogs:before {
  content: "\f085";
}

.icon-comments:before {
  content: "\f086";
}

.icon-thumbs-up:before {
  content: "\f087";
}

.icon-thumbs-down:before {
  content: "\f088";
}

.icon-star-half:before {
  content: "\f089";
}

.icon-heart-empty:before {
  content: "\f08a";
}

.icon-signout:before {
  content: "\f08b";
}

.icon-linkedin-sign:before {
  content: "\f08c";
}

.icon-pushpin:before {
  content: "\f08d";
}

.icon-external-link:before {
  content: "\f08e";
}

.icon-signin:before {
  content: "\f090";
}

.icon-trophy:before {
  content: "\f091";
}

.icon-github-sign:before {
  content: "\f092";
}

.icon-upload-alt:before {
  content: "\f093";
}

.icon-lemon:before {
  content: "\f094";
}

.icon-phone:before {
  content: "\f095";
}

.icon-check-empty:before {
  content: "\f096";
}

.icon-bookmark-empty:before {
  content: "\f097";
}

.icon-phone-sign:before {
  content: "\f098";
}

.icon-twitter:before {
  content: "\f099";
}

.icon-facebook:before {
  content: "\f09a";
}

.icon-github:before {
  content: "\f09b";
}

.icon-unlock:before {
  content: "\f09c";
}

.icon-credit-card:before {
  content: "\f09d";
}

.icon-rss:before {
  content: "\f09e";
}

.icon-hdd:before {
  content: "\f0a0";
}

.icon-bullhorn:before {
  content: "\f0a1";
}

.icon-bell:before {
  content: "\f0a2";
}

.icon-certificate:before {
  content: "\f0a3";
}

.icon-hand-right:before {
  content: "\f0a4";
}

.icon-hand-left:before {
  content: "\f0a5";
}

.icon-hand-up:before {
  content: "\f0a6";
}

.icon-hand-down:before {
  content: "\f0a7";
}

.icon-circle-arrow-left:before {
  content: "\f0a8";
}

.icon-circle-arrow-right:before {
  content: "\f0a9";
}

.icon-circle-arrow-up:before {
  content: "\f0aa";
}

.icon-circle-arrow-down:before {
  content: "\f0ab";
}

.icon-globe:before {
  content: "\f0ac";
}

.icon-wrench:before {
  content: "\f0ad";
}

.icon-tasks:before {
  content: "\f0ae";
}

.icon-filter:before {
  content: "\f0b0";
}

.icon-briefcase:before {
  content: "\f0b1";
}

.icon-fullscreen:before {
  content: "\f0b2";
}

.icon-group:before {
  content: "\f0c0";
}

.icon-link:before {
  content: "\f0c1";
}

.icon-cloud:before {
  content: "\f0c2";
}

.icon-beaker:before {
  content: "\f0c3";
}

.icon-cut:before {
  content: "\f0c4";
}

.icon-copy:before {
  content: "\f0c5";
}

.icon-paper-clip:before {
  content: "\f0c6";
}

.icon-save:before {
  content: "\f0c7";
}

.icon-sign-blank:before {
  content: "\f0c8";
}

.icon-reorder:before {
  content: "\f0c9";
}

.icon-list-ul:before {
  content: "\f0ca";
}

.icon-list-ol:before {
  content: "\f0cb";
}

.icon-strikethrough:before {
  content: "\f0cc";
}

.icon-underline:before {
  content: "\f0cd";
}

.icon-table:before {
  content: "\f0ce";
}

.icon-magic:before {
  content: "\f0d0";
}

.icon-truck:before {
  content: "\f0d1";
}

.icon-pinterest:before {
  content: "\f0d2";
}

.icon-pinterest-sign:before {
  content: "\f0d3";
}

.icon-google-plus-sign:before {
  content: "\f0d4";
}

.icon-google-plus:before {
  content: "\f0d5";
}

.icon-money:before {
  content: "\f0d6";
}

.icon-caret-down:before {
  content: "\f0d7";
}

.icon-caret-up:before {
  content: "\f0d8";
}

.icon-caret-left:before {
  content: "\f0d9";
}

.icon-caret-right:before {
  content: "\f0da";
}

.icon-columns:before {
  content: "\f0db";
}

.icon-sort:before {
  content: "\f0dc";
}

.icon-sort-down:before {
  content: "\f0dd";
}

.icon-sort-up:before {
  content: "\f0de";
}

.icon-envelope-alt:before {
  content: "\f0e0";
}

.icon-linkedin:before {
  content: "\f0e1";
}

.icon-undo:before {
  content: "\f0e2";
}

.icon-legal:before {
  content: "\f0e3";
}

.icon-dashboard:before {
  content: "\f0e4";
}

.icon-comment-alt:before {
  content: "\f0e5";
}

.icon-comments-alt:before {
  content: "\f0e6";
}

.icon-bolt:before {
  content: "\f0e7";
}

.icon-sitemap:before {
  content: "\f0e8";
}

.icon-umbrella:before {
  content: "\f0e9";
}

.icon-paste:before {
  content: "\f0ea";
}

.icon-user-md:before {
  content: "\f200";
}

/*

## Navigation

### Nav Bar

Used for basic horizontal navigation e.g. Action menu in header.

`.nav-bar--item`'s should all be output on the same line to avoid unnecessary gaps.

```
<nav>
  <ul class="nav-bar">
    <li class="nav-bar--item"><a href="#" class="nav-bar--link">Get Involved</a></li><li class="nav-bar--item"><a href="#" class="nav-bar--link">Donate</a></li><li class="nav-bar--item"><a href="#" class="nav-bar--link">Contact</a></li>
  </ul>
</nav>
```

*/
.nav-bar {
  text-align: center;
  width: 100%;
}
.nav-bar .nav-bar--link {
  padding: 12px;
  display: block;
  font-weight: 700;
  white-space: nowrap;
  font-size: 0.875em;
  line-height: 1.71429em;
  background-color: #ef9323;
  color: #f2f2f2;
  background: #ef9323;
  border-left: 1px solid #de8110;
}
.nav-bar .nav-bar--link:hover {
  background-color: #b86b0d;
  color: #f2f2f2;
  background: #b86b0d;
}
.nav-bar .nav-bar--item {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
}
.nav-bar .nav-bar--item {
  *display: inline;
}
.nav-bar .nav-bar--item:first-child .nav-bar--link {
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
  -ms-border-radius: 2px 0 0 2px;
  -o-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px;
  border-left: none;
}
.nav-bar .nav-bar--item:last-child .nav-bar--link {
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  -ms-border-radius: 0 2px 2px 0;
  -o-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
}
.nav-bar-toggle .nav-bar {
  text-align: left;
  background-color: #ef9323;
}
.nav-bar-toggle .nav-bar .nav-bar-link {
  padding: 6px 12px;
}

/*

### Nav Toggle - Horizontal

```
<a href="#" class="button-primary-faded button-full nav-toggle-link">Menu <i class="icon-reorder"></i></a>

<div class="l-row">
  <nav role="navigation" class="nav-toggle nav-bar-toggle l-twelve l-columns">
    <ul>
      <li class="nav-toggle--parent">
        <a href="camps-events.php">Camps &amp; Events</a>
        <ul>
          <li class="nav-toggle--parent">
            <a href="#">Menu 1a</a>
            <ul>
              <li><a href="#">Menu 1a</a></li>
              <li><a href="#">Menu 1b</a></li>
              <li><a href="#">Menu 1c</a></li>
            </ul>
          </li>
          <li><a href="#">Menu 1b</a></li>
        </ul>
      </li><li>
        <a href="training.php">Training &amp; Support</a>
      </li><li>
        <a href="/about.php">About</a>
      </li><li>
        <a href="news.php" class="is-active">News</a>
      </li>
    </ul>
  </nav>
</div>
```

*/
.nav-toggle,
.nav-toggle > ul ul {
  clear: both;
}

.nav-toggle {
  font-family: "futura-pt-n7", "futura-pt", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}

.js .nav-toggle,
.js .nav-toggle > ul ul {
  overflow: hidden;
  max-height: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  background: url('../img/rgbapng/0000001a.png');
  background: rgba(0, 0, 0, 0.1);
}

.nav-toggle.is-visible,
.js .nav-toggle > ul ul.is-active {
  max-height: 720px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.nav-toggle > ul {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-toggle li a {
  color: #f2f2f2;
  display: block;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  padding-right: 18%;
}
.nav-toggle li a.active, .nav-toggle li a.active-trail, .nav-toggle li a.is-active {
  background: url('../img/rgbapng/00000066.png');
  background: rgba(0, 0, 0, 0.4);
}

.nav-toggle > ul > li > a {
  white-space: nowrap;
}

.nav-toggle--parent > a .nav-toggle--parent--more:after {
  content: '+';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 10%;
  text-align: center;
  color: #f2f2f2;
  font-size: 1.5em;
  line-height: 1em;
  padding: 0.5em;
}

/*

## Buttons

### Default Button

Provides extra visual weight and identifies the primary action in a set of buttons.

```
<a class="button">Button</a>
```

*/
p.btn a, div.btn a,
a.button,
a.button-primary,
a.btn-primary,
a.button-primary-faded,
a.btn-primary-faded,
a.button-secondary,
a.btn-secondary,
a.button-full,
a.btn-full,
input.button,
input.button-primary,
input.btn-primary,
input.button-primary-faded,
input.btn-primary-faded,
input.button-secondary,
input.btn-secondary,
input.button-full,
input.btn-full,
a.btn,
input.btn,
button {
  background-color: #ef9323;
  color: #f2f2f2;
  border-style: solid;
  border-width: 0em;
  padding: 0.375em;
  padding: 6px 12px;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  margin-bottom: 12px;
  font-size: 1em;
  line-height: 1.5em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  border-color: #e88711;
  text-transform: uppercase;
  text-wrap: none;
  white-space: nowrap;
  font-weight: 400;
  font-family: "futura-pt-n7", "futura-pt", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  cursor: pointer;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #f08a0d), color-stop(95.51%, #f0a031), color-stop(100%, #fceedc));
  background-image: -webkit-linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  background-image: -moz-linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  background-image: -o-linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  background-image: -ms-linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  background-image: linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
}
p.btn a, div.btn a,
a.button,
a.button-primary,
a.btn-primary,
a.button-primary-faded,
a.btn-primary-faded,
a.button-secondary,
a.btn-secondary,
a.button-full,
a.btn-full,
input.button,
input.button-primary,
input.btn-primary,
input.button-primary-faded,
input.btn-primary-faded,
input.button-secondary,
input.btn-secondary,
input.button-full,
input.btn-full,
a.btn,
input.btn,
button {
  *display: inline;
}
p.btn a:hover, div.btn a:hover,
a.button:hover,
a.button-primary:hover,
a.btn-primary:hover,
a.button-primary-faded:hover,
a.btn-primary-faded:hover,
a.button-secondary:hover,
a.btn-secondary:hover,
a.button-full:hover,
a.btn-full:hover,
input.button:hover,
input.button-primary:hover,
input.btn-primary:hover,
input.button-primary-faded:hover,
input.btn-primary-faded:hover,
input.button-secondary:hover,
input.btn-secondary:hover,
input.button-full:hover,
input.btn-full:hover,
a.btn:hover,
input.btn:hover,
button:hover {
  background-color: #d0790f;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #c06e0b), color-stop(95.51%, #de8810), color-stop(100%, #f9d7ad));
  background-image: -webkit-linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  background-image: -moz-linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  background-image: -o-linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  background-image: -ms-linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  background-image: linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  border-color: #c2710e;
}
p.btn a:active, p.btn a.is-active, div.btn a:active, div.btn a.is-active,
a.button:active,
a.button-primary:active,
a.btn-primary:active,
a.button-primary-faded:active,
a.btn-primary-faded:active,
a.button-secondary:active,
a.btn-secondary:active,
a.button-full:active,
a.btn-full:active,
a.button.is-active,
a.is-active.button-primary,
a.is-active.btn-primary,
a.is-active.button-primary-faded,
a.is-active.btn-primary-faded,
a.is-active.button-secondary,
a.is-active.btn-secondary,
a.is-active.button-full,
a.is-active.btn-full,
input.button:active,
input.button-primary:active,
input.btn-primary:active,
input.button-primary-faded:active,
input.btn-primary-faded:active,
input.button-secondary:active,
input.btn-secondary:active,
input.button-full:active,
input.btn-full:active,
input.button.is-active,
input.is-active.button-primary,
input.is-active.btn-primary,
input.is-active.button-primary-faded,
input.is-active.btn-primary-faded,
input.is-active.button-secondary,
input.is-active.btn-secondary,
input.is-active.button-full,
input.is-active.btn-full,
a.btn:active,
a.btn.is-active,
input.btn:active,
input.btn.is-active,
button:active,
button.is-active {
  background-color: #a05d0c;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #905208), color-stop(95.51%, #af6b0d), color-stop(100%, #f6bf7d));
  background-image: -webkit-linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  background-image: -moz-linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  background-image: -o-linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  background-image: -ms-linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  background-image: linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  border-color: #92550b;
}

/*

### Primary Button

```
<a class="button-primary">Button</a>
```

*/
.button-primary,
.btn-primary {
  background-color: #0060aa;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #005496), color-stop(95.51%, #0062b9), color-stop(100%, #72c2ff));
  background-image: -webkit-linear-gradient(bottom, #005496 0%, #0062b9 95.51%, #72c2ff 100%);
  background-image: -moz-linear-gradient(bottom, #005496 0%, #0062b9 95.51%, #72c2ff 100%);
  background-image: -o-linear-gradient(bottom, #005496 0%, #0062b9 95.51%, #72c2ff 100%);
  background-image: -ms-linear-gradient(bottom, #005496 0%, #0062b9 95.51%, #72c2ff 100%);
  background-image: linear-gradient(bottom, #005496 0%, #0062b9 95.51%, #72c2ff 100%);
  border-color: #005290;
}
.button-primary:hover,
.btn-primary:hover {
  background-color: #004377;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #003863), color-stop(95.51%, #004786), color-stop(100%, #3fabff));
  background-image: -webkit-linear-gradient(bottom, #003863 0%, #004786 95.51%, #3fabff 100%);
  background-image: -moz-linear-gradient(bottom, #003863 0%, #004786 95.51%, #3fabff 100%);
  background-image: -o-linear-gradient(bottom, #003863 0%, #004786 95.51%, #3fabff 100%);
  background-image: -ms-linear-gradient(bottom, #003863 0%, #004786 95.51%, #3fabff 100%);
  background-image: linear-gradient(bottom, #003863 0%, #004786 95.51%, #3fabff 100%);
  border-color: #003b68;
}
.button-primary:active, .button-primary.is-active,
.btn-primary:active,
.btn-primary.is-active {
  background-color: #002644;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #001b30), color-stop(95.51%, #002c53), color-stop(100%, #0c95ff));
  background-image: -webkit-linear-gradient(bottom, #001b30 0%, #002c53 95.51%, #0c95ff 100%);
  background-image: -moz-linear-gradient(bottom, #001b30 0%, #002c53 95.51%, #0c95ff 100%);
  background-image: -o-linear-gradient(bottom, #001b30 0%, #002c53 95.51%, #0c95ff 100%);
  background-image: -ms-linear-gradient(bottom, #001b30 0%, #002c53 95.51%, #0c95ff 100%);
  background-image: linear-gradient(bottom, #001b30 0%, #002c53 95.51%, #0c95ff 100%);
  border-color: #001e35;
}

.button-primary-faded,
.btn-primary-faded {
  background-color: #035da3;
  color: #f2f2f2;
  border: 1px solid #054f87;
  -webkit-box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1), inset 0 0 2px rgba(3, 17, 27, 0.25);
  -moz-box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1), inset 0 0 2px rgba(3, 17, 27, 0.25);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1), inset 0 0 2px rgba(3, 17, 27, 0.25);
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #035b9d), color-stop(100%, #176bad));
  background-image: -webkit-linear-gradient(bottom, #035b9d 0%, #176bad 100%);
  background-image: -moz-linear-gradient(bottom, #035b9d 0%, #176bad 100%);
  background-image: -o-linear-gradient(bottom, #035b9d 0%, #176bad 100%);
  background-image: -ms-linear-gradient(bottom, #035b9d 0%, #176bad 100%);
  background-image: linear-gradient(bottom, #035b9d 0%, #176bad 100%);
}
.button-primary-faded:hover,
.btn-primary-faded:hover {
  background-color: #034f8a;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #004478), color-stop(95.51%, #035299), color-stop(100%, #57b4fc));
  background-image: -webkit-linear-gradient(bottom, #004478 0%, #035299 95.51%, #57b4fc 100%);
  background-image: -moz-linear-gradient(bottom, #004478 0%, #035299 95.51%, #57b4fc 100%);
  background-image: -o-linear-gradient(bottom, #004478 0%, #035299 95.51%, #57b4fc 100%);
  background-image: -ms-linear-gradient(bottom, #004478 0%, #035299 95.51%, #57b4fc 100%);
  background-image: linear-gradient(bottom, #004478 0%, #035299 95.51%, #57b4fc 100%);
  border-color: #02467b;
}
.button-primary-faded:active, .button-primary-faded.is-active,
.btn-primary-faded:active,
.btn-primary-faded.is-active {
  background-color: #024071;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #00355e), color-stop(95.51%, #024580), color-stop(100%, #3ea9fb));
  background-image: -webkit-linear-gradient(bottom, #00355e 0%, #024580 95.51%, #3ea9fb 100%);
  background-image: -moz-linear-gradient(bottom, #00355e 0%, #024580 95.51%, #3ea9fb 100%);
  background-image: -o-linear-gradient(bottom, #00355e 0%, #024580 95.51%, #3ea9fb 100%);
  background-image: -ms-linear-gradient(bottom, #00355e 0%, #024580 95.51%, #3ea9fb 100%);
  background-image: linear-gradient(bottom, #00355e 0%, #024580 95.51%, #3ea9fb 100%);
  border-color: #023862;
}

/*

### Secondary Button

```
<a class="button-secondary">Button</a>
```

*/
.button-secondary,
.btn-secondary {
  background-color: #ef9323;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #f08a0d), color-stop(95.51%, #f0a031), color-stop(100%, #fceedc));
  background-image: -webkit-linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  background-image: -moz-linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  background-image: -o-linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  background-image: -ms-linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  background-image: linear-gradient(bottom, #f08a0d 0%, #f0a031 95.51%, #fceedc 100%);
  border-color: #e88711;
}
.button-secondary:hover,
.btn-secondary:hover {
  background-color: #d0790f;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #c06e0b), color-stop(95.51%, #de8810), color-stop(100%, #f9d7ad));
  background-image: -webkit-linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  background-image: -moz-linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  background-image: -o-linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  background-image: -ms-linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  background-image: linear-gradient(bottom, #c06e0b 0%, #de8810 95.51%, #f9d7ad 100%);
  border-color: #c2710e;
}
.button-secondary:active, .button-secondary.is-active,
.btn-secondary:active,
.btn-secondary.is-active {
  background-color: #a05d0c;
  color: #f2f2f2;
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #905208), color-stop(95.51%, #af6b0d), color-stop(100%, #f6bf7d));
  background-image: -webkit-linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  background-image: -moz-linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  background-image: -o-linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  background-image: -ms-linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  background-image: linear-gradient(bottom, #905208 0%, #af6b0d 95.51%, #f6bf7d 100%);
  border-color: #92550b;
}

/*

### Full Width Button

```
<a class="button-full">Button</a>
```

*/
.button-full,
.btn-full {
  display: block;
  text-align: center;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
}

/*

### Large Button

Make buttons with a larger font and the same height as input element (useful for inline elements)

```
<a class="button button-large">Button</a>
```

*/
.button-large,
.btn-large {
  font-size: 1.25em;
  line-height: 1.2em;
  padding: 7px 10px;
}

.button-inline-right {
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  -ms-border-radius: 0 2px 2px 0;
  -o-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
}

.button-inline-left {
  -webkit-border-radius: 2px 0 0 2px;
  -moz-border-radius: 2px 0 0 2px;
  -ms-border-radius: 2px 0 0 2px;
  -o-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px;
}

/*

## Accordians

### Accordian

Uses javascript to collapse sections

```
<ul class="accordion">
  <li class="is-active accordion--item">
    <h3 class="accordion--title">Accordian Panel 1</h3>
    <div class="accordion--content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
  <li class="accordion--item">
    <h3 class="accordion--title">Accordian Panel 1</h3>
    <div class="accordion--content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
  <li class="accordion--item">
    <h3 class="accordion--title">Accordian Panel 1</h3>
    <div class="accordion--content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
</ul>
```

*/
.accordion {
  margin: 0px 0px 12px;
  padding: 0;
  background: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.accordion .accordion--item {
  list-style: none;
  margin: 0;
  padding: 0;
}
.accordion .accordion--title {
  cursor: pointer;
  border-top: 1px solid #e6e6e6;
  color: #ef9323;
  padding: 12px 36px 12px 12px;
  margin: 0;
  position: relative;
}
.accordion .accordion--title:hover {
  color: #b86b0d;
}
.accordion .accordion--title:after {
  float: right;
  margin-right: -24px;
}
.accordion .accordion--content {
  visibility: hidden;
  max-height: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out, opacity 0.1s ease-in-out;
  -moz-transition: all 0.2s ease-in-out, opacity 0.1s ease-in-out;
  -ms-transition: all 0.2s ease-in-out, opacity 0.1s ease-in-out;
  -o-transition: all 0.2s ease-in-out, opacity 0.1s ease-in-out;
  transition: all 0.2s ease-in-out, opacity 0.1s ease-in-out;
  padding: 0px 12px;
}
.accordion .accordion--item:not(.is-active) .accordion--content :last-child {
  margin: 0;
}
.accordion .accordion--item.is-active {
  border-top: 3px solid #0060aa;
}
.accordion .accordion--item.is-active .accordion--title {
  color: #0060aa;
}
.accordion .accordion--item.is-active .accordion--content {
  max-height: 1440px;
  visibility: visible;
  height: auto;
  background: white;
  padding: 12px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/*

#### Accordian Panels

Uses panels at larger sizes and collapses into an accordian at smaller sizes. Only shows images from large screens and up.

```
<ul class="l-row accordion accordion-panels">
  <li class="l-three l-m-four l-columns">
    <div class="panel accordion--item is-active">
      <div class="accordion--image">
        <img src="../img/examples/more-info-header.jpg">
      </div>
      <h3 class="accordion--title">Parents</h3>
      <div class="accordion--content">
        <ul>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">About holiday camps</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Family resources and support</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Contact us</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li class="l-three l-m-four l-columns">
    <div class="panel accordion--item">
      <div class="accordion--image">
        <img src="../img/examples/more-info-header-v.jpg">
      </div>
      <h3 class="accordion--title">Volunteers</h3>
      <div class="accordion--content">
        <ul>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li class="l-three l-m-four l-columns">
    <div class="panel accordion--item">
      <div class="accordion--image">
        <img src="../img/examples/more-info-header-t.jpg">
      </div>
      <h3 class="accordion--title">Teachers</h3>
      <div class="accordion--content">
        <ul>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </li>
  <li class="l-three l-m-four l-columns">
    <div class="panel accordion--item">
      <div class="accordion--image">
        <img src="../img/examples/more-info-header.jpg">
      </div>
      <h3 class="accordion--title">Pastors</h3>
      <div class="accordion--content">
        <ul>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
          <li class="teaser-micro">
            <a href="" class="teaser--body-link">
              <div class="teaser--content">
                <h4 class="teaser--title">Title</h4>
              </div>
              <div class="teaser--more">
                <i class="icon-chevron-right"></i>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>
```

*/
.accordion-panels {
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.accordion-panels ul {
  padding: 0;
  margin: 0;
}
.accordion-panels li {
  list-style: none;
}
.accordion-panels li li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}
.accordion-panels .panel {
  background: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.accordion-panels .panel .accordion--image {
  display: none;
}
.accordion-panels .panel .accordion--content, .accordion-panels .panel.is-active .accordion--content {
  padding: 0;
}

/*

## Media

### Media

Media elements are centered by default if they are too small for their area.

```
<figure class="media">
  <img src="http://placehold.it/700x500">
</figure>
```

*/
.media, .media-left, .media-right {
  width: 100%;
  clear: both;
  margin-bottom: 24px;
}
.media img, .media-left img, .media-right img,
.media video,
.media-left video,
.media-right video,
.media embed,
.media-left embed,
.media-right embed,
.media iframe,
.media-left iframe,
.media-right iframe {
  margin: 0 auto;
  border: 4px solid white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/*

### Media Left

```
<figure class="media-left">
  <img src="http://placehold.it/700x500">
</figure>
```

*/
/*

### Media Right

```
<figure class="media-right">
  <img src="http://placehold.it/700x500">
</figure>
```

*/
/*

### Media Video Wrapper

Use this to wrap videos so they scale responsively

```
<div class="media-video widescreen">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/-Zx4bZ6P7Bs" frameborder="0" allowfullscreen></iframe>
</div>
```

*/
.media-video {
  position: relative;
  clear: both;
  overflow: hidden;
  margin-bottom: 16px;
  padding-top: 0;
  padding-bottom: 67.5%;
  height: 0;
}
.media-video.widescreen {
  padding-bottom: 57.25%;
}
.media-video iframe, .media-video object, .media-video embed, .media-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
## Callouts

Used to emphasise certain content.

```
<div class="callout">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.
</div>
```

*/
.callout, .tabs--content .tabs--content--item.is-active {
  background: white;
  padding: 12px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.callout h2:first-child, .tabs--content .tabs--content--item.is-active h2:first-child, .callout h3:first-child, .tabs--content .tabs--content--item.is-active h3:first-child, .callout h4:first-child, .tabs--content .tabs--content--item.is-active h4:first-child, .callout h5:first-child, .tabs--content .tabs--content--item.is-active h5:first-child, .callout h6:first-child, .tabs--content .tabs--content--item.is-active h6:first-child {
  margin-top: 0;
}
.callout p:last-child, .tabs--content .tabs--content--item.is-active p:last-child, .callout ul:last-child, .tabs--content .tabs--content--item.is-active ul:last-child, .callout ol:last-child, .tabs--content .tabs--content--item.is-active ol:last-child {
  margin-bottom: 0;
}

/*

## Teasers

*/
.teaser, .teaser-basic, .teaser-complex, .teaser-featured {
  max-width: 840px;
  margin: 24px 0px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: white;
}
.teaser .teaser--header--title, .teaser-basic .teaser--header--title, .teaser-complex .teaser--header--title, .teaser-featured .teaser--header--title,
.teaser .teaser--header--subtitle,
.teaser-basic .teaser--header--subtitle,
.teaser-complex .teaser--header--subtitle,
.teaser-featured .teaser--header--subtitle {
  margin: 0;
  line-height: 19px;
  margin-bottom: 12px;
}
.teaser hgroup, .teaser-basic hgroup, .teaser-complex hgroup, .teaser-featured hgroup {
  margin-bottom: 12px;
}
.teaser hgroup .teaser--header--title, .teaser-basic hgroup .teaser--header--title, .teaser-complex hgroup .teaser--header--title, .teaser-featured hgroup .teaser--header--title,
.teaser hgroup .teaser--header--subtitle,
.teaser-basic hgroup .teaser--header--subtitle,
.teaser-complex hgroup .teaser--header--subtitle,
.teaser-featured hgroup .teaser--header--subtitle {
  margin: 0;
}
.teaser hgroup .teaser--header--title a, .teaser-basic hgroup .teaser--header--title a, .teaser-complex hgroup .teaser--header--title a, .teaser-featured hgroup .teaser--header--title a,
.teaser hgroup .teaser--header--subtitle a,
.teaser-basic hgroup .teaser--header--subtitle a,
.teaser-complex hgroup .teaser--header--subtitle a,
.teaser-featured hgroup .teaser--header--subtitle a {
  display: block;
}
.teaser hgroup .teaser--header--subtitle, .teaser-basic hgroup .teaser--header--subtitle, .teaser-complex hgroup .teaser--header--subtitle, .teaser-featured hgroup .teaser--header--subtitle {
  font-weight: normal;
  margin-top: 4px;
}
.teaser .teaser--content, .teaser-basic .teaser--content, .teaser-complex .teaser--content, .teaser-featured .teaser--content {
  padding: 24px;
}
.teaser .teaser--more, .teaser-basic .teaser--more, .teaser-complex .teaser--more, .teaser-featured .teaser--more {
  margin: 0;
}
.teaser .teaser--summary, .teaser-basic .teaser--summary, .teaser-complex .teaser--summary, .teaser-featured .teaser--summary {
  color: #6f6f6f;
  font-size: 0.875em;
  line-height: 1.71429em;
}

/*

### Teaser Micro

Useful for small chunks of information. should be no wider than 1/3 of the page on larger screens.

```
<article class="teaser-micro">
  <a href="#" class="teaser--body-link" title="More info">
    <div class="teaser--content">
      <div class="teaser--title">Back to Basic - Week 2</div>
      <div class="teaser--summary">
        <div class="teaser--meta">Grade 7-9</div>
        <div class="teaser--meta">Luther Heights Coolum Beach</div>
      </div>
    </div>
    <div class="teaser--more"><i class="icon-chevron-right"></i></div>
  </a>
</article>
```

Can also include more complex data

```
<article class="teaser-micro">
  <a href="#" class="teaser--body-link" title="More info">
    <div class="teaser--lead">
      <div class="teaser--lead--large">16</div>
      <div class="teaser--lead--small">Dec</div>
    </div>
    <div class="teaser--content">
      <div class="teaser--title">Back to Basic - Week 2</div>
      <div class="teaser--summary">
        <div class="teaser--meta">Grade 7-9</div>
        <div class="teaser--meta">Luther Heights Coolum Beach</div>
      </div>
    </div>
    <div class="teaser--more"><i class="icon-chevron-right"></i></div>
  </a>
</article>
```

*/
.teaser-micro {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 2px;
}
.teaser-micro li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}
.teaser-micro .teaser--body-link {
  display: table;
  width: 100%;
  background-color: #f9fbfd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #f2f2f2), color-stop(100%, #fdfdfd));
  background-image: -webkit-linear-gradient(bottom, #f2f2f2 0%, #fdfdfd 100%);
  background-image: -moz-linear-gradient(bottom, #f2f2f2 0%, #fdfdfd 100%);
  background-image: -o-linear-gradient(bottom, #f2f2f2 0%, #fdfdfd 100%);
  background-image: -ms-linear-gradient(bottom, #f2f2f2 0%, #fdfdfd 100%);
  background-image: linear-gradient(bottom, #f2f2f2 0%, #fdfdfd 100%);
  color: #222222;
}
.teaser-micro .teaser--body-link .teaser--lead,
.teaser-micro .teaser--body-link .teaser--content,
.teaser-micro .teaser--body-link .teaser--more {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}
.teaser-micro .teaser--body-link:hover {
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #eaeaea), color-stop(100%, #fbfbfb));
  background-image: -webkit-linear-gradient(bottom, #eaeaea 0%, #fbfbfb 100%);
  background-image: -moz-linear-gradient(bottom, #eaeaea 0%, #fbfbfb 100%);
  background-image: -o-linear-gradient(bottom, #eaeaea 0%, #fbfbfb 100%);
  background-image: -ms-linear-gradient(bottom, #eaeaea 0%, #fbfbfb 100%);
  background-image: linear-gradient(bottom, #eaeaea 0%, #fbfbfb 100%);
}
.teaser-micro .teaser--body-link:hover .teaser--lead,
.teaser-micro .teaser--body-link:hover .teaser--content,
.teaser-micro .teaser--body-link:hover .teaser--more {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.teaser-micro .teaser--body-link:active {
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(bottom, #dddddd 0%, #eeeeee 100%);
  background-image: -moz-linear-gradient(bottom, #dddddd 0%, #eeeeee 100%);
  background-image: -o-linear-gradient(bottom, #dddddd 0%, #eeeeee 100%);
  background-image: -ms-linear-gradient(bottom, #dddddd 0%, #eeeeee 100%);
  background-image: linear-gradient(bottom, #dddddd 0%, #eeeeee 100%);
}
.teaser-micro .teaser--lead,
.teaser-micro .teaser--content,
.teaser-micro .teaser--more {
  border-right: 1px solid #e3e3e3;
  border-left: 1px solid white;
  display: table-cell;
  vertical-align: middle;
}
.teaser-micro .teaser--lead {
  padding: 12px 0px;
  -moz-border-image: -moz-linear-gradient(bottom, #f1a344, #ee8c15) 1 100% no-repeat;
  -webkit-border-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #f1a344), color-stop(100%, #ee8c15)) 1 100% no-repeat;
  -webkit-border-image: -webkit-linear-gradient(bottom, #f1a344, #ee8c15) 1 100% no-repeat;
  -o-border-image: -o-linear-gradient(bottom, #f1a344, #ee8c15) 1 100% no-repeat;
  border-image: linear-gradient(bottom, #f1a344, #ee8c15) 1 100% no-repeat;
  margin: 1px 0 1px .5%;
  width: 22.5%;
  border-width: 0 1px 0 5px;
  border-left: 7px solid #ef9323;
  text-align: center;
  font-family: "futura-pt-n7", "futura-pt", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}
.teaser-micro .teaser--lead--large {
  font-weight: 700;
  letter-spacing: -3px;
  font-size: 2.25em;
  line-height: 0.8em;
  text-align: center;
}
.teaser-micro .teaser--lead--small {
  text-transform: uppercase;
  font-size: 1.125em;
  line-height: 1.33333em;
  color: gray;
}
.teaser-micro .teaser--content {
  padding: 6px 12px;
}
.teaser-micro .teaser--title {
  margin: 0;
  font-size: 1em;
  line-height: 1.5em;
  font-family: "futura-pt-n7", "futura-pt", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0 0 0.1em;
}
.teaser-micro .teaser--summary {
  font-size: 0.75em;
  line-height: 1.5em;
  color: gray;
}
.teaser-micro .teaser--more {
  width: 6%;
  border-right: none;
  text-align: center;
  color: #ef9323;
  font-size: 1.125em;
  line-height: 1.33333em;
}

/*

### Teaser Basic

Good for news articles or content with not much extra details

```
<div class="teaser-basic">
  <div class="l-row l-collapse">
    <div class="teaser--image l-four l-l-six l-columns">
      <img src="http://placehold.it/500x530&text=Event Image">
    </div>
    <div class="teaser--content l-eight l-l-six l-columns">
      <div class="l-row l-collapse">
        <div class="teaser--header l-seven l-l-twelve l-columns">
          <div class="teaser--header--inner">
            <h3 class="teaser--header--title"><a href="#">Back to Basics</a></h3>
          </div>
        </div>
      </div>
      <div class="teaser--summary clearfix">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus.
      </div>
      <div class="l-five l-l-twelve l-columns teaser--footer">
        <div class="teaser--footer--inner">
          <a href="#" class="teaser--more button-full">More info <i class="icon-chevron-right"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>
```

*/
.teaser-basic, .teaser-complex {
  position: relative;
  overflow: hidden;
}
.teaser-basic .teaser--image, .teaser-complex .teaser--image {
  position: relative;
  padding-top: 0;
  padding-bottom: 45% !important;
  overflow: hidden;
}
.teaser-basic .teaser--image img, .teaser-complex .teaser--image img {
  position: absolute;
  top: -60%;
  left: 0;
}
.teaser-basic .teaser--summary, .teaser-complex .teaser--summary,
.teaser-basic .teaser--header--inner,
.teaser-complex .teaser--header--inner {
  padding: 12px;
}
.teaser-basic .teaser--summary, .teaser-complex .teaser--summary {
  border-top: 1px solid #e6e6e6;
}
.teaser-basic .teaser--summary > p:last-child, .teaser-complex .teaser--summary > p:last-child {
  margin: 0;
}
.teaser-basic .teaser--footer, .teaser-complex .teaser--footer {
  border-top: 1px solid #e6e6e6;
}
.teaser-basic .teaser--footer--inner, .teaser-complex .teaser--footer--inner {
  padding: 12px;
}

/*

### Teaser - Complex

Useful for displaying extra data with content e.g. An event.

```
<div class="teaser-complex">
  <div class="l-row l-collapse">
    <div class="teaser--image l-four l-l-six l-columns">
      <img src="http://placehold.it/500x530&text=Event Image">
    </div>
    <div class="teaser--content l-four l-l-six l-columns">
      <div class="teaser--header">
        <h3 class="teaser--header--title"><a href="#">Explode</a></h3>
        <div class="teaser--header--subtitle">
          <i class="icon-calendar"></i> 10-14 December
        </div>
      </div>
      <div class="teaser--summary">
        Get ready, get set and get on board for five days of jam packed fun.
      </div>
    </div>
    <footer class="teaser--footer l-four l-l-six l-columns">
      <div class="teaser--meta teaser--footer--inner">
        <ul class="no-bullets">
          <li class="teaser--meta--item"><i class="icon-group"></i> Grade 7-9</li>
          <li class="teaser--meta--item"><i class="icon-map-marker"></i> Luther Heights Coolum Beach</li>
        </ul>
      </div>
      <div class="teaser--footer--inner">
        <a href="#" class="teaser--more button-full">More info <i class="icon-chevron-right"></i></a>
      </div>
    </footer>
  </div>
</div>
```

*/
.teaser-complex .teaser--header {
  padding: 12px 12px 0px;
  border: none;
}
.teaser-complex .teaser--header--inner {
  padding: 0;
}
.teaser-complex .teaser--summary {
  padding: 0px 12px 12px;
  border: none;
}
.teaser-complex .teaser--meta {
  font-size: 0.875em;
  line-height: 1.71429em;
}
.teaser-complex .teaser--footer--inner:last-child {
  border-top: 1px solid #e6e6e6;
}

.image--background {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*

### Teaser Featured

Used for highlighting content, usually at the top of pages.

```
<div class="teaser-featured">
  <div class="teaser--image">
    <img src="../img/examples/teaser-featured.jpg">
  </div>
  <div class="teaser--content">
    <hgroup class="teaser--header">
      <h3 class="teaser--header--subtitle fittext-small">Christian Life Week Camps</h3>
      <h2 class="teaser--header--title fittext-large">Back to Basics</h2>
    </hgroup>
    <footer class="teaser--footer">
      <!-- <div class="teaser--meta">
        Winter &amp; Spring Holidays
      </div> -->
      <a href="camps-events-back-to-basics.php" class="button button-large teaser--more">More info <i class="icon-chevron-right"></i></a>
    </footer>
  </div>
</div>
```

*/
.teaser-featured {
  margin: 0;
  position: relative;
  text-align: center;
  min-height: 144px;
}
.teaser-featured .teaser--image {
  position: relative;
  z-index: 0;
}
.teaser-featured .teaser--content {
  z-index: 1;
  width: 100%;
  background: white;
}
.teaser-featured .teaser--meta {
  margin: 12px 0px;
}
.teaser-featured .teaser--header {
  padding: 24px 12px 12px;
}
.teaser-featured .teaser--header--title,
.teaser-featured .teaser--header--subtitle {
  width: 100%;
  color: #222222;
  text-transform: uppercase;
  letter-spacing: -0.075em;
}
.teaser-featured .teaser--header--title {
  font-size: 2.25em;
  line-height: 0.83333em;
}
.teaser-featured .teaser--header--subtitle {
  font-size: 1.5em;
  line-height: 1em;
}
.teaser-featured .teaser--footer {
  padding: 12px;
}
.hero .teaser-featured {
  margin-top: 24px;
}

/*

## Slider

Can be used for any content but works best with featured teasers.

```
<div class="flexslider">
  <ul class="slides">
    <li>
      <div class="teaser-featured">
        <div class="teaser--image">
          <img src="../img/examples/teaser-featured.jpg">
        </div>
        <div class="teaser--content">
          <hgroup class="teaser--header">
            <h3 class="teaser--header--subtitle fittext-small">Christian Life Week</h3>
            <h2 class="teaser--header--title fittext-large">Back to Basics</h2>
          </hgroup>
          <footer class="teaser--footer">
            <!-- <div class="teaser--meta">
              Winter &amp; Spring Holidays
            </div> -->
            <a href="camps-events-back-to-basics.php" class="button button-large teaser--more">More info <i class="icon-chevron-right"></i></a>
          </footer>
        </div>
      </div>
    </li>
    <li>
      <div class="teaser-featured">
        <div class="teaser--image">
          <img src="../img/examples/teaser-featured.jpg">
        </div>
        <div class="teaser--content">
          <hgroup class="teaser--header">
            <h2 class="teaser--header--title fittext-large">Back to Basics</h2>
          </hgroup>
          <footer class="teaser--footer">
            <!-- <div class="teaser--meta">
              Winter &amp; Spring Holidays
            </div> -->
            <a href="camps-events-back-to-basics.php" class="button button-large teaser--more">More info <i class="icon-chevron-right"></i></a>
          </footer>
        </div>
      </div>
    </li>
    <li>
      <div class="teaser-featured">
        <div class="teaser--image">
          <a href="camps-events-back-to-basics.php">
            <img src="../img/examples/teaser-featured.jpg">
          </a>
        </div>
      </div>
    </li>
  </ul>
</div>

```

*/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
  outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flexslider {
  margin: 0;
  padding: 0;
  min-height: 3em;
}

.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}

.flexslider .slides img {
  width: 100%;
  display: block;
}

.flex-pauseplay span {
  text-transform: capitalize;
}

.slides:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

html[xmlns] .slides {
  display: block;
}

* html .slides {
  height: 1%;
}

.no-js .slides > li:first-child {
  display: block;
}

.flexslider {
  margin: 0px 0px 24px;
  position: relative;
}

.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}

.loading .flex-viewport {
  max-height: 300px;
}

.flexslider .slides {
  zoom: 1;
}

.carousel li {
  margin-right: 5px;
}

.flex-direction-nav {
  *height: 0;
}

.flex-direction-nav a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: -48px 0px 0px;
  width: 60px;
  position: absolute;
  top: 27%;
  z-index: 10;
  display: block;
  overflow: hidden;
  background: none;
  text-indent: 200%;
  cursor: pointer;
}
.flex-direction-nav a:after {
  font-size: 1.5em;
  line-height: 2.5em;
  padding: 3px 0px 0px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  background-color: #0d0d0d;
  color: #f2f2f2;
  vertical-align: middle;
  text-align: center;
  text-indent: 0;
  width: 40px;
}

.flex-direction-nav .flex-next {
  right: 0;
}

.flex-direction-nav .flex-prev {
  left: 0;
}

.flexslider:hover .flex-next:after,
.flexslider:hover .flex-prev:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

.flexslider:hover .flex-next:hover:after,
.flexslider:hover .flex-prev:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

.flex-direction-nav .flex-disabled {
  opacity: .3!important;
  filter: alpha(opacity=30);
  cursor: default;
}

/* Control Nav */
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center;
}

.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}

.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}

.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}

.flex-control-thumbs img {
  width: 100%;
  display: block;
  opacity: .7;
  cursor: pointer;
}

.flex-control-thumbs img:hover {
  opacity: 1;
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

/*

## Blocks

Used for keeping areas that aren't main content consistent.

```
<section class="block">
  <h2 class="block--title">Block title</h2>
  <div class="block--content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus nisi et eros bibendum lacinia. Curabitur sed est nec urna pretium vulputate ut eget lectus. In ultricies, tellus non vehicula malesuada, augue sem aliquet tellus, ut faucibus turpis ante quis nibh. Ut vel turpis tortor, a consectetur ipsum. Sed posuere commodo vestibulum. Pellentesque volutpat diam sem.</p>
  </div>
</section>
```

*/
.block {
  margin: 24px 0px 0px;
}
aside .block:first-child {
  margin-top: 0;
}
.block .block--title {
  margin: 0px 0px 6px;
}
.block .block--title a {
  color: #0060aa;
}
.block .block--title a:hover {
  color: #00355d;
}
.block .block--title a:active {
  color: #000a11;
}
footer[role=contentinfo] .block .block--title {
  color: #f2f2f2;
}
.block .block--header {
  padding: 6px 24px;
}
.block .block--header .block--title,
.block .block--header .block--more {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  margin: 0;
}
.block .block--header .block--title,
.block .block--header .block--more {
  *display: inline;
}
.block .block--header .block--title {
  margin-right: 12px;
  font-size: 1.5em;
  line-height: 1.5em;
}
.hero .block {
  margin: 0;
  background: white;
  border-top: 4px solid #222222;
}

/*
## Pager

```
<ul class="pager">
  <li class="pager--item pager--previous first"><a href="#"><i class="icon-chevron-left"></i> Previous</a></li>
  <li class="pager--item pager--current">2 of 3</li>
  <li class="pager--item pager--next last"><a href="#">Next <i class="icon-chevron-right"></i></a></li>
</ul>
```

*/
.pager {
  margin: 24px 0px;
  padding: 24px 0px 0px;
  border-top: 1px solid #cccccc;
  position: relative;
  list-style: none;
  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}
.pager li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}
.pager .pager--item {
  padding: 0;
  margin: 0;
  z-index: 2;
  position: relative;
}
.pager .pager--previous {
  float: left;
}
.pager .pager--current {
  font-weight: normal;
  margin: 0 auto;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 1;
}
.pager .pager--next {
  float: right;
}

/*

## Hero

Only used on front page to contain the slider and side content. Provides context for other components.

```
<div class="hero l-row">
  <div class="l-eight l-m-eight l-columns">
    <div class="flexslider">
      <ul class="slides">
        <li>
          <div class="teaser-featured">
            <div class="teaser--image">
              <img src="../img/examples/teaser-featured.jpg">
            </div>
            <div class="teaser--content">
              <hgroup class="teaser--header">
                <h3 class="teaser--header--subtitle fittext-small">Christian Life Week Camps</h3>
                <h2 class="teaser--header--title fittext-large">Back to Basics</h2>
              </hgroup>
              <footer class="teaser--footer">
                <!-- <div class="teaser--meta">
                  Winter &amp; Spring Holidays
                </div> -->
                <a href="camps-events-back-to-basics.php" class="button button-large teaser--more">More info <i class="icon-chevron-right"></i></a>
              </footer>
            </div>
          </div>
        </li>
        <li>
          <div class="teaser-featured">
            <div class="teaser--image">
              <img src="../img/examples/teaser-featured.jpg">
            </div>
            <div class="teaser--content">
              <hgroup class="teaser--header">
                <h3 class="teaser--header--subtitle fittext-small">Christian</h3>
                <h2 class="teaser--header--title fittext-large">Back to Basics</h2>
              </hgroup>
              <footer class="teaser--footer">
                <!-- <div class="teaser--meta">
                  Winter &amp; Spring Holidays
                </div> -->
                <a href="camps-events-back-to-basics.php" class="button button-large teaser--more">More info <i class="icon-chevron-right"></i></a>
              </footer>
            </div>
          </div>
        </li>
        <li>
          <div class="teaser-featured">
            <div class="teaser--image">
              <img src="../img/examples/teaser-featured.jpg">
            </div>
            <div class="teaser--content">
              <hgroup class="teaser--header">
                <h3 class="teaser--header--subtitle fittext-small">Christian Life Week Camps</h3>
                <h2 class="teaser--header--title fittext-large">Back</h2>
              </hgroup>
              <footer class="teaser--footer">
                <!-- <div class="teaser--meta">
                  Winter &amp; Spring Holidays
                </div> -->
                <a href="camps-events-back-to-basics.php" class="button button-large teaser--more">More info <i class="icon-chevron-right"></i></a>
              </footer>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="l-four l-m-eight l-columns">
    <div class="l-row">
      <div class="l-m-four l-columns">
        <div class="hero--content">
          <h2 class="hero--title">Alive in Christ,<br>Passionate in Service</h2>
          <p>Supporting congregations, schools and the wider Church in their ministry to the young people of Queensland.</p>
        </div>
      </div>
      <div class="l-m-four l-columns">
        <div class="block">
          <header class="block--header">
            <h3 class="block--title">Upcoming Events</h3>
            <a href="camps-events.php" class="block--more button">More Events <i class="icon-chevron-right"></i></a>
          </header>
          <div class="block--content l-cf">
            <article class="teaser-micro">
              <a href="#" class="teaser--body-link" title="More info">
                <div class="teaser--lead">
                  <div class="teaser--lead--large">10</div>
                  <div class="teaser--lead--small">Nov</div>
                </div>
                <div class="teaser--content">
                  <div class="teaser--title">Water Blast</div>
                  <div class="teaser--summary">
                    <div class="teaser--meta">All Ages</div>
                    <div class="teaser--meta">Wet 'n' Wild</div>
                  </div>
                </div>
                <div class="teaser--more"><i class="icon-chevron-right"></i></div>
              </a>
            </article>
            <article class="teaser-micro">
              <a href="#" class="teaser--body-link" title="More info">
                <div class="teaser--lead">
                  <div class="teaser--lead--large">10</div>
                  <div class="teaser--lead--small">Dec</div>
                </div>
                <div class="teaser--content">
                  <div class="teaser--title">Water Blast</div>
                  <div class="teaser--summary">
                    <div class="teaser--meta">All Ages</div>
                    <div class="teaser--meta">Wet 'n' Wild</div>
                  </div>
                </div>
                <div class="teaser--more"><i class="icon-chevron-right"></i></div>
              </a>
            </article>
            <article class="teaser-micro">
              <a href="#" class="teaser--body-link" title="More info">
                <div class="teaser--lead">
                  <div class="teaser--lead--large">17</div>
                  <div class="teaser--lead--small">Dec</div>
                </div>
                <div class="teaser--content">
                  <div class="teaser--title">Water Blast</div>
                  <div class="teaser--summary">
                    <div class="teaser--meta">All Ages</div>
                    <div class="teaser--meta">Wet 'n' Wild</div>
                  </div>
                </div>
                <div class="teaser--more"><i class="icon-chevron-right"></i></div>
              </a>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

*/
.hero .hero--title {
  margin: 16px 0px;
  color: #222222;
  text-transform: uppercase;
  font-style: italic;
  font-size: 1.5em;
  line-height: 1em;
}
.hero .hero--content {
  margin-bottom: 24px;
}
.hero .hero--content p:last-child {
  margin: 0;
}

.list-slat {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-slat li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

.list-slat--item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 0px;
}
.list-slat--item > a {
  display: inline-block;
}
.list-slat--item > a:only-child {
  display: block;
}
.list-slat--item:first-child {
  border-top: none;
}
.list-slat--item.l-1of2:nth-child(2) {
  border-top: none;
}

.list-slat--title {
  margin: 0;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5em;
}

ol.search-results {
  padding-left: 0;
}

/*

## Tabs

```
<ul class="tabs tabs-contained">
  <li class="tabs--item is-active"><a href="#tab1">Safety</a></li>
  <li class="tabs--item"><a href="#tab2">Transport</a></li>
  <li class="tabs--item"><a href="#tab3">Financial Support</a></li>
  <li class="tabs--item"><a href="#tab4">Merch</a></li>
</ul>

<ul class="tabs--content tabs-contained">
  <li class="tabs--content--item is-active" id="tab1">
    <br>
    Info about safety
    <br>
    <br>
  </li>
  <li class="tabs--content--item" id="tab2">
    <br>
    Info about transport
    <br>
    <br>
  </li>
  <li class="tabs--content--item" id="tab3">
    <br>
    Info about financial support
    <br>
    <br>
  </li>
  <li class="tabs--content--item" id="tab4">
    <br>
    Info about merchandise
    <br>
    <br>
  </li>
</ul>
```

*/
.tabs {
  list-style: none;
  display: block;
  margin: 24px 0px 0px;
  padding: 0;
  width: 100%;
}
.tabs li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}
.tabs .tabs--item {
  margin: 0;
  text-align: center;
  float: left;
  max-width: 30%;
}
.tabs .tabs--item a {
  display: block;
  font-weight: 700;
  font-size: 0.75em;
  line-height: 2em;
  padding: 6px 12px;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  border-top: 2px solid transparent;
}
.tabs .tabs--item.is-active a {
  background: white;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  color: #0060aa;
  border-top: 2px solid #0060aa;
}

.tabs--content {
  display: block;
  margin: 0px 0px 24px;
  padding: 0;
  position: relative;
  z-index: 2;
}
.tabs--content .tabs--content--item {
  display: none;
}
.tabs--content .tabs--content--item.is-active {
  display: block;
}

.no-js .tabs--content--item {
  display: block;
}

/*

## Breadcrumbs

```
<nav class="breadcrumb">
  <ul>
    <li class="breadcrumb--item"><a href="index.php">Home</a></li>
    <li class="breadcrumb--item"><i class="icon-chevron-right"></i><a href="camps-events.php">Camps &amp; Events</a></li>
    <li class="breadcrumb--item"><i class="icon-chevron-right"></i><a href="camps-events.php">Event Title</a></li>
  </ul>
</nav>
```

*/
.breadcrumb {
  margin-bottom: 24px;
  padding: 6px 7px;
  background: url('../img/rgbapng/ffffff7f.png');
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.875em;
  line-height: 1.71429em;
}
.breadcrumb * {
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb * li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}
.breadcrumb .breadcrumb--item {
  float: left;
  color: #a2a2a2;
}
.breadcrumb .breadcrumb--item a {
  padding: 0px 6px;
}
.breadcrumb .breadcrumb--item:first-child a {
  padding-left: 0;
}

/*

## Contextual Links

```
<div class="contextual-links-wrapper contextual-links-processed">
  <a class="contextual-links-trigger" href="#">Configure</a>
  <ul class="contextual-links">
    <li class="node-edit first"><a href="/node/7/edit?destination=front">Edit</a></li>
    <li class="node-delete last"><a href="/node/7/delete?destination=front">Delete</a></li>
  </ul>
</div>
```

*/
.contextual-links-trigger {
  -webkit-transition: 0;
  -moz-transition: 0;
  -ms-transition: 0;
  -o-transition: 0;
  transition: 0;
}

.logo {
  width: 62%;
  float: left;
  padding: 24px 12px;
  z-index: 10;
}
.logo .site-name {
  background: url('../img/../img/logo-white.png') no-repeat 0 0;
  background-size: contain;
  height: 78px;
  width: 180px;
  margin: 0;
}
.logo .site-name a {
  display: block;
  height: 100%;
}

.toggle-links {
  float: left;
  width: 38%;
  padding: 24px 12px;
}
.no-js .toggle-links {
  display: none;
}
.toggle-links li {
  margin-bottom: 0;
}
.toggle-links a {
  margin: 6px 0px 0px;
}
.toggle-links li:first-child a {
  margin-top: 4px;
}

.header--nav-secondary {
  display: none;
  font-size: 0.875em;
  line-height: 1.71429em;
}

.header--nav-primary {
  position: relative;
  background: #0060aa;
}

.header--search {
  margin: 0;
}
.header--search.is-visible {
  max-height: 120px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.header--search .header--search--input {
  padding: 6px 12px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

footer[role="contentinfo"] {
  background-color: #0060aa;
  color: #f2f2f2;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
footer[role="contentinfo"] a {
  font-weight: 700;
}
footer[role="contentinfo"] a.active, footer[role="contentinfo"] a:active, footer[role="contentinfo"] a.\3A active {
  color: #cccccc;
}

/*

# States

*/
/*

## Image replacement

This element is hidden from display but not screen readers. Allows an background image to be set.

```
<div class="is-ir">Hidden Text<br></div>
```

*/
.ir,
.is-ir,
.site-name,
.header--search label {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  white-space: nowrap;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  height: 0;
  margin: 0;
}
.ir br,
.is-ir br,
.site-name br,
.header--search label br {
  display: none;
}

/*

## Animations

Changes in this element will be animated

```
<a class="is-translated">Fading Link</a>
```

*/
.is-transition, .nav-toggle,
.nav-toggle > ul ul, .js .header--search, .is-visible,
.visible,
.is-active,
.active {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

/*

## Hide/Show

Hide from both screenreaders and browsers

```
<div class="is-hidden">Hidden</div>
```

*/
.is-hidden,
.hidden {
  display: none;
}

/*

Should overide all other visibility settings

```
<div class="is-visible">Visible</div>
```

*/
.is-visible,
.visible {
  display: block !important;
}

.is-visible,
.visible,
.is-active,
.active {
  height: auto;
}

/*

Hide visually and from screenreaders but keep layout

```
<div class="is-invisible">Visible</div>
```

*/
.invisible,
.is-invisible {
  visibility: hidden;
}

body .logo .site-name {
  background: none;
}
body .logo .site-name .logo-ie {
  display: block !important;
  max-width: 100%;
}

.header--search {
  display: none;
}

.l-row {
  max-width: 50em;
}