/*
# RTC Website Style Guide
Style Guide created using [Kalei Styleguide](http://kaleistyleguide.com/)
*/
/* 
## Base Styles

**Paragraphs, Lists, and Links**

```
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>
<p>This is <a href="">Link Text</a> among some regular text.</p>
```
**Headings**
```
<h1>Level One Heading (h1)</h1>
<h2>Level Two Heading (h2)</h2>
<h3>Level Three Heading (h3)</h3>
<h4>Level Four Heading (h4)</h4>
<h5>Level Five Heading (h5)</h5>
<h6>Level Six Heading (h6)</h6>
```
*/




/* Base Styles for RTC Site */

/* Injected in RTCRootMaster from google fonts so client can render, 
    font face was not working*/
:root {
    --rtc-font: 'brandon-grotesque', sans-serif;
}

/*
#### Icons
*/
/*
    envelopeicon for enews
    */

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


@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/fonts/glyphicons-halflings-regular.eot');
    src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

/*@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/JosefinSans-Regular.ttf') format('truetype');
}*/


/*@font-face {
        font-family: 'News Cycle';
        font-style: normal;
        font-weight: 400;
        src: local('News Cycle Regular'), local('NewsCycle-Regular'), url(https://themes.googleusercontent.com/static/fonts/newscycle/v10/9Xe8dq6pQDsPyVH2D3tMQr3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
    }

    @font-face {
        font-family: 'News Cycle';
        font-style: normal;
        font-weight: 700;
        src: local('News Cycle Bold'), local('NewsCycle-Bold'), url(https://themes.googleusercontent.com/static/fonts/newscycle/v10/G28Ny31cr5orMqEQy6ljt3bFhgvWbfSbdVg11QabG8w.woff) format('woff');
    }*/


html {
    height: 100%;
    background: #ffffff;
    font-size: 80%;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.container6 {
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width: 45em) {
    html {
        font-size: 100%;
    }
}

@media only screen and (max-width: 45em) {
    html {
        font-size: 125%;
    }

    .hero-img {
        height: 100% !important;
        object-fit: cover !important;
    }

    .hero-text-body .btn  {
        position: relative !important;
    }
}

@media only screen and (min-width: 80em) {
    html {
        font-size: 120%;
    }
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background-color: #323231;
    font-family: var(--rtc-font);
    font-size: 18px;
    font-size: 1rem;
    line-height: 1.4em;
    color: #323231;
}

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

a {
    text-decoration: none;
    color: #3ab1e5;
}

    a:hover {
        color: #1989ba;
    }

    a:focus {
        outline: thin dotted;
        color: #1989ba;
    }

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.7em 0;
    margin: 0 0 0.7rem 0;
    line-height: 1.2;
    font-family: var(--rtc-font);
    font-weight: normal;
    color: #6c9726;
}

h1 {
    font-size: 65px;
}

h2 {
    font-size: 56px;
    font-weight:bold;
}

h3 {
    font-size: 47px;
}

h4 {
    font-size: 35px;
    font-weight: bold;
}

h5 {
    font-size: 29px;
}

h6 {
    font-size: 21px;
}

p,
ol,
/*ul,*/
dl,
menu,
address,
pre,
blockquote {
    margin: 0 0 1.4em 0;
    margin: 0 0 1.4rem 0;
    line-height: 1.4em;
}

small {
    font-size: 80%;
}

ul,
ol,
menu {
    padding-left: 2em;
}

li ul,
li ol {
    margin: 0;
    padding: 0;
}

nav ul,
nav ol,
form ul,
form ol {
    list-style: none;
    list-style-image: none;
    padding: 0;
}

dl,
dd {
    margin-bottom: 1.4rem;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

address {
    font-style: normal;
}

q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

cite {
    font-style: normal;
}

b,
strong {
    font-weight: bold;
}

pre,
code,
kbd,
samp {
    font-family: var(--rtc-font);
    font-size: 1em;
}

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

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

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

mark {
    background-color: #e0ebf0;
}

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

audio,
canvas,
video {
    vertical-align: middle;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

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

[hidden] {
    display: none;
}

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

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    /*margin: 1em 0;*/
    padding: 0;
    height: 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #ffffff;
}

    hr.no-pic {
        margin: 0 0 45px 0;
    }

img {
    max-width: 100%;
    width: auto;
    height: auto;
    border: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}


.hero-slider {
    font-family: var(--rtc-font);
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}

.slider-img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

.single-item {
    overflow: hidden;
}

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

iframe {
    max-width: 100%;
}

figure {
    margin: 0 0 1.4em;
}

    figure > img {
        margin-bottom: 0.35em;
    }

    figure > figcaption {
        display: block;
        font-weight: normal;
        font-size: 14px;
        font-size: 0.875rem;
        color: #545454;
    }

table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.4em;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
}

th,
td {
    padding: 8px;
    vertical-align: top;
    border-top: 1px solid #d8d8d7;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.4em;
    text-align: left;
}

th {
    font-weight: bold;
}

thead th {
    vertical-align: bottom;
}

colgroup + thead tr:first-child th,
colgroup + thead tr:first-child td,
thead:first-child tr:first-child th,
thead:first-child tr:first-child td {
    border-top: 0;
}

tbody + tbody {
    border-top: 2px solid #d8d8d7;
}

form {
    margin: 0 0 1.4em;
}

    form small {
        color: #999999;
    }

    form p {
        margin-bottom: 0.7em;
    }

    form br {
        display: none;
    }

fieldset {
    margin: 0 0 1.4em;
    padding: 0;
    border: none;
}

legend {
    font-weight: bold;
    display: block;
    width: 100%;
    margin: 0 0 0.7em;
    *margin-left: -7px;
    padding: 0;
    color: #323231;
    border: 0;
    white-space: normal;
}

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

input,
button,
select,
textarea {
    font-size: 100%;
    vertical-align: baseline;
    *vertical-align: middle;
    font-family: var(--rtc-font);
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button,
input {
    line-height: normal;
}

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

button,
select {
    text-transform: none;
}

label {
    display: block;
    margin-bottom: 0.175em;
    font-weight: bold;
}

    label input,
    label textarea,
    label select {
        display: block;
    }

    label small {
        font-weight: normal;
    }

input,
textarea,
select {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin-bottom: 0.35em;
    background-color: #ffffff;
    color: #4c4c4a;
    max-width: 100%;
}

input,
textarea {
    padding: 6px 8px;
    border: solid 1px #e5e5e5;
}

    input:-moz-placeholder,
    textarea:-moz-placeholder {
        color: #999999;
    }

    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        color: #999999;
    }

    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #999999;
    }

    input:hover,
    textarea:hover {
        border-color: #999999;
    }

[placeholder]:focus::-webkit-input-placeholder {
    color: transparent;
}

[placeholder]:focus::-moz-placeholder {
    color: transparent;
}

[placeholder]:focus::-ms-input-placeholder {
    color: transparent;
}

input[type="image"],
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 3px 0;
    *margin-top: 0;
    line-height: normal;
    cursor: pointer;
    border-radius: 0;
    border: 0 \9;
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    *width: 13px;
    *height: 13px;
}

input[type="image"] {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type="file"] {
    width: auto;
    padding: initial;
    line-height: initial;
    background-color: transparent;
    background-color: initial;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: none;
    width: auto;
    height: auto;
    cursor: pointer;
    *overflow: visible;
}

select,
input[type="file"] {
    padding: 4px 0;
    *margin-top: 4px;
    line-height: 28px;
}

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

select {
    background-color: #ffffff;
    font-size: 13px;
    font-size: 0.8125rem;
}

    select[multiple],
    select[size] {
        height: auto;
    }

textarea {
    resize: vertical;
    width: 100%;
    height: auto;
    overflow: auto;
    vertical-align: top;
}

input[type="hidden"] {
    display: none;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: #545454;
    color: #323231;
    outline: 0;
    outline: thin dotted \9;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* 
#### Navigation
*/

#searchsubmit {
    display: block;
    float: right;
    margin-top: 6px;
    background: none;
    color: #ffffff;
    border: 0;
    outline: none;
    cursor: pointer;
}

@media screen and (max-width: 723px) {

    #searchsubmit {
        display: block;
        float: left;
        margin-top: 6px;
        background: none;
        color: #ffffff;
        border: 0;
        outline: none;
        cursor: pointer;
        margin-left: 8px;
    }
}

.nav .fa-chevron-up {
    transition: all 0.5s ease;
}

.rtoate90 {
    transform: rotate(90deg);
}

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

    .nav > .pull-right {
        float: right;
    }

.navbar {
    margin: 0;
    background: #545454;
    color: #ffffff;
    overflow: hidden;
    *position: relative;
    *z-index: 2;
}

.lt-ie8 #main-nav a {
    background-color: #323231;
}

.navbar .nav {
    left: 0;
    display: block;
    margin: 0;
    font-family: var(--rtc-font);
    font-size: 22px;
    font-size: 1rem;
}

    .navbar .nav.pull-right {
        float: right;
        margin-right: 0;
    }

    .navbar .nav > li a {
        float: none;
        line-height: 1.2em;
        padding: 0.75em 15px;
        color: #ffffff;
        text-decoration: none;
        display: block;
        -webkit-transition: background-color 0.1s linear;
        transition: background-color 0.1s linear;
    }

@media only screen and (min-width: 45em) {
    #main-nav > ul > li > ul > li > a {
        max-width: 130px;
        font-size: 1rem;
    }
}


.navbar .nav > li.highlight > a {
    background-color: #e74c3c;
}

.navbar .nav > li a:focus,
.navbar .nav > li a:hover {
    color: #ffffff;
    text-decoration: none;
    text-shadow: none;
    background-color: #6c9726;
}

.navbar .nav > .current a,
.navbar .nav > .current a:hover,
.navbar .nav > .current a:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #545454;
}

.js .nav-collapse {
    clip: rect(0 0 0 0);
    max-height: 0;
    position: absolute;
    display: block;
    overflow: hidden;
    zoom: 1;
}

.nav-collapse.opened {
    max-height: 9999px;
}

.disable-pointer-events {
    pointer-events: none !important;
}

.nav-toggle {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    display: block;
    padding: 0.75em 15px;
    text-transform: uppercase;
    font-weight: bold;
    background: #545454;
    color: #fff;
    overflow: hidden;
}

    .nav-toggle:hover,
    .nav-toggle:focus,
    .nav-toggle:active {
        color: #fff;
        text-decoration: none;
    }

.toggle-icon {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: bottom;
    padding: 8px 10px;
    margin-right: 5px;
}

    .toggle-icon .icon-bar {
        display: block;
        width: 22px;
        height: 3px;
        background-color: #fff;
        border-radius: 3px;
    }

        .toggle-icon .icon-bar + .icon-bar {
            margin-top: 4px;
        }

.toggle-label {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 24px;
    font-size: 1rem;
    line-height: 33px;
}

#header-welcome {
    display: none;
}

/* Mobile */
@media not screen and (min-width: 45em) {

    .navbar.closed .nav-items {
        display: none;
    }

    .navbar .nav > li > ul.submenu {
        display: none;
    }

        .navbar .nav > li > ul.submenu.expanded {
            display: block;
        }

        .navbar .nav > li > ul.submenu > li a {
            padding-left: 2.5em;
        }

    .nav-container.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

        .nav-container.sticky .navbar {
            overflow: hidden;
        }
}

@media only screen and (max-width: 45em) {
    .navbar {
        background: #323231;
    }
}
/* Desktop */
@media only screen and (min-width: 45em) {
    #nav-toggle-sticky-space {
        display: none !important;
    }

    .navbar .nav {
        font-size: 15px;
        font-size: 0.9375rem;
        overflow: hidden;
    }

        .navbar .nav > li {
            display: inline;
        }

    .navbar {
        /*border-bottom: 6px solid #1d1d1d;*/
    }

        .navbar #main-nav {
            margin: 0 auto;
            max-width: 960px;
            margin-bottom: -1.2em;
        }

            .navbar #main-nav .nav {
                /*border-left: 1px solid #1d1d1d;
                border-right: 1px solid #545454;*/
            }

                .navbar #main-nav .nav > li {
                    float: left;
                    width: 15.8%;
                    text-align: center;
                }

                /*ke added*/
                .navbar #main-nav .grt-nav > li {
                    float: left;
                    width: 15.8%;
                    text-align: center;
                }

                    .navbar #main-nav .nav > li > a {
                        padding: 0.7em 5px 0.8em;
                        /*border-left: 1px solid #545454;
                        border-right: 1px solid #1d1d1d;*/
                    }

                .navbar #main-nav .grt-nav > li > a {
                    padding: 0.1em 5px 0.1em;
                    /*border-left: 1px solid #545454;
                        border-right: 1px solid #1d1d1d;*/
                 }

            .navbar #main-nav > ul > li.nav-search {
                width: 5%;
            }


    .lt-ie8 .navbar {
        border: none;
        margin-bottom: 3em;
    }

        .lt-ie8 .navbar #main-nav .nav {
            border: none;
        }


    .navbar .nav > li > ul.submenu {
        display: none;
        position: absolute;
        background: #323231;
        margin-left: 1px;
        box-shadow: 0px 5px 0.9375rem #333333;
        z-index: 1;
    }

    .navbar .nav > li:hover > ul.submenu {
        display: block !important;
    }

    .navbar .nav > li > ul.submenu > li a {
        padding-left: 1.2em;
        padding-right: 1.2em;
        text-align: left;
    }

    .navbar .nav > li > ul.submenu > li a {
        padding-left: 1.2em;
        padding-right: 1.2em;
        text-align: left;
    }

    .js .nav-collapse {
        position: static;
        overflow: hidden;
    }

        .js .nav-collapse.closed {
            max-height: none;
        }

    .nav-toggle {
        display: none;
    }

    #utility-nav {
        position: absolute;
        top: 45px;
        right: 0;
        width: 100%;
        text-align: center;
    }

        #utility-nav > .nav {
            margin: 0 auto;
            max-width: 960px;
            padding: 0 2.5%;
            text-align: right;
            text-transform: uppercase;
            font-size: 14px;
            font-size: 0.875rem;
            font-family: var(--rtc-font);
        }

            #utility-nav > .nav > li {
                display: inline;
                margin-left: 1em;
            }

                #utility-nav > .nav > li > a {
                    color: #323231;
                    display: inline;
                    padding: 0;
                }

                    #utility-nav > .nav > li > a:hover,
                    #utility-nav > .nav > li > a:focus {
                        background: transparent;
                        color: #1989ba;
                    }

    #header-member-nav {
        position: relative;
        top: 145px;
        right: 0;
        width: 100%;
        text-align: center;
        display: block;
    }

        #header-member-nav > .nav {
            margin: 0 auto;
            max-width: 960px;
            padding: 0 2.5%;
            text-align: right;
            font-size: 14px;
            font-size: 0.875rem;
            font-family: var(--rtc-font);
        }

            #header-member-nav > .nav > li {
                display: inline;
                margin-left: 1em;
                color: #000;
            }

                #header-member-nav > .nav > li > a {
                    color: #3ab1e5;
                    display: inline;
                    padding: 0;
                    font-weight: bold;
                }

                    #header-member-nav > .nav > li > a:hover,
                    #header-member-nav > .nav > li > a:focus {
                        background: transparent;
                        color: #1989ba;
                    }

    #header-welcome {
        display: block;
    }
}

@media only screen and (min-width: 55em) {
    .navbar .nav {
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (min-width: 60em) {
    .navbar .nav {
        font-size: 18px;
        font-size: 1.125rem;
    }
}
/* 

## Breadcrumbs

Breadcrumb navigation can be created by adding a nav element with a class of .breadcrumb, with an unordered list inside it. The "greater-than" signs in between each level are added via CSS; do not add them in the HTML.

```
<nav class="breadcrumb">
  <ul>
    <li><a href="">Top-Level Item</a></li>
    <li><a href="">Second-Level Item</a></li>
    <li>Current Page</li>
  </ul>
</nav>
```

*/
.breadcrumb {
    font-size: 12px;
    font-size: 0.75rem;
    color: #999996;
}

    .breadcrumb li {
        display: inline-block;
        margin-left: 0.35em;
    }

.lt-ie8 .breadcrumb li {
    display: inline;
}

.breadcrumb li:after {
    content: '\003E';
}

.breadcrumb li:first-child {
    margin-left: 0;
}

.breadcrumb li:last-child:after {
    content: '';
}

.breadcrumb li a {
    margin-right: 0.65em;
}
/*
#### Site Header
*/
.header-container {
    padding-top: 1em;
    padding-bottom: 1em;
}

#site-logo {
    float: left;
    max-width: 190px;
    width: 36%;
    margin-right: 4%;
}

#login-links {
    padding-right: 10px;
    font-size: 1rem;
}

@media screen and (min-width: 0em) and (max-width: 47.9375em) {
    #login-links {
        display: none;
    }
}

.header-ctas {
    float: right;
    width: 56%;
    margin-left: 4%;
    text-align: right;
}

    .header-ctas > .btn {
        display: block;
        padding: 13px 10px;
        margin-bottom: 6px;
    }

@media only screen and (min-width: 25em) {
    .header-ctas > .btn {
        padding: 18px 10px;
        font-size: 16px;
        font-size: 1rem;
    }
}

@media only screen and (min-width: 35em) {
    .header-ctas {
        margin-top: 0px;
        padding-top: 40px;
    }

        .header-ctas > .btn {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            padding: 7px 22px;
            font-size: 1rem;
            line-height: normal;
            border-bottom: 4px solid #2b6db6;
            min-width: 120px;
            margin-left: 10px;
        }

            .header-ctas > .btn:hover,
            .header-ctas > .btn:focus {
                border-bottom-color: #183c63;
            }

            .header-ctas > .btn:active {
                position: relative;
                border-bottom: none;
                top: 4px;
            }
}

@media only screen and (min-width: 45em) {
    #site-logo {
        max-width: none;
        width: auto;
        height: auto;
        position: relative;
        z-index: 1;
        margin-top: 10px;
        margin-bottom: 10px;
        max-height: 105px;
    }
}

@media only screen and (min-width: 48em) {
    .header-container {
        padding-top: 0px;
        padding-bottom: 0px;
        height: 125px;
        max-height: 125px;
    }
}
/*
## Page Layout

**Container**

The .container class will keep content confined to a maximum width. It can be used multiple times per page but a Container should never be nested inside another Container.

**Page Header**

The .page-header header contains the title of the page (h1) and breadcrumb, if applicable

**Page Content**

The .page-content div contains the rest of the content of the page aside from the Page Header. It can contain Columns, Page Sections, and/or other components.

**Page Section**

A .page-section section will divide the page into horizontal sections. Unlike Columns they do not reflow into side-by-side columns on larger screens.

```
<div class="container">

  <header class="page-header">
    <h1>Interior Page Title</h1>
    <nav class="breadcrumb">
      <ul>
        <li><a href="">Top-Level Section</a></li>
        <li><a href="">Second-Level Section</a></li>
        <li>Interior Page Title</li>
      </ul>
    </nav>
  </header>
  
  <div class="page-content">
    <section class="page-section">
      <h2 class="section-title">Section Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
    <section class="page-section">
      <h2 class="section-title">Section Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
  </div>
</div>
  
```
*/
.skip {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.container {
    margin: 0 auto;
    max-width: 960px;
    padding-left: 5%;
    padding-right: 5%;
    clear: both;
    *zoom: 1;
}

    .container:before,
    .container:after {
        display: table;
        content: " ";
    }

    .container:after {
        clear: both;
    }

#site-header {
    position: relative;
}

#site-header,
#site-main {
    background: #fff;
    *zoom: 1;
}

    #site-header:before,
    #site-main:before,
    #site-header:after,
    #site-main:after {
        display: table;
        content: " ";
    }

    #site-header:after,
    #site-main:after {
        clear: both;
    }

.page-header {
    padding: 1.4em 0 0;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

.page-section {
    *zoom: 1;
    margin-top: 1.4em;
    margin-top: 1.4rem;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

    .page-section:before,
    .page-section:after {
        display: table;
        content: " ";
    }

    .page-section:after {
        clear: both;
    }
/*
## Secondary (Sidebar) Sections

Sidebar (.col-secondary) columns often have sections of content such as a call-to-action, email signup, featured store item, etc. Each of these sections should go inside an aside with a class of .secondary-section.

The heading for the section should get a class of .secondary-heading.

```
<div class="col col-secondary">
  <aside class="secondary-section">
    <h2 class="secondary-heading">Name of Evergreen Campaign</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="btn" href="">Join the Movement</a>
  </aside>
</div>

```
*/
.secondary-section {
    font-size: 14px;
    font-size: 0.875rem;
    padding-bottom: 1.4em;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

    .secondary-section p:last-child,
    .secondary-section ul:last-child,
    .secondary-section ol:last-child {
        margin-bottom: 0;
    }

@media only screen and (min-width: 35em) {
    .secondary-section {
        float: left;
        display: inline;
        width: 48%;
        border-top: 1px solid #e5e5e5;
        border-bottom: none;
        padding-top: 1.4em;
        padding-bottom: 0;
    }

        .secondary-section:nth-child(odd) {
            margin-right: 2%;
        }

        .secondary-section:nth-child(even) {
            margin-left: 2%;
        }

    .secondary-heading {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (min-width: 48em) {
    .secondary-section {
        display: block;
        float: none;
        width: auto;
        margin-right: 0;
        margin-left: 0;
        border-bottom: 1px solid #e5e5e5;
        border-top: none;
        padding-top: 0;
        padding-bottom: 1.4em;
    }
}

@media only screen and (min-width: 64em) {
    .container,
    .navbar #main-nav,
    #utility-nav > .nav,
    #header-member-nav > .nav {
        max-width: 850px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (min-width: 1200px) {
    .container,
    .navbar #main-nav,
    #utility-nav > .nav,
    #header-member-nav > .nav {
        max-width: 1000px;
    }
}

@media only screen and (min-width: 1400px) {
    .container, .navbar #main-nav, #utility-nav > .nav, #header-member-nav > .nav {
        max-width: 1200px;
    }
}

@media screen and (max-width: 723px) {

    #s {
        width: 60%;
        margin-left: 15px;
        float: left;
    }
}

@media screen and (min-width: 724px) {
    #searchbar {
        max-width: 100%;
    }

    #s {
        width: 80%;
    }
}

@media screen and (min-width: 724px) and (max-width: 899px) {
    #main-nav > ul > li.nav-search > ul {
        right: 0;
    }
}

@media screen and (min-width: 900px) {

    #s {
        width: 70%;
    }
}

@media screen and (min-width: 1100px) {

    #s {
        width: 75%;
    }
}


@media only screen and (min-width: 1400px) {
    #searchbar {
        max-width: 100%;
    }

    #s {
        width: 82%;
    }
}

@media only screen and (min-width: 1800px) {
    #searchbar {
        max-width: 100%;
    }

    #s {
        width: 84%;
    }
}


@media only screen and (min-width: 45em) {

    #utility-nav > .nav {
        display: none;
    }

    #main-nav > ul > li.highlight > a > i {
        display: none;
    }
}

/*
#### Site Footer
*/
.footer-logo {
    height: 160px;
    max-height: 160px;
}


#site-footer {
    *zoom: 1;
    padding-bottom: 1.4em;
    color: #fff;
}

    #site-footer:before,
    #site-footer:after {
        display: table;
        content: " ";
    }

    #site-footer:after {
        clear: both;
    }

    #site-footer h1,
    #site-footer h2,
    #site-footer h3,
    #site-footer h4,
    #site-footer h5,
    #site-footer h6,
    #site-footer a {
        color: #fff;
    }

        #site-footer a:hover,
        #site-footer a:focus {
            color: #3ab1e5;
        }

            #site-footer a:hover.btn,
            #site-footer a:focus.btn {
                color: #fff;
            }

.footer-heading {
    font-size: 20px;
    font-size: 1.25rem;
}

.footer-extras {
    text-align: center;
    margin-top: 1.4em;
    margin-top: 1.4rem;
}

.footer-members {
    font-size: 24px;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.member-number {
    font-size: 56px;
    font-size: 3.5rem;
    font-family: var(--rtc-font);
}

#footer-map {
    margin-bottom: 14px;
}

#site-search {
    padding-top: 1.4em;
    padding-bottom: 1.4em;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-align: left;
}

.site-search {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 0 0;
}

#s {
    margin-bottom: 0;
}


@media only screen and (min-width: 35em) {
    .footer-section-members,
    .footer-section-movement {
        float: left;
        width: 50%;
    }

    .footer-section-members {
        margin-top: 85px;
    }
}

@media only screen and (min-width: 40em) {
    .footer-section-members {
        margin-top: 76px;
    }
}

@media only screen and (min-width: 64em) {
    .footer-extras {
        padding: 40px 0 10px;
    }

    .footer-extras-section {
        display: inline;
        float: left;
        width: 30.666666666666668%;
        margin-right: 0.6666666666666666%;
        margin-left: 0.6666666666666666%;
    }

        .footer-extras-section:first-of-type {
            margin-right: 2%;
            margin-left: 0;
        }

        .footer-extras-section:nth-of-type(2) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .footer-extras-section:last-of-type {
            margin-left: 2%;
            margin-right: 0;
            float: right;
        }
}

#footer-sitemap {
    *zoom: 1;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

    #footer-sitemap:before,
    #footer-sitemap:after {
        display: table;
        content: " ";
    }

    #footer-sitemap:after {
        clear: both;
    }

    #footer-sitemap ul {
        line-height: 1.2em;
    }

    #footer-sitemap > ul {
        font-weight: bold;
        font-size: 18px;
        font-size: 1.125rem;
    }

        #footer-sitemap > ul > li {
            width: 48%;
            margin-left: 4%;
            margin-bottom: 1.4em;
            margin-bottom: 1.4rem;
            float: left;
        }

            #footer-sitemap > ul > li > ul {
                font-weight: normal;
                font-size: 14px;
                font-size: 0.875rem;
                margin-top: 0.25em;
            }

                #footer-sitemap > ul > li > ul > li {
                    margin-bottom: 0.25em;
                }

            #footer-sitemap > ul > li a {
                display: block;
                padding: 3px 0;
            }

            #footer-sitemap > ul > li:nth-of-type(2n+1) {
                margin-left: 0;
                clear: left;
            }

@media only screen and (min-width: 35em) {
    #footer-sitemap > ul > li {
        width: 30%;
        margin-left: 5%;
    }

        #footer-sitemap > ul > li:nth-of-type(2n+1) {
            margin-left: 5%;
            clear: none;
        }

        #footer-sitemap > ul > li:nth-of-type(3n+1) {
            margin-left: 0;
            clear: left;
        }
}

@media only screen and (min-width: 55em) {
    #footer-sitemap > ul > li {
        width: 16%;
        margin-left: 5%;
    }

        #footer-sitemap > ul > li:nth-of-type(3n+1) {
            margin-left: 5%;
            clear: none;
        }

        #footer-sitemap > ul > li:nth-of-type(5n+1) {
            margin-left: 0;
            clear: left;
        }
}

.footer-additional {
    text-align: center;
    color: #ffffff;
}

    .footer-additional > ul > li {
        margin-bottom: 0.25em;
    }

#site-footer .footer-additional.loginstatus a {
    color: #3ab1e5;
    font-weight: bold;
}

#site-footer .footer-additional.loginstatus > ul > li {
    border: none;
}

@media only screen and (min-width: 25em) {
    .footer-additional > ul > li {
        display: inline-block;
        line-height: 1em;
        border-right: 1px solid #fff;
        padding-right: 14px;
        margin-right: 8px;
        margin-bottom: 0.25em;
    }

        .footer-additional > ul > li:last-child {
            border: none;
            padding-right: 0;
            margin-right: 0;
        }
}

.copyright {
    text-align: center;
}
/*
## Columns

Content can be divided into columns. Your options are:

- Primary and Secondary columns
- 1/3 + 2/3 columns
- Half-page-width columns
- Third-page-width columns
- Fourth-page-width columns
- Sixth-page-width columns



Each column div should have the class .col as well as the class for the type of column it is.

Each grouping of .col-half and .col-third columns must exist in a unique containing div that has no other child elements. You can use a div with a class of .row for this if a containing div does not already exist around the columns.

All columns will stack at narrower screen sizes and become side-by-side columns at wider screen sizes.

**Primary and Secondary**

These two classes go together to form a wide main column and narrower sidebar.

```
<div class="row">
  <div class="col col-primary">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-secondary">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
```
**1/3 + 2/3**

These two classes go together to form a wide right column and narrower left Column.

```
<div class="row">
  <div class="col col-onethirdprimary">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-twothirdsecondary">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
```

**Half**

Two columns within a containing div, each with the .col-half class, will show up as half-width columns.

```
<div class="row">
  <div class="col col-half">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-half">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
```
**Third**

Three columns within a containing div, each with the .col-third class, will show up as third-width columns.

```
<div class="row">
  <div class="col col-third">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-third">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-third">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
```

**Fourth**

Four columns within a containing div, each with the .col-fourth class, will show up as fourth-width columns.

```
<div class="row">
  <div class="col col-fourth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-fourth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-fourth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-fourth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
```
**Sixth**

Six columns within a containing div, each with the .col-sixth class, will show up as sixth-width columns.

```
<div class="row">
  <div class="col col-sixth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-sixth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-sixth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-sixth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-sixth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="col col-sixth">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
```
*/
/*.col {
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}*/

.row {
    *zoom: 1;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

    .row:before,
    .row:after {
        display: table;
        content: " ";
    }

    .row:after {
        clear: both;
    }

@media only screen and (min-width: 30em) {
    .col-third {
        display: inline;
        float: left;
        width: 30.666666666666668%;
        margin-right: 0.6666666666666666%;
        margin-left: 0.6666666666666666%;
    }

        .col-third:first-of-type {
            margin-right: 2%;
            margin-left: 0;
        }

        .col-third:nth-of-type(2) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .col-third:last-of-type {
            margin-left: 2%;
            margin-right: 0;
            float: right;
        }
}



@media only screen and (min-width: 30em) {
    .col-footerlogo {
        display: inline-block;
        float: left;
        width: 28%;
        margin-right: 2%;
        margin-left: 2%;
        text-align: center
    }

        .col-footerlogo:first-of-type {
            margin-right: 1%;
            margin-left: 5%;
        }

        .col-footerlogo:nth-of-type(2) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .col-footerlogo:last-of-type {
            margin-left: 1%;
            margin-right: 5%;
            float: right;
            text-align: center;
        }
}

@media only screen and (max-width: 29em) {
    .col-footercontact {
        text-align: center
    }

        .col-footercontact:first-of-type {
            margin-top: 4%;
        }

        .col-footercontact:nth-of-type(2) {
            margin-right: 2%;
            margin-left: 2%;
            margin-top: 4%
        }

        .col-footercontact:last-of-type {
            margin-right: 2%;
            margin-left: 2%;
            margin-top: 4%;
            margin-bottom: 0%;
        }
}

@media only screen and (max-width: 29em) {
    .col-footerlogo {
        text-align: center
    }

        .col-footerlogo:first-of-type {
            margin-top: 2%;
        }

        .col-footerlogo:nth-of-type(2) {
            margin-right: 2%;
            margin-left: 2%;
            margin-top: 8%
        }

        .col-footerlogo:last-of-type {
            margin-right: 2%;
            margin-left: 2%;
            margin-top: 8%;
            margin-bottom: 4%;
        }
}

@media only screen and (min-width: 30em) {
    .col-footercontact {
        float: left;
        width: 28%;
        max-width: 28%;
        margin-right: 2%;
        margin-left: 2%;
        text-align: center
    }

        .col-footercontact:first-of-type {
            margin-right: 1%;
            margin-left: 5%;
            margin-top: 4%;
            display: inline-block;
        }

        .col-footercontact:nth-of-type(2) {
            margin-right: 2%;
            margin-left: 2%;
            margin-top: 4%
        }

        .col-footercontact:last-of-type {
            margin-left: 1%;
            margin-right: 5%;
            float: right;
            margin-top: 4%;
            text-align: center;
        }
}

@media only screen and (min-width: 30em) {
    .col-fourth {
        display: inline;
        float: left;
        width: 22%;
        margin-right: 0.6666666666666666%;
        margin-left: 0.6666666666666666%;
    }

        .col-fourth:first-of-type {
            margin-right: 2%;
            margin-left: 0;
        }

        .col-fourth:nth-of-type(2) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .col-fourth:nth-of-type(3) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .col-fourth:last-of-type {
            margin-left: 2%;
            margin-right: 0;
            float: right;
        }
}

@media only screen and (min-width: 30em) {
    .col-sixth {
        display: inline;
        float: left;
        width: 13%;
        margin-right: 0.6666666666666666%;
        margin-left: 0.6666666666666666%;
    }

        .col-sixth:first-of-type {
            margin-right: 2%;
            margin-left: 0;
        }

        .col-sixth:nth-of-type(2) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .col-sixth:nth-of-type(3) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .col-sixth:nth-of-type(4) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .col-sixth:nth-of-type(5) {
            margin-right: 2%;
            margin-left: 2%;
        }

        .col-sixth:last-of-type {
            margin-left: 2%;
            margin-right: 0;
            float: right;
        }
}

@media only screen and (min-width: 48em) {
    .col-primary {
        display: inline;
        float: left;
        width: 73%;
        margin-right: 2%;
    }

    .col-secondary {
        display: inline;
        float: left;
        width: 23%;
        margin-left: 2%;
        float: right;
    }



    .col-half {
        display: inline;
        float: left;
        width: 48%;
        margin-right: 1%;
        margin-left: 1%;
    }

        .col-half:first-of-type {
            margin-right: 2%;
            margin-left: 0;
        }

        .col-half:last-of-type {
            margin-left: 2%;
            margin-right: 0;
            float: right;
        }
}

@media only screen and (min-width: 48em) {
    .col-onethirdprimary {
        display: inline;
        float: left;
        width: 23%;
        margin-right: 2%;
        overflow: hidden;
    }

    .col-twothirdsecondary {
        display: inline;
        float: left;
        width: 73%;
        margin-left: 2%;
        float: right;
    }
}
/*
## Type Classes

**Meta**

For blog "posted by" lines, or any other meta information about an article or item.
```
<h1 class="article-title">This Is The Post Title</h1>
<p class="meta">Posted by <a href="">Author's Name</a> in <a href="">Category Name</a> tagged with <a href="">trail building</a>, <a href="">trail use</a>, <a href="">new trail</a></p>
```

**Caption**

Image captions. Can be applied to the figcaption element if inside a figure, but not required.
```
<figure>
  <img src="http://placekitten.com/200/150" alt="">
  <figcaption class="caption">Quis nostrud exercitation ullamco</figcaption>
</figure>
```

**Lead**

Large text used to introduce a page, section, or post.
```
<p class="lead">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

**Page Lead**

A special kind of lead used as introductory text for a page. Centered and green. Should only be used a maximum of once per page.
```
<p class="page-lead">Trails Create Healthier Places for Healthier People.</p>
```

**Section Title**

If a page is divided into .page-section sections, the section titles have a class of .section-title.
```
<section class="page-section">
  <h2 class="section-title">Section Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</section>
```
*/
.meta {
    color: #999999;
    font-size: 14px;
    font-size: 0.875rem;
}

.caption {
    color: #999999;
    font-size: 10px;
    font-size: 0.625rem;
    line-height: 1.25em;
    text-align: right;
}

.lead {
    font-size: 24px;
    font-size: 1.5rem;
    font-family: var(--rtc-font);
}

.page-lead {
    font-size: 24px;
    font-size: 1.5rem;
    font-family: var(--rtc-font);
    font-size: 30px;
    font-size: 1.875rem;
    color: #6c9726;
    text-align: center;
    margin: 1em 0;
}

.section-title {
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

.list-plain {
    list-style: none;
    padding-left: 0;
}

.list-extra > li {
    margin-bottom: 0.7em;
}

    .list-extra > li > span {
        display: block;
    }

.list-icons > li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.list-stats {
    list-style: none;
    padding-left: 0;
    *zoom: 1;
}

    .list-stats:before,
    .list-stats:after {
        display: table;
        content: " ";
    }

    .list-stats:after {
        clear: both;
    }

.box .list-stats:last-child {
    margin-bottom: 0;
}

.list-stats li {
    margin-bottom: .5em;
}

.stat-value {
    font-family: var(--rtc-font);
    font-size: 45px;
    font-size: 2.8125rem;
    line-height: 1.2em;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: baseline;
}

@media only screen and (min-width: 35em) {
    .list-stats li {
        width: 48%;
        margin-right: 2%;
        float: left;
    }
}

.blockquote p,
.blockquote .quote {
    margin: 0 0 0.35em;
}

    .blockquote .quote:before {
        content: '\201C';
    }

    .blockquote .quote:after {
        content: '\201D';
    }

.blockquote cite,
.blockquote .attr {
    display: block;
    margin: 0;
}

    .blockquote cite:before,
    .blockquote .attr:before {
        content: '\2013\00A0';
    }
/*
## Pagination

Pagination is enclosed in a nav element with a class of .pagination.

Pagination on a page that lists multiple articles should also be given a class of .listing-pagination.
```
<nav class="pagination listing-pagination">
  <p>Page 1 of 4</p>
  <ul>
    <li><strong>1</strong></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
  </ul>
</nav>
```
*/
.pagination {
    *zoom: 1;
    padding: 0.7em 0;
}

    .pagination:before,
    .pagination:after {
        display: table;
        content: " ";
    }

    .pagination:after {
        clear: both;
    }

    .pagination > p {
        margin-bottom: 0.5em;
    }

    .pagination > ul {
        margin: 0;
        list-style: none;
    }

        .pagination > ul > li {
            display: inline;
        }

    .pagination .next,
    .pagination .prev {
        width: 48%;
    }

    .pagination .next {
        float: right;
        margin-left: 1%;
        text-align: right;
    }

    .pagination .prev {
        float: left;
        margin-right: 1%;
    }

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

    .listing-pagination strong,
    .listing-pagination a {
        display: inline-block;
        padding: 0.25em 0.75em;
    }

    .listing-pagination a {
        border: 1px solid #e5e5e5;
        margin: 0 2px;
    }

        .listing-pagination a:hover,
        .listing-pagination a:active,
        .listing-pagination a:focus {
            border-color: #cccccc;
            text-decoration: none;
        }
/*
## Forms

**Form Items**

The .form-item class wraps around a form element and its label (and help text or error messages if applicable).

**Text Input Sizes**

The .input-email and .input-zip classes are used to provide the right size inputs for these types of data.
```
<div class="form-item">
  <label for="join-email">Email</label>
  <input type="email" class="input-email" id="join-email" size="30" />
</div>
<div class="form-item">
  <label for="join-zip">Zip Code</label>
  <input type="text" class="input-zip" id="join-zip" />
</div>
```

**Checkboxes and Radio Buttons**

Labels for checkbox and radio inputs should enclose the input and be given a class of .checkbox or .radio, respectively. Form Item divs are not needed for these unless help text or error messages are also included.
```
<fieldset>
  <legend>Published By:</legend>
  <label class="radio"><input type="radio" name="published" value="All" /> All</label>
  <label class="radio"><input type="radio" name="published" value="RTC" /> RTC</label>
  <label class="radio"><input type="radio" name="published" value="Others" /> Others</label>
</fieldset>
<fieldset>
  <legend>Resource Type:</legend>
  <label class="checkbox"><input type="checkbox" name="type" value="All" /> All</label>
  <label class="checkbox"><input type="checkbox" name="type" value="Case Study" /> Case Study</label>
  <label class="checkbox"><input type="checkbox" name="type" value="Fact Sheet" /> Fact Sheet</label>
  <label class="checkbox"><input type="checkbox" name="type" value="Manual" /> Manual</label>
  <label class="checkbox"><input type="checkbox" name="type" value="Plan" /> Plan</label>
  <label class="checkbox"><input type="checkbox" name="type" value="Report" /> Report</label>
  <label class="checkbox"><input type="checkbox" name="type" value="Webinar" /> Webinar</label>
</fieldset>
```

**Banner Forms**

Some forms take the appearance of banners that extend the full width of the window, such as Join The Movement or Find Trails. You can create these by enclosing the form in a div with a class of .container, then in another div or aside with a class of .form-banner.
```
<aside class="form-banner">
  <div class="container">
    <form>
      <div class="form-item">
        <label for="join-email">Email</label>
        <input type="email" class="input-email" id="join-email" size="30" />
      </div>
      <div class="form-item">
        <label for="join-zip">Zip Code</label>
        <input type="text" class="input-zip" id="join-zip" />
      </div>
      <input type="submit" class="btn" value="Join" />
    </form>
  </div>
</aside>
```

*/
form .btn {
    margin-bottom: 0;
}

.radio,
.checkbox {
    padding-left: 18px;
    font-weight: normal;
}

    .radio input[type="radio"],
    .checkbox input[type="checkbox"] {
        float: left;
        margin-left: -18px;
    }

.form-item {
    margin-bottom: 1em;
}

.input-email {
    max-width: 15em;
}

.input-zip {
    max-width: 6em;
}

.email-signup-form:last-child,
.search-form:last-child {
    margin-bottom: 0;
}

.email-signup-form .form-item,
.search-form .form-item {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin-right: 10px;
    max-width: 100%;
}

.form-banner form {
    margin-bottom: 0;
}

.form-banner .btn {
    font-size: 18px;
    font-size: 1.125rem;
}

@media only screen and (min-width: 25em) {
    .form-banner {
        text-align: center;
    }

        .form-banner form {
            text-align: left;
            display: inline-block;
        }

        .form-banner .form-item {
            float: left;
            margin-bottom: 0;
        }

        .form-banner input {
            padding: 8px 8px 7px;
        }

            .form-banner input[type="submit"] {
                float: right;
                padding: 9px 15px;
                margin-top: 1.4em;
            }

            .form-banner input[type="button"] {
                float: right;
                margin-top: 1.4em;
                padding: 9px 15px;
            }
}

@media only screen and (min-width: 35em) {
    .form-banner .form-item {
        margin-right: 12px;
    }

    .lt-ie9 .form-banner .email-signup-form {
        width: 830px;
    }
}
/*
## Image Classes

**Circles**

An image can be made into a circle by giving it a class of .circle.

```
<img class="circle" src="http://placekitten.com/100/100" alt="">
```

**Image Floating and Centering**

Images can be given classes to float them left or right, or to center them. Images that are floated right or left should be placed in the HTML above the text that they are to appear beside. Text will not wrap around centered images.
```
<div class="page-content">

  <img class="image-left" src="http://placekitten.com/150/100" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  <img class="image-right" src="http://placekitten.com/150/100" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  <img class="image-center" src="http://placekitten.com/150/100" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
```
*/
.circle > img,
.circle {
    border-radius: 100%;
}

figure {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    max-width: 100%;
}

.teaser-featured > figure.teaser-figure {
    display: table;
}

    .teaser-featured > figure.teaser-figure > figcaption {
        display: table-caption;
        caption-side: bottom;
    }

article figure,
.page-content figure,
article img,
.page-content img {
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

    article figure > img,
    .page-content figure > img {
        margin-bottom: 0.35em;
    }

.image-left,
.image-right {
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}
    /* jcm - umbraco rte was adding style tags to the images.  need to override the height it added */
    .image-left > img,
    .image-right > img,
    .image-center > img {
        height: auto;
    }

figure.article-figure.image-center {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.image-left {
    display: block;
    max-width: 100%;
}

.image-right {
    display: block;
    max-width: 100%;
}

@media only screen and (min-width: 48em) {
    .image-left {
        float: left;
        margin-right: 2.5%;
        max-width: 50%;
    }

    .image-right {
        float: right;
        margin-left: 2.5%;
        max-width: 50%;
    }
}

.image-center > img,
.image-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}


[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-envelope:before {
    content: "\e600";
}

.icon {
    font-style: normal;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    background: url(/images/rtc/iconsprite.png) no-repeat;
}

.lt-ie8 .icon {
    display: block;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-download:before {
    content: "\e026";
}

.glyphicon-user:before {
    content: "\E008";
}

.glyphicon-cog:before {
    content: "\e019";
}

@media (-webkit-min-device-pixel-ratio: 1.3), screen and (min-resolution: 1.3dppx), screen and (min-resolution: 125dpi) {
    .icon {
        /*background-image: url(/images/rtc/iconsprite@2x.png);*/
        background-size: 500px 340px;
    }
}

.icon-expand {
    width: 33px;
    height: 33px;
    background-position: -6px -79px;
}

.icon-collapse {
    width: 33px;
    height: 33px;
    background-position: -68px -79px;
}

.icon-more {
    width: 33px;
    height: 33px;
    background-position: -131px -79px;
}

.icon-social,
.icon-social-footer {
    width: 41px;
    height: 41px;
    margin: 0 5px 10px 0;
}

.icon-fb {
    background-position: -196px -79px;
}

.icon-tw {
    background-position: -256px -79px;
}

.icon-ig {
    background-position: -317px -79px;
}

.icon-yt {
    background-position: -379px -79px;
}

.icon-li {
    background-position: -440px -79px;
}

@media only screen and (min-width: 25em) {
    .icon-social-footer {
        width: 55px;
        height: 55px;
        margin: 0 2px 10px 0;
    }

        .icon-social-footer.icon-fb {
            background-position: -195px -4px;
        }

        .icon-social-footer.icon-tw {
            background-position: -256px -4px;
        }

        .icon-social-footer.icon-ig {
            background-position: -317px -4px;
        }

        .icon-social-footer.icon-yt {
            background-position: -379px -4px;
        }

        .icon-social-footer.icon-li {
            background-position: -440px -4px;
        }
}

.icon-social-overlay {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 2px;
    right: 2px;
}

.icon-fb-overlay {
    background-position: -51px -9px;
}

.icon-ig-overlay {
    background-position: -6px -9px;
}

.icon-pn-overlay {
    background-position: -121px -7px;
}

.icon-file-large {
    width: 40px;
    height: 48px;
}

.icon-lg-pdf {
    background-position: -5px -186px;
}

.icon-lg-doc {
    background-position: -102px -186px;
}

.icon-lg-xls {
    background-position: -52px -186px;
}

.icon-download-lg {
    width: 26px;
    height: 26px;
    background-position: -195px -148px;
}

.icon-download-sm {
    width: 18px;
    height: 18px;
    background-position: -226px -148px;
}

.icon-close {
    width: 18px;
    height: 18px;
    background-position: -247px -148px;
}

.icon-stat {
    width: 31px;
    height: 31px;
    vertical-align: baseline;
}

.icon-stat-total {
    background-position: -198px -185px;
}

.icon-stat-potential {
    background-position: -317px -185px;
}

.icon-stat-projects {
    background-position: -255px -185px;
}

.icon-stat-miles {
    background-position: -378px -185px;
}

.icon-stat-funding {
    background-position: -439px -185px;
}

.browsehappy {
    margin: 0;
    background: #FFFF99;
    color: #323231;
    padding: 0.5em 2.5%;
}
/*
## Boxes

A div or other containing element can be given a class of .box to set it aside from the other content on the page.
```
<div class="box">
  <h2>Sign Up for Early Warnings</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam mi ligula, malesuada quis quam sit amet, commodo egestas felis.</p>
</div>
```
*/
.box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em 1.4em;
    background: #e5e5e5;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
    display: block;
}

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

   .article .box p {
        margin-bottom: 0;
    }
/* 
## Buttons

All buttons should be given a class of .btn. These "buttons" could be links, submit inputs, or button elements.

Each button can also optionally be given a class of .btn-primary to make it blue, and/or .btn-cta to give it a call-to-action style. It can also be given an optional class to determine its size.

Please consider the balance of items on the entire page when applying classes like .btn-primary or .btn-cta. Too much color can detract from reader focus. Also consider button sizes relative to the rest of the elements on the page.

```
<a class="btn" href="">Button</a>
<a class="btn btn-primary" href="">Primary Button</a>
<a class="btn btn-primary btn-cta" href="">Primary CTA Button</a>
<a class="btn btn-large btn-primary" href="">Large Primary Button</a>
<a class="btn btn-large btn-primary btn-cta" href="">Large Primary CTA Button</a>
<a class="btn btn-cta" href="">CTA Button</a>
<a class="btn btn-mini" href="">Mini Button</a>
<a class="btn btn-small" href="">Small Button</a>
<a class="btn btn-large" href="">Large Button</a>
<a class="btn btn-extlarge" href="">Extra Large Button</a>
<a class="btn btn-primary-black-outline" href="">Primary Black Outline Button</a>
<a class="btn btn-primary-green-outline" href="">Primary Green Outline Button</a>
<a class="btn btn-primary-navy-outline" href="">Primary Navy Outline Button</a>
<a class="btn btn-primary-azure-outline" href="">Primary Azure Outline Button</a>
<a class="btn btn-primary-green" href="">Primary Green Button</a>
<a class="btn btn-primary-red" href="">Primary Red Button</a>
```

**Twin Buttons**

Two Buttons that are placed together each get a class of .btn-twin.
```
<a class="btn btn-primary btn-large btn-cta btn-twin" href="">Join Now</a>
<a class="btn btn-primary btn-large btn-cta btn-twin" href="">Renew</a>

```

**Link-Style Buttons**

If you need to make a button element take the appearance of a plain link, you can give it the .btn-link class.
```
<button class="btn-link">Perform an Action on This Page</button>
```
*/
.btn {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 9px 15px;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
    font-family: var(--rtc-font);
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1em;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    background-color: #999999;
    border-radius: 5px;
    cursor: pointer;
    *margin-left: .3em;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

    .btn:hover,
    .btn:focus {
        color: #ffffff;
        background-color: #545454;
        text-decoration: none;
    }

    .btn:hover,
    .btn:focus {
        background-position: 0 -15px;
    }

    .btn small {
        font-weight: normal;
        line-height: 1;
    }

.btn-cta {
    border-bottom: 4px solid #323231;
}

    .btn-cta:hover,
    .btn-cta:focus {
        border-bottom-color: #000000;
    }

    .btn-cta:active {
        position: relative;
        border-bottom: none;
        top: 4px;
    }

.btn-primary {
    background-color: #3ab1e5;
    border-color: #2b6db6;
}

    .btn-primary:hover,
    .btn-primary:focus {
        color: #ffffff;
        background-color: #2b6db6;
    }
/* Used for development focused Hero modules. This turns the larger priary button style into a red button. */

.btn-primary-red {
    background-color: #E74C3C !important;
    border-color: #a80000 !important;
}

    .btn-primary-red:hover,
    .btn-primary-red:focus {
        color: #ffffff;
        background-color: #cf0000 !important;
    }

.btn-primary-black-outline {
    color: #ffffff !important;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    border: 2px solid black;
    background-color: white !important;
}

    .btn-primary-black-outline:hover,
    .btn-primary-black-outline:focus {
        color: #ffffff !important;
        background-color: #7bc141 !important;
        text-shadow: none;
        border: 2px solid #7bc141 !important;
    }

.btn-primary-green-outline {
    color: #7bc141 !important;
    border: 2px solid #7bc141 !important;
    background-color: white !important;
}

    .btn-primary-green-outline:hover,
    .btn-primary-green-outline:focus {
        color: #ffffff !important;
        background-color: #7bc141 !important;
    }

.btn-primary-navy-outline {
    color: #324766 !important;
    border: 2px solid #324766 !important;
    background-color: white !important;
}

    .btn-primary-navy-outline:hover,
    .btn-primary-navy-outline:focus {
        color: #ffffff !important;
        background-color: #324766 !important;
        border: none;
    }

.btn-primary-azure-outline {
    color: #3ab1e5 !important;
    border: 2px solid #3ab1e5 !important;
    background-color: white !important;
}

    .btn-primary-azure-outline:hover,
    .btn-primary-azure-outline:focus {
        color: #ffffff !important;
        background-color: #3ab1e5 !important;
        border: none;
    }

.btn-primary-green {
    color: #ffffff !important;
    background-color: #7bc141 !important;
}

.btn-primary-green:hover,
.btn-primary-green:focus {
    color: #ffffff !important;
    background-color: #194b26 !important;
}

.btn-primary-strong-red {
    color: #ffffff !important;
    background-color: #c51f30 !important;
}

    .btn-primary-strong-red:hover,
    .btn-primary-strong-red:focus {
        color: #ffffff !important;
        background-color: #8e2130 !important;
    }

.btn-disabled {
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
    cursor: default;
}

.btn-extlarge {
    padding: 19px 32px;
    font-size: 20px;
    font-size: 1.25rem;
    border-radius: 6px;
}

.btn-large {
    padding: 11px 22px;
    font-size: 16px;
    font-size: 1rem;
    line-height: normal;
}

    .btn-large.btn-cta {
        font-size: 18px;
        font-size: 1.125rem;
    }

.btn-small {
    padding: 6px 10px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 16px;
}

.btn-mini {
    padding: 3px 5px;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 14px;
}

.btn-twin {
    width: 45%;
}

    .btn-twin:first-of-type {
        margin-right: 2.5%;
    }

@media only screen and (min-width: 70em) {
    .btn-twin {
        width: 40%;
    }
}

.btn-link {
    border: none;
    background: transparent;
    padding: 0;
    -webkit-appearance: none;
    display: inline;
    color: #3ab1e5;
}

    .btn-link:hover,
    .btn-link:focus {
        color: #1989ba;
    }

.btn a {
    font-family: var(--rtc-font);
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1em;
    color: #ffffff;
}

.btn-primary a {
    background-color: #3ab1e5;
}



.btn-mini a {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 14px;
}

.btn-small a {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 16px;
}

.btn-large a {
    font-size: 16px;
    font-size: 1rem;
    line-height: normal;
}

.btn-extlarge a {
    font-size: 20px;
    font-size: 1.25rem;
    border-radius: 6px;
}

/*
#### Find Trail Form
*/
.banner-findtrail {
    background: #e5e5e5;
    padding: 1.4em 0;
    text-align: center;
}

#form-findtrail input[type="text"] {
    width: 100%;
}

.lt-ie9 .banner-findtrail #form-findtrail {
    width: 450px;
}

.findtrail-or {
    text-transform: uppercase;
    font-size: 20px;
    font-size: 1.25rem;
}

.banner-findtrail .findtrail-or {
    text-align: center;
    font-size: 24px;
    font-size: 1.5rem;
}

.logo-traillink {
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    background: url(/images/rtc/iconsprite.png) no-repeat 0 0;
    background-position: -4px -133px;
    height: 36px;
    width: 156px;
    vertical-align: middle;
    margin: .5em auto 1em;
}

@media (-webkit-min-device-pixel-ratio: 1.3), screen and (min-resolution: 1.3dppx), screen and (min-resolution: 125dpi) {
    .logo-traillink {
        background-image: url(/images/rtc/iconsprite@2x.png);
        background-size: 500px 340px;
    }
}

@media only screen and (min-width: 25em) {
    .banner-findtrail .findtrail-or {
        float: left;
        margin: 27px 10px 0;
    }
}

@media only screen and (min-width: 35em) {
    .banner-findtrail #form-findtrail #trail-location {
        width: 200px;
    }

    .banner-findtrail #form-findtrail #trail-keyword {
        width: 200px;
    }

    .banner-findtrail .findtrail-or {
        margin: 27px 18px 0 6px;
    }

    .logo-traillink {
        display: inline-block;
        margin: 0 0 0 .25em;
    }
}

@media only screen and (min-width: 50em) {
    .banner-findtrail #form-findtrail #trail-location {
        width: 212px;
    }

    .banner-findtrail #form-findtrail #trail-keyword {
        width: 332px;
    }
}
/*
## Articles

All articles such as Blog posts and Resource Library documents should use the article element, along with their appropriate classes.

**Excerpts**

Small excerpts, such as on the Home page, get a class of .excerpt. Titles within excerpts get a class of .excerpt-title.

```
<aside class="col home-col">
  <h2><a href="">Blog</a></h2>
  <div class="blog-excerpts">
    <article class="excerpt">
      <h3 class="excerpt-title"><a href="">Title of the Blog Post, It Could Be Rather Long Like This</a></h3>
      <p class="meta">3/20/14</p>
    </article>
    <article class="excerpt">
      <h3 class="excerpt-title"><a href="">Title of the Blog Post, It Could Be Rather Long Like This</a></h3>
      <p class="meta">3/20/14</p>
    </article>
    <article class="excerpt">
      <h3 class="excerpt-title"><a href="">Title of the Blog Post, It Could Be Rather Long Like This</a></h3>
      <p class="meta">3/20/14</p>
    </article>
  </div>
</aside>
```

**Teasers**

Teasers, such as on the Blog landing page, get a class of .article-teaser. Titles within teasers get a class of .teaser-title. Figures (image + caption) within teasers get a class of .teaser-figure. Resource Libary teasers get a different class (see Resource Library section of this document).

The first teaser on the Blog landing page has a special class of .teaser-featured in addition to the .article-teaser class.

```
<article class="article-teaser teaser-featured">
  <h2 class="teaser-title"><a href="blog-single.html">This Is The Featured Post Title</a></h2>
  <p class="meta">Posted by <a href="">Author's Name</a> in <a href="">Category Name</a> tagged with <a href="">trail building</a>, <a href="">trail use</a>, <a href="">new trail</a></p>
  <figure class="teaser-figure">
    <img src="http://placekitten.com/350/250" alt="">
    <figcaption class="caption">In voluptate velit esse cillum dolore eu fugiat</figcaption>
  </figure>
  <div class="teaser-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <a class="btn btn-large btn-primary" href="">Full Story</a>
  </div>
</article>

<article class="article-teaser">
  <figure class="teaser-figure">
    <img src="http://placekitten.com/300/200" alt="">
    <figcaption class="caption">In voluptate velit esse cillum dolore eu fugiat</figcaption>
  </figure>
  <div class="teaser-body">
    <h2 class="teaser-title"><a href="blog-single.html">This Is a Post Title</a></h2>
    <p class="meta">Posted by <a href="">Author's Name</a> in <a href="">Category Name</a> tagged with <a href="">trail building</a>, <a href="">trail use</a>, <a href="">new trail</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</article>

```

**Full Articles**

Full articles (blog or resource) get a class of .article. The title (h1) for a full article gets a class of .article-title.

Full blog posts can contain a header element which includes the title, any meta information such as author or post date, and the main image for the post. They can also contain a footer element which includes a bio of the author, with a class of .article-author. The author's photo should be given a class of .author-photo and be placed within .article-author, before the bio paragraph.

Each area of content below the main content of the article that is related to the article itself (such as the author bio, post comments, and related posts) gets a class of .article-bottom.

```
<article class="article">

  <header>
    <h1 class="article-title">This Is The Post Title</h1>
    <p class="meta">Posted by <a href="">Author's Name</a> in <a href="">Category Name</a> tagged with <a href="">trail building</a>, <a href="">trail use</a>, <a href="">new trail</a></p>
    <figure class="article-figure">
      <img src="http://placekitten.com/880/250" alt="">
      <figcaption class="caption">In voluptate velit esse cillum dolore eu fugiat</figcaption>
    </figure>
  </header>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  <footer>
    <div class="article-author article-bottom">
      <img class="author-photo" src="http://placekitten.com/80/80" alt="">
      <p>Author bio paragraph duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </footer>
  
</article>

```

*/
.excerpt {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
    clear: both;
}

.excerpt-title {
    font-size: 18px;
    font-size: 1.125rem;
    font-family: var(--rtc-font);
}

.article-teaser {
    padding-bottom: 1.4em;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
    *zoom: 1;
}

    .article-teaser:before,
    .article-teaser:after {
        display: table;
        content: " ";
    }

    .article-teaser:after {
        clear: both;
    }

.article-figure.image-right {
    display: table;
    table-layout: fixed;
    width: 100%;
}

    .article-figure.image-right > figcaption {
        caption-side: bottom;
        display: table-caption;
    }

.article-figure.image-left {
    display: table;
    table-layout: fixed;
    width: 100%;
}

    .article-figure.image-left > figcaption {
        caption-side: bottom;
        display: table-caption;
    }

.teaser-figure {
    margin-bottom: 1em;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.teaser-title {
    font-size: 28px;
    font-size: 1.75rem;
    margin-bottom: 0.25em;
}

    .teaser-title a {
        color: inherit;
        text-align:left;
    }

        .teaser-title a:hover,
        .teaser-title a:focus {
            color: #1989ba;
        }

.teaser-featured {
    border-bottom: 1px solid #e5e5e5;
    padding-top: 1.4em;
    margin-bottom: 2.8em;
}

    .teaser-featured .teaser-title {
        font-size: 36px;
        font-size: 2.25rem;
    }

.blog-bio {
    clear: both;
}

/* Used for list-style articles on the blog. This turns a number into a medium-sized green circle with the number incide of it. */

span.numbergreen {
    background: #669933;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

/* Used for magazine featured articles on the blog: This turns the first letter of a word into a drop-cap style letter. */

.firstcharacter {
    float: left;
    color: #323231;
    font-size: 60px;
    line-height: 50px;
    padding-top: 4px;
    padding-right: 6px;
    padding-left: 3px;
    font-family: var(--rtc-font);
}

/* Used for magazine featured articles on the blog: This turns the first letter of a word into a smaller drop-cap style letter. */

.firstcharactersmall {
    float: left;
    color: #555555;
    font-size: 50px;
    line-height: 42px;
    padding-top: 4px;
    padding-right: 6px;
    padding-left: 3px;
    font-family: var(--rtc-font);
}

/* Used for highlighting related articles within content on the blog. */

.related-article {
    padding-top: 20px;
    padding-bottom: 24px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    margin-top: 14px;
    margin-bottom: 20px;
}

/* Used for stylized pullquotes on the blog. */

.pullquote {
    font-family: var(--rtc-font);
    font-size: 1.8em;
    line-height: 1.2em;
    border-top: 5px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;
    padding: 25px 0;
    margin: 30px 0;
}

/* An alternative to the gray callout box - used for Magazine featured articles on the blog. This creates a light green callout box. */

.box-green {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em 1.4em;
    background: #eff5e9;
    border: 2px solid #e5e5e5;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
    display: block;
}

    .box-green:last-child {
        margin-bottom: 0;
    }

/* Used for Magazine featured articles on the blog. This is a dark blue alternative to h5. */

h5.magFeat {
    color: #0e4e83;
    font-weight: bold;
}

@media only screen and (min-width: 60em) {
    .teaser-figure {
        float: left;
        margin-right: 20px;
        max-width: 35%;
    }

    .teaser-featured .teaser-figure {
        max-width: 50%;
        float: right;
        margin-right: 0;
        margin-left: 20px;
    }
}

.article-title {
    margin-bottom: 0.25em;
}

.article-bottom {
    border-top: 3px solid #e5e5e5;
    padding: 1.4em 0;
    *zoom: 1;
}

    .article-bottom:before,
    .article-bottom:after {
        display: table;
        content: " ";
    }

    .article-bottom:after {
        clear: both;
    }

.article-author {
    font-size: 14px;
    font-size: 0.875rem;
}

.author-photo {
    float: left;
    margin: 0 15px 0 0;
}

.related {
    width: 48%;
    margin-right: 4%;
    float: left;
    text-align: center;
}

    .related:nth-of-type(2n) {
        margin-right: 0;
    }

    .related img {
        margin-bottom: 0.35em;
    }

@media only screen and (min-width: 35em) {
    .related {
        width: 22%;
    }

        .related:nth-of-type(2n) {
            margin-right: 4%;
        }

        .related:last-child {
            margin-right: 0;
        }

    .no-lastchild .related {
        margin-right: 3%;
    }
}
/*

## Tiles

Tiles are like Excerpts, but with images and a special layout. They are used on the Map pages in the Our Work section to show Featured Content.

The Tiles get a wrapping div with a class of .tiles. Each Tile article gets a class of .article-tile. A single Tile contains an image, and a title with a class of .tile-title. Both the image and the title are linked to the corresponding content page.

```
<div class="tiles">
  <article class="article-tile">
    <a href=""><img src="http://placekitten.com/275/320" alt=""></a>
    <h3 class="tile-title"><a href="">This is The Title of This Particular Item</a></h3>
  </article>
  <article class="article-tile">
    <a href=""><img src="http://placekitten.com/275/180" alt=""></a>
    <h3 class="tile-title"><a href="">This is The Title of This Particular Item</a></h3>
  </article>
  <article class="article-tile">
    <a href=""><img src="http://placekitten.com/275/290" alt=""></a>
    <h3 class="tile-title"><a href="">This is The Title of This Particular Item</a></h3>
  </article>
  <article class="article-tile">
    <a href=""><img src="http://placekitten.com/275/280" alt=""></a>
    <h3 class="tile-title"><a href="">This is The Title of This Particular Item</a></h3>
  </article>
  <article class="article-tile">
    <a href=""><img src="http://placekitten.com/275/260" alt=""></a>
    <h3 class="tile-title"><a href="">This is The Title of This Particular Item</a></h3>
  </article>
  <article class="article-tile">
    <a href=""><img src="http://placekitten.com/275/400" alt=""></a>
    <h3 class="tile-title"><a href="">This is The Title of This Particular Item</a></h3>
  </article>
</div><!-- /.tiles -->

```
*/
.article-tile {
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    text-align: center;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

    .article-tile img {
        margin-bottom: 0.35em;
    }

.tile-title {
    font-size: 22px;
    font-size: 1.375rem;
    padding: 0 5%;
}

@media only screen and (min-width: 25em) {
    .tiles {
        -webkit-column-width: 48%;
        -webkit-column-count: 2;
        -webkit-column-gap: 2%;
        -webkit-column-rule-color: transparent;
        -webkit-column-rule-style: none;
        -webkit-column-rule-width: 0;
        -moz-column-width: 48%;
        -moz-column-count: 2;
        -moz-column-gap: 2%;
        -moz-column-rule-color: transparent;
        -moz-column-rule-style: none;
        -moz-column-rule-width: 0;
        column-width: 48%;
        column-count: 2;
        column-gap: 2%;
        column-rule-color: transparent;
        column-rule-style: none;
        column-rule-width: 0;
    }

    .article-tile {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        text-align: left;
    }

    .no-csscolumns .article-tile {
        width: 32%;
    }

    .tile-title {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

@media only screen and (min-width: 40em) {
    .tiles {
        -webkit-column-width: 31%;
        -webkit-column-count: 3;
        -webkit-column-gap: 2%;
        -webkit-column-rule-color: transparent;
        -webkit-column-rule-style: none;
        -webkit-column-rule-width: 0;
        -moz-column-width: 31%;
        -moz-column-count: 3;
        -moz-column-gap: 2%;
        -moz-column-rule-color: transparent;
        -moz-column-rule-style: none;
        -moz-column-rule-width: 0;
        column-width: 31%;
        column-count: 3;
        column-gap: 2%;
        column-rule-color: transparent;
        column-rule-style: none;
        column-rule-width: 0;
    }

    .tile-title {
        font-size: 18px;
        font-size: 1.125rem;
    }
}
/*
## Hero Module

The Hero module is used to highlight content on a page in a bold, visual way. Each Hero contains a main image as well as some text and/or buttons.

The wrapping div for the Hero gets the .hero class.

The image gets the .hero-img class. For Hero modules that are meant to extend the full window width, use an image of at least 1000px width. The image will stretch to fill the space regardless of the original size of the image.

The text of the Hero is wrapped in a div with a class of .hero-text. It can contain a .hero-text-header div and a .hero-text-body div. The Hero Text Header will appear in large type without an added background. The Hero Text Body will have a translucent grey background. Use .container classes where necessary to contain the width of the text.

The heading inside the Hero should be given a class of .hero-heading. Any other elements such as paragraphs do not need any special Hero classes.

```
<div class="hero">
  <img class="hero-img" src="http://placekitten.com/1000/400" alt="">
  <div class="hero-text">
    <div class="hero-text-header container">
      <h2 class="hero-heading"><a href="">A Stronger, More Vibrant Community Includes You</a></h2>
    </div>
    <div class="hero-text-body">
      <div class="container">
        <p>Join the movement and help us fight for increased federal investment in bicycling and walking.</p>
        <a class="btn btn-primary btn-large btn-cta" href="">Join Us</a>
      </div>
    </div>
  </div>
</div>
```

**Feature Hero**

The Feature Hero is used to feature a particular editorial content item, such as Trail of the Month, an Event, or a Blog post. The text will be left-aligned instead of centered.

A paragraph with a .hero-preheading class can be added for text related to the heading and placed above it, such as "Trail of the Month" or "Featured Blog Post."

A "Read More" link in a Hero can be given a class of .hero-more to float it right, and a "More" icon can be added as well.

```
<div class="hero feature-hero">
  <img class="hero-img" src="http://placekitten.com/1000/400" alt="">
  <div class="hero-text">
    <div class="hero-text-header container">
      <p class="hero-preheading">Trail of the Month</p>
      <h2 class="hero-heading"><a href="">Florida�s Blountstown Greenway Bike Path</a></h2>
    </div>
    <div class="hero-text-body">
      <div class="container">
        <p>Straddled between two well-known tourist hubs in the Florida Panhandle is Blountstown, a small city in Calhoun County with only two traffic lights. Nonetheless, it is a growing destination.</p>
        <a class="hero-more" href="">Read More <i class="icon icon-more"></i></a>
      </div>
    </div>
  </div>
</div>
```

**Campaign Hero**

A Campaign Hero is used to highlight a particular fundraising campaign. It can sometimes be used in other places such as the "Our Board & Staff" item on the About page.

Buttons inside the .hero-text-body of a Campaign Hero module will be pulled down to overlap the bottom edge of the module.
```
<div class="hero campaign-hero">
  <img class="hero-img" src="http://placekitten.com/1000/400" alt="">
  <div class="hero-text">
    <div class="hero-text-body">
      <h2 class="hero-heading">Help us Defend Rail-Trails at the Supreme Court</h2>
      <p>We�re headed to the U.S. Supreme Court to defend rail-trails, and the stakes couldn�t be higher. Become a Rails-to-Trails Conservancy Trail Keeper today with your generous monthly gift�and join the movement to defend trails all year long.</p>
      <a class="btn btn-primary btn-large btn-cta" href="">Donate Now</a>
    </div>
  </div>
</div>
```

**Half Hero**

The Half Hero is used in pairs: two Hero modules next to each other. It is used on the Donate page.

```
<div class="hero half-hero">
  <img class="hero-img" src="http://placekitten.com/750/600" alt="" />
  <div class="hero-text">
    <div class="hero-text-header container">
      <h2 class="hero-heading">Donate Now</h2>
    </div>
    <div class="hero-text-body">
      <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a class="btn btn-primary btn-large btn-cta" href="">Select Gift Amount</a>
      </div>
    </div>
  </div>
</div>

<div class="hero half-hero">
  <img class="hero-img" src="http://placekitten.com/750/600" alt="" />
  <div class="hero-text">
    <div class="hero-text-header container">
      <h2 class="hero-heading">Membership</h2>
    </div>
    <div class="hero-text-body">
      <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a class="btn btn-primary btn-large btn-cta btn-twin" href="">Join Now</a>
        <a class="btn btn-primary btn-large btn-cta btn-twin" href="">Renew</a>
      </div>
    </div>
  </div>
</div>
```

**Mini Hero**

The Mini Hero is smaller and is intended to link to related pages without needing any explanatory text. Each Mini Hero should be placed inside a column to give it the proper size.

Mini Hero modules only contain an image and a button; no headings or other text. The button will appear at the bottom of the module.

```
<div class="row">
  <div class="col col-third">
    <div class="hero mini-hero">
      <img class="hero-img" src="http://placekitten.com/400/400" alt="" />
      <a class="btn btn-primary btn-large" href="">Search our Document Library</a>
    </div>
  </div>
  <div class="col col-third">
    <div class="hero mini-hero">
      <img class="hero-img" src="http://placekitten.com/400/400" alt="" />
      <a class="btn btn-primary btn-large" href="">Sign Up For Alerts</a>
    </div>
  </div>
  <div class="col col-third">
    <div class="hero mini-hero">
      <img class="hero-img" src="http://placekitten.com/400/400" alt="" />
      <a class="btn btn-primary btn-large" href="">Join Our Trailbuilders Group</a>
    </div>
  </div>
</div>
```

*/
.video {
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

.embed-container {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    max-width: 100%;
}

    .embed-container iframe, .embed-container object {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

#hero {
    position: relative;
}



.hero {
    text-align: center;
    background: #ffffff;
    *zoom: 1;
}

    .hero:before,
    .hero:after {
        display: table;
        content: " ";
    }

    .hero:after {
        clear: both;
    }

@media  only screen and (max-width: 45em){
    .hero {
        display: flex;
        position: relative;
    }

}

.hero-img {
    margin-bottom: 0.7em;
}

.hero-text-body {
    padding-bottom: 1em;
}

    .hero-text-body p {
        margin-bottom: 1em;
    }

    .hero-text-body .btn {
        margin-bottom: 0;
    }

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

.hero-preheading {
    font-family: var(--rtc-font);
    font-size: 20px;
    font-size: 1.25rem;
    margin-bottom: 0;
}

.hero-more {
    float: right;
}

.campaign-hero {
    text-align: center;
    margin-bottom: 4em;
}

    .campaign-hero .hero-text-body {
        padding-left: 5%;
        padding-right: 5%;
    }

@media only screen and (min-width: 30em) {
    .half-hero {
        width: 50%;
        float: left;
    }
}

.mini-hero {
    position: relative;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

    .mini-hero .hero-img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .mini-hero > .btn {
        margin-top: -80px;
        width: 88%;
    }

@media only screen and (min-width: 35em) {
    .col-third .mini-hero > .btn {
        margin-top: -90px;
    }
}

@media only screen and (max-width: 45em) {

    .hero-text h1, .hero-text h2, .hero-text h3, .hero-text h4, .hero-text h5, .hero-text h6 {
        color: #fff;
        font-size: 30px;
    }
        .hero-text h2 a{
            color: #fff;
        }
    }

@media only screen and (max-width: 45em) {
    .hero-text {
        position: absolute !important;
        width: 100%;
        bottom: 0;
    }

    .hero-text-body {
        color: white !important;
        margin-bottom: 1em;
        background: rgba(50, 50, 49, 0.5);
    }

        .hero-text-body a {
            color: white !important
        }
}

    @media only screen and (min-width: 45em) {
        .hero {
            position: relative;
        }

            .hero a {
                color: #ffffff;
            }

                .hero a:hover,
                .hero a:focus {
                    color: #3ab1e5;
                }

                    .hero a:hover.btn,
                    .hero a:focus.btn {
                        color: #ffffff;
                    }

        .hero-img {
            width: 100%;
            height: auto;
            margin: 0;
        }

        .hero-text {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            color: #fff;
        }

        .hero-text-header {
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
        }

        .hero-preheading {
            font-size: 24px;
            font-size: 1.5rem;
        }

        .hero-heading {
            color: #fff;
            font-size: 32px;
            font-size: 2rem;
        }

        .hero-text h1, .hero-text h2, .hero-text h3, .hero-text h4, .hero-text h5, .hero-text h6 {
            color: #fff;
        }

        .campaign-hero .hero-heading {
            font-size: 24px;
            font-size: 1.5rem;
        }

        .hero-text-body {
            background: rgba(50, 50, 49, 0.5);
            padding-top: 0.75em;
            padding-bottom: 0.75em;
        }

        .campaign-hero .hero-text-body,
        .half-hero .hero-text-body {
            padding-left: 2.5%;
            padding-right: 2.5%;
        }

        .no-rgba .hero-text-body {
            background: url(../images/shade.png) repeat;
        }

        .campaign-hero .hero-text-body .btn-cta {
            margin-bottom: -3em;
        }
    }

    @media only screen and (min-width: 48em) {
        .hero-preheading {
            font-size: 32px;
            font-size: 2rem;
        }

        .hero-heading {
            font-size: 36px;
            font-size: 2.25rem;
        }

        .campaign-hero .hero-heading {
            font-size: 28px;
            font-size: 1.75rem;
        }

        .hero-text-body {
            padding-top: 1em;
            padding-bottom: 1em;
        }

            .hero-text-body > p {
                font-size: 18px;
                font-size: 1.125rem;
            }

        .col-third .mini-hero > .btn {
            margin-top: -100px;
        }
    }

    @media only screen and (min-width: 60em) {
        .hero-heading {
            font-size: 48px;
            font-size: 3rem;
        }

        .campaign-hero .hero-heading {
            font-size: 36px;
            font-size: 2.25rem;
        }
    }

    @media only screen and (min-width: 70em) {
        .col-third .mini-hero > .btn {
            margin-top: -85px;
        }
    }

    #cta-map > img {
        max-width: 480px;
        height: auto;
    }

    #cta-map > .btn {
        width: 60%;
        margin-top: -190px;
    }

    @media only screen and (min-width: 25em) {
        #cta-map .btn {
            margin-top: -260px;
        }
    }

    @media only screen and (min-width: 30em) {
        #cta-map .btn {
            margin-top: -320px;
        }
    }

    @media only screen and (min-width: 40em) {
        #cta-map .btn {
            margin-top: -360px;
        }
    }
    /*
## Selling Points Module

Selling Points are used on top-level pages to highlight and link to sub-page content. Each Selling Point consists of an image, a title, and a brief paragraph, with an optional "Learn More" link.

Selling Points are grouped in collections of three.

The wrapper for all the Selling Points, including their heading, gets a class of .sellingpoints.

If there is a heading for the collection of Selling Points, it gets a class of .sp-heading.

Each grouping of three Selling Points should be wrapped in a div with a class of .row. More than one row of Selling Points can go within one .sellingpoints wrapper div. Column classes like .col-third are not used for Selling Points because their breakpoint from 1 column to 3 is different than the .col-third class.

Each individual Selling Point module gets a class of .sellingpoint.

The image inside a single Selling Point gets a class of .sp-image, and the text in a single Selling Point is wrapped in a div with a class of .sp-text. The images should be 260px square. The circle effect is accomplished with CSS.

The title for a single Selling Point gets a class of .sp-title.

Both the image and the title should link to the Selling Point's corresponding sub-page.

```
<div class="sellingpoints">

  <h2 class="sp-heading">Heading For These Selling Points</h2>

  <div class="row">
  
    <div class="sellingpoint">
      <a href=""><img class="sp-image" src="http://placekitten.com/260/260" alt=""></a>
      <div class="sp-text">
        <h3 class="sp-title"><a href="">Why Use Trails</a></h3>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras non orci quis.</p>
      </div>
    </div>
    
    <div class="sellingpoint">
      <a href=""><img class="sp-image" src="http://placekitten.com/260/260" alt=""></a>
      <div class="sp-text">
        <h3 class="sp-title"><a href="">Trail Use Tips</a></h3>
        <p>Morbi id enim imperdiet, vehicula tellus in, blandit tellus. Maecenas sollicitudin nulla in mauris congue.</p>
      </div>
    </div>
    
    <div class="sellingpoint">
      <a href=""><img class="sp-image" src="http://placekitten.com/260/260" alt=""></a>
      <div class="sp-text">
        <h3 class="sp-title"><a href="">Trail Destinations</a></h3>
        <p>Nam mi ligula, malesuada quis quam sit amet, commodo egestas felis. Aliquam erat volutpat.</p>
      </div>
    </div>
    
  </div>
  
</div>
```
*/
    .sellingpoints {
        text-align: center;
        overflow: hidden;
        margin-top: 1.4em;
        margin-top: 1.4rem;
    }

    .sp-heading {
        font-size: 40px;
        font-size: 2.5rem;
        margin-bottom: 1.4rem;
    }

    .sellingpoint {
        margin-bottom: 1.4em;
        margin-bottom: 1.4rem;
    }

    .sp-image {
        border-radius: 100%;
        width: 60%;
    }

    .sp-text {
        padding: 1em 1em 0;
    }

        .sp-text p {
            margin-bottom: 0.7rem;
        }

    .sp-title {
        font-size: 28px;
        font-size: 1.75rem;
    }

    @media only screen and (min-width: 35em) {
        .sellingpoint {
            display: inline;
            float: left;
            width: 30.666666666666668%;
            margin-right: 0.6666666666666666%;
            margin-left: 0.6666666666666666%;
        }

            .sellingpoint:first-of-type {
                margin-right: 2%;
                margin-left: 0;
            }

            .sellingpoint:nth-of-type(2) {
                margin-right: 2%;
                margin-left: 2%;
            }

            .sellingpoint:last-of-type {
                margin-left: 2%;
                margin-right: 0;
                float: right;
            }

        .sp-image {
            width: 80%;
        }
    }

    @media only screen and (min-width: 60em) {
        .sp-image {
            width: 70%;
        }
    }
    /*
## Editorial Spot Module

An Editorial Spot is similiar to a Hero but the text does not overlap the image. It is intended to highlight editorial content such as blog posts and events.

Editoral Spots are used inside Half Columns. The columns should be wrapped inside a .row but otherwise the Editorial Spots don't need a particular wrapping div.

The wrapping div for a single Editorial Spot gets a class of .editorial. The wrapping div for the text in an Editorial Spot gets a class of .ed-text. The title of a single Editorial Spot gets a class of .ed-title. No special classes are needed for the images, but images in two paired Editorial Spots should be the same size.

```
<div class="row">

  <div class="col col-half">
    <div class="editorial">
      <a href=""><img class="ed-image" src="http://placekitten.com/580/345" alt=""></a>
      <div class="ed-text">
        <h2 class="ed-title"><a href="">Five Top Florida Hikes for History</a></h2>
        <p>As a �trailblazer,� I have long enjoyed the history, geography, ecosystems and wildlife that make Florida such a wonderful state for outdoor exploration.</p>
      </div>
    </div>
  </div>
  
  <div class="col col-half">
    <div class="editorial">
      <a href=""><img class="ed-image" src="http://placekitten.com/580/345" alt=""></a>
      <div class="ed-text">
        <h2 class="ed-title"><a href="">March 29 is Opening Day for Trails!</a></h2>
        <p>March 29 - the last Saturday in March - is Opening Day For Trails. It�s the perfect time to kick off the season with a leisurely stroll or bike ride along your local trail.</p>
      </div>
    </div>
  </div>
  
</div>
```
*/
    .editorial {
        text-align: center;
    }

    .ed-text {
        padding: 1em 1em 0;
    }

    .ed-title {
        font-size: 32px;
        font-size: 2rem;
        margin-bottom: 0.5em;
    }
    /*
## Call-To-Action Banner

This banner reaches the full width of the window and has a bright background color. It is used for attention-grabbing calls to action such as the email signup form above the footer, as well as the "Help" banner on the Take Action page. It should be used very sparingly, and never more than twice on a page (counting the email signup form above the footer).

The wrapping div or aside gets a class of .cta-banner and should have a .container div directly inside it. If the banner contains a form, the .cta-banner should have an additional class of .form-banner.

The heading for the CTA Banner should be short (1-3 words) and get a class of .cta-banner-heading.

The CTA Banner can also include a brief paragraph and/or a button; no special classes needed.

```
<aside class="cta-banner">
  <div class="container">
    <h2 class="cta-banner-heading">Help</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <div class="center"><a class="btn btn-primary btn-large btn-cta" href="">Donate Now</a></div>
  </div>
</aside>
```
*/
    .cta-banner {
        background: #e74c3c;
        color: #ffffff;
        padding: 1.4em 0;
    }

        .cta-banner input {
            margin-bottom: 0;
        }

            .cta-banner input[type="submit"], .cta-banner input[type="button"] {
                background: #323231;
                color: #ffffff;
            }

                .cta-banner input[type="submit"]:hover,
                .cta-banner input[type="submit"]:focus,
                .cta-banner input[type="button"]:hover,
                .cta-banner input[type="button"]:focus {
                    background: #000000;
                }

        .cta-banner .btn:last-child {
            margin-bottom: 0;
        }

    .cta-banner-heading {
        color: #ffffff;
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 1em;
    }

    @media only screen and (min-width: 48em) {
        .cta-banner-heading {
            float: left;
            margin: 0 15px 0 0;
        }

        form .cta-banner-heading {
            font-size: 30px;
            font-size: 1.875rem;
            margin-top: 30px;
        }
    }

    @media only screen and (min-width: 60em) {
        .cta-banner input[type="submit"], .cta-banner input[type="button"] {
            padding-left: 30px;
            padding-right: 30px;
        }

        .cta-banner-heading {
            margin: 0 20px 1.4rem 0;
        }

        form .cta-banner-heading {
            font-size: 36px;
            font-size: 2.25rem;
            margin-top: 25px;
        }
    }
    /* 
#### Bottom of Home Page
*/
    #home-additional {
        padding-top: 1.4rem;
        border-top: 1px solid #e5e5e5;
        *zoom: 1;
    }

        #home-additional:before,
        #home-additional:after {
            display: table;
            content: " ";
        }

        #home-additional:after {
            clear: both;
        }

        #home-additional h2 {
            font-size: 24px;
            font-size: 1.5rem;
        }

    .twitter-tweet {
        font-size: 14px;
        font-size: 0.875rem;
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 1.4em !important;
        margin-bottom: 1.4rem !important;
        padding: 1em 0;
    }

    @media only screen and (min-width: 48em) {
        #home-additional {
            padding-top: 0;
        }

            #home-additional > .container {
                display: table;
            }

            #home-additional .col {
                float: none;
                display: table-cell;
                padding: 1.4em 2% 0;
                margin: 0;
            }

                #home-additional .col:first-of-type {
                    padding-left: 0;
                }

                #home-additional .col:last-of-type {
                    padding-right: 0;
                }

        .home-col {
            display: inline;
            float: left;
            width: 30.666666666666668%;
            margin-right: 0.6666666666666666%;
            margin-left: 0.6666666666666666%;
        }

            .home-col:first-of-type {
                margin-right: 2%;
                margin-left: 0;
            }

            .home-col:nth-of-type(2) {
                margin-right: 2%;
                margin-left: 2%;
            }

            .home-col:last-of-type {
                margin-left: 2%;
                margin-right: 0;
                float: right;
            }

        .col-shaded {
            background: #f3f3f3;
        }
    }

    .social-photo {
        text-align: center;
        width: 44%;
        margin-right: 4%;
        margin-bottom: 1em;
        vertical-align: top;
        position: relative;
    }

        .social-photo > figcaption {
            font-size: 13px;
            font-size: 0.8125rem;
            margin-top: 0.5em;
        }

    @media only screen and (min-width: 25em) {
        .social-photo {
            width: 150px;
            height: auto;
            margin-right: 10px;
        }
    }

    @media only screen and (min-width: 48em) {
        .social-photo {
            width: 44%;
            margin-right: 4%;
        }
    }
/*
## Toolbox

The Toolbox is divided into Sections, which are then divided into Subsections, which in turn are divided into Topics.

A top-level Toolbox Section and its heading is wrapped in a section element with a class of .tb-section. The section title should be marked up as an h2; no additional classes are needed for it.

A Toolbox Subsection and its heading is wrapped in a section element with a class of .tb-subsection. The heading for a Subsection should be marked up as an h3 with the class of .tb-subsection-heading. Within the heading is also an icon used to indicate that the Subsection can be expanded or collapsed by clicking on its heading.

The content of a Toolbox Subsection is wrapped in a div with the class of .tb-subsection-body. This is what is expanded or collapsed when the Subsection heading is clicked.

The body of a Subsection contains an introductory paragraph, a link to the top level page for the Subsection, and a number of Topics.

The Topics are contained in a nav element with a class of .tb-topics. Each Topic is a list item in an unordered list inside .tb-topics. A Topic contains an image and a title with a class of .tb-title. The image and title both link to the page for that Topic.


```
<section class="tb-section">
  <h2>Section Title</h2>
  <section id="" class="tb-subsection">
    <h3 class="tb-subsection-heading">Subsection Title <i class="icon icon-expand"></i></h3>
    <div class="tb-subsection-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      <a class="btn btn-primary btn-large" href="toolbox-subsection.html">Learn More</a>
      <h4>Topics in this section:</h4>
      <nav class="tb-topics">
        <ul>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic Could Be Several Words Long</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic Could Be Several Words Long</div>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </section>

  <section id="" class="tb-subsection">
    <h3 class="tb-subsection-heading">Subsection Title <i class="icon icon-expand"></i></h3>
    <div class="tb-subsection-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      <a class="btn btn-primary btn-large" href="toolbox-subsection.html">Learn More</a>
      <h4>Topics in this section:</h4>
      <nav class="tb-topics">
        <ul>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic Could Be Several Words Long</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic Could Be Several Words Long</div>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </section>
  
</section>

```

*/
    .tb-section {
        text-align: center;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 1.4em;
        margin-bottom: 1.4rem;
    }

    .tb-subsection-heading {
        display: block;
        overflow: hidden;
        position: relative;
        width: 70%;
        padding: 0.5em 15%;
        line-height: 36px;
        background-color: #999999;
        color: #ffffff;
        -webkit-transition: background-color 0.1s linear;
        transition: background-color 0.1s linear;
        cursor: pointer;
    }

        .tb-subsection-heading.hovered {
            background-color: #545454;
            cursor: pointer;
        }

        .tb-subsection-heading > .icon {
            position: absolute;
            right: 10px;
            top: 12px;
        }

    .tb-topics li {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: top;
        width: 41%;
        margin-left: 4%;
        margin-right: 4%;
        margin-bottom: 1.4em;
        margin-bottom: 1.4rem;
    }

        .tb-topics li img {
            margin-bottom: 0.5em;
        }

    @media only screen and (min-width: 35em) {
        .tb-subsection-heading > .icon {
            right: 14px;
            top: 14px;
        }

        .tb-topics li {
            width: 28%;
            margin-left: 2%;
            margin-right: 2%;
        }
    }

    @media only screen and (min-width: 48em) {
        .tb-topics li {
            width: 20%;
            position: relative;
        }

            .tb-topics li img {
                margin-bottom: 0;
            }

            .tb-topics li .topic-title {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                margin-bottom: 0;
                padding: 0.75em 5%;
                background: rgba(50, 50, 49, 0.5);
                color: #ffffff;
            }

        .no-rgba .tb-topics .topic-title {
            background: url(../images/shade.png) repeat;
        }
    }

    @media only screen and (min-width: 80em) {
        .tb-topics li {
            width: 15%;
        }
    }


/*
## Accordion

The accordion is used with the toolbox. The accordion takes the sections and makes them open and close through icons.

To use it, 'i class' must be set to either 'icon-expand' where the section will be opened or 'icon-collapse' where the section is closed.


```
<section class="tb-section">
  <h2>Section Title</h2>
  <section id="" class="tb-subsection">
    <h3 class="tb-subsection-heading">Subsection Title <i class="icon icon-expand"></i></h3>
    <div class="tb-subsection-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
      <a class="btn btn-primary btn-large" href="toolbox-subsection.html">Learn More</a>
      <h4>Topics in this section:</h4>
      <nav class="tb-topics">
        <ul>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic Could Be Several Words Long</div>
            </a>
          </li>
          <li>
            <a href="topic.html">
              <img src="http://placekitten.com/200/200" alt="">
              <div class="topic-title">Title of Topic Could Be Several Words Long</div>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </section>

  <section id="" class="tb-subsection">
    <h3 class="tb-subsection-heading">Subsection Title <i class="icon icon-collapse"></i></h3>
   
  </section>
  
</section>

```

*/
.tb-section {
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

.tb-subsection-heading {
    display: block;
    overflow: hidden;
    position: relative;
    width: 70%;
    padding: 0.5em 15%;
    line-height: 36px;
    background-color: #999999;
    color: #ffffff;
    -webkit-transition: background-color 0.1s linear;
    transition: background-color 0.1s linear;
    cursor: pointer;
}

    .tb-subsection-heading.hovered {
        background-color: #545454;
        cursor: pointer;
    }

    .tb-subsection-heading > .icon {
        position: absolute;
        right: 10px;
        top: 12px;
    }

.tb-topics li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    width: 41%;
    margin-left: 4%;
    margin-right: 4%;
    margin-bottom: 1.4em;
    margin-bottom: 1.4rem;
}

    .tb-topics li img {
        margin-bottom: 0.5em;
    }

@media only screen and (min-width: 35em) {
    .tb-subsection-heading > .icon {
        right: 14px;
        top: 14px;
    }

    .tb-topics li {
        width: 28%;
        margin-left: 2%;
        margin-right: 2%;
    }
}

@media only screen and (min-width: 48em) {
    .tb-topics li {
        width: 20%;
        position: relative;
    }

        .tb-topics li img {
            margin-bottom: 0;
        }

        .tb-topics li .topic-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin-bottom: 0;
            padding: 0.75em 5%;
            background: rgba(50, 50, 49, 0.5);
            color: #ffffff;
        }

    .no-rgba .tb-topics .topic-title {
        background: url(../images/shade.png) repeat;
    }
}

@media only screen and (min-width: 80em) {
    .tb-topics li {
        width: 15%;
    }
} 
    /*
## Resource Library

Teasers for Resource Library documents should be article elements with the class of .library-teaser. Within each Resource Library teaser is a Primary and Secondary Column.

The Primary Column contains a file type icon and a div with the class of .file-info. The File Info div contains the title of the document, with a class of .teaser-title, and any appropriate meta information such as publish date, collection, and tags.

The Secondary Column contains a link to the document's detailed information page, as well as a download button link.

The document's detailed information page can be marked up similarly to a full Blog post.

```
<article class="library-teaser">
  <div class="col col-primary">
    <i class="icon icon-file-large icon-lg-pdf">[PDF]</i>
    <div class="file-info">
      <h3 class="teaser-title"><a href="resource-single.html">This Is The Title of a Document in the Library</a></h3>
      <p class="meta">Published on 01/01/01 by RTC <br>
      Collection: <a href="resource-collection.html">Collection Name</a> <br>
      Tags: <a href="">Tag Name</a>, <a href="">Tag Name</a>, <a href="">Tag Name</a></p>
    </div>
  </div>
  <div class="col col-secondary">
    <p><a href="resource-single.html">View Details &rarr;</a></p>
    <a class="btn btn-large btn-primary" href=""><i class="icon icon-download-sm"></i> Download</a>
  </div>
</article>
```
*/
    .library-teaser {
        padding-top: 0.7em;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 0.7em;
        *zoom: 1;
    }

        .library-teaser:before,
        .library-teaser:after {
            display: table;
            content: " ";
        }

        .library-teaser:after {
            clear: both;
        }

        .library-teaser .icon-file-large {
            float: left;
            margin-top: .5em;
        }

        .library-teaser .file-info {
            margin-left: 55px;
        }

        .library-teaser .col-secondary {
            text-align: right;
        }

    #library-search-form .form-item,
    #library-search-form #search-filter-toggle {
        margin-bottom: 0.7em;
    }

    #library-search-form #search-filter-toggle,
    #library-search-form #search-submit {
        display: block;
        clear: both;
    }

    @media only screen and (min-width: 30em) {
        #search-filter .col {
            margin-bottom: 0;
        }
    }
    /*
#### U.S. Map
*/
    #map-nav {
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 1.4em;
        margin-bottom: 1.4rem;
    }

    #state-list {
        text-align: left;
        -webkit-column-width: 46%;
        -webkit-column-count: 2;
        -webkit-column-gap: 2%;
        -webkit-column-rule-color: transparent;
        -webkit-column-rule-style: none;
        -webkit-column-rule-width: 0;
        -moz-column-width: 46%;
        -moz-column-count: 2;
        -moz-column-gap: 2%;
        -moz-column-rule-color: transparent;
        -moz-column-rule-style: none;
        -moz-column-rule-width: 0;
        column-width: 46%;
        column-count: 2;
        column-gap: 2%;
        column-rule-color: transparent;
        column-rule-style: none;
        column-rule-width: 0;
    }

    .no-csscolumns #state-list > li {
        float: left;
        width: 21%;
        margin-left: 2%;
        margin-right: 2%;
    }

    #us-map {
        width: 700px;
        height: 500px;
        margin: 0 auto;
        display: none;
    }

    @media only screen and (min-width: 48em) {
        #map-nav {
            text-align: center;
        }

        #state-list {
            display: none;
        }

        #us-map {
            display: block;
        }

        .no-svg #state-list {
            display: block;
        }

        .no-svg #us-map {
            display: none;
        }
    }

    @media not print {
        .print-only {
            display: none !important;
        }
    }

    @media print {
        /* Print =================================================== */
        * {
            background: transparent !important;
            color: black !important;
            box-shadow: none !important;
            text-shadow: none !important;
            filter: none !important;
            -ms-filter: none !important;
        }

        @page {
            margin: 0.5cm;
        }

        h2,
        h3 {
            orphans: 3;
            widows: 3;
            page-break-after: avoid;
        }

        p {
            orphans: 3;
            widows: 3;
        }

        pre,
        blockquote {
            border: 1px solid #545454;
            page-break-inside: avoid;
        }

        abbr[title]:after {
            content: " (" attr(title) ")";
        }

        a,
        a:visited {
            text-decoration: underline;
        }

            a[href]:after {
                content: " (" attr(href) ")";
                font-size: .75em;
            }

            a[href^="javascript:"]:after,
            a[href^="#"]:after {
                content: "";
            }

        img {
            max-width: 100% !important;
            page-break-inside: avoid;
        }

        thead {
            display: table-header-group;
        }

        tr {
            page-break-inside: avoid;
        }

        #site-logo {
            max-width: 100px !important;
        }

        .btn,
        .btn-cta {
            border: 1px solid #999999 !important;
        }







        #site-footer {
            display: none;
        }

        .article-comments {
            display: none;
        }

        .article-related {
            display: none;
        }

        #site-main .container .col-secondary {
            display: none;
        }

        #site-main .page-header .breadcrumb a[href]:after {
            content: none;
        }

        #site-header .nav-container {
            display: none;
        }

        #site-header a[href]:after {
            content: none;
        }

        #site-header .header-ctas a:not(.print-only) {
            display: none;
        }

        .article header a[href]:after {
            content: none;
        }

        .print-include {
            display: block !important;
        }
    }
    /*
## Utility Classes

These utility classes are included if adjustments need to be made to particular components on a page.

**Floats**

You may add .pull-right or .pull-left to an element to float it right or left, respectively.

**Centering**

Adding the .center class to a wrapping div will center any text and inline-block elements inside.

**Margins**

You may add .margin-top and/or .margin-bottom to an element to add a margin to the top or bottom, in order to adjust vertical spacing and rhythm.

**Padding**

Similarly, you may add .padding-top and/or .padding-bottom to an element to adjust its vertical padding.

**Borders**

Adding .border-top or .border-bottom to an element will add a top or bottom border.

**Hiding Visually**

Occasionally you may want to hide something visually yet leave it available to speaking browsers for the blind. Adding a class of .visuallyhidden will accomplish this.

*/
    .pull-right {
        float: right;
    }

    .pull-left {
        float: left;
    }

    .center {
        text-align: center;
    }

    .margin-top {
        margin-top: 1.4em;
        margin-top: 1.4rem;
    }

    .margin-bottom {
        margin-bottom: 1.4em;
        margin-bottom: 1.4rem;
    }

    .padding-top {
        padding-top: 1.4em;
        padding-top: 1.4rem;
    }

    .padding-bottom {
        padding-bottom: 1.4em;
        padding-bottom: 1.4rem;
    }

    .border-top {
        border-top: 1px solid #e5e5e5;
    }

    .border-bottom {
        border-bottom: 1px solid #e5e5e5;
    }

    .clearfix {
        *zoom: 1;
    }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: " ";
        }

        .clearfix:after {
            clear: both;
        }

    .visuallyhidden {
        overflow: hidden;
        position: absolute;
        clip: rect(0 0 0 0);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
    }

        .visuallyhidden.focusable:active,
        .visuallyhidden.focusable:focus {
            position: static;
            clip: auto;
            height: auto;
            width: auto;
            margin: 0;
            overflow: visible;
        }

.large_blue_btn a {
    background-color: #3AB1E5;
    border-radius: 5px;
    border-bottom: 4px solid #323231;
    border-color: #2B6DB6;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: var(--rtc-font);
    font-size: 1.125rem;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 1.4rem;
    padding: 11px 22px;
    text-align: center;
    transition: all 0.1s linear 0s;
    vertical-align: middle;
}

    .map-featured {
        width: 48%;
        margin-right: 4%;
        float: left;
        text-align: center;
    }

        .map-featured:nth-of-type(2n) {
            margin-right: 0;
        }

        .map-featured img {
            margin-bottom: 0.35em;
        }

    @media only screen and (min-width: 35em) {
        .map-featured {
            width: 22%;
        }

            .map-featured:nth-of-type(2n) {
                margin-right: 4%;
            }

            .map-featured:nth-of-type(4n) {
                margin-right: 0;
            }

            .map-featured:nth-of-type(5n) {
                clear: both;
            }
    }

    #__gsc-lbwrapperdiv {
        display: none;
        overflow: hidden;
        border-radius: 10px;
    }

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

    #fbregister {
        background: url("/images/rtc/buttons/facebook_200_46.png") no-repeat;
        border: 0 none;
        cursor: pointer;
        margin: 0;
        padding: 0;
        height: 44px;
        position: relative;
        width: 205px;
        vertical-align: middle;
    }

    .errlabel {
        color: #97040c;
        font-weight: bold;
    }

    .errorBorder {
        border-color: #990000;
    }

    /* horizontal form for manage account profile*/

    .required {
        color: #97040c;
        float: left;
    }

    .horizontal-form input, .horizontal-form select {
        margin: 0;
        width: 100%;
    }

    .horizontal-form label {
        display: inline-block;
        font-weight: bold;
        margin: 0;
        width: 100%;
        text-align: left;
        padding: 15px 0 0;
    }

    .horizontal-form input[type="file"].errorBorder {
        border-color: #990000;
    }

    .col-half-horiz {
        display: block;
    }

        .col-half-horiz > p {
            text-align: left;
        }

    #pnlContact .form-group {
        margin-top: 15px;
    }

    #register-buttons {
        float: left;
        clear: both;
    }

    .manage-account > section > .tb-subsection-body {
        padding: 20px 0 40px;
    }

    @media only screen and (min-width: 48em) {
        .col-half-horiz {
            width: 49%;
            display: inline-block;
        }

        .horizontal-form label {
            height: 50px;
            width: 48%;
            text-align: right;
            padding: 0;
            margin: 0 15px 0 0;
            vertical-align: top;
        }

        .horizontal-form input, .horizontal-form select, .horizontal-form span.span-col {
            width: 48%;
            float: left;
            text-align: left;
        }

            .horizontal-form input[type=file], .horizontal-form select {
                width: auto;
            }

        #receipt-list {
            max-height: 130px;
            overflow: auto;
            float: left;
            text-align: left;
            width: 100%;
        }

        .horizontal-form a.link-col {
            width: 48%;
            float: left;
            text-align: left;
            font-weight: bold;
            line-height: 1em;
        }

        .horizontal-form a.link-col-wide {
            width: 100%;
        }

        .horizontal-form select.wide {
            width: 100%;
        }

        .horizontal-form .btn {
            float: left;
        }

        #go-counter-wrapper {
            max-height: 200px;
            overflow: auto;
        }
        /* from bootstrap */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

            .alert h4 {
                margin-top: 0;
                color: inherit;
            }

            .alert .alert-link {
                font-weight: bold;
            }

            .alert > p,
            .alert > ul {
                margin-bottom: 0;
            }

                .alert > p + p {
                    margin-top: 5px;
                }

        .alert-dismissable,
        .alert-dismissible {
            padding-right: 35px;
        }

            .alert-dismissable .close,
            .alert-dismissible .close {
                position: relative;
                top: -2px;
                right: -21px;
                color: inherit;
            }

        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

            .alert-success hr {
                border-top-color: #c9e2b3;
            }

            .alert-success .alert-link {
                color: #2b542c;
            }

        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }

            .alert-info hr {
                border-top-color: #a6e1ec;
            }

            .alert-info .alert-link {
                color: #245269;
            }

        .alert-warning {
            color: #8a6d3b;
            background-color: #fcf8e3;
            border-color: #faebcc;
        }

            .alert-warning hr {
                border-top-color: #f7e1b5;
            }

            .alert-warning .alert-link {
                color: #66512c;
            }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

            .alert-danger hr {
                border-top-color: #e4b9c0;
            }

            .alert-danger .alert-link {
                color: #843534;
            }
    }


    #legcentersearchform {
        text-align: center;
    }

        #legcentersearchform select {
            margin: 0 30px 30px;
            min-width: 8em;
        }

    .legcenterimage {
        margin-left: 55px;
        display: block;
    }

    #policies .library-teaser .file-info {
        margin-left: 65px;
    }

    .policy-snippet {
        margin-bottom: .25em;
    }

    .cbxmagazine label {
        display: inline-block;
        width: auto;
        font-weight: normal;
    }

    .cbxmagazine input {
        display: inline-block;
        width: auto;
        float: none;
        margin: 10px;
    }

    @media only screen and (min-width: 48em) {
        #legcentersearchform .form-item {
            display: inline-block;
        }

            #legcentersearchform .form-item label {
                text-align: left;
                margin: 0 30px .175em 30px;
            }

        .legcenterimage {
            float: left;
            margin-right: 10px;
            margin-left: 0;
        }

        .successes .file-info {
            margin-left: 210px;
        }
    }

    .tmapcalcsquare {
        display: inline-block;
        height: 30px;
        width: 30px;
        margin-top: 10px;
        border: 1px solid black;
    }

    .tmapcalclegend {
        float: right;
        width: 85%;
    }

    @media only screen and (min-width: 48em) {
        .tmapcalclegend {
            float: right;
            width: 95%;
        }
    }

    .hidden {
        display: none;
    }

    .chart-benefits {
        overflow: auto;
        display: table;
    }

        .chart-benefits.workplace {
            margin-left: auto;
            margin-right: auto;
        }

    .chart-benefits-col {
        float: left;
        width: 60%;
        margin-top: 1em;
    }

    .chart-col {
        float: left;
        width: 40%;
        margin-top: 1em;
    }

    .chart-row {
        border: 1px solid #e5e5e5;
    }

    .chart-col.selected {
        background-color: #D1E1C7;
    }

    .chart-row.heading {
        display: table-cell;
        font-weight: bold;
        height: 3em;
        vertical-align: bottom;
        width: 50em;
    }

    .chart-learn-more {
        padding-top: 20px;
        clear: both;
    }

    /* On mobile */
    @media not screen and (min-width: 65em) {
        .chart-col.unselected, .chart-benefits-col.unselected {
            display: none;
        }
    }

    /* On desktop */
    @media only screen and (min-width: 65em) {
        .chart-row.heading {
            height: auto;
            width: auto;
            display: block;
        }

        .chart-benefits-col {
            display: none;
        }

            .chart-benefits-col:first-of-type {
                float: left;
                width: 12.5em;
                display: block
            }

        .chart-col {
            float: left;
            width: 10em;
        }

        .chart-learn-more {
            display: none;
        }
    }

    img[src*="ct.winfunds"] {
        position: absolute;
        top: 0;
    }


    .us-map-tooltip {
        pointer-events: none;
        position: absolute;
        font-size: 18px;
        text-align: center;
        background: #545454;
        padding: 5px 10px;
        z-index: 5;
        height: 30px;
        line-height: 30px;
        margin: 0 auto;
        color: white;
        border-radius: 4px;
        box-shadow: 0 0 0 1px #eee;
        transform: translateX(-50%);
        display: none;
    }

        .us-map-tooltip.active {
            display: block;
        }

        .us-map-tooltip:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 100%;
            width: 0;
            height: 0;
            margin-left: -10px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid white;
        }



    .opening-day-form {
        text-align: center;
        padding-left: 0.2em;
        padding-right: 0.2em;
    }

        .opening-day-form form {
            margin-bottom: 0;
            overflow: hidden;
        }

        .opening-day-form .odf_status {
            margin-top: 5px;
        }

    .opening-day-form-inputs {
        margin-bottom: 1rem;
        display: inline-block;
    }

    .opening-day-form .validation-message {
        color: #ff6666;
    }

    .opening-day-form-inputs:after {
        content: ".";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }

    .opening-day-form-inputs .opening-day-form-input {
        display: inline-block;
        float: left;
        margin-left: 5px;
    }

    .opening-day-form-checkboxes {
        margin-bottom: 1rem;
        display: inline-block;
        text-align: left;
    }

        .opening-day-form-checkboxes .opening-day-form-input {
            display: block;
            margin-bottom: 0.4rem;
        }


        .opening-day-form-checkboxes label {
            display: inline-block;
        }

    .opening-day-form input[type=button] {
        font-size: 120%;
        padding: 0.3em 0.6em 0.3em 0.6em;
        border: solid 1px #e5e5e5;
    }

        .opening-day-form input[type=button]:hover {
            border-color: #999999;
        }

    .opening-day-form input[type=checkbox] {
        display: inline-block;
    }

    .glyphicon.fast-right-spinner {
        -webkit-animation: glyphicon-spin-r 1s infinite linear;
        animation: glyphicon-spin-r 1s infinite linear;
    }

    .glyphicon.normal-right-spinner {
        -webkit-animation: glyphicon-spin-r 2s infinite linear;
        animation: glyphicon-spin-r 2s infinite linear;
    }

    .glyphicon.slow-right-spinner {
        -webkit-animation: glyphicon-spin-r 3s infinite linear;
        animation: glyphicon-spin-r 3s infinite linear;
    }

    .glyphicon.fast-left-spinner {
        -webkit-animation: glyphicon-spin-l 1s infinite linear;
        animation: glyphicon-spin-l 1s infinite linear;
    }

    .glyphicon.normal-left-spinner {
        -webkit-animation: glyphicon-spin-l 2s infinite linear;
        animation: glyphicon-spin-l 2s infinite linear;
    }

    .glyphicon.slow-left-spinner {
        -webkit-animation: glyphicon-spin-l 3s infinite linear;
        animation: glyphicon-spin-l 3s infinite linear;
    }

    @-webkit-keyframes glyphicon-spin-r {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }

    @keyframes glyphicon-spin-r {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }

    @-webkit-keyframes glyphicon-spin-l {
        0% {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }

        100% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    @keyframes glyphicon-spin-l {
        0% {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }

        100% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }


    a.strip {
        position: relative;
        display: inline-block;
        width: 100%;
    }

        a.strip:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 10;
            background: transparent url('/images/video-play.png') center center no-repeat;
        }

        a.strip.thumbnail img {
            width: 100%;
        }



    .baguetteBox {
        text-align: center;
    }

        .baguetteBox a {
            margin: 6px 8px;
            overflow: hidden;
            display: inline-block;
            box-shadow: 0 0 6px -1px #000;
        }


    .btn-google {
        border: none;
        background-image: url("/images/rtc/G.png");
        background-repeat: no-repeat;
        background-position: 16px center;
        background-size: 24px 24px;
        background-color: #4285F4;
        padding-left: 48px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

        .btn-google:hover, .btn-google:focus {
            background-color: #3689a9;
            background-position: 16px center;
        }
        
    .btn-apple {
        border: none;
        background-color: black;
        /*padding-left: 48px;*/
        padding-left: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
        color: white;
    }

    .btn-apple i.fa {
        margin-right: 8px;
        font-size: 1.2rem;
    }

    .btn-apple:hover, .btn-apple:focus {
        background-color: #444444;
    }

    .large-3 {
        width: 23.5%;
    }

    @media screen and (max-width: 1400px) {
        .large-3 {
            width: 23.2%;
        }
    }

    @media screen and (max-width: 900px) {
        .large-3 {
            width: 100% !important;
        }
    }

    .large-4 {
        padding-left: 0 !important;
        margin-left: 1.7%;
    }

    @media screen and (max-width: 900px) {
        .large-4 {
            margin-left: 0%;
        }
    }

    .large-4 large-offset-1 columns large-4 columns input-container {
        width: 16.66667%;
    }

    @media screen and (max-width: 900px) {
        .large-4 large-offset-1 columns large-4 columns input-container {
            width: 100% !important;
        }
    }

    .large-10 {
        width: 100%;
    }


    @media screen and (max-width: 900px) {
        .large-10 {
            width: 100% !important;
        }
    }


    @media screen and (min-width: 56.25em) {
        .large-4 {
            width: 32.333%;
            padding-left: 0 !important;
            margin-left: 1.7%;
        }
    }

    @media screen and (max-width: 900px) {
        .large-4 {
            width: 100% !important;
        }
    }

    @media screen and (min-width: 56.25em) {
        .large-6 {
            width: 50%;
        }
    }

    @media screen and (max-width: 900px) {
        .large-6 {
            width: 100% !important
        }
    }

    @media screen and (min-width: 56.25em) {
        .large-pull-1 {
            position: relative;
            left: -1.33333%;
        }
    }

    @media screen and (min-width: 48em) {
        .medium-6 {
            width: 50%;
        }
    }

    @media screen and (max-width: 900px) {

        .medium-6 {
            width: 100% !important
        }
    }

.pay-module .input-container input, .pay-module .input-container select {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #444444;
    border-radius: 5px;
    box-shadow: none;
    color: #626366;
    display: block;
    height: 30px;
    margin-top: 5px;
    padding: 5px;
    width: 100%;
    font-family: var(--rtc-font) !important;
    font-size: 1rem !important;
}

    .pay-module {
        background: linear-gradient(to bottom, #F1F1F1 0, #FFFFFF 50px);
    }

        .pay-module .card-submit img {
            height: 1.875rem;
        }

            .pay-module .card-submit img:not(:last-of-type) {
                margin-right: 0.375rem;
            }

    @media screen and (max-width: 900px) {
        .pay-module .card-submit {
            width: 100% !important
        }
    }

    @media screen and (max-width: 900px) {
        .pay-module .input-container {
            width: 100% !important
        }
    }

    .pay-module .input-container .error {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        font-size: 0.75rem;
        font-weight: bold;
        color: #ec5840;
        transition: 0.2s max-height 0.4s, opacity 0.2s;
    }

    .pay-module .error-form {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        text-align: center;
        font-weight: bold;
        color: #ec5840;
        transition: 0.2s max-height 0.4s, opacity 0.2s;
    }

    .columns {
        float: left;
    }

    @media screen and (min-width: 48em) {
        .columns {
            padding-left: 0.9375rem;
            padding-right: 0.9375rem;
        }
    }

    @media screen and (max-width: 900px) {
        .columns {
            padding-left: 0;
        }
    }



    .column.end:last-child:last-child, .end.columns:last-child:last-child, .search-nav .end.nav-text:last-child:last-child, .search-nav .end.nav-input:last-child:last-child, .trail-facts .quick-links .end.block:last-child:last-child {
        float: left;
    }

    @media screen and (min-width: 56.25em) {
        .large-offset-1 {
            margin-left: 8.33333%;
        }
    }


.section-header {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: var(--rtc-font);
    font-weight: 700;
    font-style: normal;
    color: inherit;
    text-rendering: optimizeLegibility;
    line-height: 1;
}

    @media screen and (min-width: 48em) {
        .section-header {
            margin-top: 1.25rem;
            margin-bottom: 2.5rem;
        }
    }

    .label {
        color: #333333;
        display: block;
        margin: 0;
        font-size: 0.875rem;
        font-weight: normal;
        line-height: 1.8;
    }

    .pay-module .card-submit .cards {
        padding-right: 0.9375rem;
    }

    .text-right {
        text-align: right;
        padding-right: 0 !important;
        margin-top: 2%;
    }

    label, .pay-module .card-submit .cards:before, input {
        color: #333333;
    }

    .pay-module .card-submit .cards:before {
        display: block;
        content: '\A';
        white-space: pre;
        margin-bottom: 0.25rem;
    }

    label, .pay-module .card-submit .cards:before {
        display: block;
        margin: 0;
        font-size: 0.875rem;
        font-weight: normal;
        line-height: 1.8;
        color: #444444;
    }

    .pay-module .input-container label, .pay-module .input-container .card-submit .cards:before, .pay-module .card-submit .input-container .cards:before {
        margin-bottom: 0.25rem;
    }

    .pay-module .row {
        max-width: 62.5rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }

    .pay-module .input-container {
        margin-bottom: 0;
    }



    form.has-error .error-form {
        opacity: 1;
        max-height: 1.25rem;
        transition: max-height 0.4s, 0.4s opacity 0.2s;
    }

    .pay-module .card-submit button {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1.875rem;
        background-color: #5D9732;
        width: 100%;
    }

button#pay-submit {
    background-color: #3ab1e5;
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    border-color: #2b6db6 !important;
    border-radius: 5px !important;
    box-shadow: none;
    font-size: 1.4rem;
    height: 50px;
    line-height: 1;
    padding: 10px 20px;
    border: 1px solid #b5cbd9;
    color: #ffffff;
    font-family: var(--rtc-font);
}

    .pay-module .card-submit .submit label, .pay-module .card-submit .submit .cards:before {
        opacity: 0;
    }

.donation-amt-btn {
    background-color: #3ab1e5;
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    border-color: #2b6db6 !important;
    border-radius: 5px !important;
    box-shadow: none;
    font-size: 1.2rem;
    height: 40px;
    line-height: 1;
    padding: 10px 20px;
    border: 1px solid #b5cbd9;
    color: #ffffff;
    font-family: var(--rtc-font);
    width: 21%;
}

    @media screen and (max-width: 900px) {
        .donation-amt-btn {
            width: 100%;
        }
    }

    #donate-options-label {
        margin-left: 10%;
        margin-bottom: 1%;
    }

    .other-amt-input {
        padding-left: 1%;
    }

    @media screen and (max-width: 1300px) {
        .other-amt-input {
            padding-left: 2%;
        }
    }

    @media screen and (max-width: 900px) {
        .other-amt-input {
            padding-left: 0;
        }
    }

    .donate-options-cols {
        width: 50%
    }

    @media screen and (max-width: 900px) {
        .donate-options-cols {
            width: 100%;
            padding-bottom: 5%;
        }
    }

    .donate-options {
        width: 100%;
        margin-left: 6.7%;
        margin-bottom: 2%;
    }

    @media screen and (max-width: 900px) {
        .donate-options {
            margin-left: 0%;
        }
    }

    @media screen and (max-width: 900px) {
        .text-right {
            text-align: center;
        }
    }

    .donate-reg-card-submit {
        position: relative;
        left: 20%;
        width: 55%;
    }

    @media screen and (min-width: 1301px) and (max-width: 1400px) {
        .donate-reg-card-submit {
            left: 8%;
            width: 80%;
        }
    }

    @media screen and (max-width: 900px) {
        .donate-reg-card-submit {
            left: 0;
        }
    }

    @media screen and (min-width: 901px) and (max-width: 1300px) {

        .donate-reg-card-submit {
            left: 15%;
            width: 70%;
        }
    }

    .donate-reg-email-pass {
        margin-left: 1.7%;
        width: 32.333%;
        padding: 0 !important;
    }

    @media screen and (max-width: 900px) {
        .donate-reg-email-pass {
            margin-left: 0;
            width: 100%;
        }
    }

    .donate-reg-addr2 {
        width: 50%;
    }

    @media screen and (max-width: 900px) {
        .donate-reg-addr2 {
            width: 100%;
        }
    }

    .donate-reg-city {
        padding-left: 0;
        width: 41%;
    }

    @media screen and (min-width: 1301px) and (max-width: 1400px) {
        .donate-reg-city {
            width: 38.2%;
        }
    }

    @media screen and (min-width: 901px) and (max-width: 1300px) {
        .donate-reg-city {
            padding-left: 0;
            width: 38%;
        }
    }

    .donate-reg-state {
        width: 15%;
    }

    .donate-cvv-fields {
        margin-left: 1.7%;
        width: 32.333%;
        padding: 0;
    }

    @media screen and (max-width: 900px) {
        .donate-cvv-fields {
            width: 100%;
            margin-left: 0%;
        }
    }

    .donate-reg-zip {
        width: 32%;
        padding-right: 0 !important;
    }

    .donate-reg-email {
        width: 100%;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .expyear {
        padding-right: 0;
        width: 20%;
        padding-left: 4%;
    }

    .expmm {
        width: 20%;
        padding-left: 4%;
        padding-right: 4%;
    }

    @media screen and (max-width: 900px) {
        .expyear {
            padding-left: 0% !important;
        }

        .expmm {
            padding-left: 0% !important;
            padding-right: 0% !important;
        }
    }


    .donate-reg-cvv {
        width: 44%;
        padding-left: 0;
        padding-right: 4%;
    }

    @media screen and (min-width: 901px) and (max-width: 1300px) {
        .donate-cvv {
            width: 13% !important
        }
    }

    @media screen and (min-width: 901px) and (max-width: 1300px) {
        .donate-city-state-zip {
            width: 36% !important
        }
    }

    @media screen and (max-width: 900px) {
        .donate-city-state-zip {
            width: 100% !important
        }
    }

    @media screen and (min-width: 901px) and (max-width: 1300px) {
        .donate-add2-cols {
            width: 25% !important
        }
    }

    @media screen and (max-width: 900px) {
        .donate-add2-cols {
            width: 100% !important
        }
    }

    .donate-btn {
        width: 47%;
    }

    .donate-cards {
        width: 40%;
    }

    .donate-card-submit {
        width: 55%;
    }

    .donate-add2-cols {
        float: left;
        width: 25%;
    }

    .donate-city-state-zip {
        width: 30%;
    }

    @media screen and (min-width: 901px) and (max-width: 1300px) {
        .donate-card-submit {
            left: 3% !important;
            width: 50% !important;
            padding-left: 0 !important;
        }

        .donate-cards {
            width: 50% !important;
        }

        .donate-btn {
            width: 39.2% !important;
            padding-left: 0 !important;
        }
    }

    @media screen and (max-width: 900px) {
        .donate-cards {
            width: 100% !important;
        }

        .donate-btn {
            width: 100% !important;
        }
    }

    input:: -webkit-input-placeholder {
        font-size: 20px;
        line-height: 3;
    }

    .input-container.has-error .error {
        opacity: 1;
        max-height: 1.25rem;
        transition: max-height 0.4s, 0.4s opacity 0.2s;
    }

    .input-container .error {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        font-size: 0.75rem;
        font-weight: bold;
        color: #ec5840;
        transition: 0.2s max-height 0.4s, opacity 0.2s;
    }

    .active {
        background-image: none;
        background-color: #356631;
        color: #ffffff;
    }

    .donation-amt-btn + .donation-amt-btn {
        margin-left: 4.4%;
    }

    @media screen and (min-width: 1301px) and (max-width: 1400px) {
        .donation-amt-btn + .donation-amt-btn {
            margin-left: 4.1%;
        }
    }

    @media screen and (min-width: 901px) and (max-width: 1300px) {
        .donation-amt-btn + .donation-amt-btn {
            margin-left: 3.8%;
        }
    }

    @media screen and (max-width: 900px) {
        .donation-amt-btn + .donation-amt-btn {
            margin-left: 0%;
        }

        .donation-amt-btn {
            margin-bottom: 5%;
        }
    }

.email-optin-msg {
    margin-top: 1%;
    text-align: center;
    color: darkgreen;
    font-family: var(--rtc-font);
    font-size: 1rem;
}

.success-msg {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 5rem;
    margin-top: 5rem;
    height: 4rem;
    padding-top: 10%;
    color: darkgreen;
    font-family: var(--rtc-font);
}

    @media screen and (max-width: 900px) {
        .success-msg {
            font-size: 1rem;
            height: 2em;
            padding-top: 25%;
        }
    }

    @media screen and (max-width: 45em) {
        .lv_window {
            top: 200px !important;
            left: 0px !important;
            width: 96% !important;
            height: 372px !important;
            margin-left: 2% !important;
            margin-right: 2% !important;
        }

        .lv_bubble {
            top: 80px !important;
            left: 7px !important;
            width: 97% !important;
            height: 75% !important;
        }

        .lv_content {
            width: 97% !important;
            height: 350px !important;
            top: 30px !important;
            left: 0px !important;
            opacity: 1 !important;
            margin-left: 2% !important;
            margin-right: 2% !important;
        }

        #__gsc-lbwrapperdiv {
            width: 100% !important;
            height: 350px !important;
            visibility: visible !important;
            display: block !important;
        }

        .lv_bubble canvas {
            width: 100%;
            height: 100%;
        }

        .lv_shadow canvas {
            height: 200px;
        }

        .lv_button_top_close {
            top: -5px !important;
            right: -2px !important;
        }

        .lv_content_wrapper {
            width: 100% !important;
            height: 100% !important;
        }

        .lv_skin {
            width: 100% !important;
            height: 100% !important;
        }
    }

    @media screen and (max-width: 45em) {
        #col-reversed {
            display: flex;
            flex-direction: column-reverse;
        }
    }

    /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */