@import url(https://fonts.googleapis.com/css?family=Alegreya:400,400italic,700,700italic|Alegreya+Sans:400,300,400italic,700,700italic);

/**
 * Title: Ding Darling Wildlife Society
 * Author/s: Mono
 * CSS build platform: Gulp
 * CSS development build command: gulp styles
 * CSS production build command: gulp styles
 * CSS processor: PostCSS
 * CSS processor usage: autoprefixing, nesting, variables, minification, pxtorem
 * CSS name convention: BEM
 * Global indentation: 2 spaces
 * Global units: px
 * Global prefix: none
 * Browser support: IE9+, last 3 versions of modern browsers, Android 4+, iOS6+
 * Additional notes: Some properties with pixel units (depending on the whitelist in Gulpfile) are being recalculated to REM units
 */

/**
 * Import: vars
 * Description: variables
 */
/*------------------------------------*\
    # vars.globals
\*------------------------------------*/

/**
 * The $unit variable is a global variable to be used
 * in paddings, margins, for sizing and positioning
 */

/**
 * The $spacer variable is a global variable to be used
 * in to create a unified spacer for all kinds of elements
 */

/**
 * Global class prefix - usage: .$(global-prefix)classname
 */

/**
 * Global radius and rounded
 */
/*------------------------------------*\
    # vars.typography
\*------------------------------------*/

/**
 * Project base line height (unitless in order to work with typomatic)
 */

/**
 * Type scale sizes must be entered in their pixel size
 * (unitless in order to work with typomatic)
 */

/**
 * Type weights
 */

/**
 * Font stacks
 */
/*------------------------------------*\
    # vars.responsive
\*------------------------------------*/ /* 360px */ /* 359px */ /* 544px */ /* 543px */ /* 768px */ /* 767px */ /* 992px */ /* 991px */ /* 1200px */ /* 1199px */ /* 1440px */ /* 1439px */ /* 1440px */ /* 1439px */
/*------------------------------------*\
    # vars.colors
\*------------------------------------*/

/**
 * Brand colors
 */ /* #de7503 */ /* #416038 */


/**
 * Global text color
 */

/**
 * Theme colors
 */

/**
 * Utility colors
 */

/**
 * Import: tools
 * Description: tools like typomatic and other mixins / libraries
 */
/*------------------------------------*\
    # tools.typomatic
\*------------------------------------*/

/**
 * Mixin name: typomatic-init
 * Description: creates a vertical rhythm on a page using font-size
 * and line-height on the html element
 * Parameters: 
 * does not take parameters
 */

/**
 * Mixin name: type-scale
 * Description: type-scale sets the type to baseline to achieve
 * vertical rhythm.
 * Parameters: 
 * $scale ($type-base is default) - font size (unitless) variable
 * $baselines (1 is default) - number of baselines
 */
/*------------------------------------*\
    # tools.bubba
\*------------------------------------*/

/**
 * Custom 12 column grid with 2% gutters (6.5% width column).
 * $grid-gutter - amount of space between columns
 * $grid-columns - number of columns of the grid
 */

/**
 * The grid-row mixin is used for building rows
 */

/**
 * The grid-span mixin is used for building grid columns
 */

/**
 * The grid-col mixin is used for gutters
 */

/**
 * The grid-push mixin is used for pushing columns using margin-left
 * for the space of a number of columns
 */

/**
 * The grid-pull mixin is used for pulling columns using margin-left
 * for the space of a number of columns
 */

/**
 * Grid
 */
.grid {
}
.grid:after {
    content:"";
    display:table;
    clear:both;
}

/**
 * Row
 */
.row {
    margin-left:-1.11111rem;
    margin-right:-1.11111rem;
}
.row:after{
    content:"";
    display:table;
    clear:both;
}
.row:after {
    content:"";
    display:table;
    clear:both;
}

/**
 * Column
 */
.col {
    padding-left:   1.11111rem;
    padding-right:  1.11111rem;
}
/*------------------------------------*\
    # tools.clearing
\*------------------------------------*/

/**
 * Import: generic
 * Description: normalize or reset CSS, box sizing
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

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

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

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

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

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

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

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

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

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

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

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

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 2.22222rem;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

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

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

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

/**
 * Re-set default cursor for disabled elements.
 */

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

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

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

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

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

/**
 * Define consistent border, margin, and padding.
 */

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

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

td,
th {
  padding: 0;
}
/*------------------------------------*\
    # generic.boxsizing
\*------------------------------------*/

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

html {
    box-sizing: border-box;
}

/**
 * Import: base
 * Description: base structural stylings for setting the body, typography
 * and other base styles (no classes should be added here)
 */
/*------------------------------------*\
    # base.globals
\*------------------------------------*/

/**
 * Initialize typomatic in project (sets font-size and line-height
 * on html selector.
 */
html {
    font-size:112.5%;
    line-height:1.55556;
}

body {
    font-family: "Alegreya", Times, serif;
    color: #444444;
    overflow-x: hidden;
    background: rgb(243, 243, 243);
}

img {
    max-width: 100%;
    vertical-align: middle;
}
/*------------------------------------*\
    # base.typography
\*------------------------------------*/

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-variant-ligatures: normal;
}

h1 {
    font-size:1.77778rem;
    line-height:2.33333rem;
}
h2 {
    font-size:1.44444rem;
    line-height:1.94444rem;
}
h3, h4, h5, h6 {
    font-size:1rem;
    line-height:1.55556rem;
}

@media    (min-width: 48em) {
    h1 {
        font-size:2.33333rem;
        line-height:3.11111rem;
    }
    h2 {
        font-size:1.77778rem;
        line-height:2.33333rem;
    }
    h3 {
        font-size:1.44444rem;
        line-height:1.94444rem;
    }
    h4, h5, h6 {
        font-size:1.22222rem;
        line-height:1.55556rem;
    }
}

/**
 * Paragraphs
 */
p {
    margin: 0;
    font-feature-settings: "kern" 1;
    font-variant-ligatures: normal;
}

/**
 * Lists (ol, ul, dd)
 */
ol, ul, dl {
    margin: 0;
}
ol {
    list-style: none;
    padding: 0;
}
ol li {}
ul {
    list-style: none;
    padding: 0;
}
ul li {}
dd {}
dl dt {}
dl dd {}

/**
 * Anchors
 */
a {
    text-decoration: none;
    color: rgb(222,117,3);
    
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}
a:link {}
a:hover {
    color: rgb(184, 96, 3);
}
a:focus {
    color: rgb(184, 96, 3);
}
a:visited {}

/**
 * Typographic details
 */
hr {
    position: relative;
    height: 1.55556rem;
    border: 0;
    margin: 0;
}
hr:after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    height: 0.05556rem;
    background: rgba(0, 0, 0, 0.15);
}
em {}
b, strong {
    font-weight: bold
}
address {}
small {
    font-size:0.88889rem;
    line-height:1.16667rem;
}
pre {}
code {}
sub {}
sup {}
strike {}

/**
 * Import: modules
 * Description: cross project reusable modules
 */
/*------------------------------------*\
    # modules.container
\*------------------------------------*/

.container {
    max-width: 94.44444rem;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
/*------------------------------------*\
    # modules.anchor
\*------------------------------------*/

.anchor {

    /**
     * Anchor base
     */
    text-decoration: none;


}

.anchor:focus {
    outline: 0;
}

.anchor--primary {
    color: rgb(222,117,3);
}

.anchor--primary:hover,
        .anchor--primary:focus {
    color: rgb(184, 96, 3);
}

.anchor--secondary {
    color: rgb(65,96,56);
}

.anchor--secondary:hover,
        .anchor--secondary:focus {
    color: rgb(57, 59, 56);
}
/*------------------------------------*\
    # modules.btn
\*------------------------------------*/

.btn {

    /**
     * Button base
     */
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    border: 0;
    cursor: pointer;
    -ms-touch-action: manipulation;
        touch-action: manipulation;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    text-decoration: none;
    background-color: transparent;

    /**
     * Button base project styling
     */
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    transition: all .15s ease-in;

}

.btn:focus {
    outline: 0;
}

/**
     * Button styles
     */

.btn--primary {
    background: rgb(222,117,3);
    color: white;
}

.btn--primary:hover,
        .btn--primary:focus {
    color: white;
    background: rgb(196, 103, 3);
}

.btn--primary--outline {
    background: transparent;
    color: rgb(222,117,3);
    border: 1px solid rgb(222,117,3);
}

.btn--primary--outline:hover,
        .btn--primary--outline:focus {
    color: white;
    background: rgb(222,117,3);
}

.btn--secondary {
    background: rgb(65,96,56);
    color: white;
}

.btn--secondary:hover,
        .btn--secondary:focus {
    color: white;
    background: rgb(59, 71, 56);
}

.btn--secondary--outline {
    background: transparent;
    color: rgb(65,96,56);
    border: 1px solid rgb(65,96,56);
}

.btn--secondary--outline:hover,
        .btn--secondary--outline:focus {
    color: white;
    background: rgb(65,96,56);
}

.btn--negative {
    background: white;
    color: #444444;
}

.btn--negative:hover,
        .btn--negative:focus {
    color: #444444;
    background: rgb(232, 232, 232);
}

.btn--negative--outline {
    background: transparent;
    color: white;
    border: 1px solid white;
}

.btn--negative--outline:hover,
        .btn--negative--outline:focus {
    color: #444444;
    background: white;
}

.btn--ghost {
    background-color: transparent;
    color: rgb(222,117,3);
}

.btn--ghost:hover,
        .btn--ghost:focus {
    color: rgb(196, 103, 3);
}

/**
     * Button sizes
     */

.btn--sml {
    font-size: 0.77778rem;
    height: 1.55556rem;
    line-height: 1.55556rem;
    padding: 0 0.77778rem;
}

.btn--med {
    font-size: 0.88889rem;
    height: 2.33333rem;
    line-height: 2.33333rem;
    padding: 0 1.16667rem;
}

.btn--lrg {
    height: 3.11111rem;
    line-height: 3.11111rem;
    padding: 0 1.55556rem;
}

/**
     * Special cases
     */

.btn--donate {
    height: 2.33333rem;
    line-height: 2.33333rem;
    padding: 0 0.77778rem;
    background: #D55B5B;
    color: white;
}

.btn--donate:hover,
        .btn--donate:focus {
    color: white;
    background: rgb(222,117,3);
}
/*------------------------------------*\
    # modules.btngroup
\*------------------------------------*/

.btngroup--float {
    overflow: hidden;
}

.btngroup--float > * {
    float: left;
}

.btngroup--spaced > * {
    margin-right: 0.38889rem;
}

.btngroup--radial *:first-child {
    border-radius: 5px 0 0 5px;
}

.btngroup--radial *:last-child {
    border-radius: 0 5px 5px 0;
}
/*------------------------------------*\
    # modules.input
\*------------------------------------*/

.input {
    /**
     * Input base
     */
    display: inline-block;
    vertical-align: middle;
    border: 0;
    cursor:pointer;
    -ms-touch-action: manipulation;
        touch-action: manipulation;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    transition: border-color .2s;


    /**
     * Input base project styling
     */
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    border: 1px solid rgb(222, 222, 222);


}

.input::-webkit-input-placeholder {
    color: rgb(159, 159, 159);
}

.input::-moz-placeholder {
    color: rgb(159, 159, 159);
}

.input:-ms-input-placeholder {
    color: rgb(159, 159, 159);
}

.input::placeholder {
    color: rgb(159, 159, 159);
}

.input:focus {
    outline: 0;
    border-color: rgb(212, 213, 213);
}

/**
     * Input types
     */

.input--text {
    width: 100%;
    height: 2.33333rem;
    line-height: 2.33333rem;
    padding: 0 0.38889rem;
}

.input--text:focus {
    box-shadow: 0 0 6px rgb(212, 213, 213);
}

.input--number {
    width: 100%;
    height: 2.33333rem;
    line-height: 2.33333rem;
    padding: 0 0 0 0.38889rem;
}

.input--number:focus {
    box-shadow: 0 0 6px rgb(212, 213, 213);
}

.input--required {
    border-color: #D55B5B;
}

.input--textarea {
    width: 100%;
    min-height: 6.66667rem;
    padding: 0 0.38889rem;
    resize: vertical;
}

.input--check,
    .input--radio {
    display: none;
}

.input--check + label, .input--radio + label {
    cursor: pointer;
}

.input--check + label:before, .input--radio + label:before {
    content: '';
    float: left;
    width: 1.16667rem;
    height: 1.16667rem;
    margin-top: 0.19444rem;
    margin-right: 0.77778rem;
    border: 1px solid rgb(196, 196, 196);
}

.input--check:checked + label:before, .input--radio:checked + label:before {
    border: 0;
    background: rgb(222,117,3);
}

.input--check:focus + label:before, .input--radio:focus + label:before {
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.input--check {
}

.input--radio + label:before {
    border-radius: 50%;
}

/**
     * Input sizes
     */

.input--sml {
    height: 1.55556rem;
    line-height: 1.55556rem;
    padding: 0 0.38889rem;
}

.input--med {
    height: 2.33333rem;
    line-height: 2.33333rem;
    padding: 0 0.77778rem;
}

.input--lrg {
    height: 3.11111rem;
    line-height: 3.11111rem;
    padding: 0 1.16667rem;
}

/**
     * Project specific
     */

.input--micro {
    max-width: 4.44444rem;
}

.input--search {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    color: white;
    padding-right: 2.33333rem;
    max-width: 7.77778rem;
}

.input--search__icon {
    position: absolute;
    top: 0.22222rem;
    right: 0;
    opacity: 0.8;
}

.input--search__icon:focus {
    opacity: 1;
}

.input--search:focus {
    border-color: white;
}

.input--search:focus + button {
    opacity: 1;
}

.input--search::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.input--search::-moz-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.input--search:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.input--search::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.input--amount {
    position: relative;
}

.input--amount__input {
    font-size:1.77778rem;
    line-height:3.11111rem;
    font-family: "Alegreya", Times, serif;
    width: 9.33333rem;
    height: 3.88889rem;
    line-height: 3.88889rem;
    padding-left: 1.55556rem;
    background-color: transparent;
    border: 0;
    border-bottom: 1px dashed rgb(170, 170, 170);
    color: rgb(222,117,3);
}

.input--amount__input:focus {
    outline: 0;
}

.input--amount__dollar {
    font-size:1.22222rem;
    line-height:1.55556rem;
    position: absolute;
    left: 0;
    top: 0.77778rem;
    color: rgb(170, 170, 170);
}
/*------------------------------------*\
    # modules.field
\*------------------------------------*/

.field {
    margin-bottom: 1.55556rem;
}

.field__lbl {
    font-size:0.88889rem;
    line-height:1.55556rem;
    display: block;
    margin-bottom: 0.38889rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.field__divider {
    font-size:1rem;
    line-height:1.55556rem;
    display: block;
    margin-bottom: 1.55556rem;
    padding-bottom: 1.55556rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    border-bottom: 1px solid rgb(232, 232, 232);
}

.field__warning {
    font-size:0.88889rem;
    line-height:1.16667rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    color: #D55B5B;
    padding: 0.77778rem 0;
}
/*------------------------------------*\
    # modules.formattedtext
\*------------------------------------*/

.formattedtext h1, .formattedtext h2, .formattedtext h3, .formattedtext h4, .formattedtext h5, .formattedtext h6 {
    margin-bottom: 1.55556rem;
}

.formattedtext ul {
    list-style: disc;
    list-style-position: inside;
}

.formattedtext ol {
    list-style: decimal;
    list-style-position: inside;
}

.formattedtext ul, .formattedtext ol {
    text-indent: -16px;
    margin-left: 0.88889rem;
}

.formattedtext p, .formattedtext ul, .formattedtext ol, .formattedtext dl, .formattedtext table {
    margin-bottom: 1.55556rem;
}

.formattedtext a {
    color: #444444;
    text-decoration: underline;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

.formattedtext a:hover, 
        .formattedtext a:focus {
    color: rgb(222,117,3);
}
/*------------------------------------*\
    # modules.title
\*------------------------------------*/

.title {


}
/*------------------------------------*\
    # modules.alert
\*------------------------------------*/

.alert {

    font-size:1rem;

    line-height:1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    padding: 0.38889rem 0.38889rem 0.38889rem 0.77778rem;
}

.alert--note {
    border-left: 3px solid #D1BE54;
    background: rgba(209, 190, 84, 0.15);
}

.alert--success {
    border-left: 3px solid rgb(65,96,56);
    background: rgba(65, 96, 56, 0.15);
}

.alert--warning {
    border-left: 3px solid #D55B5B;
    background: rgba(213, 91, 91, 0.15);
}

/*@import modules.anchor.css;
@import modules.btn.css;*/

/**
 * Import: components
 * Description: specific website/app components
 */
/*------------------------------------*\
    # components.logo
\*------------------------------------*/

.logo {
    overflow: hidden;
}

.logo__img {
    float: left;
    width: 30%;
}

@media  (min-width: 90em) {
    .logo__img{
        margin-top:0.38889rem;
        width:4.44444rem;
    }
}

.logo__heading {
    float: left;
    padding: 0.38889rem 0.77778rem 0 0.77778rem;
    width: 70%;
}

@media  (min-width: 90em) {
    .logo__heading{
        width:14.44444rem;
    }
}

.logo__title {
    font-size:1rem;
    line-height:1.16667rem;
    color: white;
    text-indent: -6px;
}

@media  (min-width: 90em) {
    .logo__title{
        font-size:1.22222rem;
        line-height:1.55556rem;
        margin-bottom:0.77778rem;
        text-indent:-10px;
    }
}

.logo__title span {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
}

.logo__title__link {
    color: white;
}

.logo__title__link:hover, 
            .logo__title__link:focus {
    color: rgba(255, 255, 255, 0.6);
}

.logo__subtitle {
    font-size:0.88889rem;
    line-height:1.16667rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,0.7);
}
/*------------------------------------*\
    # components.overlay
\*------------------------------------*/

.overlay {
    visibility: hidden;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity .2s ease-in;
}

.overlay.js-overlay-open {
    opacity: 1;
    visibility: visible;
}

@media     (max-width: 74.9375em) {
    .overlay{
        display:block;
    }
}

@media   (min-width: 75em) {
    .overlay{
        display:none;
    }
}
/*------------------------------------*\
    # components.modal
\*------------------------------------*/

.modal {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: all .2s ease-in-out;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;

}

.modal--open {
    visibility: visible;
    opacity: 1;
}

.modal--open .modal__body {
    transform: translate(-50%, -50%);
}

.modal__body {
    position: absolute;
    top: 50%;
    left: 50%;
    background: white;
    transform: translate(-50%, -100%);
    transition: all .2s ease-in-out;
}

.modal__header {
    padding: 1.55556rem 1.55556rem 0 1.55556rem;
}

.modal__title {
    font-size:1.22222rem;
    line-height:1.94444rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.modal__content {
    padding: 0.77778rem 1.55556rem 1.55556rem 1.55556rem;
}

.modal__text {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}

.modal__footer {
    border-top: 1px solid rgb(222, 222, 222);
    padding: 0.77778rem 1.55556rem;
}
/*------------------------------------*\
    # components.hamburger
\*------------------------------------*/

.hamburger {
    display: block;
    background-color: transparent;
    height: 2rem;
    min-width: 2.11111rem;
    overflow: hidden;
    border: 1px solid rgb(222,117,3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    will-change: transform;

}

.hamburger:focus {
    outline: none;
}

.hamburger__icon {
    display: block;
    position: relative;
    height: 0.88889rem;
    width: 1rem;
    float: left;
}

.hamburger__icon span,
        .hamburger__icon:after,
        .hamburger__icon:before {
    content: '';
    display: block;
    position: absolute;
    width: 1.33333rem;
    height: 0.11111rem;
    background: rgb(222,117,3);
    transition: all .2s;
}

.hamburger__icon span {
    top: 0.38889rem;
}

.hamburger__icon:before {
    top: 0;
}

.hamburger__icon:after {
    bottom: 0;
    opacity: 1;
    visibility: visible;
}

.js-menuToggle-open .hamburger__icon span {
    transform: rotate(45deg);
}

.js-menuToggle-open .hamburger__icon:before {
    transform: rotate(-45deg);
    top: 0.38889rem;
}

.js-menuToggle-open .hamburger__icon:after {
    visibility: hidden;
    opacity: 0;
}

.hamburger__text {
    display: none;
    font-size:0.88889rem;
    line-height:1.55556rem;
    line-height: 1rem;
    float: left;
    margin-left: 0.77778rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: rgb(222,117,3);
    text-transform: uppercase;
    letter-spacing: .2em;
}

@media    (min-width: 48em) {
    .hamburger__text{
        display:block;
    }
}
/*------------------------------------*\
    # components.heading
\*------------------------------------*/

.heading--primary__icon {
    margin-bottom: 1.55556rem;
}

.heading--primary__prehead {
    font-size:0.88889rem;
    line-height:1.55556rem;
    margin-bottom: 0.77778rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgb(94, 94, 94);
}

.heading--primary__prehead--withLine:before {
    content: '';
    display: block;
    width: 2.33333rem;
    height: 0.05556rem;
    background: rgb(171, 171, 171);
    margin-bottom: 1.55556rem;
}

.heading--primary__title {
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.heading--negative .heading--primary__prehead {
    color: rgba(255, 255, 255, 0.7);
}

.heading--negative .heading--primary__prehead--withLine:before {
    background: rgba(255, 255, 255, 0.5);
}

.heading--negative .heading--primary__title {
    color: white;
}

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

.heading--centered .heading--primary__prehead--withLine:before {
    margin-left: auto;
    margin-right: auto;
}
/*------------------------------------*\
    # components.header
\*------------------------------------*/

.header {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    background: rgba(0, 0, 0, 0.4); /* IE 9 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.header:after{
    content:"";
    display:table;
    clear:both;
}

@media   (min-width: 75em) {
    .header{
        padding:3.11111rem 3.11111rem 0.77778rem 3.11111rem;
    }
}

.header__branding {
    position: absolute;
    top: 6.22222rem;
    left: 0.77778rem;
}

@media    (min-width: 48em) {
    .header__branding{
        top:9.33333rem;
    }
}

@media   (min-width: 75em) {
    .header__branding{
        position:static;
        float:left;
        width:20%;
    }
}

@media  (min-width: 90em) {
    .header__branding{
        width:30%;
    }
}

@media   (min-width: 75em) {
    .header__content{
        width:80%;
        float:left;
    }
}

@media  (min-width: 90em) {
    .header__content{
        width:70%;
    }
}

.header__content--top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.header__content--top:after{
    content:"";
    display:table;
    clear:both;
}

@media     (max-width: 74.9375em) {
    .header__content--top{
        padding:1.55556rem;
    }
}

@media   (min-width: 75em) {
}

.header__content--bottom:after{
    content:"";
    display:table;
    clear:both;
}

@media     (max-width: 74.9375em) {
    .header__content--bottom{
        padding:1.55556rem;
    }
}

@media   (min-width: 75em) {
    .header__content--bottom{
        padding-top:1.16667rem;
    }
}

@media   (min-width: 75em) {
    .header__nav{
        float:left;
        width:68%;
        padding-top:0.77778rem;
    }
}

@media   (min-width: 75em) {
    .header__action{
        float:left;
        width:32%;
    }
}

.header__action__search {
    position: relative;
    float: right;
}

.header__action__donate {
    display: none;
    float: right;
    margin-right: 0.77778rem;
}

@media all and (min-width: 420px) {
    .header__action__donate{
        display:block;
    }
}

.header__info {
    display: none;
}

@media    (min-width: 48em) {
    .header__info{
        display:block;
        float:left;
        width:50%;
    }
}

.header__smm {
    display: none;
}

@media    (min-width: 48em) {
    .header__smm{
        display:block;
        width:12.11111rem;
        float:right;
    }
}

.header__toggle {
    display: inline-block;
    float: left;
}

@media   (min-width: 75em) {
    .header__toggle{
        display:none;
    }
}

.header__opaquetext {
    font-size:0.88889rem;
    line-height:1.55556rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.header__opaquetext a {
    color: rgba(255, 255, 255, 0.8);
}
/*------------------------------------*\
    # components.nav
\*------------------------------------*/

@media     (max-width: 74.9375em) {
    .nav{
        position:fixed;
        z-index:1;
        top:0;
        left:0;
        width:13.33333rem;
        height:100%;
        overflow-y:auto;
        transform:translateX(-240px);
        transition:transform .2s ease-in-out;
        background:linear-gradient(to bottom, rgba(222, 117, 3, 0.8) 0%, rgba(65, 96, 56, 0.8) 100%);

        /* Add iOS9 blur effect */
        -webkit-backdrop-filter:blur(10px) saturate(100%);
                backdrop-filter:blur(10px) saturate(100%);
    }
    .nav.js-nav-open {
        transform: translateX(0);
    }
}

.nav__level0:after{
    content:"";
    display:table;
    clear:both;
}

.nav__level0__item {
    position: relative;
}

@media   (min-width: 75em) {
    .nav__level0__item{
        float:left;
    }
    .nav__level0__item:hover .nav__level1, .nav__level0__item:focus .nav__level1 {
        visibility: visible;
        transform: translate(0, 0);
        opacity: 1;
    }
}

.nav__level0__link {
    display: block;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .1em;
    color: white;
}

@media     (max-width: 74.9375em) {
    .nav__level0__link{
        padding:0.77778rem;
        border-bottom:1px solid rgba(255, 255, 255, 0.3);
        transition:all .2s;
    }
    .nav__level0__link:hover,
                .nav__level0__link:focus {
        color: white;
        background: rgba(0, 0, 0, 0.2);
    }
}

@media   (min-width: 75em) {
    .nav__level0__link{
        font-size:1rem;
        line-height:1.55556rem;
        padding:0 1.55556rem 1.55556rem 0;
        opacity:0.9;
        transition:opacity 0.3s ease-in-out;
    }
    .nav__level0__link:hover,
                .nav__level0__link:focus {
        color: white;
        opacity: 1;
    }
}

.nav__level0__link--withDropdown:after {
    content: '';
    display: none;
    position: absolute;
    top: 0.22222rem;
    right: 0.77778rem;
    width: 0.38889rem;
    height: 0.38889rem;
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    transform: rotate(45deg);
    margin-left: 0.38889rem;
    margin-top: 0.19444rem;
}

@media   (min-width: 75em) {
    .nav__level0__link--withDropdown:after{
        display:block;
    }
}

@media   (min-width: 75em) {
    .nav__level1{
        visibility:hidden;
        position:absolute;
        top:1.55556rem;
        padding:0.77778rem 1.55556rem 1.55556rem 1.55556rem;
        margin-left:-1.55556rem;
        min-width:11.11111rem;
        opacity:0.6;
        transform:translate(0, 2em);
        transition:transform .3s ease-in-out,
                        opacity .3s ease-in;
    }
}

.nav__level1__item {
}

.nav__level1__link {
    display: block;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}

@media     (max-width: 74.9375em) {
    .nav__level1__link{
        padding:0.77778rem 1.55556rem 0.77778rem 1.55556rem;
        list-style:.2em;
        color:white;
        transition:all .2s;
    }
    .nav__level1__link:hover,
                .nav__level1__link:focus {
        color: white;
        background: rgba(0, 0, 0, 0.2);
    }
}

@media   (min-width: 75em) {
    .nav__level1__link{
        min-width:13.33333rem;
        padding:0.58333rem 0.77778rem 0.58333rem 0.77778rem;
        color:#444444;
        background:white;
    }
    .nav__level1__link:hover,
                .nav__level1__link:focus {
        color: white;
        background: rgb(222,117,3);
    }
}
/*------------------------------------*\
    # components.infobtn
\*------------------------------------*/

.infobtn {
    display: inline-block;
    background: transparent;
    border: 0;
    padding: 0;
    opacity: 0.5;
    transition: all .2s ease-in;
}

.infobtn:hover,
    .infobtn:focus {
    opacity: 1;
}
/*------------------------------------*\
    # components.sidenav
\*------------------------------------*/

.sidenav {
	padding: 0.83333rem;
	font-size:1.22222rem;
	background: rgba(0, 0, 0, 0.1);
}

.sidenav__heading {
}

.sidenav__title {
    font-size:1rem;
    line-height:1.55556rem;
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 1.5rem;
}

.sidenav__list {
}

.sidenav__item {
}

.sidenav__link {
    display: block;
    padding: 0.77778rem 0;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    color: #444444;
    border-bottom: 1px solid rgb(212, 213, 213);
}

.sidenav__content{
    font-size: 1.22222rem;
}

.sidenav--orange {
    background: rgba(222,117,3, 0.4);
}

.sidenav--green {
    background: rgba(65,96,56, 0.4);
}

.sidenav--black {
    background: rgba(73, 73, 73, 0.4);
}

.sidenav--red {
    background: rgba(231, 91, 91, 0.4);
}
/*------------------------------------*\
    # components.smm
\*------------------------------------*/

.smm__item {
}

.smm--primary .smm__link {
    color: rgba(255, 255, 255, 0.9);
}

.smm--primary .smm__link:hover,
            .smm--primary .smm__link:focus {
    color: rgb(255, 255, 255);
}

.smm--secondary .smm__link {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.3);
}

.smm--secondary .smm__link:hover,
            .smm--secondary .smm__link:focus {
    color: rgba(0, 0, 0, 0.8);
}

.smm__link {
    display: block;
    float: left;
    margin-right: 0.38889rem;
    opacity: 0.8;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;

    /*border: 1px solid color(white a(0.3));*/
    border-radius: 50%;
    text-align: center;
    transition: all .2s;
    font-size: 1.11111rem;
}

.smm__link:hover,
        .smm__link:focus {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
}
/*------------------------------------*\
    # components.arrow
\*------------------------------------*/

.arrow--down {
    display: block;
    overflow: hidden;
    width: 1.55556rem;
    height: 1.55556rem;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transform: rotate(45deg);
}

.arrow:hover,
    .arrow:focus {
    border-color: rgba(255, 255, 255, 0.8);
}
/*------------------------------------*\
    # components.featured
\*------------------------------------*/

.featured {
    position: relative;
}

.featured__object {
    min-height: 33.33333rem;
}

@media    (min-width: 62em) {
    .featured__object{
        min-height:38.88889rem;
    }
}

.featured__visual {
    min-height: 33.33333rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.featured__content {
    width: 100%;
    padding: 1.55556rem;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);

    /* Add iOS9 blur effect */
    -webkit-backdrop-filter: blur(10px) saturate(100%);
            backdrop-filter: blur(10px) saturate(100%);
}

@media    (min-width: 62em) {
    .featured__content{
        width:25%;
        float:left;
        margin-left:58.33333%;
        bottom:5.44444rem;
        padding:2.33333rem;
    }
}

@media    (min-width: 62em) {
    .featured__content--orange{
        background:rgba(222, 117, 3, 0.6);
    }
}

@media    (min-width: 62em) {
    .featured__content--green{
        background:rgba(65, 96, 56, 0.6);
    }
}

@media    (min-width: 62em) {
    .featured__content--black{
        background:rgba(0, 0, 0, 0.6);
    }
}

@media    (min-width: 62em) {
    .featured__content--red{
        background:rgba(213, 91, 91, 0.6);
    }
}

.featured__prehead {
    font-size:0.88889rem;
    line-height:1.55556rem;
    margin-bottom: 0.77778rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: white;
}

.featured__prehead:before {
    content: '';
    display: block;
    width: 2.33333rem;
    height: 0.05556rem;
    background: white;
    margin-bottom: 1.55556rem;
}

.featured__title {
    font-size:1.22222rem;
    line-height:1.94444rem;
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: white;
}

@media   (min-width: 75em) {
    .featured__title{
        font-size:1.77778rem;
        line-height:2.33333rem;
    }
}

.featured__visual {
    z-index: -1;
}

.featured__visual img {
    width: 100%;
}

.featured__author {
    position: absolute;
    z-index: 2;
    top: 1.33333rem;
    right: 1.33333rem;
}
/*------------------------------------*\
    # components.subscribe
\*------------------------------------*/

.subscribe__form {
    padding: 2.33333rem;
    border: 1px solid rgba(222, 117, 3, 0.2);
    background: rgba(222, 117, 3, 0.2);
}

.subscribe__form__header p {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    margin-bottom: 2.33333rem;
}

.subscribe__form__fields {
    width: 100%;
}

@media    (min-width: 62em) {
    .subscribe__form{
        min-height:23.33333rem;
    }
}
/*------------------------------------*\
    # components.about
\*------------------------------------*/

.about {
    overflow: hidden;

}

@media    (min-width: 62em) {
    .about{
        display:-ms-flexbox;
        display:flex;
    }
}

.about__item {
    position: relative;
    z-index: 1;
    background: rgb(65,96,56);
    background-size: cover;
    padding: 2.33333rem 2.33333rem 1.16667rem 2.33333rem;
}

@media    (min-width: 62em) {
    .about__item{
        float:left;

        /* IE 9 */
        min-height:25.55556rem;

        /* IE 9 */
        -ms-flex:1 0 0;
            flex:1 0 0;
        width:50%;
        padding:2.33333rem 3.11111rem 2.33333rem 3.11111rem;
    }
}

.about__item:after {
    background: rgba(0, 0, 0, 0.4);

    /* IE 9 */
    background: linear-gradient(to bottom, rgba(222, 117, 3, 0.5) 0%, rgba(65, 96, 56, 0.7) 100%);
}

.about__item:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.about__content {
    color: white;
    padding-top: 6.22222rem;
}

.about__content:after {
    content: '';
    display: block;
    position: absolute;
    top: 4.66667rem;
    z-index: -1;
    width: 4.66667rem;
    height: 0.11111rem;
    background: rgba(255, 255, 255, 0.4);
}

.about__body {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}

@media    (min-width: 62em) {
    .about__body{
        font-size:1.22222rem;
        line-height:1.94444rem;
    }
}

.about__title {
    font-size:1.22222rem;
    line-height:1.94444rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

@media    (min-width: 62em) {
    .about__title{
        font-size:1.44444rem;
        line-height:1.94444rem;
    }
}

.about__cta {
    margin-bottom: 1.55556rem;
}
/*------------------------------------*\
    # components.styledsection
\*------------------------------------*/

/**
     * Variants
     */

.styledsection--primary {
    background: rgb(222,117,3);
}

.styledsection--secondary {
    background: rgb(65,96,56);
}

.styledsection--white {
    background: white;
}

.styledsection--light {
    background: rgb(243, 243, 243);
}

.styledsection--dark {
    background: rgb(51, 51, 51);
}

.styledsection--bordered {
    border-top: 1px solid rgb(243, 243, 243);
    border-bottom: 1px solid rgb(243, 243, 243);
}

.styledsection--lrg {
    padding: 2.33333rem 1.55556rem;
}

@media    (min-width: 48em) {
    .styledsection--lrg{
        padding:4.66667rem 3.11111rem;
    }
}

.styledsection--med {
    padding: 1.16667rem 0.77778rem;
}

@media    (min-width: 48em) {
    .styledsection--med{
        padding:3.11111rem 3.11111rem;
    }
}
/*------------------------------------*\
    # components.microevent 
\*------------------------------------*/

.microevent  {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    margin-bottom: 1.55556rem;
}

/*@media (--screen-from-xlrg) {
        @mixin grid-span 4;
        &:nth-child(3n + 1) {
            clear: both;
        }
    }*/

.microevent__wrapper {
    display: block;
    position: relative;
    background: white;
    border-left: 4px solid rgb(232, 232, 232);
    padding: 0 4.66667rem 0 1.16667rem;
}

.microevent__wrapper:after{
    content:"";
    display:table;
    clear:both;
}

@media    (min-width: 34em) {
    .microevent__wrapper{
        padding:1.16667rem 4.66667rem 1.16667rem 1.16667rem;
        border:1px solid rgb(232, 232, 232);
    }
}

.microevent__wrapper--featured {
    border-color: rgb(222,117,3);
}

/*@media (--screen-from-lrg) and (--screen-to-xlrg) {
        @mixin grid-span 6;
        &:nth-child(2n + 1) {
            clear: both;
        }
    }
*/

.microevent__visual {
    margin-bottom: 0.77778rem;
}

@media    (min-width: 62em) {
    .microevent__visual{
        float:left;
        width:15%;
        margin-bottom:0;
    }
}

@media    (min-width: 48em) {
    .microevent__content{
        padding-left:0.77778rem;
        float:left;
        width:70%;
    }
}

.microevent__date {
    font-size:0.88889rem;
    line-height:1.16667rem;
    margin-bottom: 0.77778rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.microevent__title {
    font-size:1.22222rem;
    line-height:1.94444rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-top: 0.77778rem;
}

.microevent__addtocal {
    position: absolute;
    top: 0;
    right: 0;
}

@media    (min-width: 34em) {
    .microevent__addtocal{
        top:1.55556rem;
        right:1.55556rem;
    }
}
/*------------------------------------*\
    # components.recentsightings
\*------------------------------------*/

.recentsightings {
    background: rgb(65,96,56);
}

.recentsightings__item {
    position: relative;
}

.recentsightings__heading {
    position: relative;
    z-index: 99;
}

@media      (max-width: 61.9375em) {
    .recentsightings__heading{
        padding:1.55556rem 1.16667rem 1.16667rem 1.16667rem;
        width:100%;
    }
}

@media    (min-width: 62em) {
    .recentsightings__heading{
        padding:1.75rem 0.38889rem 0.77778rem 0.38889rem;
        width:20%;
        float:left;
    }
}

@media   (min-width: 75em) {
    .recentsightings__heading{
        padding:1.75rem 2.33333rem 0.77778rem 2.33333rem;
    }
}

@media    (min-width: 62em) and    (max-width: 99.9375em) {
    .recentsightings__heading__title{
        font-size:1.22222rem;
        line-height:1.55556rem;
        font-weight:700;
        color:red;
    }
}

.recentsightings__content {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 2.33333rem;
}

.recentsightings__content:after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);

    /* IE 9 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

.recentsightings__author {
    position: absolute;
    z-index: 2;
    bottom: 1.33333rem;
    right: 1.33333rem;
}

.recentsightings__name {
    font-size:1.44444rem;
    line-height:1.94444rem;
    color: rgba(255, 255, 255, 0.9);
}

.recentsightings__latin {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}

@media    (min-width: 62em) {
    .recentsightings--richcontent .owl-controls .owl-prev{
        left:calc(20% + 4.66667rem);
    }
}
/*------------------------------------*\
    # components.animal
\*------------------------------------*/

.animal {
    position: relative;
}

.animal__heading {
    padding: 3.11111rem 2.33333rem 0 2.33333rem;
}

.animal__content {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 0.77778rem;
}

.animal__content:after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);

    /* IE 9 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

@media    (min-width: 48em) {
    .animal__content{
        padding:1.55556rem;
    }
}

@media    (min-width: 62em) {
    .animal__content{
        padding:1.94444rem;
    }
}

.animal__author {
    position: absolute;
    z-index: 2;
    bottom: 1.33333rem;
    right: 1.33333rem;
}

@media    (min-width: 48em) {
    .animal__author{
        bottom:2rem;
        right:2rem;
    }
}

.animal__name {
    font-size:1.44444rem;
    line-height:1.94444rem;
    color: rgba(255, 255, 255, 0.9);
}

.animal__latin {
    margin-bottom: 0.38889rem;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}

.animal__visual {
}
/*------------------------------------*\
    # components.info
\*------------------------------------*/

.info {
}
/*------------------------------------*\
    # components.livecam
\*------------------------------------*/

.livecam {
    position: relative;
    display: block;
    width: 100%;
    min-height: 13.33333rem;

}

@media    (min-width: 34em) {
    .livecam{
        min-height:23.33333rem;
    }
}

.livecam:hover .livecam__heading, .livecam:focus .livecam__heading {
    background: rgba(0, 0, 0, 0.4);
}

.livecam__heading {
    padding: 2.33333rem 1.55556rem 1.55556rem 1.55556rem;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: all .2s;
}

@media    (min-width: 34em) {
    .livecam__heading{
        padding:6.22222rem 1.55556rem 1.55556rem 1.55556rem;
    }
}

.livecam__icon {
    margin-bottom: 0.77778rem;
}

.livecam__title {
    font-size:1rem;
    line-height:1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .15em;
    color: white;
}

.livecam__sponsors {
    margin-top: 0.77778rem;
    color: white;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}

.livecam__visual {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('../images/livecam.jpg') center center;
    background-size: cover;
}
/*------------------------------------*\
    # components.discoverding
\*------------------------------------*/

.discoverding {
    background: rgb(222,117,3);
    margin-left:-1.11111rem;
    margin-right:-1.11111rem;
}

.discoverding:after{
    content:"";
    display:table;
    clear:both;
}

.discoverding:after{
    content:"";
    display:table;
    clear:both;
}

.discoverding__visual {
    position: relative;
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    width:50%;
    float:left;
}

@media    (min-width: 48em) {
    .discoverding__visual{
        width:33.33333%;
        float:left;
    }
}

@media    (min-width: 62em) {
    .discoverding__visual{
        width:25%;
        float:left;
    }
    .discoverding__visual img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 21.11111rem;
    }
}

.discoverding__heading {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    width:50%;
    float:left;
}

@media    (min-width: 48em) {
    .discoverding__heading{
        width:66.66667%;
        float:left;
    }
}

@media    (min-width: 62em) {
    .discoverding__heading{
        width:75%;
        float:left;
        margin-left:25%;
    }
}
/*------------------------------------*\
    # components.supportus
\*------------------------------------*/

.supportus {
    background: url('../images/donate_bg.jpg');
    background-size: cover;
}

.supportus__summary {
    padding-top: 1.55556rem;
}

.supportus__form__step__number {
    font-size:1.22222rem;
    line-height:1.55556rem;
    display: inline-block;
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: white;
    width: 2.33333rem;
    height: 2.33333rem;
    line-height: 2.13889rem;
    vertical-align: middle;
    border: 1px solid white;
    text-align: center;
    border-radius: 50%;
}

.supportus__form__step__title {
    font-size:0.88889rem;
    line-height:1.55556rem;
    font-weight: 700;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: white;
}
/*------------------------------------*\
    # components.media
\*------------------------------------*/

.media {
    position: relative;
}

.media__title {
    margin-bottom: 0.77778rem;
    font-weight: 700;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}

.media__caption {
    font-size:0.88889rem;
    line-height:1.16667rem;
    color: rgb(170, 170, 170);
    margin: 0.38889rem 0 0.38889rem 0;
}

.media__visual--top {
    position: relative;
    margin-bottom: 0.77778rem;
}

.media__visual--left {
    float: left;
    margin: 0 1.55556rem 0.38889rem 0;
}

@media      (max-width: 61.9375em) {
    .media__visual--left{
        max-width:8.88889rem;
    }
}

@media      (max-width: 61.9375em) {
    .media__visual--left--video{
        float:none;
        margin:0;
        max-width:inherit;
    }
}

@media    (min-width: 62em) {
    .media__visual--left--video{
        min-width:13.33333rem;
    }
}

.media__visual--right {
    float: right;
    margin: 0 0 0.38889rem 1.55556rem;
}

@media      (max-width: 61.9375em) {
    .media__visual--right{
        max-width:8.88889rem;
    }
}

@media      (max-width: 61.9375em) {
    .media__visual--right--video{
        float:none;
        margin:0;
        max-width:inherit;
    }
}

@media    (min-width: 62em) {
    .media__visual--right--video{
        min-width:13.33333rem;
    }
}

.media__author {
    float: right;
}

.mediagallery {
    margin-left:-1.11111rem;
    margin-right:-1.11111rem;
}

.mediagallery:after{
    content:"";
    display:table;
    clear:both;
}

.mediagallery__item {
    position: relative;
    margin-bottom: 1.55556rem;
}

@media   (min-width: 75em) {
    .mediagallery__item:nth-child(2n + 1) {
}
}

.mediagallery__item--narrow {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
}

@media    (min-width: 48em) {
    .mediagallery__item--narrow{
        width:50%;
        float:left;
    }
}

@media   (min-width: 75em) {
    .mediagallery__item--narrow{
        width:50%;
        float:left;
    }
}

/* this is a magic float clearing CSS */

.mediagallery__item--narrow + .mediagallery__item--narrow + .mediagallery__item--narrow {
    clear: left;
}

.mediagallery__item--wide {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
}

@media    (min-width: 48em) {
    .mediagallery__item--wide{
        width:100%;
        float:left;
    }
}

@media   (min-width: 75em) {
    .mediagallery__item--wide{
        width:100%;
        float:left;
    }
}
/*------------------------------------*\
    # components.calendar
\*------------------------------------*/

.calendar__heading {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.55556rem;
    padding-bottom: 1.55556rem;
    border-bottom: 1px solid rgb(232, 232, 232);
}

.calendar__month {
    font-size:1rem;
    line-height:1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    float: left;
}

@media    (min-width: 48em) {
    .calendar__month{
        font-size:1.44444rem;
        line-height:1.94444rem;
    }
}

.calendar__actions {
    float: right;
}

.calendar__table {
    width: 100%;
    margin-bottom: 1.55556rem;
}

.calendar__dayname {
    padding: 0.38889rem 0.38889rem 1.55556rem 0;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    text-align: left;
}

.calendar__day {
    display: inline-block;
    border: 0;
    background-color: transparent;
    padding: 0.38889rem 0.77778rem;
    border-radius: 5px;
    text-align: center;
    width: 2.66667rem;
    margin-bottom: 0.77778rem;
    font-size:1.22222rem;
    line-height:1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}

.calendar__day:focus {
    outline: 0;
}

.calendar__day:focus,
        .calendar__day:hover {
    background: rgb(232, 232, 232);
}

.calendar__day--hasEvent {
    font-weight: 700;
    color: rgb(222,117,3);
}

.calendar__day--hasEvent:focus,
            .calendar__day--hasEvent:hover {
    color: white;
    background: rgb(196, 103, 3);
}

.calendar__day--today {
    font-weight: 700;
    background: rgb(222,117,3);
    color: white;
}

.calendar__day--today:focus,
            .calendar__day--today:hover {
    color: white;
    background: rgb(196, 103, 3);
}
/*------------------------------------*\
    # components.searchbox
\*------------------------------------*/

.searchbox {
    display: inline-block;
}
/*------------------------------------*\
    # components.widget
\*------------------------------------*/

.widget {
    margin-bottom: 1.55556rem;
}

.widget__heading {
    margin-bottom: 1.55556rem;
}

.widget__title {
    font-size:1rem;
    line-height:1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.widget__content {
}

.widget__linklist__link {
    display: block;
    color: #444444;
    margin-bottom: 0.38889rem;
    padding: 0.38889rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
/*------------------------------------*\
    # components.pager
\*------------------------------------*/

.pager__text {
    height: 2rem;
    line-height: 2rem;
    padding: 0 0.66667rem;
    margin-right: 0.27778rem;
    border-radius: 5px;
    background: rgb(212, 213, 213);
    color: rgb(142, 142, 142);
}
/*------------------------------------*\
    # components.footer
\*------------------------------------*/

.footer {
    background: white;
    padding: 2.33333rem 1.55556rem;
}

@media    (min-width: 48em) {
    .footer{
        padding:4.66667rem 3.11111rem;
    }
}

.footer__top {
    margin-left:-1.11111rem;
    margin-right:-1.11111rem;
}

.footer__top:after{
    content:"";
    display:table;
    clear:both;
}

.footer__top:after{
    content:"";
    display:table;
    clear:both;
}

.footer__section {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    width:100%;
    float:left;
    margin-bottom: 1.55556rem;
}

@media    (min-width: 62em) {
    .footer__section{
        width:25%;
        float:left;
    }
    .footer__section:first-child {
        margin-left:25%;
    }
}

.footer__top {
    margin-bottom: 1.55556rem;
}

.footer__title {
    font-size:0.88889rem;
    line-height:1.55556rem;
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.footer__text {
    margin-bottom: 1.55556rem;
}

.footer__bottom {
    padding-top: 1.55556rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer__smm {
    margin-bottom: 1.55556rem;
}

.footer__copyright {
    font-size:0.77778rem;
    line-height:1.16667rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgb(171, 171, 171);
}

@media    (min-width: 48em) {
    .footer__copyright{
        text-align:right;
    }
}


/**
 * Import: views
 * Description: specific website/app views (example: 404 view, login view)
 */
/*------------------------------------*\
    # views.general
\*------------------------------------*/

.general {
    overflow: hidden;


}

.general__header {
    position: relative;
    min-height: 20rem;
    background: rgb(61, 77, 56);
    background-size: cover;
}

@media    (min-width: 48em) {
    .general__header{
        min-height:23.33333rem;
    }
}

.general__heading {
    position: absolute;
    width: 100%;
    z-index: 1;
    bottom: 0;
    left: 0;
    padding: 0 1.55556rem 3.11111rem 1.55556rem;
}

@media    (min-width: 62em) {
    .general__heading{
        padding:0 3.11111rem 4.66667rem 3.11111rem;
    }
}

.general__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: white;
}

.general__wrapper {
    background: white;
}

.general__body {
    margin: 0 auto;
}

.general__body--fullwidth {
}

.general__body--wide {
    padding: 0 1.55556rem;
}

@media    (min-width: 48em) {
    .general__body--wide{
        padding:0 3.11111rem;
    }
}

@media      (max-width: 47.9375em) {
    .general__body--narrow{
        padding:0 1.55556rem;
    }
}

@media    (min-width: 48em) {
    .general__body--narrow{
        width:60%;
    }
}

@media      (max-width: 47.9375em) {
    .general__body--ultranarrow{
        padding:0 1.55556rem;
    }
}

@media    (min-width: 48em) {
    .general__body--ultranarrow{
        width:50%;
    }
}
/*------------------------------------*\
    # views.article
\*------------------------------------*/

.article {
    overflow: hidden;
	
    
}

.article__header {
    position: relative;
    overflow: hidden;
    min-height: 23.33333rem;
}

@media    (min-width: 62em) {
    .article__header{
        min-height:27.77778rem;
    }
}

@media   (min-width: 75em) {
    .article__header{
        font-size:1.44444rem;
        line-height:2.33333rem;
    }
}

.article__header:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);

    /* IE 9 */
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}

/* narrow is used when the article photo is not streched */

.article__header--narrow {
    min-height: 14.44444rem;
}

@media    (min-width: 48em) {
    .article__header--narrow{
        min-height:17.77778rem;
    }
}

@media   (min-width: 75em) {
    .article__header--narrow{
        min-height:14.44444rem;
    }
}

.article__header--orange {
    background: rgb(222,117,3);
}

.article__header--green {
    background: rgb(65,96,56);
}

.article__header--black {
    background: rgb(73, 73, 73);
}

.article__header--red {
    background: #D55B5B;
}

.article__author {
    position: absolute;
    z-index: 2;
    bottom: 1.33333rem;
    right: 1.33333rem;
}

@media    (min-width: 62em) {
    .article__author{
        bottom:2rem;
        right:3rem;
    }
}

.article__heading {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    padding: 0 1.55556rem 2.33333rem 1.55556rem;
}

@media    (min-width: 62em) {
    .article__heading{
        padding:0 3.11111rem 2.33333rem 3.11111rem;
    }
}

.article__byline {
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: white;
}

.article__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: white;
}

@media      (max-width: 47.9375em) {
    .article__title{
        font-size:1.22222rem;
        line-height:1.94444rem;
    }
}

@media    (min-width: 48em) {
    .article__title{
        font-size:1.77778rem;
        line-height:2.72222rem;
    }
}

.article__title--intext {
    color: #444444;
    margin-bottom: 1.55556rem;
}

.article__arrow {
    margin: 0.77778rem 0 0 0.77778rem;
}

.article__visual {
    min-height: 33.33333rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.article__visual img {
    min-width: 100%;
}

.article__smallvisual {
    margin-bottom: 1.55556rem;
}

.article__wrapper {
    background: white;
    padding: 1.55556rem;
}

@media    (min-width: 48em) {
    .article__wrapper{
        padding-top:4.66667rem;
        padding-left:3.11111rem;
        padding-right:3.11111rem;
        padding-bottom:0.77778rem;
    }
}

.article__wrapper--withsidebar {
    overflow: hidden;
}

@media    (min-width: 48em) {
    .article__sidebar{
        width:25%;
        float:right;
    }
}

.article__body {
    margin-bottom: 0.77778rem;
}

@media    (min-width: 48em) {
    .article__body p, .article__body ul, .article__body ol, .article__body dl{
        font-size:1.22222rem;
        line-height:1.94444rem;
    }
}

.article__body img{
    margin: 0.83333rem;
}

@media    (min-width: 48em) {
    .article__body{
        width:50%;
        float:left;
        max-width:50rem;
        padding-right:.5%;
    }
}

.article__body--center {
    float: none;
    margin: 0 auto;
}

.article__blog {
    margin-bottom: 3.11111rem;
}

@media    (min-width: 48em) {
    .article__blog p, .article__blog ul, .article__blog ol, .article__blog dl{
        font-size:1.22222rem;
        line-height:1.94444rem;
    }
}

.article__blog img{
    margin: 0.83333rem;
}

@media    (min-width: 48em) {
    .article__blog{
        width:65%;
        float:left;
        max-width:50rem;
        padding-right:7.5%;
    }
}

.article__blog--center {
    float: none;
    margin: 0 auto;
}

.article__blog--left {
    float: left;
    margin: 0 auto;
}
/*------------------------------------*\
    # views.event
\*------------------------------------*/

.event {
    overflow: hidden;
    
}

.event__header {
    position: relative;
    height: 13.33333rem;
    background: rgb(150, 150, 150);
    background-image: url('../images/info_bg.jpg');
}

@media    (min-width: 48em) {
    .event__header{
        height:20rem;
    }
}

.event__card {
    position: relative;
    margin: 0 auto;
    background: white;
    z-index: 1;
}

@media    (min-width: 48em) {
    .event__card{
        width:60%;
        margin:-3.88889rem auto 4.66667rem auto;
        box-shadow:0 0 6px rgba(0, 0, 0, 0.2);
    }
}

@media    (min-width: 62em) {
    .event__card{
        width:70%;
    }
}

@media   (min-width: 75em) {
    .event__card{
        width:70%;
    }
}

.event__cardheader {
    overflow: hidden;
    border-bottom: 1px solid rgb(232, 232, 232);
}

.event__visual img {
    height: 19.44444rem;
}

@media   (min-width: 75em) {
    .event__visual{
        float:left;
    }
}

.event__heading {
    padding: 1.55556rem;
}

@media    (min-width: 62em) {
    .event__heading{
        padding:3.11111rem;
    }
}

@media   (min-width: 75em) {
    .event__heading{
        float:left;
        width:50%;
    }
}

.event__byline {
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.event__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 0.77778rem;
}

.event__date {
    margin-bottom: 0.77778rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
}

@media    (min-width: 62em) {
    .event__date{
        margin-bottom:2.33333rem;
    }
}

.event__cardcontent {
    padding: 1.55556rem;
}

@media    (min-width: 62em) {
    .event__cardcontent{
        padding:3.11111rem;
    }
}

.event__rules {
    margin: 1.55556rem 0;
}

.event__ruleslist {
    overflow: hidden;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    border-bottom: 1px solid rgb(232, 232, 232);
    padding-bottom: 0.38889rem;
    margin-bottom: 0.38889rem;
}

.event__ruleslist__title {
    font-weight: 700;
    color: rgba(68, 68, 68, 0.7);
}

@media    (min-width: 48em) {
    .event__ruleslist__title{
        width:40%;
        float:left;
    }
}

@media    (min-width: 48em) {
    .event__ruleslist__content{
        width:55%;
        float:right;
    }
}

.event__description {
    margin-bottom: 2.33333rem;
}

@media    (min-width: 48em) {
    .event__description p, .event__description ul, .event__description ol, .event__description dl{
        font-size:1.22222rem;
        line-height:1.94444rem;
    }
}

.event__description img{
    margin: 0.83333rem;
}

.event__meta__title {
    font-size:1rem;
    line-height:1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: 0.77778rem;
    border-top: 1px solid rgb(232, 232, 232);
    padding-top: 1.55556rem;
}

.event__meta__text {
    margin-bottom: 1.55556rem;
}
/*------------------------------------*\
    # views.events
\*------------------------------------*/

.events {
    overflow: hidden;
}

.events__header {
    position: relative;
    min-height: 20rem;
    background: rgb(150, 150, 150);
    background-image: url('../images/info_bg.jpg');
}

@media    (min-width: 48em) {
    .events__header{
        min-height:23.33333rem;
    }
}

.events__heading {
    position: absolute;
    width: 100%;
    z-index: 1;
    bottom: 0;
    left: 0;
    padding: 0 1.55556rem 3.11111rem 1.55556rem;
}

@media    (min-width: 62em) {
    .events__heading{
        padding:0 3.11111rem 4.66667rem 3.11111rem;
    }
}

.events__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: white;
}

.events__visual {
    min-height: 23.33333rem;
    max-height: 23.33333rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.events__visual img {
    min-width: 100%;
}

.events__wrapper {
    margin-left:-1.11111rem;
    margin-right:-1.11111rem;
    overflow: hidden;
    padding: 1.55556rem;
    background: white;
}

.events__wrapper:after{
    content:"";
    display:table;
    clear:both;
}

@media    (min-width: 48em) {
    .events__wrapper{
        padding:6.22222rem 3.11111rem;
    }
}

.events__sidebar {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    width:100%;
    float:left;
    margin-bottom: 1.55556rem;
}

@media    (min-width: 62em) {
    .events__sidebar{
        width:50%;
        float:left;
    }
}

@media   (min-width: 75em) {
    .events__sidebar{
        width:33.33333%;
        float:left;
    }
}

.events__body {
    margin-bottom: 3.11111rem;
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    width:100%;
    float:left;
}

@media    (min-width: 62em) {
    .events__body{
        width:50%;
        float:left;
    }
}

@media   (min-width: 75em) {
    .events__body{
        width:50%;
        float:left;
        margin-left:8.33333%;
    }
}

.events__current {
    margin-bottom: 1.55556rem;
    padding-bottom: 1.55556rem;
    border-bottom: 1px solid rgb(232, 232, 232);
}

.events__currentday {
    font-size:1.44444rem;
    line-height:1.94444rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.events__currentdate {
}

.events__empty {
    margin: 0.77778rem 0;
    background: rgba(222, 117, 3, 0.1);
    border: 1px solid rgba(222, 117, 3, 0.2);
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    padding: 0.77778rem;
}
/*------------------------------------*\
    # views.event
\*------------------------------------*/

.animal {
    overflow: hidden;
    
}

.animal img {
    width: 100%;
}

.animal__header {
    position: relative;
    height: 13.33333rem;
    background: rgb(150, 150, 150);
    background-image: url('../images/info_bg.jpg');
}

@media    (min-width: 48em) {
    .animal__header{
        height:20rem;
    }
}

.animal__card {
    position: relative;
    margin: 0 auto;
    background: white;
    z-index: 1;
}

@media    (min-width: 48em) {
    .animal__card{
        width:60%;
        margin:-3.88889rem auto 4.66667rem auto;
        box-shadow:0 0 6px rgba(0, 0, 0, 0.2);
    }
}

@media    (min-width: 62em) {
    .animal__card{
        width:70%;
    }
}

@media   (min-width: 75em) {
    .animal__card{
        width:70%;
    }
}

.animal__cardheader {
    overflow: hidden;
    border-bottom: 1px solid rgb(232, 232, 232);
}

.animal__visual {
    padding: 0.83333rem;
}

.animal__visual img {
    min-width: 100%;
}

@media   (min-width: 75em) {
    .animal__visual{
        float:left;
        width:30%;
    }
}

.animal__heading {
    padding: 1.55556rem;
}

@media    (min-width: 62em) {
    .animal__heading{
        padding:3.11111rem;
    }
}

@media   (min-width: 75em) {
    .animal__heading{
        float:left;
        width:50%;
    }
}

.animal__byline {
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.animal__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 0.77778rem;
}

.animal__date {
    margin-bottom: 0.77778rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
}

@media    (min-width: 62em) {
    .animal__date{
        margin-bottom:2.33333rem;
    }
}

.animal__cardcontent {
    padding: 1.55556rem;
}

@media    (min-width: 62em) {
    .animal__cardcontent{
        padding:3.11111rem;
    }
}

.animal__gallery {
    text-align: center;
}

.animal__gallery img {
    margin: 0.83333rem;
}

.animal__rules {
    margin: 1.55556rem 0;
}

.animal__ruleslist {
    overflow: hidden;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    border-bottom: 1px solid rgb(232, 232, 232);
    padding-bottom: 0.38889rem;
    margin-bottom: 0.38889rem;
}

.animal__ruleslist__title {
    font-weight: 700;
    color: rgba(68, 68, 68, 0.7);
}

@media    (min-width: 48em) {
    .animal__ruleslist__title{
        width:40%;
        float:left;
    }
}

@media    (min-width: 48em) {
    .animal__ruleslist__content{
        width:55%;
        float:right;
    }
}

.animal__description {
    margin-bottom: 2.33333rem;
}

.animal__description ul{
    list-style: inherit;
}

@media    (min-width: 48em) {
    .animal__description p, .animal__description ul, .animal__description ol, .animal__description dl{
        font-size:1.22222rem;
        line-height:1.94444rem;
    }
}

.animal__meta__title {
    font-size:1rem;
    line-height:1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: 0.77778rem;
    border-top: 1px solid rgb(232, 232, 232);
    padding-top: 1.55556rem;
}

.animal__meta__text {
    margin-bottom: 1.55556rem;
}
/*------------------------------------*\
    # views.section
\*------------------------------------*/

.section {
    overflow: hidden;
    
}

.section__header {
    background: rgb(222,117,3);
    position: relative;
    overflow: hidden;
    min-height: 20rem;
}

@media    (min-width: 62em) {
    .section__header{
        min-height:20rem;
    }
}

.section__header:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);

    /* IE 9 */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.section__heading {
    position: absolute;
    width: 100%;
    z-index: 1;
    bottom: 0;
    left: 0;
    padding: 0 1.55556rem 3.11111rem 1.55556rem;
}

@media    (min-width: 62em) {
    .section__heading{
        padding:0 3.11111rem 4.66667rem 3.11111rem;
    }
}

.section__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: white;
}

.section__visual {
    min-height: 33.33333rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.section__visual img {
    min-width: 100%;
}

.section__wrapper {
    margin-left:-1.11111rem;
    margin-right:-1.11111rem;
    overflow: hidden;
    padding: 1.55556rem;
    background: white;
}

.section__wrapper:after{
    content:"";
    display:table;
    clear:both;
}

@media    (min-width: 48em) {
    .section__wrapper{
        padding:4.66667rem 3.11111rem;
    }
}

.section__sidebar {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    width:100%;
    float:left;
    margin-bottom: 1.55556rem;
}

@media    (min-width: 48em) {
    .section__sidebar{
        width:33.33333%;
        float:left;
    }
}

@media   (min-width: 75em) {
    .section__sidebar{
        width:25%;
        float:left;
    }
}

@media  (min-width: 90em) {
    .section__sidebar{
        width:16.66667%;
        float:left;
    }
}

.section__sidebar--alt {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    width:100%;
    float:left;
    margin-bottom: 1.55556rem;
}

@media  (min-width: 90em) {
    .section__sidebar--alt{
        width:16.66667%;
        float:left;
        margin-left:8.33333%;
    }
}

.section__body {
    margin-bottom: 3.11111rem;
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    width:100%;
    float:left;
}

@media    (min-width: 48em) {
    .section__body p, .section__body ul, .section__body ol, .section__body dl{
        font-size:1.22222rem;
        line-height:1.94444rem;
    }
}

@media    (min-width: 48em) {
    .section__body{
        width:66.66667%;
        float:left;
    }
}

@media   (min-width: 75em) {
    .section__body{
        width:50%;
        float:left;
        margin-left:8.33333%;
    }
}
/*------------------------------------*\
    # views.contests
\*------------------------------------*/

.contests {
    overflow: hidden;

}

@media   (min-width: 75em) {
    .contests{
        width:70%;
    }
}

.contests__group {
    overflow: hidden;
    padding: 1.55556rem 0;
}

.contests__grouptitle {
    margin-bottom: 1.55556rem;
    padding-bottom: 1.55556rem;
    font-size:1.22222rem;
    line-height:1.94444rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    border-bottom: 1px solid rgb(222, 222, 222);
}

.contests__list {
}

.contests__contest {
    margin-left:-1.11111rem;
    margin-right:-1.11111rem;
    overflow: hidden;
    padding-bottom: 1.55556rem;
    margin-bottom: 1.55556rem;
}

.contests__contest:after{
    content:"";
    display:table;
    clear:both;
}

.contests__contest:last-child {
    border-bottom: 0;
}

.contests__contest__photo {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
    margin-bottom: 1.55556rem;
}

@media    (min-width: 48em) {
    .contests__contest__photo{
        margin-bottom:0;
        width:33.33333%;
        float:left;
    }
}

@media    (min-width: 62em) {
    .contests__contest__photo{
        width:16.66667%;
        float:left;
    }
}

.contests__contest__photo img {
    border: 7px solid rgb(232, 232, 232);
}

.contests__contest__body {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
}

@media    (min-width: 48em) {
    .contests__contest__body{
        width:66.66667%;
        float:left;
    }
}

@media    (min-width: 62em) {
    .contests__contest__body{
        width:83.33333%;
        float:left;
    }
}

.contests__contest__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 1.55556rem;
}

.contests__contest__title a {
    font-size:1.77778rem;
    line-height:2.33333rem;
    display: block;
}

.contests__contest__content {
    margin-left:-1.11111rem;
    margin-right:-1.11111rem;
    margin-bottom: 1.55556rem;
}

.contests__contest__content:after{
    content:"";
    display:table;
    clear:both;
}

.contests__contest__desc {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
}

@media    (min-width: 48em) {
    .contests__contest__desc{
        width:58.33333%;
        float:left;
    }
}

.contests__contest__info {
    padding-left:1.11111rem;
    padding-right:1.11111rem;
}

@media    (min-width: 48em) {
    .contests__contest__info{
        width:41.66667%;
        float:left;
    }
}

.contests__contest__info__item {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    margin-bottom: 0.77778rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 700;
    font-size:0.88889rem;
    line-height:1.55556rem;
}
/*------------------------------------*\
    # views.contestresults
\*------------------------------------*/

.contestresults {
    overflow: hidden;
    padding-top: 2.33333rem;

}

.contestresults__title {
}

.contestresults__item__footer {
    position: relative;
    padding: 1.55556rem;
    border: 1px solid rgb(243, 243, 243);
}

.contestresults__item__place {
    display: block;
    width: 1.94444rem;
    height: 1.94444rem;
    line-height: 1.94444rem;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto 0.77778rem auto;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    background: rgb(222,117,3);
    color: white;
}

.contestresults__item__title {
    text-align: center;
}

.contestresults__item__photo {
    width: 100%;
}

.contestresults__item__phototitle {
    font-size:1.44444rem;
    line-height:2.33333rem;
    font-style: italic;
    display: block;
}

.contestresults__item__author {
    font-size:0.77778rem;
    line-height:1.16667rem;
    font-weight: 700;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgb(170, 170, 170);
}
/*------------------------------------*\
    # views.simplepage
\*------------------------------------*/

.simplepage {
    overflow: hidden;
        
}

.simplepage__header {
    background: rgb(222,117,3);
    position: relative;
    padding-top: 17.77778rem;
}

.simplepage__heading {
    padding: 0 1.55556rem 3.11111rem 1.55556rem;
    text-align: center;
}

@media    (min-width: 62em) {
    .simplepage__heading{
        padding:0 3.11111rem 4.66667rem 3.11111rem;
    }
}

.simplepage__byline {
    margin-bottom: 1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: white;
}

.simplepage__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: white;
    margin-bottom: 1.55556rem;
}

.simplepage__text {
    color: white;
}

.simplepage__cta {
    margin-top: 1.55556rem;
}
/*------------------------------------*\
    # views.donation
\*------------------------------------*/

.donation {
    overflow: hidden;
}

.donation__wrapper {
    position: relative;
    background: rgb(150, 150, 150);
    background-image: url('../images/donate_bg.jpg');
    padding: 13.33333rem 0 0 0;
}

@media    (min-width: 48em) {
    .donation__wrapper{
        padding:17.77778rem 0 5rem 0;
    }
}

.donation__card {
    position: relative;
    margin: 0 auto;
    background: white;
    z-index: 1;
}

@media    (min-width: 48em) {
    .donation__card{
        margin:0 auto;
        width:80%;
        box-shadow:0 0 6px rgba(0, 0, 0, 0.2);
    }
}

@media    (min-width: 62em) {
    .donation__card{
        width:70%;
    }
}

@media   (min-width: 75em) {
    .donation__card{
        width:50%;
    }
}

.donation__heading {
    padding: 3.11111rem;
}

.donation__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.77778rem;
}

.donation__content {
    padding: 0 2.33333rem 2.33333rem 2.33333rem;
}

.donation__meta__title {
    font-size:1rem;
    line-height:1.55556rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: 0.77778rem;
    border-top: 1px solid rgb(232, 232, 232);
    padding-top: 1.55556rem;
}

.donation__meta__text {
    margin-bottom: 1.55556rem;
}
/*------------------------------------*\
    # views.sightings
\*------------------------------------*/

.sightings {
    overflow: hidden;

}

.sightings__header {
    position: relative;
    min-height: 20rem;
    background: rgb(150, 150, 150);
    background-image: url('../images/sightings_bg.jpg');
    background-size: 100%;
    background-size: cover;
    background-position: center 0;
}

@media    (min-width: 48em) {
    .sightings__header{
        min-height:23.33333rem;
    }
}

.sightings__heading {
    position: absolute;
    width: 100%;
    z-index: 1;
    bottom: 0;
    left: 0;
    padding: 0 1.55556rem 3.11111rem 1.55556rem;
}

@media    (min-width: 62em) {
    .sightings__heading{
        padding:0 3.11111rem 4.66667rem 3.11111rem;
    }
}

.sightings__archived__animals {
    margin: 1.66667rem !important;
    font-style: italic;
}

.sightings__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: white;
}

.sightings__subtitle {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: white;
}

.sightings__visual {
    background-size: cover;
    background-position: center center;
    min-height: 33.33333rem;
}

.sightings__wrapper {
    overflow: hidden;
    background: rgb(51, 51, 51);
}

@media    (min-width: 62em) {
    .sightings__sidebar{
        width:20%;
        float:left;
    }
}

@media    (min-width: 62em) {
    .sightings__body{
        width:80%;
        float:left;
    }
}

.sightings__nav__item {
}

.sightings__nav__icon {
}

.sightings__nav__link {
    font-size:0.88889rem;
    line-height:1.55556rem;
    display: block;
    vertical-align: top;
    padding: 0.38889rem 0.38889rem 0.38889rem 0.77778rem;
    color: white;
    border-bottom: 1px solid rgb(64, 64, 64);
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .15em;
    transition: all .2s ease-in-out;
}

.sightings__nav__link:hover, .sightings__nav__link:focus {
    color: white;
    background: rgb(64, 64, 64);
}

@media    (min-width: 62em) {
    .sightings__nav__link{
        padding:0.77778rem 0.77778rem 0.77778rem 1.55556rem;
    }
}

.sightings__nav__link--active {
    background: rgb(65,96,56);
}

.sightings__nav__link--active:hover, .sightings__nav__link--active:focus {
    background: rgb(65,96,56);
}

.sightings__footer {
    padding: 0.77778rem 1.55556rem;
    background: rgb(38, 38, 38);
}

.sightings__animals {
    overflow: hidden;
}

@media    (min-width: 22.5em) and      (max-width: 33.9375em) {
    .sightings__animal{
        max-width:16.66667rem;
        margin:0 auto;
        margin-bottom:1.55556rem;
    }
}

@media    (min-width: 34em) {
    .sightings__animal{
        width:50%;
        float:left;
    }
}

@media    (min-width: 48em) {
    .sightings__animal{
        width:33.3333%;
        float:left;
    }
}

@media   (min-width: 75em) {
    .sightings__animal{
        width:25%;
        float:left;
    }
}

.sightings__emptymessage {
    padding: 6.22222rem 3.11111rem;
    background: rgb(64, 64, 64);
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}
/*------------------------------------*\
    # views.searchresults
\*------------------------------------*/

.searchresults {
    overflow: hidden;


}

.searchresults__header {
    position: relative;
    min-height: 20rem;
    background: rgb(150, 150, 150);
    background-image: url('../images/sightings_bg.jpg');
    background-size: 100%;
    background-size: cover;
    background-position: center 0;
}

@media    (min-width: 48em) {
    .searchresults__header{
        min-height:23.33333rem;
    }
}

.searchresults__heading {
    position: absolute;
    width: 100%;
    z-index: 1;
    bottom: 0;
    left: 0;
    padding: 0 1.55556rem 3.11111rem 1.55556rem;
}

@media    (min-width: 62em) {
    .searchresults__heading{
        padding:0 3.11111rem 4.66667rem 3.11111rem;
    }
}

.searchresults__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: white;
}

.searchresults__visual {
    background-size: cover;
    background-position: center center;
    min-height: 33.33333rem;
}

.searchresults__body {
    margin: 0 auto;
}

@media    (min-width: 62em) {
    .searchresults__body{
        width:50%;
    }
}

.searchresults__results {
    margin-bottom: 1.55556rem;
}

.searchresults__results__title {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin-bottom: 1.55556rem;
}

.searchresults__results__result {
    padding-bottom: 1.55556rem;
    margin-bottom: 1.55556rem;
    border-bottom: 1px solid rgb(243, 243, 243);
}

.searchresults__results__resulttitle {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
    margin-bottom: 0.77778rem;
}

.searchresults__results__urls {
    margin-top: 0.77778rem;
}

/**
 * Import: utils
 * Description: reusable utilities such as floats, spacers etc.
 */
/*------------------------------------*\
    # utils.group
\*------------------------------------*/

.group {
    overflow: hidden;
}
/*------------------------------------*\
    # utils.align
\*------------------------------------*/

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

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

.align--right {
    text-align: right;
}
/*------------------------------------*\
    # utils.grid
\*------------------------------------*/


/**
 * Small grid
 */
.col-sml-1 {
    width:8.33333%;
    float:left;
}
.col-sml-2 {
    width:16.66667%;
    float:left;
}
.col-sml-3 {
    width:25%;
    float:left;
}
.col-sml-4 {
    width:33.33333%;
    float:left;
}
.col-sml-5 {
    width:41.66667%;
    float:left;
}
.col-sml-6 {
    width:50%;
    float:left;
}
.col-sml-7 {
    width:58.33333%;
    float:left;
}
.col-sml-8 {
    width:66.66667%;
    float:left;
}
.col-sml-9 {
    width:75%;
    float:left;
}
.col-sml-10 {
    width:83.33333%;
    float:left;
}
.col-sml-11 {
    width:91.66667%;
    float:left;
}
.col-sml-12 {
    width:100%;
    float:left;
}

/**
 * Medium grid
 */
@media    (min-width: 34em) {
    .col-med-1 {
        width:8.33333%;
        float:left;
    }
    .col-med-2 {
        width:16.66667%;
        float:left;
    }
    .col-med-3 {
        width:25%;
        float:left;
    }
    .col-med-4 {
        width:33.33333%;
        float:left;
    }
    .col-med-5 {
        width:41.66667%;
        float:left;
    }
    .col-med-6 {
        width:50%;
        float:left;
    }
    .col-med-7 {
        width:58.33333%;
        float:left;
    }
    .col-med-8 {
        width:66.66667%;
        float:left;
    }
    .col-med-9 {
        width:75%;
        float:left;
    }
    .col-med-10 {
        width:83.33333%;
        float:left;
    }
    .col-med-11 {
        width:91.66667%;
        float:left;
    }
    .col-med-12 {
        width:100%;
        float:left;
    }
}

/**
 * Large grid
 */
 @media    (min-width: 48em) {
    .col-lrg-1 {
        width:8.33333%;
        float:left;
    }
    .col-lrg-2 {
        width:16.66667%;
        float:left;
    }
    .col-lrg-3 {
        width:25%;
        float:left;
    }
    .col-lrg-4 {
        width:33.33333%;
        float:left;
    }
    .col-lrg-5 {
        width:41.66667%;
        float:left;
    }
    .col-lrg-6 {
        width:50%;
        float:left;
    }
    .col-lrg-7 {
        width:58.33333%;
        float:left;
    }
    .col-lrg-8 {
        width:66.66667%;
        float:left;
    }
    .col-lrg-9 {
        width:75%;
        float:left;
    }
    .col-lrg-10 {
        width:83.33333%;
        float:left;
    }
    .col-lrg-11 {
        width:91.66667%;
        float:left;
    }
    .col-lrg-12 {
        width:100%;
        float:left;
    }
}

/**
 * XLarge grid
 */
@media    (min-width: 62em) {
    .col-xlrg-1 {
        width:8.33333%;
        float:left;
    }
    .col-xlrg-2 {
        width:16.66667%;
        float:left;
    }
    .col-xlrg-3 {
        width:25%;
        float:left;
    }
    .col-xlrg-4 {
        width:33.33333%;
        float:left;
    }
    .col-xlrg-5 {
        width:41.66667%;
        float:left;
    }
    .col-xlrg-6 {
        width:50%;
        float:left;
    }
    .col-xlrg-7 {
        width:58.33333%;
        float:left;
    }
    .col-xlrg-8 {
        width:66.66667%;
        float:left;
    }
    .col-xlrg-9 {
        width:75%;
        float:left;
    }
    .col-xlrg-10 {
        width:83.33333%;
        float:left;
    }
    .col-xlrg-11 {
        width:91.66667%;
        float:left;
    }
    .col-xlrg-12 {
        width:100%;
        float:left;
    }
}

/**
 * XXLarge grid
 */
@media   (min-width: 75em) {
    .col-xxlrg-1 {
        width:8.33333%;
        float:left;
    }
    .col-xxlrg-2 {
        width:16.66667%;
        float:left;
    }
    .col-xxlrg-3 {
        width:25%;
        float:left;
    }
    .col-xxlrg-4 {
        width:33.33333%;
        float:left;
    }
    .col-xxlrg-5 {
        width:41.66667%;
        float:left;
    }
    .col-xxlrg-6 {
        width:50%;
        float:left;
    }
    .col-xxlrg-7 {
        width:58.33333%;
        float:left;
    }
    .col-xxlrg-8 {
        width:66.66667%;
        float:left;
    }
    .col-xxlrg-9 {
        width:75%;
        float:left;
    }
    .col-xxlrg-10 {
        width:83.33333%;
        float:left;
    }
    .col-xxlrg-11 {
        width:91.66667%;
        float:left;
    }
    .col-xxlrg-12 {
        width:100%;
        float:left;
    }
}
/*------------------------------------*\
    # utils.width
\*------------------------------------*/


.w--full {
    width: 100%;
}


.w--half {
    width: 50%;
}
/*------------------------------------*\
    # util.spacers
\*------------------------------------*/

.spc--top--sml {
    margin-top: 0.77778rem;
}

.spc--top--med {
    margin-top: 1.55556rem;
}

.spc--top--lrg {
    margin-top: 2.33333rem;
}

.spc--top--xlrg {
    margin-top: 3.11111rem;
}

.spc--bottom--sml {
    margin-bottom: 0.77778rem;
}

.spc--bottom--med {
    margin-bottom: 1.55556rem;
}

.spc--bottom--lrg {
    margin-bottom: 2.33333rem;
}

.spc--bottom--xlrg {
    margin-bottom: 3.11111rem;
}
/*------------------------------------*\
    # utils.floats
\*------------------------------------*/

.pull {
    float: left;
}
.push {
    float: right;
}
/*------------------------------------*\
    # utils.visibility
\*------------------------------------*/

.hide {
    display: none;
}
.hide-visibility {
    visibility: hidden;
}
/*------------------------------------*\
    # utils.radius
\*------------------------------------*/

.radial {
    border-radius: 5px;
}
.rounded {
    border-radius: 1000px;
}
/*------------------------------------*\
    # utils.type
\*------------------------------------*/

.type--sans {
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}

.type--serif {
    font-family: "Alegreya", Times, serif;
}

.type--tiny {
    font-size:0.77778rem;
    line-height:1.16667rem;
}

.type--small {
    font-size:0.88889rem;
    line-height:1.55556rem;
}

.type--base {
    font-size:1rem;
    line-height:1.55556rem;
}

.type--medium {
    font-size:1rem;
    line-height:1.55556rem;
}

@media    (min-width: 48em) {
    .type--medium{
        font-size:1.22222rem;
        line-height:1.94444rem;
    }
}

.type--large {
    font-size:1.22222rem;
    line-height:1.94444rem;
}

@media    (min-width: 48em) {
    .type--large{
        font-size:1.44444rem;
        line-height:2.33333rem;
    }
}

.type--xlarge {
    font-size:1.44444rem;
    line-height:2.33333rem;
}

@media    (min-width: 48em) {
    .type--xlarge{
        font-size:1.77778rem;
        line-height:3.11111rem;
    }
}

.type--negative {
    color: white;
}

.type--opaque {
    color: rgba(255, 255, 255, 0.75);
}

/*@import utils.floats.css;*/

/**
 * Import: plugins
 * Description: 3rd party code, external plugin CSS etc
 * Note: when importing code from a 3rd party it should be stripped off
 * any vendor prefixes since autoprefixer will use project specific vendor prefixes
 */
/*------------------------------------*\
    # plugins.fontface
\*------------------------------------*/

/**
 * Google Font import
 */
/*------------------------------------*\
    # plugins.icomoon
\*------------------------------------*/

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot?foypwj');
    src:url('../fonts/icomoon.eot?foypwj#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?foypwj') format('truetype'),
        url('../fonts/icomoon.woff?foypwj') format('woff'),
        url('../fonts/icomoon.svg?foypwj#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
.icon-smm-facebook:before {
    content: "\e901";
}
.icon-smm-googleplus:before {
    content: "\e902";
}
.icon-smm-linkedin:before {
    content: "\e903";
}
.icon-smm-pinterest:before {
    content: "\e904";
}
.icon-smm-twitter:before {
    content: "\e905";
}
.icon-smm-youtube:before {
    content: "\e906";
}
.icon-smm-instagram:before {
    content: "\e900";
}
/*------------------------------------*\
    # plugins.owlcarousel
\*------------------------------------*/

/* 
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
    animation-duration: 1000ms;
    animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
    z-index: 0;
}
.owl-carousel .owl-animated-out {
    z-index: 1;
}
.owl-carousel .fadeOut {
    animation-name: fadeOut;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 
 *  Owl Carousel - Auto Height Plugin
 */
.owl-height {
    transition: height 500ms ease-in-out;
}

/* 
 *  Core Owl Carousel CSS File
 */
.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    /* position relative and z-index fix webkit rendering fonts issue */
    position: relative;
    z-index: 1;
}
.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.owl-carousel.owl-loaded {
    display: block;
}
.owl-carousel.owl-loading {
    opacity: 0;
    display: block;
}
.owl-carousel.owl-hidden {
    opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
    display: none;
}
.owl-carousel .owl-item {
    position: relative;
    min-height: 0.05556rem;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.owl-carousel .owl-item img {
    display: block;
/*    min-height: 100%;
    width: auto;
    min-width: 100%;
    max-width: 1000px;*/
    width: 100%;
    -webkit-transform-style: preserve-3d;
}
.owl-carousel.owl-text-select-on .owl-item {
    -webkit-user-select: auto;
       -moz-user-select: auto;
        -ms-user-select: auto;
            user-select: auto;
}
.owl-carousel .owl-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.owl-carousel.owl-rtl {
    direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
    float: right;
}

/* No Js */
.no-js .owl-carousel {
    display: block;
}

/* 
 *  Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity 400ms ease;
}
.owl-carousel .owl-item img {
    transform-style: preserve-3d;
}

/* 
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000;
}
.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 4.44444rem;
    width: 4.44444rem;
    left: 50%;
    top: 50%;
    margin-left: -2.22222rem;
    margin-top: -2.22222rem;
    background: url("owl.video.play.png") no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: scale 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
    transition: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
    display: none;
}
.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
}

/* 
 *  Owl Carousel - Controls
 */
.owl-controls .owl-prev,
.owl-controls .owl-next {
    position: absolute;
    top: 48%;
    z-index: 1;
    text-indent: -9999px;
    width: 1.33333rem;
    height: 1.33333rem;
    transform: rotate(45deg);
    opacity: 0.7;
    -webkit-filter: drop-shadow(0 0 2px black);
            filter: drop-shadow(0 0 2px black);
}
@media    (min-width: 62em) {
    .owl-controls .owl-prev,
.owl-controls .owl-next{
        width:2.66667rem;
        height:2.66667rem;
    }
}
.owl-controls .owl-prev:hover,
.owl-controls .owl-next:hover,
.owl-controls .owl-prev:focus,
.owl-controls .owl-next:focus {
    opacity: 1;
}
.owl-controls .owl-prev {
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    left: 1.77778rem;
}
@media    (min-width: 48em) {
    .owl-controls .owl-prev{
        left:4.66667rem;
    }
}
.owl-controls .owl-next {
    border-top: 1px solid white;
    border-right: 1px solid white;
    right: 1.77778rem;
}
@media    (min-width: 48em) {
    .owl-controls .owl-next{
        right:4.66667rem;
    }
}
/*------------------------------------*\
    # plugins.tooltipster
\*------------------------------------*/

/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
.tooltipster-default {
    border-radius: 5px; 
    background: #4c4c4c;
    color: #fff;
}

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
    font-family: Arial, sans-serif;
    font-size: 0.77778rem;
    line-height: 0.88889rem;
    padding: 0.44444rem 0.55556rem;
    overflow: hidden;
}

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
    /* border-color: ... !important; */
}


/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
    cursor: help;
    margin-left: 0.22222rem;
}

/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
    padding: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999;
    pointer-events: none;
    width: auto;
    overflow: visible;
}
.tooltipster-base .tooltipster-content {
    overflow: hidden;
}


/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {
    display: block;
    width: 0; 
    height: 0;
    position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid;
    bottom: -0.38889rem;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 9px solid;
    bottom: -0.38889rem;
}

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid;
    top: -0.38889rem;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid;
    top: -0.38889rem;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
    left: 0;
    right: 0;
    margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
    left: 0.33333rem;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
    left: 0.27778rem;
}
.tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span {
    right: 0.33333rem;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
    right: 0.27778rem;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important; 
    border-left: 8px solid;
    top: 50%;
    margin-top: -0.38889rem;
    right: -0.38889rem;
}
.tooltipster-arrow-left .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important; 
    border-left: 9px solid;
    margin-top: -0.44444rem;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important; 
    border-right: 8px solid;
    top: 50%;
    margin-top: -0.38889rem;
    left: -0.38889rem;
}
.tooltipster-arrow-right .tooltipster-arrow-border {
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important; 
    border-right: 9px solid;
    margin-top: -0.44444rem;
}


/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */

.tooltipster-fade {
    opacity: 0;
    transition-property: opacity;
}
.tooltipster-fade-show {
    opacity: 1;
}

.tooltipster-grow {
    transform: scale(0,0);
    transition-property: transform;
    -webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {
    transform: scale(1,1);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}

.tooltipster-swing {
    opacity: 0;
    transform: rotateZ(4deg);
    transition-property: transform;
}
.tooltipster-swing-show {
    opacity: 1;
    transform: rotateZ(0deg);
    transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
    top: 0;
    transition-property: top;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
}
.tooltipster-fall-show {
}
.tooltipster-fall.tooltipster-dying {
    transition-property: all;
    top: 0rem !important;
    opacity: 0;
}

.tooltipster-slide {
    left: -2.22222rem;
    transition-property: left;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-slide-show {
}
.tooltipster-slide.tooltipster-dying {
    transition-property: all;
    left: 0rem !important;
    opacity: 0;
}


/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
    opacity: 0.5;
    transform: scale(1.1, 1.1);
}
/*------------------------------------*\
    # plugins.parsley
\*------------------------------------*/

.parsley-errors-list {
    margin-top: 0.38889rem;
}

.parsley-errors-list li {
    font-size:0.88889rem;
    line-height:1.16667rem;
    font-family: "Alegreya Sans", Helvetica, Arial, sans-serif;
}
.parsley-required {
    color: #D55B5B;
}


/**
 * Import: shame
 * Description: CSS shame file
 * Note: to be avoided, exists only if REALLY necessary or legacy code
 */
/*@import shame.css;*/