/*
    Theme Name: SPTV 3.0 
    Author: Jeff Wylie & Walt Stringer
    Author URI: http://video.samaritanspurse.org
 
    Version: 3.0
 
    Template: genesis
    Template Version: 2.5.3
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
html {
            font-family: sans-serif;
            /* 1 */
            -ms-text-size-adjust: 100%;
            /* 2 */
            -webkit-text-size-adjust: 100%;
            /* 2 */
}

/**
 * Remove default margin.
 */
body {
            margin: 0;
}

/* Remove Ubermenu Close from imported SP header menu after upgrade to 3.8.1 */
.fa,
.fas {
            display: none !important;
}

/* 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/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 when focused and also mouse hovered in all browsers.
 */
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 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 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
            -moz-box-sizing: content-box;
            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'],
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
 *    (include `-moz` to future-proof).
 */
input[type='search'] {
            -webkit-appearance: textfield;
            /* 1 */
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            /* 2 */
            box-sizing: content-box;
}

/**
 * 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 2px;
            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;
}

/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
            color: #222;
            font-size: 1em;
            line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
            background: #b3d4fc;
            text-shadow: none;
}

::selection {
            background: #b3d4fc;
            text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #ccc;
            margin: 1em 0;
            padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
            vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
            border: 0;
            margin: 0;
            padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
            resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
            margin: 0.2em 0;
            background: #ccc;
            color: #000;
            padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers:
 * http://juicystudio.com/article/screen-readers-display-none.php
 */
.hidden {
            display: none !important;
            visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
            clip: auto;
            height: auto;
            margin: 0;
            overflow: visible;
            position: static;
            width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
            visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
            content: ' ';
            /* 1 */
            display: table;
            /* 2 */
}

.clearfix:after {
            clear: both;
}

/* SASS Variables
   ========================================================================== */
/* Typography
   ========================================================================== */
/* fontawesome */
[class*='fontawesome-']:before {
            font-family: 'FontAwesome', sans-serif;
}

html,
body {
            font-family: 'Roboto', sans-serif;
            -webkit-font-smoothing: antialiased;
}

.center {
            text-align: center;
}

.font-base,
h1,
h2,
h3,
h4,
h5,
p {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            color: #ddd;
            line-height: 1em;
            margin: 0;
            padding: 0 0 0.25em;
}

h1 {
            font-size: 1.6em;
            font-weight: 300;
            padding: 0 0 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.03rem;
}
@media only screen and (min-width: 40em) {
            h1 {
                        font-size: 2.2em;
            }
}

h2 {
            font-size: 1.7em;
}

h3 {
            font-size: 1.4em;
}

h4 {
            font-size: 1.2em;
}

h5 {
            font-size: 1em;
}

p {
            font-size: 0.9em;
            line-height: 1.3em;
            padding: 0 0 1em;
}
@media only screen and (min-width: 40em) {
            p {
                        font-size: 1em;
                        line-height: 1.3em;
            }
}

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

a {
            color: #0899cd;
            text-decoration: none;
}

a:hover {
            color: #067299;
}

i {
            font-style: normal;
            margin-right: 0.5em;
}

a.button {
            display: inline-block;
            height: auto !important;
            padding: 0.5rem 0.7rem 0.4rem;
            margin: 0 0.7em 0.5em 0;
            color: #ddd;
            font-size: 0.7rem;
            font-weight: 600;
            line-height: 1em;
            text-transform: uppercase;
            word-spacing: 0.1rem;
            border: 1px solid #0899cd;
            border-radius: 3rem;
}
@media only screen and (min-width: 40em) {
            a.button {
                        margin-bottom: 0;
            }
}

a.button:hover {
            color: #fff;
            background: #0899cd;
}

a.button.white {
            color: #ddd;
}

a.button.accent {
            border: none;
            color: #fff;
            font-size: 1rem;
            padding: 0.8rem 1.5rem 0.7rem;
            background-color: #ff9000;
}

a.button.menu {
            color: #ddd;
            padding: 0.4rem 0.8rem;
}

a.button.white:hover,
a.button.menu:hover {
            color: #0899cd;
            background-color: #fff;
}

a.button.load-more {
            width: 100%;
            text-align: center;
            margin-top: 20px;
}

#sp-nav {
            display: none;
            height: 72px;
            width: 100%;
            background-color: #373737;
}
@media only screen and (min-width: 62.5em) {
            #sp-nav {
                        display: block;
            }
}

/* Resets and Base
   ========================================================================== */
html,
body {
            height: 100%;
            box-sizing: border-box;
}

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

body {
            background-color: #222;
}

.atss {
            top: 92px !important;
            right: 0px !important;
            width: 90px !important;
}

@media only screen and (min-width: 62.5em) {
            .hide-desktop {
                        display: none !important;
            }
}

/* Structure
   ========================================================================== */
#global-header {
            position: absolute;
            display: none;
            width: 100%;
            padding: 12px 30px 10px 24px;
            z-index: 1000;
}
@media only screen and (min-width: 40em) {
            #global-header {
                        display: block;
            }
}
#global-header .sp-logo {
            float: left;
}
#global-header .sp-logo a {
            display: inline-block;
}
#global-header .sp-logo img {
            height: 26px;
            width: auto;
}
#global-header .donate-today {
            float: right;
}
#global-header .donate-today .button {
            font-size: 0.5em;
            color: #666;
            border-color: #999;
}
#global-header .donate-today .button:hover {
            color: #fff;
            border-color: #0899cd;
}

#container {
            position: relative;
            display: block;
            z-index: 1;
            width: 100%;
            padding: 70px 1rem 10px;
            overflow: hidden;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}
@media only screen and (min-width: 62.5em) {
            #container {
                        padding: 1rem 2rem;
            }
}
#container img {
            width: 100%;
            height: auto;
}

/* Mobile Header
   ========================================================================== */
.mobile-header {
            position: fixed;
            top: 0;
            left: 0;
            display: block;
            z-index: 1000;
            width: 100%;
            background-color: #353535;
            padding: 0.75rem;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 62.5em) {
            .mobile-header {
                        display: none;
            }
}
.mobile-header .mobile-switch {
            width: 26px;
            float: left;
            margin-right: 0.5rem;
}
.mobile-header .mobile-logo {
            width: 100px;
            float: left;
            margin-top: 2px;
}
.mobile-header .mobile-logo img {
            width: 100%;
            height: auto;
}
.mobile-header .mobile-splogo {
            width: 100px;
            float: right;
            margin-top: 6px;
}
.mobile-header .mobile-splogo img {
            width: 100%;
            height: auto;
}

/* Takeover promo
   ========================================================================== */
.takeover-promo {
            display: block;
            width: 100%;
            position: relative;
            border-radius: 0.25rem;
            margin-top: 2rem;
}
.takeover-promo .takeover-headline {
            padding: 10px;
            display: block;
            border-radius: 0.25rem 0.25rem 0 0;
}
.takeover-promo .takeover-headline h1 {
            color: #fff;
            float: none;
            display: block;
            font-weight: 400;
            font-size: 1em;
            text-align: center;
            padding-bottom: 0.5em;
}
@media only screen and (min-width: 40em) {
            .takeover-promo .takeover-headline h1 {
                        display: block;
                        font-size: 1.4em;
                        text-align: center;
                        float: left;
                        padding-bottom: 0;
            }
}
.takeover-promo .takeover-headline a.button {
            color: #fff;
            border-color: #fff;
            display: block;
            float: none;
            padding: 0.6em 0.8em;
            text-align: center;
            font-size: 0.6em;
}
@media only screen and (min-width: 40em) {
            .takeover-promo .takeover-headline a.button {
                        display: block;
                        float: right;
            }
}
.takeover-promo .takeover-headline a.button:hover {
            color: #cc2a0a;
            background-color: #fff;
}
.takeover-promo .takeover-promo-content {
            display: flex;
            background-color: #353535;
}
.takeover-promo .takeover-promo-content .takeover-promo-image-container {
            flex: 1;
            display: block;
            position: relative;
            overflow: hidden;
            border-radius: 0.25rem;
}
.takeover-promo .takeover-promo-content .takeover-promo-image {
            position: relative;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
}
.takeover-promo .takeover-promo-content .takeover-promo-detail {
            flex: 1;
            padding: 1rem;
            text-align: center;
}

/* Button Link Rows
   ========================================================================== */
ul.button-links {
            display: none;
            list-style: none;
            margin: 0 1rem 1rem 0;
            padding: 0;
}
@media only screen and (min-width: 40em) {
            ul.button-links {
                        display: inline-block;
            }
}
ul.button-links li {
            float: left;
}
ul.button-links li:last-child {
            margin: 0;
}

ul.button-links.social a.button {
            padding: 0.5rem 1rem 0.4rem;
            font-size: 0.7rem;
}

ul.button-links.social .facebook {
            color: #fff;
            background-color: #32598f;
            border: 1px solid #32598f;
}

ul.button-links.social a.facebook:hover {
            color: #32598f;
            background-color: #fff;
            border: 1px solid #fff;
}

ul.button-links.social .twitter {
            color: #fff;
            background-color: #34a9d0;
            border: 1px solid #34a9d0;
}

ul.button-links.social .twitter:hover {
            color: #34a9d0;
            background-color: #fff;
            border: 1px solid #fff;
}

ul.button-links.social .email {
            color: #fff;
            background-color: #d0472c;
            border: 1px solid #d0472c;
}

ul.button-links.social .email:hover {
            color: #d0472c;
            background-color: #fff;
            border: 1px solid #fff;
}

ul.button-links.donate a.button {
            margin: 0;
            padding: 0.5rem 0.7rem 0.4rem;
            border-top: 1px solid #37801e;
            border-right: 1px solid #37801e;
            border-bottom: 1px solid #37801e;
            border-left: none;
            border-radius: 0;
}
ul.button-links.donate a.button i {
            margin-right: 0;
}

ul.button-links.donate li:first-of-type a.button {
            padding: 0.5rem 0.7rem 0.4rem 1rem;
            border-radius: 2rem 0 0 2rem;
}

ul.button-links.donate li:last-of-type a.button {
            padding: 0.5rem 1rem 0.4rem 0.7rem;
            border-radius: 0 2rem 2rem 0;
}

ul.button-links.donate a.button:hover {
            color: #fff;
            background-color: #37801e;
}

ul.button-links.donate a.button.solid {
            color: #fff;
            background-color: #37801e;
}
ul.button-links.donate a.button.solid i {
            margin-right: 0.5rem;
}

/* Thumbnail Section Titles
   ========================================================================== */
.section-title {
            width: 100%;
            position: relative;
            margin: 0 0 1rem;
            padding: 0 0.25rem;
}
@media only screen and (min-width: 40em) {
            .section-title {
                        width: calc(100% - 10px);
            }
}
.section-title h2 {
            display: block;
            float: none;
            padding: 0;
            margin: 0;
            font-weight: 300;
            font-size: 1.75rem;
            letter-spacing: 0.1rem;
            text-transform: uppercase;
}
.section-title a.button.see-all {
            display: block;
            text-align: center;
            margin: 0px;
            border-radius: 0.25rem;
}
@media only screen and (min-width: 40em) {
            .section-title a.button.see-all {
                        position: absolute;
                        right: 0;
                        bottom: 0;
            }
}

/* Main Thumbnail Styles & Sizes
   ========================================================================== */
.thumb-row {
            width: 100%;
            z-index: 1;
            margin-bottom: 1rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
}
@media only screen and (min-width: 40em) {
            .thumb-row {
                        z-index: 2;
            }
}

.thumb {
            display: block;
            position: relative;
            margin: 0.2rem 0.25rem 1rem 0.25rem;
            width: 100%;
}
@media only screen and (min-width: 40em) {
            .thumb {
                        width: calc(50%);
            }
}
@media only screen and (min-width: 64em) {
            .thumb {
                        width: calc(20% - 0.5rem);
                        margin-bottom: 1.5rem;
            }
}

.thumb-image-container {
            display: block;
            position: relative;
            overflow: hidden;
            border-radius: 0.25rem;
}

.thumb-image {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            transition: all 0.25s ease;
}

.thumb-content {
            display: block;
            position: relative;
            width: 100%;
            padding: 8px 0 0;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.thumb-content h2 {
            font-family: 'Roboto Condensed', sans-serif;
            color: #fff;
            font-size: 1.1rem;
            line-height: 1.2rem;
            font-weight: 700;
            padding: 0;
            margin: 0;
}
@media only screen and (min-width: 40em) {
            .thumb-content h2 {
                        font-size: 1em;
            }
}
.thumb-content h2 a {
            color: #fff !important;
            display: block;
            position: relative;
            max-height: 2.4em;
            overflow: hidden;
}
.thumb-content .thumb-description p {
            color: #999;
            font-weight: 400;
            font-size: 0.8em;
            line-height: 1.2em;
            padding: 0.2rem 0 0;
            margin: 0;
            display: block;
            position: relative;
            max-height: 3.8em;
            overflow: hidden;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
.thumb-content .thumb-actions {
            display: block;
            position: relative;
            height: 0.7rem;
            margin: 0.5rem 0 0;
}
.thumb-content .thumb-actions a.thumb-download {
            position: absolute;
            top: 0;
            left: 0;
            height: 0.7rem;
            text-transform: uppercase;
            font-size: 0.7rem;
            padding-left: 0.9rem;
            line-height: 0.7rem;
            letter-spacing: 0.03rem;
            font-weight: 500;
            color: #666;
            background-image: url(./svg/chevron-arrow-down.svg);
            background-size: 0.6rem;
            background-position: left center;
            background-repeat: no-repeat;
            transition: all 0.25s ease;
}
.thumb-content .thumb-actions span.thumb-trt {
            position: absolute;
            top: 0;
            right: 0;
            height: 1rem;
            font-size: 0.7rem;
            line-height: 0.6rem;
            letter-spacing: 0.03rem;
            font-weight: 500;
            color: #666;
}

a.thumb-channel,
.thumb-channel {
            display: block;
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 10;
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 0.7rem;
            background-color: #696969;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.04rem;
            padding: 0.25rem 0.5rem 0.18em;
            margin: 0;
            color: #fff;
            border-radius: 0.25rem;
}
@media only screen and (min-width: 40em) {
            a.thumb-channel,
            .thumb-channel {
                        padding: 0.2rem 0.6rem 0.18em;
                        font-size: 0.6rem;
            }
}

/* New Release Thumbnail Styles */
@media only screen and (min-width: 64em) {
            .thumb.featured {
                        width: calc(25% - 0.5rem);
            }
}

@media only screen and (min-width: 64em) {
            .thumb.featured .thumb-image {
                        padding-bottom: 80%;
            }
}

/* Thumbnail Modifiers
   ========================================================================== */
.thumb.right,
.thumb-new-release.right {
            background-position: right center;
}
.thumb.right .thumb-image,
.thumb-new-release.right .thumb-image {
            background-position: right center;
}

.thumb.left,
.thumb-new-release.left {
            background-position: left center;
}
.thumb.left .thumb-image,
.thumb-new-release.left .thumb-image {
            background-position: left center;
}

/*
.one-one {
  @media only screen and (min-width: 40em) {
    padding-top: 80%;
    width: calc(33.333% - 10px);
    padding-top: calc(33.333% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 100%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(20% - 10px);
    padding-top: calc(20% - 10px);
  }

  @media only screen and (min-width: 100.063em) {
    width: calc(16.666% - 10px);
    padding-top: calc(16.666% - 10px);
  }
}

.one-two {
  @media only screen and (min-width: 40em) {
    width: calc(33.333% - 10px);
    padding-top: calc(33.333% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 80%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(20% - 10px);
    padding-top: calc(20% - 10px);
  }

  @media only screen and (min-width: 100.063em) {
    width: calc(16.666% - 10px);
    padding-top: calc(33.332% - 10px);
  }
}

.two-one {
  @media only screen and (min-width: 40em) {
    width: calc(66.666% - 10px);
    padding-top: calc(33.333% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 50%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(40% - 10px);
    padding-top: calc(20% - 10px);
  }

  @media only screen and (min-width: 100.063em) {
    width: calc(33.332% - 10px);
    padding-top: calc(16.666% - 10px);
  }
}

.two-two {

  @media only screen and (min-width: 40em) {
    width: calc(66.666% - 10px);
    padding-top: calc(66.666% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 100%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(40% - 10px);
    padding-top: calc(40% - 10px);
  }

  @media only screen and (min-width: 100.063em) {
    width: calc(33.332% - 10px);
    padding-top: calc(33.332% - 10px);
  }
}

.three-two {
  @media only screen and (min-width: 40em) {
    width: calc(100% - 10px);
    padding-top: calc(66.666% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 100%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(60% - 10px);
    padding-top: calc(40% - 10px);
  }

  @media only screen and (min-width: 100.063em) {
    width: calc(50% - 10px);
    padding-top: calc(33.332% - 10px);
  }
}

.three-three {
  @media only screen and (min-width: 40em) {
    width: calc(100% - 10px);
    padding-top: calc(66.666% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 100%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(60% - 10px);
    padding-top: calc(60% - 10px);
  }

  @media only screen and (min-width: 100.063em) {
    width: calc(50% - 10px);
    padding-top: calc(50% - 10px);
  }
}

.four-two {
  @media only screen and (min-width: 40em) {
    width: calc(100% - 10px);
    padding-top: calc(66.666% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 100%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(80% - 10px);
    padding-top: calc(40% - 10px);
  }

  @media only screen and (min-width: 100.063em) {
    width: calc(66.666% - 10px);
    padding-top: calc(33.332% - 10px);
  }
}

.four-three {
  @media only screen and (min-width: 40em) {
    width: calc(100% - 10px);
    padding-top: calc(66.666% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 100%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(80% - 10px);
    padding-top: calc(60% - 10px);
  }

  @media only screen and (min-width: 100.063em) {
    width: calc(66.666% - 10px);
    padding-top: calc(50% - 10px);
  }
}

.five-three, .takeover {
  @media only screen and (min-width: 40em) {
    width: calc(100% - 10px);
    padding-top: calc(66.666% - 10px);

    .thumb-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 100%;
    }
  }

  @media only screen and (min-width: 64em) {
    width: calc(100% - 10px);
    padding-top: calc(60% - 10px);
  }
}
*/
.thumb.right-third {
            background-position: 66% center;
}

.thumb.left-third {
            background-position: 33% center;
}

.thumb-button {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 500;
}
.thumb-button a {
            display: block;
            width: 100%;
            height: 100%;
}

.animals-agriculture .thumb-channel {
            background-color: #aea444;
}

.animals-agriculture .channel {
            color: #aea444 !important;
}

.animals-agriculture .thumb-content.open {
            border-color: #aea444;
}

.international-crisis-response .thumb-channel {
            background-color: #0066cb;
}

.international-crisis-response .channel {
            color: #0066cb !important;
}

.international-crisis-response .thumb-content.open {
            border-color: #0066cb;
}

.construction .thumb-channel {
            background-color: #f2af00;
}

.construction .channel {
            color: #f2af00 !important;
}

.construction .thumb-content.open {
            border-color: #f2af00;
}

.us-disaster-relief .thumb-channel {
            background-color: #ff6319;
}

.us-disaster-relief .channel {
            color: #ff6319 !important;
}

.us-disaster-relief .thumb-content.open {
            border-color: #ff6319;
}

.discipleship .thumb-channel {
            background-color: #00549f;
}

.discipleship .channel {
            color: #00549f !important;
}

.discipleship .thumb-content.open {
            border-color: #00549f;
}

.feeding .thumb-channel {
            background-color: #b06f00;
}

.feeding .channel {
            color: #b06f00 !important;
}

.feeding .thumb-content.open {
            border-color: #b06f00;
}

.medical .thumb-channel {
            background-color: #d52b1e;
}

.medical .channel {
            color: #d52b1e !important;
}

.medical .thumb-content.open {
            border-color: #d52b1e;
}

.operation-christmas-child .thumb-channel {
            background-color: #69be28;
}

.operation-christmas-child .channel {
            color: #69be28 !important;
}

.operation-christmas-child .thumb-content.open {
            border-color: #69be28;
}

.operation-heal-our-patriots .thumb-channel {
            background-color: #004b8d;
}

.operation-heal-our-patriots .channel {
            color: #004b8d !important;
}

.operation-heal-our-patriots .thumb-content.open {
            border-color: #004b8d;
}

.water .thumb-channel {
            background-color: #00a1de;
}

.water .channel {
            color: #00a1de !important;
}

.water .thumb-content.open {
            border-color: #00a1de;
}

.women-children .thumb-channel {
            background-color: #6b1f7c;
}

.women-children .channel {
            color: #6b1f7c !important;
}

.women-children .thumb-content.open {
            border-color: #6b1f7c;
}

/* Thumbnail Hover Actions
   ========================================================================== */
@media only screen and (min-width: 40em) {
            .thumb:hover .thumb-image {
                        transform: scale(1.1);
            }
}

.thumb:hover .thumb-description p {
            color: #ddd;
}

.thumb:hover a.thumb-download {
            color: #067299;
}

.thumb:hover a.thumb-download:hover {
            color: #0899cd;
}

/* Channel Page
   ========================================================================== */
video {
            width: 100%;
            height: auto;
}

a.mobilelink {
            color: #0899cd;
            display: block;
            background-color: #444;
            padding: 0.5rem 0;
            width: 100%;
            text-align: center;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
}
@media only screen and (min-width: 40em) {
            a.mobilelink {
                        display: none;
            }
}

.channel-header {
            margin: 0;
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
}
@media only screen and (min-width: 40em) {
            .channel-header {
                        margin: 0 0 2rem;
            }
}
.channel-header .channel-header-image {
            background-position: center center;
            background-size: cover;
            width: 100%;
            overflow: hidden;
}
@media only screen and (min-width: 64em) {
            .channel-header .channel-header-image {
                        width: 50%;
            }
}
.channel-header .channel-header-image video {
            border-radius: 0.5rem;
}
.channel-header .channel-header-content {
            width: 100%;
            padding: 1rem 0 0;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 64em) {
            .channel-header .channel-header-content {
                        width: 50%;
                        padding: 0 1.4rem;
            }
}

.channel-header.international-crisis-response .channel-header-content > h1 {
            color: #0066cb;
}

.channel-header.us-disaster-relief .channel-header-content > h1 {
            color: #ff6319;
}

.channel-header.operation-christmas-child .channel-header-content > h1 {
            color: #69be28;
}

.channel-header.medical .channel-header-content > h1 {
            color: #d52b1e;
}

.channel-header.animals-agriculture .channel-header-content > h1 {
            color: #aea444;
}

.channel-header.construction .channel-header-content > h1 {
            color: #f2af00;
}

.channel-header.operation-heal-our-patriots .channel-header-content > h1 {
            color: #004b8d;
}

.channel-header.women-children .channel-header-content > h1 {
            color: #6b1f7c;
}

.channel-header.feeding .channel-header-content > h1 {
            color: #b06f00;
}

.channel-header.discipleship .channel-header-content > h1 {
            color: #00549f;
}

.channel-header.water .channel-header-content > h1 {
            color: #00a1de;
}

nav.sub-channel {
            display: block;
            position: relative;
            width: 100%;
            padding: 0 0.25rem;
            margin-bottom: 1rem;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}
nav.sub-channel > ul {
            display: block;
            padding: 0;
            margin: 0;
            list-style: none;
            position: relative;
}
nav.sub-channel > ul > li {
            display: inline-block;
            margin: 0 0.25em 0.5em 0;
}
nav.sub-channel > ul > li a {
            display: block;
            height: auto !important;
            padding: 0.4rem 0.7rem 0.3rem;
            color: #ddd;
            font-size: 0.7rem;
            font-weight: 600;
            line-height: 1em;
            text-transform: uppercase;
            word-spacing: 0.1rem;
            white-space: nowrap;
            background-color: #333;
            border-radius: 3rem;
            -webkit-transition: all 0.15s ease-in-out;
            -moz-transition: all 0.15s ease-in-out;
            -o-transition: all 0.15s ease-in-out;
            transition: all 0.15s ease-in-out;
}
nav.sub-channel > ul > li a:hover {
            background-color: #067299;
}
nav.sub-channel > ul > li.active a {
            background-color: #0899cd;
}
nav.sub-channel > ul .sub-channel-title {
            margin-top: 0.2rem;
            margin-right: 1rem;
            color: #fff;
            text-transform: uppercase;
            font-size: 1rem;
            letter-spacing: 0.05rem;
}

nav.sub-channel.operation-christmas-child > ul li a {
            background-color: #3a6a16;
}
nav.sub-channel.operation-christmas-child > ul li a:hover {
            background-color: #69be28;
}

nav.sub-channel.operation-christmas-child > ul li.active a {
            background-color: #69be28;
}

nav.sub-channel.international-crisis-response > ul li a {
            background-color: #003365;
}
nav.sub-channel.international-crisis-response > ul li a:hover {
            background-color: #0066cb;
}

nav.sub-channel.international-crisis-response > ul li.active a {
            background-color: #0066cb;
}

nav.sub-channel.us-disaster-relief > ul li a {
            background-color: #b23900;
}
nav.sub-channel.us-disaster-relief > ul li a:hover {
            background-color: #ff6319;
}

nav.sub-channel.us-disaster-relief > ul li.active a {
            background-color: #ff6319;
}

nav.sub-channel.medical > ul li a {
            background-color: #7c1911;
}
nav.sub-channel.medical > ul li a:hover {
            background-color: #d52b1e;
}

nav.sub-channel.medical > ul li.active a {
            background-color: #d52b1e;
}

nav.sub-channel.animals-agriculture > ul li a {
            background-color: #655f27;
}
nav.sub-channel.animals-agriculture > ul li a:hover {
            background-color: #aea444;
}

nav.sub-channel.animals-agriculture > ul li.active a {
            background-color: #aea444;
}

nav.sub-channel.construction > ul li a {
            background-color: #8c6500;
}
nav.sub-channel.construction > ul li a:hover {
            background-color: #f2af00;
}

nav.sub-channel.construction > ul li.active a {
            background-color: #f2af00;
}

nav.sub-channel.operation-heal-our-patriots > ul li a {
            background-color: #001527;
}
nav.sub-channel.operation-heal-our-patriots > ul li a:hover {
            background-color: #004b8d;
}

nav.sub-channel.operation-heal-our-patriots > ul li.active a {
            background-color: #004b8d;
}

nav.sub-channel.women-children > ul li a {
            background-color: #250b2a;
}
nav.sub-channel.women-children > ul li a:hover {
            background-color: #6b1f7c;
}

nav.sub-channel.women-children > ul li.active a {
            background-color: #6b1f7c;
}

nav.sub-channel.feeding > ul li a {
            background-color: #4a2f00;
}
nav.sub-channel.feeding > ul li a:hover {
            background-color: #b06f00;
}

nav.sub-channel.feeding > ul li.active a {
            background-color: #b06f00;
}

nav.sub-channel.discipleship > ul li a {
            background-color: #001e39;
}
nav.sub-channel.discipleship > ul li a:hover {
            background-color: #00549f;
}

nav.sub-channel.discipleship > ul li.active a {
            background-color: #00549f;
}

nav.sub-channel.water > ul li a {
            background-color: #005778;
}
nav.sub-channel.water > ul li a:hover {
            background-color: #00a1de;
}

nav.sub-channel.water > ul li.active a {
            background-color: #00a1de;
}

/* Video Player Page
   ========================================================================== */
.player {
            position: relative;
            width: 100%;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            margin: 0 0 2rem;
            border-radius: 0.25rem;
            overflow: hidden;
}

.player #video-container {
            display: block;
            position: relative;
}

.player-detail {
            background: #353535;
            padding: 0.75rem;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
}
@media only screen and (min-width: 40em) {
            .player-detail {
                        padding: 1.4rem;
            }
}
.player-detail h1 {
            color: #ddd;
            padding: 0 0 0.25em;
}
.player-detail p {
            color: #ddd;
            padding: 0 0 1em;
            margin: 0;
}
.player-detail p:not(.channel) {
            display: none;
}
@media only screen and (min-width: 40em) {
            .player-detail p:not(.channel) {
                        display: inherit;
            }
}
.player-detail p.channel {
            font-size: 0.8rem;
            line-height: 0.8rem;
            text-transform: uppercase;
            font-weight: 400;
            letter-spacing: 0.1em;
            word-spacing: 0.2em;
            padding: 0;
            margin: 0;
}
@media only screen and (min-width: 40em) {
            .player-detail p.channel {
                        padding: 0 0 0.5em;
            }
}
.player-detail p.channel span {
            display: none;
}
@media only screen and (min-width: 40em) {
            .player-detail p.channel span {
                        display: inline;
                        color: #353535;
            }
}
.player-detail img {
            width: 100%;
            height: auto;
}

.social-sharing {
            display: block;
            min-height: 45px;
            padding: 0.5em 0 0;
}

.transcription-text {
            display: none;
            padding-top: 2em;
}
.transcription-text h3 {
            color: #0899cd;
            text-transform: uppercase;
            padding-bottom: 1em;
}

/* Side By Side Header
   ========================================================================== */
.side-by-side-header {
            width: 100%;
            background: #353535;
            position: relative;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 40em) {
            .side-by-side-header {
                        width: calc(100% - 10px);
            }
}
.side-by-side-header .sbsh-image {
            width: 100%;
            float: none;
            max-height: 230px;
            background-size: cover;
            background-position: center center;
}
@media only screen and (min-width: 64em) {
            .side-by-side-header .sbsh-image {
                        float: left;
                        width: 50%;
                        max-height: none;
            }
}
.side-by-side-header .sbsh-detail {
            float: none;
            width: 100%;
}
@media only screen and (min-width: 64em) {
            .side-by-side-header .sbsh-detail {
                        float: right;
                        width: 50%;
            }
}
.side-by-side-header .sbsh-content {
            padding: 1.4em;
}
.side-by-side-header .sbsh-content h1 {
            color: #ddd;
            padding: 0 0 0.25em;
}
.side-by-side-header .sbsh-content p {
            font-size: 1em;
            color: #ddd;
            padding: 0 0 1em;
            margin: 0;
}

/* Thumbnail Loading Animation
   ========================================================================== */
.loading {
            position: relative;
            width: 50px;
            margin: 1rem auto;
            display: block;
}
.loading .loading-logo {
            display: block;
            position: absolute;
            height: 30px;
            width: 30px;
            top: 10px;
            left: 10px;
            background-image: url(./images/interface/sptv-logo-mark.svg);
            background-position: center center;
            background-size: cover;
}
.loading .loading-a {
            height: 50px;
            width: 50px;
            display: block;
}
.loading .loading-b {
            display: block;
            position: absolute;
            height: 50px;
            width: 50px;
            top: 0px;
            left: 0px;
            border-radius: 50px;
            background-color: none;
            border-top: 2px solid #fff;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #0899cd;
            border-right: 2px solid #0899cd;
            animation: roto 0.7s infinite linear;
}

@keyframes roto {
            0% {
                        transform: rotateZ(0deg);
            }
            100% {
                        transform: rotateZ(360deg);
            }
}
.loading p {
            margin-top: 0.25rem;
            display: block;
            text-transform: uppercase;
            font-size: 0.7em;
            padding: 0;
            text-align: center;
}

/* Footer
   ========================================================================== */
footer {
            width: 100%;
            background: #353535;
            padding: 1.4rem;
            margin-top: 50px;
            min-height: 300px;
            border-radius: 0.25rem;
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 40em) {
            footer {
                        width: calc(100% - 10px);
            }
}
footer .logo {
            width: 200px;
            padding-bottom: 2em;
}
footer .logo img {
            width: 100%;
            height: auto;
}
footer p {
            font-size: 0.8em;
            color: #aaa;
            line-height: 1.2em;
            padding-bottom: 0.5em;
            font-weight: 300;
            letter-spacing: 0.05em;
}
footer ul.footer-nav {
            list-style: none;
            padding: 0;
            margin: 0;
}
footer ul.footer-nav li {
            display: inline-block;
            padding: 0 0.75em 0 0;
}
footer ul.footer-nav li a {
            font-size: 0.7em;
}

/* Navigation
   ========================================================================== */
nav.main {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            margin: 0;
            padding: 5rem 1rem 1rem;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
            background-color: rgba(0, 0, 0, 0.8);
}
@media only screen and (min-width: 62.5em) {
            nav.main {
                        position: relative;
                        display: flex;
                        margin: 0;
                        padding: 1rem 0 2rem;
                        background-color: inherit;
            }
}
nav.main a.logo {
            display: none;
            width: 110px;
}
nav.main a.logo img {
            width: 100%;
            height: auto;
            margin-top: 0.2rem;
}
@media only screen and (min-width: 62.5em) {
            nav.main a.logo {
                        width: 10rem;
                        display: block;
                        margin-right: 1rem;
            }
}
nav.main form.nav-search {
            position: relative;
            margin: 0 0.5rem 0 0;
            padding: 0;
}
@media only screen and (min-width: 62.5em) {
            nav.main form.nav-search {
                        flex: 2;
            }
}
nav.main form.nav-search input[type='text'] {
            width: 100%;
            color: #fff;
            font-size: 1.2rem;
            padding: 0 1.2rem;
            border: none;
            outline: none;
            border-radius: 3rem;
            height: 40px;
            background-color: #444;
}
nav.main form.nav-search input[type='submit'] {
            position: absolute;
            display: block;
            content: '';
            width: 40px;
            height: 40px;
            top: 0;
            right: 0;
            color: #fff;
            border: none;
            outline: none;
            background-color: #666;
            background-image: url(./svg/search.svg);
            background-size: 1rem;
            background-repeat: no-repeat;
            background-position: center center;
            border-radius: 3rem;
}
nav.main form.nav-search input[type='submit']:hover {
            background-color: #0899cd;
}
nav.main > ul {
            display: block;
            padding: 0;
            margin: 0;
            list-style: none;
            position: relative;
}
@media only screen and (min-width: 62.5em) {
            nav.main > ul {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-start;
            }
}
nav.main > ul li {
            margin: 0 0 0.5rem;
            -webkit-transition: all 0.15s ease-in-out;
            -moz-transition: all 0.15s ease-in-out;
            -o-transition: all 0.15s ease-in-out;
            transition: all 0.15s ease-in-out;
}
@media only screen and (min-width: 62.5em) {
            nav.main > ul li {
                        margin: 0 0.25rem;
            }
}
nav.main > ul li a {
            position: relative;
            display: block;
            padding: 0.3rem 0;
            margin: 0;
            width: 100%;
            height: 40px;
            border-radius: 3rem;
            background-color: #444;
            font-weight: 400;
            color: #fff;
            font-size: 1rem;
            line-height: 1rem;
            text-decoration: none;
            background-size: cover;
            background-size: 1rem;
            background-repeat: no-repeat;
            background-position: 1rem center;
            -webkit-transition: all 0.15s ease-in-out;
            -moz-transition: all 0.15s ease-in-out;
            -o-transition: all 0.15s ease-in-out;
            transition: all 0.15s ease-in-out;
}
@media only screen and (min-width: 62.5em) {
            nav.main > ul li a {
                        width: 40px;
                        height: 40px;
                        background-size: 50%;
                        background-position: center center;
            }
}
nav.main > ul li a span {
            position: absolute;
            top: 0.8rem;
            left: 2.8rem;
            white-space: nowrap;
            opacity: 1;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.05rem;
            text-align: center;
            -webkit-transition: all 0.15s ease-in-out;
            -moz-transition: all 0.15s ease-in-out;
            -o-transition: all 0.15s ease-in-out;
            transition: all 0.15s ease-in-out;
}
@media only screen and (min-width: 62.5em) {
            nav.main > ul li a span {
                        left: 50%;
                        width: auto;
                        transform: translate(-50%);
                        top: calc(100% + 0.5rem);
                        opacity: 0;
                        font-size: 0.8rem;
            }
}
nav.main > ul li a:hover span {
            opacity: 1;
}
nav.main > ul li a.international-crisis-response {
            border-color: #0066cb;
            background-image: url(./svg/crisis.svg);
}
nav.main > ul li a.international-crisis-response:hover {
            background-color: #0066cb;
}
nav.main > ul li a.animals-agriculture {
            border-color: #aea444;
            background-image: url(./svg/animals.svg);
}
nav.main > ul li a.animals-agriculture:hover {
            background-color: #aea444;
}
nav.main > ul li a.construction {
            border-color: #f2af00;
            background-image: url(./svg/construction.svg);
}
nav.main > ul li a.construction:hover {
            background-color: #f2af00;
}
nav.main > ul li a.us-disaster-relief {
            border-color: #ff6319;
            background-image: url(./svg/disaster.svg);
}
nav.main > ul li a.us-disaster-relief:hover {
            background-color: #ff6319;
}
nav.main > ul li a.discipleship {
            border-color: #00549f;
            background-image: url(./svg/discipleship.svg);
}
nav.main > ul li a.discipleship:hover {
            background-color: #00549f;
}
nav.main > ul li a.feeding {
            border-color: #b06f00;
            background-image: url(./svg/feeding.svg);
}
nav.main > ul li a.feeding:hover {
            background-color: #b06f00;
}
nav.main > ul li a.medical {
            border-color: #d52b1e;
            background-image: url(./svg/medical.svg);
}
nav.main > ul li a.medical:hover {
            background-color: #d52b1e;
}
nav.main > ul li a.operation-christmas-child {
            border-color: #69be28;
            background-image: url(./svg/occ2.svg);
}
nav.main > ul li a.operation-christmas-child:hover {
            background-color: #69be28;
}
nav.main > ul li a.operation-heal-our-patriots {
            border-color: #004b8d;
            background-image: url(./svg/ohop.svg);
}
nav.main > ul li a.operation-heal-our-patriots:hover {
            background-color: #004b8d;
}
nav.main > ul li a.water {
            border-color: #00a1de;
            background-image: url(./svg/water.svg);
}
nav.main > ul li a.water:hover {
            background-color: #00a1de;
}
nav.main > ul li a.women-children {
            border-color: #6b1f7c;
            background-image: url(./svg/women.svg);
}
nav.main > ul li a.women-children:hover {
            background-color: #6b1f7c;
}
nav.main > ul li.mobile-only {
            display: inherit;
}
@media only screen and (min-width: 40em) {
            nav.main > ul li.mobile-only {
                        display: none;
            }
}
nav.main h3 {
            display: block;
            float: none;
            padding: 0;
            margin: 1.5rem 0 0.5rem;
            font-size: 1.4rem;
            line-height: 1rem;
            letter-spacing: 0.1rem;
            text-transform: uppercase;
            color: #0899cd;
}

nav.main.mobile-open {
            display: block;
            left: 0px;
}

/* =============================================================================
  MENU TOGGLE SWITCHES
============================================================================= */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `cmn-toggle-switch` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.cmn-toggle-switch {
            display: block;
            float: left;
            position: relative;
            overflow: hidden;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 26px;
            font-size: 0;
            text-indent: -9999px;
            background-color: #333;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            box-shadow: none;
            border-radius: none;
            border: none;
            cursor: pointer;
}

.cmn-toggle-switch:focus {
            outline: none;
}

.cmn-toggle-switch span {
            display: block;
            position: absolute;
            top: 50%;
            left: 0px;
            right: 0px;
            height: 2px;
            background: #0899cd;
}

.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
            position: absolute;
            display: block;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #0899cd;
            content: '';
}

.cmn-toggle-switch span::before {
            top: -8px;
}

.cmn-toggle-switch span::after {
            bottom: -8px;
}

/**
 * 
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.cmn-toggle-switch__htx span {
            -webkit-transition: background 0 0.3s;
            transition: background 0 0.3s;
}

.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
            -webkit-transition-duration: 0.3s, 0.3s;
            transition-duration: 0.3s, 0.3s;
            -webkit-transition-delay: 0.3s, 0;
            transition-delay: 0.3s, 0;
}

.cmn-toggle-switch__htx span::before {
            -webkit-transition-property: top, -webkit-transform;
            transition-property: top, transform;
}

.cmn-toggle-switch__htx span::after {
            -webkit-transition-property: bottom, -webkit-transform;
            transition-property: bottom, transform;
}

.cmn-toggle-switch__htx.active span {
            background: none;
}

.cmn-toggle-switch__htx.active span::before {
            top: 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.cmn-toggle-switch__htx.active span::after {
            bottom: 0;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
            -webkit-transition-delay: 0, 0.3s;
            transition-delay: 0, 0.3s;
}

/* ************************************** */
/*    START HEADER STYLES                 */
/*                                        */
#header {
            display: none;
            position: relative;
            z-index: 900;
            clear: both;
            height: 72px;
            width: 100%;
            background-color: #373737;
}
@media only screen and (min-width: 64em) {
            #header {
                        display: block;
            }
}

#header > .wrap {
            z-index: 900;
}

@media only screen and (min-width: 40em) {
            #header > div.wrap {
                        margin: 0 auto;
                        height: 75px;
                        position: relative;
            }
            .sub-nav > div.wrap {
                        margin: 0 auto;
            }
            #title-area {
                        cursor: pointer;
                        float: left;
                        margin-top: 18px;
                        margin-left: 18px;
                        overflow: hidden;
                        padding: 0;
                        width: 200px;
            }
            #title-area #title {
                        height: 50px;
                        width: 100%;
            }
            #title-area #title img {
                        width: 100%;
                        height: auto;
            }
            /************ Start Ubermenu overrides ***************************/
            /* Ubermenu updates to accomodate new donate menu item from main site */
            nav.ubermenu-donate {
                        width: 91% !important;
                        right: 0 !important;
            }
            li.ubermenu-donate-button .menu-donate-right #md-input input {
                        height: 57px !important;
                        width: 100px;
                        color: black;
            }
}

@media only screen and (min-width: 40em) and (max-width: 1024px) {
            nav.ubermenu-donate {
                        display: none;
            }
}

@media only screen and (min-width: 40em) {
            ul.button-links.donate li:first-child,
            ul.button-links.donate li:first-child a {
                        cursor: auto !important;
            }
            li#menu-item-58118 > ul {
                        display: none !important;
            }
            /*turn off background color so it can inherit the sub-nav div color*/
            div#nav .ubermenu {
                        text-align: right;
                        background: #373737 !important;
                        border: 0 !important;
                        color: white !important;
                        height: 72px !important;
                        margin-right: 0.5rem;
            }
            div#nav .ubermenu ul.ubermenu-nav > li:hover {
                        background: #262626 !important;
            }
            div#nav .ubermenu ul.ubermenu-nav > li > a.ubermenu-target {
                        color: white !important;
                        padding: 28px 8px !important;
                        font-size: 0.7rem;
            }
            div#nav .ubermenu ul.ubermenu-nav > li > ul {
                        color: white !important;
                        background: #262626 !important;
                        min-height: 60px !important;
            }
            div#nav .ubermenu ul.ubermenu-nav > li > ul .ubermenu-target-title,
            div#nav .ubermenu ul.ubermenu-nav > li > ul .ubermenu-submenu {
                        color: white;
                        z-index: 900 !important;
            }
            .ubermenu-responsive-toggle {
                        display: none !important;
                        float: right;
                        margin-top: 10px !important;
                        margin-right: 45px !important;
                        color: white;
            }
            li.ubermenu-ministry-title span.ministry-title {
                        display: block;
                        margin-bottom: 5px;
                        border-bottom: 1px dotted #fff !important;
                        padding-bottom: 0px;
                        padding-left: 0px;
                        margin-left: 20px;
                        font-size: 13px;
                        font-weight: bold;
            }
            span.min-hide span.ubermenu-target-title {
                        display: block;
                        visibility: hidden;
            }
            ul.ubermenu-submenu li.ubermenu-item a.ubermenu-target {
                        padding-bottom: 20px;
                        padding-top: 0px;
            }
            ul.ubermenu-submenu li.ubermenu-item a.ubermenu-target span {
                        font-size: 0.7rem;
            }
            .ubermenu
                        .ubermenu-submenu-type-stack
                        > .ubermenu-item-normal
                        > .ubermenu-target {
                        padding-bottom: 8px;
                        padding-top: 0px;
                        display: block;
            }
            div#nav .ubermenu ul.ubermenu-nav {
                        position: relative;
                        z-index: 900;
                        display: block;
            }
            div#nav .ubermenu ul.ubermenu-nav .ubermenu-target {
                        background: none;
            }
            ul.ubermenu-submenu
                        li.ubermenu-item
                        a.ubermenu-target
                        span.ubermenu-target-title:hover {
                        color: #a4a4a4 !important;
            }
            .ubermenu-cat_nav
                        ul.ubermenu-nav
                        li.ubermenu-item
                        a.ubermenu-target {
                        font-size: 1rem;
            }
            .ubermenu-cat_nav .ubermenu-nav ul.ubermenu-submenu {
                        background: white;
            }
            .ubermenu-cat_nav .ubermenu-item-level-0 > .ubermenu-target {
                        color: #ffffff;
                        padding: 22px 14px 22px;
            }
            .ubermenu-cat_nav.ubermenu-notouch
                        .ubermenu-item-level-0:hover
                        > .ubermenu-target,
            .ubermenu-cat_nav
                        .ubermenu-item-level-0.ubermenu-active
                        > .ubermenu-target {
                        background: #fff;
                        color: black;
            }
            .ubermenu-target:focus,
            .ubermenu-nav:focus,
            .ubermenu-item:focus {
                        outline: none !important;
                        box-shadow: none !important;
            }
            .ubermenu-cat_nav ul.ubermenu-nav li.ubermenu-item a.subnav-lists {
                        text-transform: none;
                        padding-bottom: 5px;
                        padding-top: 5px;
                        color: #000000;
            }
            .ubermenu .ubermenu-item .ubermenu-submenu-drop {
                        visibility: visible !important;
            }
            .ubermenu .ubermenu-item.ubermenu-active .ubermenu-submenu-drop {
                        display: block !important;
            }
            .ubermenu .ubermenu-item .ubermenu-submenu-drop {
                        display: none !important;
            }
}

@media only screen and (min-width: 64em) {
            #title-area {
                        margin-top: 14px;
                        margin-left: 14px;
                        width: 260px;
            }
            div#nav .ubermenu {
                        margin-right: 10rem;
            }
            div#nav .ubermenu ul.ubermenu-nav > li > a.ubermenu-target {
                        padding: 27px 8px !important;
                        font-size: 0.9rem;
            }
}

/************ End Ubermenu overrides ***************************/
/*                                        */
/*    END HEADER STYLES                 */
/* ************************************** */
/************** Truncate Titles and Descriptions ********************/
div.thumb-description p {
            /* use this value to count block height */
            /* max-height = line-height (1.2) * lines max number (3) */
}

div.thumb-content h2 a {
            /* use this value to count block height */
            /* max-height = line-height (1.2) * lines max number (3) */
}

/* css for ending ellipses.  Doesn't look good as is.

.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}
*/

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