body {
    margin: 0
}

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

code {
    font-size: 1em
}

input, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

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

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

input {
    line-height: normal
}

textarea {
    overflow: auto
}

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

td, th {
    padding: 0
}

.grd {
    padding-left: 1rem;
    padding-right: 1rem
}

.grd-row {
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 100%
}

.grd-row-col-1-6 {
    max-width: 16.66667%;
    -webkit-flex-basis: 16.66667%;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%
}

.grd-row-col-2-6 {
    max-width: 33.33333%;
    -webkit-flex-basis: 33.33333%;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%
}

.grd-row-col-3-6 {
    max-width: 50%;
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%
}

.grd-row-col-4-6 {
    max-width: 66.66667%;
    -webkit-flex-basis: 66.66667%;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%
}

.grd-row-col-5-6 {
    max-width: 83.33333%;
    -webkit-flex-basis: 83.33333%;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%
}

.grd-row-col-6 {
    max-width: 100%;
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.grd-row-col-1-6, .grd-row-col-2-6, .grd-row-col-3-6, .grd-row-col-4-6, .grd-row-col-5-6, .grd-row-col-6 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box
}

*, :after, :before {
    box-sizing: border-box
}

.measure {
    max-width: 48rem;
    margin: 0 auto
}

a {
    color: #3498db
}

a:active, a:focus, a:hover {
    color: #217dbb
}

.bg--red {
    background-color: #e74c3c
}

.bg--orange {
    background-color: #f39c12
}

.bg--blue {
    background-color: #3498db
}

.bg--green {
    background-color: #25ba84
}

.bg--white {
    background-color: #fff
}

.bg--light-gray {
    background-color: rgba(216, 216, 216, .99)
}

.bg--mid-gray {
    background-color: rgba(144, 144, 144, .99)
}

.bg--dark-gray {
    background-color: rgba(72, 72, 72, .99)
}

.bg--off-white {
    background-color: rgba(250, 250, 250, .99)
}

.fnt--red {
    color: #e74c3c
}

.fnt--orange {
    color: #f39c12
}

.fnt--blue {
    color: #3498db
}

.fnt--green {
    color: #25ba84
}

.fnt--white {
    color: #fff
}

.fnt--light-gray {
    color: rgba(216, 216, 216, .99)
}

.fnt--mid-gray {
    color: rgba(144, 144, 144, .99)
}

.fnt--dark-gray {
    color: rgba(72, 72, 72, .99)
}

.fnt--off-white {
    color: rgba(250, 250, 250, .99)
}

.m0 {
    margin: 0
}

.m1 {
    margin: 1rem
}

.mx1 {
    margin-left: 1rem;
    margin-right: 1rem
}

.my1 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.m2 {
    margin: 2rem
}

.mx2 {
    margin-left: 2rem;
    margin-right: 2rem
}

.my2 {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.p0 {
    padding: 0
}

.p1 {
    padding: 1rem
}

.px1 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py1 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.p2 {
    padding: 2rem
}

.px2 {
    padding-left: 2rem;
    padding-right: 2rem
}

.py2 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

html {
    font-size: 12px
}

@media screen and (min-width: 32rem) and (max-width: 48rem) {
    html {
        font-size: 13px
    }
}

@media screen and (min-width: 48rem) {
    html {
        font-size: 16px
    }
}

body {
    font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    /*line-height: 1.85;*/
    color: #333
}

p {
    font-size: 1rem;
    margin-bottom: 1.3rem
}

.h1, .h2, .h3, .h4, h1, h2, h3, h4 {
    margin: 1.414rem 0 .5rem;
    font-weight: inherit;
    line-height: 1.42
}

.h1, h1 {
    margin-top: 0;
    font-size: 3.998rem
}

.h2, h2 {
    font-size: 2.827rem
}

.h3, h3 {
    font-size: 1.999rem
}

.h4, h4 {
    font-size: 1.414rem
}

.h5, table th {
    font-size: 1.121rem
}

.h6, h6 {
    font-size: .88rem
}

.btn--s, .small, small {
    font-size: .707em
}

code {
    font-family: Monaco, "Lucida Console", Courier, monospace
}

.italic {
    font-style: italic
}

.thin {
    font-weight: 100
}

.bold {
    font-weight: 700
}

.caps, table th {
    font-variant: small-caps
}

.muted {
    opacity: .7
}

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

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

.txt--left, table th {
    text-align: left
}

.oflow-y--scroll {
    overflow-y: scroll
}

.w100--s {
    width: 100%;
    display: block
}

@media screen and (min-width: 32rem) {
    .w100--s {
        width: auto;
        display: inline-block
    }
}

img, textarea {
    max-width: 100%
}

.btn, .btn--blue, .btn--gray, .btn--green, .btn--link, .btn--red {
    border-radius: 3px
}

.brdr--light-gray {
    border: thin solid rgba(216, 216, 216, .99)
}

.brdr--mid-gray {
    border: thin solid rgba(144, 144, 144, .99)
}

.brdr--dark-gray {
    border: thin solid rgba(72, 72, 72, .99)
}

.brdr--off-white {
    border: thin solid rgba(250, 250, 250, .99)
}

.btn, .btn--blue, .btn--gray, .btn--green, .btn--link, .btn--red {
    padding: .5rem 1rem;
    border: 2px solid #ccc;
    color: #333;
    text-decoration: none;
    text-align: center
}

.btn:active, .btn:focus, .btn:hover {
    background-color: rgba(0, 0, 0, .05);
    color: #000
}

.btn--link {
    border-color: transparent;
    color: #3498db
}

.btn--link:hover {
    background-color: transparent;
    color: #1d6fa5
}

.btn--blue {
    border-color: #2792d9;
    background-color: #3498db;
    color: #fff
}

.btn--blue:active, .btn--blue:focus, .btn--blue:hover {
    color: #fff;
    background-color: #217dbb
}

.btn--green {
    border-color: #22a977;
    background-color: #25ba84;
    color: #fff
}

.btn--green:active, .btn--green:focus, .btn--green:hover {
    color: #fff;
    background-color: #1d8f65
}

.btn--gray {
    border-color: rgba(59, 59, 59, .99);
    background-color: rgba(72, 72, 72, .99);
    color: #fff
}

.btn--gray:active, .btn--gray:focus, .btn--gray:hover {
    color: #fff;
    background-color: rgba(46, 46, 46, .99)
}

.btn--red {
    border-color: #e43525;
    background-color: #e74c3c;
    color: #fff
}

.btn--red:active, .btn--red:focus, .btn--red:hover {
    color: #fff;
    background-color: #d62a1a
}

.btn--s {
    padding: .5rem
}

.list--unstyled {
    list-style-type: none
}

input, textarea {
    padding: .5rem;
    margin-bottom: .5rem;
    display: block;
    width: 100%;
    box-shadow: none;
    border: thin solid rgba(216, 216, 216, .99)
}

input[type=submit] {
    margin-top: .85rem
}

.media {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.media .media-figure {
    margin-right: 1em
}

.media .media-body {
    -webkit-flex: 1 0 0;
    -ms-flex: 1 0 0;
    flex: 1 0 0
}

table > thead {
    border-bottom: thin solid rgba(250, 250, 250, .99)
}

table td, table th {
    padding: .25rem;
    word-wrap: none;
    line-height: 1
}

/* Label styles: style as needed */
label {
    font-size: 0.9em;
    color: #777;
}

/* Container used for styling the custom select, the buttom class adds the bg gradient, corners, etc. */
.custom-select {
    position: relative;
    display: block;
    margin-top: 0.5em;
    padding: 0;
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
    width: 100%;
    margin: 0;
    background: none;
    border: 1px solid transparent;
    outline: none;
    /* Prefixed box-sizing rules necessary for older browsers */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* Remove select styling */
    appearance: none;
    -webkit-appearance: none;
    /* Magic font size number to prevent iOS text zoom */
    font-size: 16px;
    /* General select styles: change as needed */
    font-family: helvetica, sans-serif;
    font-weight: bold;
    color: #444;
    /*padding: .6em 1.9em .5em .8em;*/
    padding: 0.4em 1.2em .3em .8em;
    line-height: 1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */

.custom-select::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 8px;
    top: 50%;
    right: 1em;
    margin-top: -4px;
    background-image: url('select-arrow.png');
    background-repeat: no-repeat;
    background-size: 100%;
    /* These hacks make the select behind the arrow clickable in some browsers */
    pointer-events: none;
}

/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting hack via http://browserhacks.com/#hack-f1070533535a12744a0381a75087a915 */
_:-ms-input-placeholder, :root .custom-select select::-ms-expand {
    display: none;
}

/* Removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
_:-ms-input-placeholder, :root .custom-select select:focus::-ms-value {
    background: transparent;
    color: #222;
}

/* Firefox >= 2 -- Older versions of FF (v2 - 6) won't let us hide the native select arrow, so we'll just hide the custom icon and go with native styling. Targeting hack via http://browserhacks.com/#hack-756739b33c37fb7db4cce645bbf7ea5f */
/* Show only the native arrow */
body:last-child .custom-select::after, x:-moz-any-link {
    display: none;
}

/* reduce padding */
body:last-child .custom-select select, x:-moz-any-link {
    padding-right: .8em;
}

/* Firefox 6+ -- Hide the native select and arrow. We've found the simplest way to hide the native styling in FF is to make the select bigger than its container and clip it. */
/* The specific FF selector used below successfully overrides the previous rule that turns off the custom icon; other FF hacky selectors we tried, like `*>.custom-select::after`, did not undo the previous rule. Targeting hack via http://browserhacks.com/#hack-443a4eb168ccf066e7c2909be4911af1 */

/* Show the custom arrow again */
_::-moz-progress-bar, body:last-child .custom-select:after {
    display: block;
}

/* Hacks to hide the native select appearance */
_::-moz-progress-bar, body:last-child .custom-select select {
    -moz-appearance: window;
    text-indent: 0.01px;
    text-overflow: "";
    /* increase padding to make room for menu icon */
    padding-right: 13%;
}

/* In FF 30+ -- Set overflow:hidden on the wrapper to clip the native select's arrow. Need to get extra wide (120%) because newest Firefox/Android is terrible. The downside is this makes the menu 20% wider than it should be when it opens. Hack targeting via http://browserhacks.com/#hack-cfd4c21603b122acfda8e81f41cdb320 */
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
    /* Clip select with the container */
    _::-moz-progress-bar, body:last-child .custom-select {
        overflow: hidden;
    }

    /* Make select extra wide */
    _::-moz-progress-bar, body:last-child .custom-select select {
        width: 120%;
    }
}


/* Firefox 7+ focus style - This works around the issue that -moz-appearance: window kills the normal select focus. Using semi-opaque because outline doesn't handle rounded corners */
_::-moz-progress-bar, body:last-child .custom-select select:focus {
    outline: 2px solid rgba(180, 222, 250, .7);
}


/* Opera - Pre-Blink nix the custom arrow, go with a native select button */
x:-o-prefocus, .custom-select::after {
    display: none;
}


/* Hover style */
.custom-select:hover {
    border: 1px solid #888;
}

/* Focus style */
.custom-select select:focus {
    outline: none;
    box-shadow: 0 0 1px 3px rgba(180, 222, 250, 1);
    background-color: transparent;
    color: #222;
    border: 1px solid #aaa;
}


/* Firefox focus has odd artifacts around the text, this kills that */
.custom-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.custom-select option {
    font-weight: normal;
}


/* These are just demo button-y styles, style as you like */
.button {
    border: 1px solid #bbb;
    border-radius: .3em;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
    background: #f3f3f3; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); /* W3C */
}