@charset "UTF-8";
/*
 * ALL CSS declarations as well as @media
 * 
 * Also supported: 
 * "Label" the body{} with strings that correspond to js functions that we want to fire. 
 * A window.resize() event checks this label and functions fire when conditions are met 
 *
 * The nice part is, these labels can be strings with more than one item in them. 
 * As many JS functions that we want to fire at different widths can be controlled with these labels.
 *
 * - - -
 * Our Media Query CSS is all inline, inside the various project files. 
 * No fancy code needed here, our pe-media() mixin takes care of it. 
 */
/* Defaults */
/* ! ===== Functions – Keep these consistent from project to project ===== */
/*
 * Functions and mixins are very similar in nature. 
 * Because they can both accept variables, you might end up creating a mixin when what you really need is a function. 
 * Instead of outputting lines of Sass/CSS the way mixins do, functions return a value. 
 * http://thesassway.com/advanced/pure-sass-functions
 */
/* 
 * Getter function for color palettes using SASS maps
 * http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/ 
 */
/* 
 * Turn numbers with units into unitless numbers: https://github.com/nex3/sass/issues/533 
 * Two ways to do it, but neither are foolproof. 
 * Both will fail when decimal points are passed to them
 */
/*
 * Calculate the width of a column based on any number of columns grid
 * @accepts a number from 1 - infinity
 * @returns: percent value
 * @requires: Project cols variable. Default supplied to prevent failure. 
 */
/* Returns the opposite direction of each direction in a list
 * @author Hugo Giraudel
 * @param {List} $directions - List of initial directions
 * @return {List} - List of opposite directions
 */
/* 
 * Convert an rgba color value to the closet approximation in a hex value 
 * http://alwaystwisted.com/post.php?s=2013-05-06-smarter-rgba-fallbacks-with-sass
 * @accepts: rgba() color value and a percentage
 * @returns: hexidecimal color value
 */
/* 
 * Emulate the way Adobe Illustrator allows percentages of defined global colors 
 * @accepts: color as Hex, RGB or HSL. Percent as numeric
 * Optional: Background color for mixing function
 * @returns: hexidecimal color
 * Inspiration from http://thesassway.com/intermediate/mixins-for-semi-transparent-colors
 */
/* 
 * Emulate Adobe Photoshop color blend modes 
 * @accepts: two colors as Hex or RGB
 * @returns: Color in RGB format
 * Inspiration from https://github.com/heygrady/scss-blend-modes/blob/master/stylesheets/_blend-modes.scss
 */
/* ! ===== Framework Mixins ===== */
/*
 * Mixins that we'd like to keep consistent from project to project
 *
 * Functions and mixins are very similar in nature. 
 * Because they can both accept variables, you might end up creating a mixin when what you really need is a function. 
 * Instead of outputting lines of Sass/CSS the way mixins do, functions return a value. 
 * http://thesassway.com/advanced/pure-sass-functions
 */
/* 
 * Output contents wrapped in a @media rule; output contents without the rule; or skip output
 * @accepts: min width, max width (optional), $height (boolean), $serve-to-nomq (boolean), any @content
 * @requires: $mq-support (boolean)
 * @returns: @content
 *      If $mq-support is set to false AND $serve-to-nomq is left alone (true), the CSS gets output without a media query block.
 *      If $serve-to-nomq is also set to false, nothing will be output at all. 
 */
/* 
 * Output contents wrapped in a @media rule; output contents without the rule; or skip output
 * @accepts: nothing
 * @requires: $old-ie (boolean)
 * @returns: @content
 */
/*
 * Provide a hover effect for non-touch devices, turn it into an Active state for mobile, and maintain a fallback. 
 * @requires Modernizr as a JS dependency to get .no-touch classes
 * Adds styles via @content
 */
/* 
 * Output a little 'tag' on the body:after content
 * @accepts: string
 * @requires: nothing
 * @returns: entire body pseudo-class declaration
 * Usage: @include javascript_tag( 'actionhook' );
 */
/*
 * REM is a helper function in Bourbon: font-size: rem(16); 
 * But, we'd like a mixin that outputs a fallback
 */
/* 
 * Force a newline after an element using :after
 * Container element MUST be 'inline' for this method to work
 */
/* 
 * Maintain ratio mixin. Great for responsive grids, or videos.
 * "Crops" the element to the size of the container with overflow: hidden
 * https://gist.github.com/brianmcallister/2932463
 * 
 * $ratio - Ratio the element needs to maintain.
 * 
 * Example: A 16:9 ratio would look like this: .element { @include maintain-ratio(16 9); }
 */
/* ! ===== Typography Manipulation ===== */
/* 
 * Font-size-adjust: the problem and a solution
 * Not widely supported, can't use this yet 
$font-size-adjust: 0.465; 
@mixin font-size-adjust() {
    -webkit-font-size-adjust: $font-size-adjust; // No support yet 
    font-size-adjust: $font-size-adjust; // Firefox only 
}*/
/* Since we can't use the above, let's create our own way to do it. */
/* ! ===== Our own Cross Browser mixins ===== */
/*
 * Cross browser min-height/max-height without using an IE-specific expression
 * http://css-tricks.com/snippets/css/cross-browser-min-height/
 */
/* http://minhd.net/cross-browser-min-height-max-height/ */
/* Use IE-specific expressions for min-width in older IE */
/* 
 * Cross browser method to apply word-breaking and hyphenation (where supported) 
 */
/* ! ===== Complete Gradient mixins with solid color fallbacks ===== */
/* Vertical gradient mixin to make things easier. */
/* Horizontal gradient */
/* 
 * Cross browser RGBA
 * Accepts a color in rgba() format. Outputs an IE filter version of the color with transparency.  
 */
/*
 * Cross-browser Box Shadows, IE 6-8 and modern browsers
 * Old IE gets a blurry shadow applied to all sides equally. To do more, pull this code out and use as directed. 
 * http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/
 */
/* ! ===== Other Namespaced Mixins ===== */
/* Add to a pseudo-element to make a triangle shape. Author will need to position the element where they want it. */
/* Handle inline-block declarations consistently */
/* ! ===== Animation helpers ===== */
/* 
 * Cross browser @keyframe definition set 
 * Compass doesn't have one yet, so we namespace this so as not to conflict with a future release
 */
/* 
 * Cross browser animation definition set 
 * Compass doesn't have one yet, so we namespace this so as not to conflict with a future release
 * 
 * $timing: linear | ease | ease-in | ease-out | ease-in-out
 * $delay: seconds before animation starts
 * $count: how many times the animation will loop. 'infinite' is acceptable
 * $direction: normal | alternate (Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.)
 * $fill-mode: none | forwards | backwards | both
 *      forwards (The animation’s final keyframe continues to apply after the final iteration of the animation completes)
 *      backwards (The animation’s initial keyframe is applied as soon as the animation style is applied to an element. 
 *      This only affects animations that have a nonzero value for -webkit-animation-delay)
 *      both (The animation’s initial keyframe is applied as soon as the animation style is applied to an element, 
 *      and the animation’s final keyframe continues to apply after the final iteration of the animation completes. 
 *      The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay)
 */
/* ! ===== Mostly borrowed from HTML5 Boilerplate with tweaks ===== */
/* Reset stuff with classes declarations */
/* HTML5 Boilerplate Non-semantic helper classes */
/* Add in the HTML5 Boilerplate rules for print (generic). Modify as needed. */
/* ! ===== Support variables ===== */
/* ! ===== Project Variables ===== */
/* Grid */
/* Color Palette Maps */
/*
 * Use the function palette(palette-name,color-name) to fetch colors
 * Supply at least a 'base' for each pallette, as that will be the default. 
 * Create as many different pallettes (lists) as needed. 
 */
/* Background colors */
/* Typography */
/* ! ===== Input Types ===== */
/* 
 * Set all the up-and-coming input text types here for easier reference 
 * Does not include types that are not meant to be displayed full width, such as: 
        type=number, type=range, type=date, type=color
 * Usage: #{$form-text-input}
 *
 * http://www.w3.org/html/wg/drafts/html/master/forms.html#states-of-the-type-attribute
 */
/* The idea: 
  One list of breakpoints. 
  One list of type sizes/scales with a corresponding key name. 
  @include all-type-sizes( size-grouping ): A mixin that can iterate and output all type sizes from one breakpoint
  @incude one-type-size( element ): A mixin that can iterate over the breakpoints, find the 
	  matching type size, and output all breakpoint sizes for that element.
  type-size( element, size-grouping ): A function that can output one type size at one specific breakpoint
 */
/* Example: output a specific set of element/values */
/* Example: output one specific value for a breakpoint/element */
/* Example: output the entire array of sizes according to breakpoints for one element */
/* The base element */
/* The H1 element */
/* The .micro class */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, b, cite, code, dd, del, dfn, dl, dt, em, i, img, ins,
kbd, li, ol, q, samp, small, strong, sub, sup, ul, var,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

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

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeSpeed;
}

img, embed, object, video, iframe {
  max-width: 100%;
}

ul, ol {
  margin-left: 1.5em;
}

ul {
  list-style: square;
}

ol {
  list-style: decimal;
}

ol ol {
  list-style: upper-alpha;
}

ol ol ol {
  list-style: lower-roman;
}

ol ol ol ol {
  list-style: lower-alpha;
}

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

code, kbd, samp {
  font-family: "Source Code Pro", "Anonymous Pro", Consolas, "Envy Code R", "Ubuntu Mono", Inconsolata-g, Inconsolata, monospace;
}

blockquote {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q {
  display: inline;
}

q:before {
  content: "“";
}

q:after {
  content: "”";
  white-space: nowrap;
}

q q:before {
  content: "‘";
}

q q:after {
  content: "’";
}

small {
  font-size: 13px;
  font-size: 0.8125rem;
}
@media (min-width: 60em) {
  small {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media (min-width: 75em) {
  small {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

b, strong, th {
  font-weight: 700;
}

i, em, cite {
  font-style: italic;
}

s, strike, del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  cursor: help;
}

var {
  font-family: Georgia, serif;
}

code, kbd, samp, del, ins, mark {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
}

sub, sup {
  font-size: 75%;
  line-height: 1;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  text-align: left;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #e5e7e6;
  margin: 1.75em 0;
  padding: 0;
}

input, textarea {
  cursor: text;
}

button, select, .button {
  cursor: pointer;
}

input, textarea, button, select {
  margin: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

input[type="checkbox"], input[type="radio"] {
  display: inline-block;
  padding: 0;
}

input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: baseline;
}

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

input[type="search"] {
  -webkit-appearance: textfield;
}

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

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

nav ul,
menu ul,
[role=menu],
[role=tablist] {
  margin-left: 0;
  list-style: none;
}

nav a,
menu a,
[role=menu] a,
[role=tablist] a {
  display: block;
}

[hidden], template {
  display: none;
  visibility: hidden;
}

abbr.initialism {
  speak: spell-out;
}

abbr.truncation {
  speak: normal;
}

canvas {
  -ms-touch-action: double-tap-zoom;
}

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

/* MyFonts: @import must be at top of file, otherwise CSS will not work */
/* ! ==== A Grid – Can be modified per client ==== */
/* 
    Why a roll-your-own grid system? 
    Simplicity. 
    This set of declarations is simple to understand, use and modify. 
    We rarely need to push and pull and pad or margin equal to the width of a single column. 
    Plus, I prefer static gutters and flexible columns. 
    
    HTML Usage Sample: 
    .container          Sets the max-width of the layout. Flexible under that width. 
    .container__tight   Optional "tight" style – half the padding of the normal
    .[number]-col       Declares what the maximum number of columns that a group will layout to
    .column             Declares an element that will float
    .not-column         Declares an element that will not float, but needs the same padding for layout purposes inside .container. 
    
    Example: 
    <div class="container">
        <h1 class="column--not">Title</h1>
        <div class="column--two">
            <div class="column"> Content </div>
            <div class="column"> Content </div>
        </div>
    </div>
    
    @requires these variables: 
    $total-max-width
    $grid-spacing
    $vert-grid-spacing
*/
/* ! ===== Spacing ===== */
.container, .column {
  padding-left: 16px;
  padding-right: 16px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.column--two,
.column--four, .column--default,
.column--default__gift-and-news,
.column--default__activity-and-help,
.column--default__receipt, .column--foot {
  margin-left: -16px;
  margin-right: -16px;
  margin-left: -1rem;
  margin-right: -1rem;
}

/* ! ===== Containers ===== */
.container {
  margin: 0 auto;
  min-width: 320px;
  max-width: 85.375em;
}
.lt-ie8 .container {
  width: 1366px;
}

/* ! ===== Rows and Columns ===== */
.lt-ie8 .column--two,
.lt-ie8 .column--four, .lt-ie8 .column--default,
.lt-ie8 .column--default__gift-and-news,
.lt-ie8 .column--default__activity-and-help,
.lt-ie8 .column--default__receipt, .lt-ie8 .column--foot {
  position: relative;
  zoom: 1;
}

.column {
  padding-bottom: 1.75em;
}

.column--not {
  margin-left: 16px;
  margin-right: 16px;
  margin-left: 1rem;
  margin-right: 1rem;
}

/*
 * Mixins and elements for this specific project
 */
/* - - - - - */
/* 
 * Headers. 
 * We use mixins so we can manage these in one place. 
 * Used in typography.scss and mce.scss 
 */
/* ! ==== Global General Typographic / Element Styles ==== */
html {
  font-size: 100%;
}
html.no-touch {
  overflow-x: hidden;
}

body {
  color: #44484c;
}
@media (max-width: 47.4375em) {
  body {
    position: relative;
  }
}
@media (min-width: 47.5em) {
  body {
    text-rendering: optimizeLegibility;
  }
}

html,
body {
  background-color: #fff;
}

body,
input,
textarea,
select,
button {
  font: 400 100%/1.75 Roboto, "Helvetica Neue", Helvetica, Arial, sans;
}

/* ! ===== Generic declarations ===== */
a {
  color: #0f1583;
  text-decoration: none;
}
a[href^="tel:"] {
  color: #44484c;
  text-decoration: none;
}
.touch a[href^="tel:"] {
  border-bottom: 2px dotted #0f1583;
}
.no-js a:hover, .no-js a:focus, .js.no-touch a:hover, .js.no-touch a:focus, .js.touch a:active {
  color: #81dcd1;
  text-decoration: none;
}

a,
input[type="submit"], input[type="reset"], input[type="button"], button {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
}

::-moz-selection {
  background: #0f1583;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #0f1583;
  color: #fff;
  text-shadow: none;
}

img {
  display: block;
  margin: 0 auto;
}

/* ! ===== Headers & Type Sizes ===== */
.giga {
  font-size: 52px;
  font-size: 3.25rem;
}
@media (min-width: 60em) {
  .giga {
    font-size: 78px;
    font-size: 4.875rem;
  }
}
@media (min-width: 75em) {
  .giga {
    font-size: 113px;
    font-size: 7.0625rem;
  }
}

.mega {
  font-size: 44px;
  font-size: 2.75rem;
}
@media (min-width: 60em) {
  .mega {
    font-size: 63px;
    font-size: 3.9375rem;
  }
}
@media (min-width: 75em) {
  .mega {
    font-size: 87px;
    font-size: 5.4375rem;
  }
}

.kilo, .balance--amount {
  font-size: 37px;
  font-size: 2.3125rem;
}
@media (min-width: 60em) {
  .kilo, .balance--amount {
    font-size: 51px;
    font-size: 3.1875rem;
  }
}
@media (min-width: 75em) {
  .kilo, .balance--amount {
    font-size: 67px;
    font-size: 4.1875rem;
  }
}

.alpha, .typography h1, .content--title {
  color: #505050;
  text-transform: uppercase;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-size: 31px;
  font-size: 1.9375rem;
}
@media (min-width: 60em) {
  .alpha, .typography h1, .content--title {
    font-size: 41px;
    font-size: 2.5625rem;
  }
}
@media (min-width: 75em) {
  .alpha, .typography h1, .content--title {
    font-size: 52px;
    font-size: 3.25rem;
  }
}
.alpha a, .typography h1 a, .content--title a {
  color: #505050;
}

.bravo, .typography h2 {
  color: #888;
  font-family: TradeGothicLT-CondEighteen, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-size: 26px;
  font-size: 1.625rem;
}
@media (min-width: 60em) {
  .bravo, .typography h2 {
    font-size: 33px;
    font-size: 2.0625rem;
  }
}
@media (min-width: 75em) {
  .bravo, .typography h2 {
    font-size: 40px;
    font-size: 2.5rem;
  }
}
.bravo a, .typography h2 a {
  color: #888;
}

.charlie, .typography h3, .tabbed--content--title {
  color: #81dcd1;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-size: 22px;
  font-size: 1.375rem;
}
@media (min-width: 60em) {
  .charlie, .typography h3, .tabbed--content--title {
    font-size: 27px;
    font-size: 1.6875rem;
  }
}
@media (min-width: 75em) {
  .charlie, .typography h3, .tabbed--content--title {
    font-size: 31px;
    font-size: 1.9375rem;
  }
}
.charlie a, .typography h3 a, .tabbed--content--title a {
  color: #81dcd1;
}

.delta, .typography h4, .tabs--link, .mainfoot--title {
  color: #627c90;
  font-weight: 700;
  font-size: 19px;
  font-size: 1.1875rem;
}
@media (min-width: 60em) {
  .delta, .typography h4, .tabs--link, .mainfoot--title {
    font-size: 22px;
    font-size: 1.375rem;
  }
}
@media (min-width: 75em) {
  .delta, .typography h4, .tabs--link, .mainfoot--title {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
.delta a, .typography h4 a, .tabs--link a, .mainfoot--title a {
  color: #627c90;
}

.echo, .typography h5 {
  color: #627c90;
  font-weight: 700;
  letter-spacing: .0625em;
  text-transform: uppercase;
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .echo, .typography h5 {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .echo, .typography h5 {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.echo a, .typography h5 a {
  color: #627c90;
}

.foxtrot, .typography h6 {
  color: #ff9700;
  font-weight: 700;
  letter-spacing: .0625em;
  text-transform: uppercase;
  font-size: 13px;
  font-size: 0.8125rem;
}
@media (min-width: 60em) {
  .foxtrot, .typography h6 {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media (min-width: 75em) {
  .foxtrot, .typography h6 {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
.foxtrot a, .typography h6 a {
  color: #ff9700;
}

.micro, .utility--link, .breadcrumbs p, .copyright p, .balance--label, .table--col__actions .button, .give--nav--label, .thanks--print, .manage--users .table--row__header .table--col, .manage--funds .table--row__header .table--col {
  font-size: 13px;
  font-size: 0.8125rem;
}
@media (min-width: 60em) {
  .micro, .utility--link, .breadcrumbs p, .copyright p, .balance--label, .table--col__actions .button, .give--nav--label, .thanks--print, .manage--users .table--row__header .table--col, .manage--funds .table--row__header .table--col {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media (min-width: 75em) {
  .micro, .utility--link, .breadcrumbs p, .copyright p, .balance--label, .table--col__actions .button, .give--nav--label, .thanks--print, .manage--users .table--row__header .table--col, .manage--funds .table--row__header .table--col {
    font-size: 14px;
    font-size: 0.875rem;
  }
}

hr {
  border-top: 1px solid #e5e7e6;
}

/* ! ===== Accesibility and Language Support ===== */
html[dir=rtl] {
  direction: rtl;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #6b6b6b;
}

/* ! ===== JS elements ===== */
/*<article class="js-sticky">
	<div class="js-sticky--wrapper">
		[ ... ]
	</div>
	<aside class="js-sticky--element" role="complementary">
		<div class="js-sticky--element--inner">
			[ ... ]
		</div>
	</aside>
</article>*/
.js-sticky--wrapper {
  position: relative;
}
@media (min-width: 47.5em) {
  .column--default .js-sticky--element.js-stuck, .column--default .js-sticky--element.js-stuck-end {
    position: fixed;
    top: 16px;
  }
  .column--default .js-sticky--element.js-stuck[role="complementary"], .column--default .js-sticky--element.js-stuck-end[role="complementary"] {
    max-width: 85.375em;
    width: 100%;
  }
  .column--default .js-sticky--element.js-stuck .column--default .js-sticky--element--inner, .column--default .js-sticky--element.js-stuck-end .column--default .js-sticky--element--inner {
    margin-left: 58.33333%;
    padding-left: 1.125em;
    width: 41.66667%;
  }
  .column--default .js-sticky--element.js-stuck-end {
    position: absolute;
    top: auto;
    bottom: 0;
  }
}
@media (min-width: 60em) {
  .js-sticky .column--default__activity-and-help [role="main"] {
    position: relative;
    z-index: 10;
  }
  .column--default__activity-and-help .js-sticky--element.js-stuck, .column--default__activity-and-help .js-sticky--element.js-stuck-end {
    position: fixed;
    top: 16px;
    z-index: 1;
  }
  .column--default__activity-and-help .js-sticky--element.js-stuck[role="complementary"], .column--default__activity-and-help .js-sticky--element.js-stuck-end[role="complementary"] {
    max-width: 85.375em;
    width: 100%;
  }
  .column--default__activity-and-help .js-sticky--element.js-stuck-end {
    position: absolute;
    top: auto;
    bottom: -16px;
  }
  .column--default .js-stuck .js-sticky--element--inner, .column--default .js-stuck-end .js-sticky--element--inner, .column--default__activity-and-help .js-stuck .js-sticky--element--inner, .column--default__activity-and-help .js-stuck-end .js-sticky--element--inner {
    margin-left: 66.66667%;
    padding-left: 1.375em;
    width: 33.33333%;
  }
}

/* ! ===== Placeholder definitions to use with @extend ===== */
/* Consider carefully when creating an @extend. 
 * "Should this be a mixin that I can pass variables to?"
 * A mixin will create repeated groups of markup throughout the stylesheet, and while 
 * it might be more advantageous to group elements that share rules together with @extend, 
 * @extend puts rules in one place which may make it harder to override when needed. 
 * 
 * Performance-wise, when things get g-zipped on the server, one is not better than the other
 * 
 * Consider: http://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/
 */
.column--two:after,
.column--four:after, .column--default:after,
.column--default__gift-and-news:after,
.column--default__activity-and-help:after,
.column--default__receipt:after, .column--foot:after, form:after, .mainnav:after, .mainnav [role=navigation]:after, .tabs:after, .activity--header:after, .giftlist--list li:after {
  content: "";
  display: table;
  clear: both;
}

a, button,
input,
textarea {
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
}

.news--header, .help--header, .activity--header, .manage--widget--header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #505050;
}

.tabs--link, .activity--actions .button, .activity--statements .button, .activity--export .button, .give .form--action .button, .give--inner .delta, .give--inner .typography h4, .typography .give--inner h4, .give--inner .tabs--link, .give--inner .mainfoot--title,
.giftlist--inner .delta,
.giftlist--inner .typography h4,
.typography .giftlist--inner h4,
.giftlist--inner .tabs--link,
.giftlist--inner .mainfoot--title,
.thanks--card .charlie,
.thanks--card .typography h3,
.typography .thanks--card h3,
.thanks--card .tabbed--content--title, .giftlist--submit .button, .manage--widget--header .button {
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-weight: normal;
}

/* ! ===== Elements inside .typography — Anywhere we want very pretty, readable type styles ===== */
/* ! ==== Forms ==== */
fieldset {
  border: 0;
}

legend {
  display: inline-block;
}

label {
  color: #6b6b6b;
  display: inline-block;
  padding-bottom: .5em;
}

input,
textarea {
  display: inline-block;
}

textarea {
  overflow: auto;
  resize: vertical;
}

input,
textarea,
select {
  background-color: #fff;
  border: 1px solid #c8cbcb;
  color: #6b6b6b;
  line-height: normal;
  padding: 9px 10px 8px;
  width: 100%;
  border-radius: 4px;
}
input:hover,
textarea:hover,
select:hover {
  border-color: #81dcd1;
}
input:focus,
textarea:focus,
select:focus {
  color: #505050;
  border-color: #0f1583;
  box-shadow: 0 0 0.5em rgba(124, 129, 185, 0.5);
  outline-width: 0;
}
input[required]:focus, input[required=true]:focus, input[required="required"]:focus,
textarea[required]:focus,
textarea[required=true]:focus,
textarea[required="required"]:focus,
select[required]:focus,
select[required=true]:focus,
select[required="required"]:focus {
  border-color: #ff9700;
  box-shadow: 0 0 0.5em rgba(255, 151, 0, 0.5);
  outline-width: 0;
}

input[readonly],
input[readonly=true],
input[readonly=readonly] {
  border: 1px solid #c8cbcb;
  color: #888;
  cursor: not-allowed;
}
input[readonly]:hover,
input[readonly=true]:hover,
input[readonly=readonly]:hover {
  border-color: #c8cbcb;
}
input[readonly]:focus,
input[readonly=true]:focus,
input[readonly=readonly]:focus {
  border-color: #c8cbcb;
  box-shadow: none;
}

select,
input[type=checkbox],
input[type=radio],
input[type=image] {
  width: auto;
}

input[type=checkbox],
input[type=radio] {
  border: none;
}

select {
  padding-top: 8px;
}

button[disabled],
.button.disabled,
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled] {
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  cursor: not-allowed;
}

::-webkit-input-placeholder {
  color: #aaaeaf;
  font-style: italic;
}

::-moz-placeholder {
  color: #aaaeaf;
  font-style: italic;
}

:-ms-input-placeholder {
  color: #aaaeaf;
  font-style: italic;
}

/* ! ===== Special rules for older Safari and iOS ===== */
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"] {
  -webkit-appearance: textfield;
}

/* ! ===== Form element styles ===== */
.button {
  border: 0;
  border-radius: 2em;
  cursor: pointer;
  display: inline-block;
  padding: .625em 1em .5em;
  text-transform: uppercase;
  font-family: 'Roboto';
  font-weight: 900;
  line-height: 1;
  width: auto;
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .button {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .button {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.button--primary {
  background-color: #ff9700;
  color: #fff;
}
.no-js .button--primary:hover, .no-js .button--primary:focus, .js.no-touch .button--primary:hover, .js.no-touch .button--primary:focus, .js.touch .button--primary:active {
  background-color: #c0eee8;
  color: #505050;
}
.button--secondary, .button--terciary {
  background-color: #c8cbcb;
  color: #6b6b6b;
}
.no-js .button--secondary:hover, .no-js .button--secondary:focus, .js.no-touch .button--secondary:hover, .js.no-touch .button--secondary:focus, .js.touch .button--secondary:active, .no-js .button--terciary:hover, .no-js .button--terciary:focus, .js.no-touch .button--terciary:hover, .js.no-touch .button--terciary:focus, .js.touch .button--terciary:active {
  background-color: #888;
  color: #fff;
}
.button--terciary {
  font-size: 13px;
  font-size: 0.8125rem;
}
@media (min-width: 60em) {
  .button--terciary {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media (min-width: 75em) {
  .button--terciary {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
.button[disabled] {
  background-color: #aaaeaf;
  color: #505050;
}
.no-js .button[disabled]:hover, .no-js .button[disabled]:focus, .js.no-touch .button[disabled]:hover, .js.no-touch .button[disabled]:focus, .js.touch .button[disabled]:active {
  background-color: #aaaeaf;
  color: #505050;
}
.button--facebook {
  background-color: #4b6ea8;
}
.button--twitter {
  background-color: #65bcf2;
}
.button--facebook, .button--twitter {
  color: #fff;
}
.no-js .button--facebook:hover, .no-js .button--facebook:focus, .js.no-touch .button--facebook:hover, .js.no-touch .button--facebook:focus, .js.touch .button--facebook:active, .no-js .button--twitter:hover, .no-js .button--twitter:focus, .js.no-touch .button--twitter:hover, .js.no-touch .button--twitter:focus, .js.touch .button--twitter:active {
  color: #fff;
}

/* ! ===== General forms ===== */
.form {
  padding: 1.75em 0;
  /*<div class="form--group form--group__statezip">
  	<label for="gift-state">State<span class="form--required">*</span></label>
  	<select id="gift-state" name="gift-state" class="form--select" required>
  		<option value="AL">Alabama</option>
  	</select>
  	<span class="form--group__nested">
  		<label for="gift-zip">Zip Code</label>
  		<input id="gift-zip" name="gift-zip" class="form--input" type="text" placeholder="">
  	</span>
  </div>
  
  <div class="form--group form--group__citystate">
  	<span class="form--group__nested">
  		<label for="lab-gift-city">in City (or&hellip;)</label>
  		<input id="lab-gift-city" name="gift-city" class="form--input" type="text" placeholder="">
  	</span>
  	<span class="form--group__nested">
  		<label for="lab-gift-state">State</label>
  		<select id="lab-gift-state" name="gift-state" class="form--select">
  			<option value="">--Choose</option>
  		</select>
  	</span>
  </div>*/
  /*<div class="form--group">
  	<label for="gift-amount">Please give</label>
  	<span class="form--input-group form--input-group__currency">
  		<input id="gift-amount" name="gift-amount" class="form--input form--input--number" type="number" min="0" step="50" placeholder="1000" required>
  		<strong class="form--input-group--overlay form--input-group--overlay--pre">$</strong>
  	</span>
  </div>*/
}
.form label {
  cursor: pointer;
}
.form label:after {
  content: ':';
}
.form--group {
  padding-bottom: 0.875em;
}
.form--group__nested {
  display: block;
}
.form--select + .form--group__nested {
  padding-top: 1em;
}
.form--group__citystate label {
  padding-bottom: 0;
}
.form--group__citystate .form--group__nested {
  padding-top: .75em;
}
.form--input-group {
  display: block;
  position: relative;
}
.form--input-group--overlay {
  background-color: #d8f4f1;
  color: #6dd6ca;
  display: block;
  line-height: 1;
  padding: 11px 10px 9px;
  position: absolute;
  top: 1px;
}
.form--input-group--overlay--pre {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: 1px;
}
.form--input-group__currency .form--input {
  padding-left: 2.5em;
}
.form--input-group__calendar .icon {
  font-size: 1.25em;
  position: relative;
  top: -4px;
}
.form--input-group__calendar .form--input-group--overlay {
  padding: 12px 7px 5px 10px;
}
.form--input-group__calendar .form--input {
  padding-left: 3em;
}
.form--required {
  color: #fa3b1e;
}
.form .required {
  color: #ff9700;
  margin-left: .125em;
}
.form--action {
  clear: both;
}
.form--action .column {
  padding-bottom: 0.875em;
  text-align: center;
}
@media (min-width: 38.75em) {
  .form--action .column--two .column:first-child {
    text-align: left;
  }
  .form--action .column--two .column:last-child {
    text-align: right;
  }
}

@media (min-width: 38.75em) and (max-width: 47.4375em) {
  .form--group {
    padding-bottom: 1.75em;
    position: relative;
  }
  .form--group label {
    position: absolute;
    top: .375em;
    left: 0;
    text-align: right;
    width: 25%;
  }
  .form--group label:after {
    content: '';
  }
  .form--group, .form--action__indent {
    padding-left: 27%;
  }
  .form--group__statezip .form--select {
    width: 40%;
  }
  .form--group__statezip .form--group__nested {
    display: inline-block;
    text-align: right;
    width: 58%;
  }
  .form--group__statezip .form--group__nested label {
    position: static;
    padding-right: .5em;
    width: auto;
  }
  .form--group__statezip .form--group__nested .form--input {
    width: 60%;
  }
  .form--group__citystate {
    overflow: hidden;
  }
  .form--group__citystate .form--group__nested {
    display: block;
    float: left;
    margin-right: 4%;
    padding-top: .375em;
    text-align: left;
    width: 48%;
  }
  .form--group__citystate .form--group__nested:last-child {
    margin-right: 0;
  }
  .form--group__citystate .form--group__nested label {
    position: static;
    text-align: left;
    width: 100%;
  }
  .form--select + .form--group__nested {
    padding-top: 0;
  }
}
@media (min-width: 60em) {
  .form--group {
    padding-bottom: 1.75em;
    position: relative;
  }
  .form--group label {
    position: absolute;
    top: .375em;
    left: 0;
    text-align: right;
    width: 25%;
  }
  .form--group label:after {
    content: '';
  }
  .form--group, .form--action__indent {
    padding-left: 27%;
  }
  .form--group__statezip .form--select {
    width: 40%;
  }
  .form--group__statezip .form--group__nested {
    display: inline-block;
    text-align: right;
    width: 58%;
  }
  .form--group__statezip .form--group__nested label {
    position: static;
    padding-right: .5em;
    width: auto;
  }
  .form--group__statezip .form--group__nested .form--input {
    width: 60%;
  }
  .form--group__citystate {
    overflow: hidden;
  }
  .form--group__citystate .form--group__nested {
    display: block;
    float: left;
    margin-right: 4%;
    padding-top: .375em;
    text-align: left;
    width: 48%;
  }
  .form--group__citystate .form--group__nested:last-child {
    margin-right: 0;
  }
  .form--group__citystate .form--group__nested label {
    position: static;
    text-align: left;
    width: 100%;
  }
  .form--select + .form--group__nested {
    padding-top: 0;
  }
}
@media (min-width: 75em) {
  .form--group label {
    width: 23%;
  }
  .form--group, .form--action__indent {
    padding-left: 25%;
    padding-right: 25%;
  }
}
/* This label is addded
	<label id="lab-gift-amount-error" class="error" for="lab-gift-amount">This field is required.</label>
 */
.js-validate .form--input.error {
  border-color: #fa3b1e;
  box-shadow: 0 0 0.5em rgba(250, 59, 30, 0.5);
}
.js-validate label.error {
  background-color: #fd9d8f;
  color: #505050;
  clear: left;
  margin-top: 1em;
  padding: .5em .75em;
  position: relative;
  width: auto;
  border-radius: 4px;
}
.js-validate label.error:after {
  content: '';
  position: absolute;
  top: -1em;
  left: 20%;
  width: 0;
  height: 0;
  content: '';
  border-style: solid;
  border-width: 0.5em;
  border-color: transparent;
  border-bottom-color: #fd9d8f;
}
.js-validate label.error:empty {
  display: none;
}
.js-validate select.error + .error {
  text-align: left;
  width: 100%;
}
.js-validate .form--input.valid {
  background-color: #eef6ec;
  border-color: #53a43c;
}
.js-validate .proceed--outer {
  display: inline-block;
  position: relative;
  transition: padding 750ms ease;
  z-index: 1;
}
.js-validate .proceed--outer.proceed {
  padding-right: 2.25em;
}
.js-validate .proceed--outer:after {
  color: #53a43c;
  content: '\f058';
  font-size: 2em;
  opacity: 0;
  position: absolute;
  top: .0625em;
  right: 0;
  transition: opacity 500ms ease;
  transition-delay: 250ms;
  z-index: 2;
  font-family: 'icomoon' !important;
  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;
}
.js-validate .proceed--outer.proceed:after {
  opacity: 1;
}

/* ! ===== Header Styles ===== */
/*<header id="waypoint-top" class="mainhead">
    
	<div class="utility">
		<div class="container">
			<ul class="utility--list">
				<li><a href="#" class="utility--link"><span class="progressive-text">Welcome, </span><span class="utility--link--username">Jessica Brown</span> <span class="icon icon-cog" aria-hidden="true"></span><span class="progressive-text">Manage Account</span></a></li>
				<li><a href="#" class="utility--link">Logout<span class="icon icon-logout" aria-hidden="true"></span></a></li>
			</ul>
		</div>
	</div>
	
    <div class="mainnav">
		<div class="container">
			<h1 class="mainhead--title">
				<a href="#" class="mainhead--homelink" title="MyFund, brought to you by the United Way of Rhode Island"><img src="img/MyFund-logo-@2x.png" alt="MyFund"></a>
			</h1>
			<nav>
				<ul class="mainnav--list menu">
					<li><a href="#" class="mainnav--link mainnav--link__disabled"><span class="icon icon-home" aria-hidden="true"></span><span class="mainnav--label">Home</span></a></li>
					<li><a href="#" class="mainnav--link"><span class="icon icon-activity" aria-hidden="true"></span><span class="mainnav--label">Activity</span></a></li>
				</ul>
			</nav>
		</div>
	</div>
	
	<div class="breadcrumbs">
		<div class="container">
			<p><span href="#" class="breadcrumbs--parent">Home</span> <span class="breadcrumbs--sep">/</span> <span href="#" class="breadcrumbs--current">Available Balance, Recent Activity and Your Help Desk</span></p>
		</div>
	</div>

</header>*/
.mainhead {
  background-color: #fff;
}
.mainhead--homelink {
  display: block;
  padding: .875em 0;
}
.mainhead--homelink img {
  width: 230px;
}
@media (min-width: 60em) {
  .mainhead--title {
    float: left;
    width: 26%;
  }
  .mainhead--homelink {
    padding: .875em 0 .5em 1em;
  }
  .mainhead--homelink img {
    margin: 0;
  }
}

/*<div class="utility">
		<div class="container">
			<ul class="utility--list">
				<li><a href="#" class="utility--link"><span class="progressive-text">Welcome, </span><span class="utility--link--username">Jessica Brown</span> <span class="icon icon-cog" aria-hidden="true"></span><span class="progressive-text">Manage Account</span></a></li>
				<li><a href="#" class="utility--link">Logout<span class="icon icon-logout" aria-hidden="true"></span></a></li>
			</ul>
		</div>
	</div>*/
.utility {
  border-bottom: 1px solid #e5e7e6;
}
.utility .container {
  padding-left: 0;
  padding-right: 0;
}
.utility--list {
  text-align: center;
}
.utility--list li {
  display: inline-block;
}
.utility .progressive-text {
  display: none;
  visibility: hidden;
}
.utility--link {
  color: #888;
  padding: .75em;
}
.utility--link--username {
  color: #0f1583;
  font-weight: 700;
}
.no-js .utility--link--username:hover, .no-js .utility--link--username:focus, .js.no-touch .utility--link--username:hover, .js.no-touch .utility--link--username:focus, .js.touch .utility--link--username:active {
  color: #7c81b9;
}
.no-js .utility--link:hover, .no-js .utility--link:focus, .js.no-touch .utility--link:hover, .js.no-touch .utility--link:focus, .js.touch .utility--link:active {
  color: #ff9700;
}
.no-js .utility--link:hover .icon, .no-js .utility--link:focus .icon, .js.no-touch .utility--link:hover .icon, .js.no-touch .utility--link:focus .icon, .js.touch .utility--link:active .icon {
  color: #0f1583;
}
.utility .icon {
  color: #ff9700;
}
.utility .icon-logout {
  margin-left: .25em;
  margin-right: 0;
}
@media (min-width: 30em) {
  .utility--list {
    text-align: right;
  }
  .utility .progressive-text {
    display: inline;
    visibility: visible;
  }
  .utility .icon-cog {
    margin-left: .5em;
  }
}

/*<div class="mainnav">
	<div class="container">
		<nav role="navigation">
			<ul class="mainnav--list menu">
				<li><a href="#" class="mainnav--link mainnav--link__disabled"><span class="icon icon-home" aria-hidden="true"></span><span class="mainnav--label">Home</span></a></li>
				<li><a href="#" class="mainnav--link"><span class="icon icon-activity" aria-hidden="true"></span><span class="mainnav--label">Activity</span></a></li>
			</ul>
		</nav>
	</div>
</div>*/
.mainnav .container {
  padding-left: 0;
  padding-right: 0;
}
.mainnav [role=navigation] {
  border-top: 1px solid #e5e7e6;
}
.mainnav--list li {
  display: block;
  float: left;
  margin-bottom: -1px;
  width: 20%;
}
.mainnav--link {
  background-color: transparent;
  border-left: 1px solid #e5e7e6;
  color: #505050;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  padding: 1em 0 .75em;
  text-align: center;
  text-transform: uppercase;
  font-size: 19px;
  font-size: 1.1875rem;
}
@media (min-width: 60em) {
  .mainnav--link {
    font-size: 22px;
    font-size: 1.375rem;
  }
}
@media (min-width: 75em) {
  .mainnav--link {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
.mainnav--link .icon {
  color: #0f1583;
  font-size: 1.5em;
  margin-right: 0;
  transition: all 250ms ease;
}
.no-js .mainnav--link:hover, .no-js .mainnav--link:focus, .js.no-touch .mainnav--link:hover, .js.no-touch .mainnav--link:focus, .js.touch .mainnav--link:active {
  background-color: #ff9700;
  color: #fff;
}
.no-js .mainnav--link:hover .icon, .no-js .mainnav--link:focus .icon, .js.no-touch .mainnav--link:hover .icon, .js.no-touch .mainnav--link:focus .icon, .js.touch .mainnav--link:active .icon {
  color: #fff;
}
.mainnav--link__disabled {
  background-color: #d8f4f1;
  border-left: 0;
  color: #81dcd1;
  cursor: default;
}
.mainnav--link__disabled .icon {
  color: #81dcd1;
}
.no-js .mainnav--link__disabled:hover, .no-js .mainnav--link__disabled:focus, .js.no-touch .mainnav--link__disabled:hover, .js.no-touch .mainnav--link__disabled:focus, .js.touch .mainnav--link__disabled:active {
  background-color: #d8f4f1;
  border-left: 0;
  color: #81dcd1;
}
.no-js .mainnav--link__disabled:hover .icon, .no-js .mainnav--link__disabled:focus .icon, .js.no-touch .mainnav--link__disabled:hover .icon, .js.no-touch .mainnav--link__disabled:focus .icon, .js.touch .mainnav--link__disabled:active .icon {
  color: #81dcd1;
}
.mainnav--label {
  display: none;
  visibility: hidden;
}
@media (min-width: 30em) and (max-width: 47.375em) {
  .mainnav--list {
    text-align: center;
  }
  .mainnav--list li {
    display: inline-block;
    float: none;
    width: auto;
  }
  .mainnav--link {
    padding: 1em 1.25em .75em;
  }
}
@media (min-width: 47.5em) {
  .mainnav .icon {
    font-size: 1em;
    margin-right: .25em;
  }
  .mainnav--list li:first-child {
    width: 15%;
  }
  .mainnav--list li:nth-child(2) {
    width: 18%;
  }
  .mainnav--list li:nth-child(3) {
    width: 24%;
  }
  .mainnav--list li:nth-child(4) {
    width: 18%;
  }
  .mainnav--list li:last-child {
    width: 25%;
  }
  .mainnav--label {
    display: inline;
    visibility: visible;
  }
}
@media (min-width: 60em) {
  .mainnav [role=navigation] {
    border-top: 0;
    float: left;
    width: 74%;
  }
  .mainnav--link {
    padding: 1.5em 0 1.25em;
  }
}

/*<div class="breadcrumbs">
	<div class="container">
		<p><span class="icon icon-info" aria-hidden="true"></span><span href="#" class="breadcrumbs--parent">Home</span> <span class="breadcrumbs--sep">/</span> <span href="#" class="breadcrumbs--current">Available Balance, Recent Activity and Your Help Desk</span></p>
	</div>
</div>*/
.breadcrumbs {
  background-color: #d8f4f1;
  border-top: 1px solid white;
  border-bottom: 1px solid #fff;
  clear: both;
  padding: 0.875em 0;
}
.breadcrumbs .icon, .breadcrumbs--parent, .breadcrumbs--sep {
  display: inline-block;
  vertical-align: middle;
}
.breadcrumbs .icon {
  color: #81dcd1;
  font-size: 1.75em;
}
.breadcrumbs--parent, .breadcrumbs--sep {
  color: #627c90;
  font-weight: 700;
}

/* ! ===== Content Styles ===== */
.typography {
  color: #6b6b6b;
  line-height: 1.75;
}
.typography h1 {
  margin-top: 1.41463em;
  margin-bottom: 0.39024em;
}
.typography h2 {
  margin-top: 1.21212em;
  margin-bottom: 0.66667em;
}
.no-js .typography h2 a:hover, .no-js .typography h2 a:focus, .js.no-touch .typography h2 a:hover, .js.no-touch .typography h2 a:focus, .js.touch .typography h2 a:active {
  color: #6b6b6b;
}
.typography h3 {
  margin-top: 1.77778em;
  margin-bottom: 1em;
}
.typography h4 {
  margin-top: -0.33333em;
  margin-bottom: -0.11111em;
}
.typography h5 {
  margin-top: -0.11111em;
}
.typography h6 {
  margin-top: 2.78571em;
  margin-bottom: 0.14286em;
}
.typography h1 + h2 {
  margin-top: 1.69697em;
}
.typography h1 + h3 {
  margin-top: 2.44444em;
}
.typography h2 + h3 {
  margin-top: 1.48148em;
}
.typography p, .typography ul, .typography ol, .typography address, .typography form, .typography table, .typography figure {
  margin-bottom: 1.75em;
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .typography p, .typography ul, .typography ol, .typography address, .typography form, .typography table, .typography figure {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .typography p, .typography ul, .typography ol, .typography address, .typography form, .typography table, .typography figure {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.typography p:empty {
  display: none;
}
.typography dl,
.typography form,
.typography table {
  clear: both;
}
.typography li ul,
.typography li ol {
  margin-bottom: 0;
}
.typography p,
.typography dd,
.typography blockquote,
.typography address {
  /*  -ms-word-break: break-all; AWFUL! Surprise... breaks words arbitrarily, not according to hyphenation tables. IE6-8 */
  /*   word-break: break-all; Used when we need to break long strings (URLs) in small containers. Use with care. */
  /*   word-break: break-word; Non standard for older webkit. Hyphenation tables weren't great, so don't use. */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-lines: 2;
  hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-chars: 6 3 3;
}
.typography p var, .typography p code, .typography p kbd, .typography p abbr,
.typography dd var,
.typography dd code,
.typography dd kbd,
.typography dd abbr,
.typography blockquote var,
.typography blockquote code,
.typography blockquote kbd,
.typography blockquote abbr,
.typography address var,
.typography address code,
.typography address kbd,
.typography address abbr {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}
.typography a {
  background-image: -webkit-linear-gradient(top, transparent 80%, #d8f4f1 81%);
  background-image: linear-gradient(to bottom, transparent 80%, #d8f4f1 81%);
}
.no-js .typography a:hover, .no-js .typography a:focus, .js.no-touch .typography a:hover, .js.no-touch .typography a:focus, .js.touch .typography a:active {
  background-image: -webkit-linear-gradient(top, transparent 80%, #e5e7e6 81%);
  background-image: linear-gradient(to bottom, transparent 80%, #e5e7e6 81%);
}
.typography blockquote {
  position: relative;
}
.typography blockquote p {
  color: #81dcd1;
  font-family: Georgia, serif;
  font-style: italic;
}
.typography blockquote > * {
  margin-top: 0;
}
.typography blockquote cite, .typography blockquote em, .typography blockquote i {
  font-style: normal;
}
.typography blockquote p:before,
.typography blockquote p:last-child:after {
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.typography blockquote p:before {
  content: "“";
  position: absolute;
  top: 0;
  left: .0625em;
}
.typography blockquote p:last-child:after {
  display: inline;
  content: "”";
  line-height: 0;
  vertical-align: text-bottom;
  margin-left: .125em;
}
.ie9 .typography blockquote p:last-child:after, .gte-ie10 .typography blockquote p:last-child:after {
  line-height: .25;
  vertical-align: bottom;
}
.typography figure figcaption {
  text-align: center;
  font-style: italic;
  line-height: 1.5;
}
.typography strong, .typography b,
.typography em, .typography i, .typography cite,
.typography small,
.typography sup, .typography sup {
  letter-spacing: .03125em;
}
.typography abbr[title],
.typography dfn[title] {
  border-bottom: 1px dotted #81dcd1;
}
.typography abbr[title] {
  font-size: 75%;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}
.typography var {
  color: #505050;
  display: inline-block;
  font-style: italic;
  padding: 0 .125em;
}
.typography pre {
  margin-top: -0.625em;
  margin-bottom: 4em;
}
.typography pre code {
  display: block;
  padding: 1.25em 1em;
  margin: 0;
  border-left: 5px solid #53a43c;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
}
.typography code,
.typography kbd,
.typography samp,
.typography mark,
.typography ins {
  display: inline-block;
  line-height: 1.25;
  padding: .25em .25em .125em;
}
.typography code,
.typography kbd {
  background: #f0f2f1;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.1) inset;
  border-radius: 4px;
}
.typography code {
  color: #53a43c;
}
.typography samp {
  background-color: #e5e7e6;
}
.typography mark {
  background-color: #ffa729;
}
.typography strike,
.typography s {
  color: #aaaeaf;
}
.typography del {
  color: #fa3b1e;
}
.typography u {
  text-decoration: underline;
}
.typography ins {
  color: #44484c;
  background-color: #e5e7e6;
  text-decoration: none;
}
.typography table caption {
  caption-side: top;
  color: #44484c;
  font-size: 1.125em;
  text-align: left;
}
.typography table thead,
.typography table tfoot {
  border-bottom: 2px solid #aaaeaf;
}
.typography table tr {
  background-color: #f3f3f3;
}
.typography table tr th {
  background-color: #fff;
}
.typography table tr:nth-child(odd) {
  background-color: #efefef;
}
.typography table th,
.typography table td {
  padding: .25em .5em .2em;
  border-left: 2px solid #f0f2f1;
}
.typography table th:first-child,
.typography table td:first-child {
  border-left: none;
}
.typography table td {
  border-bottom: 1px solid #f0f2f1;
}
.typography table tfoot {
  border-top: 1px solid #e5e7e6;
}
.typography dl {
  border-left: 1px solid #e5e7e6;
  border-right: 1px solid #e5e7e6;
  border-bottom: 1px solid #e5e7e6;
}
.typography dl dt, .typography dl dd {
  margin-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;
}
.typography dl dt {
  font-weight: 700;
  color: #3a3e41;
  border-top: 1px solid #e5e7e6;
  border-bottom: 1px solid #e5e7e6;
}
.typography dl dt + dt {
  border-top: 0;
}
.typography form .horizontal-list li {
  margin-right: 1em;
}
.typography form .element-caption {
  color: #aaaeaf;
}
.typography fieldset {
  border-top: 1px solid #e5e7e6;
}
.typography > h1:first-child {
  margin-top: 0;
}

/*<section id="main" class="content">
	<div class="container">
		<article class="content--main" role="main"> [...] </article>
	</div>
</section>*/
.content {
  padding: 1.75em 0;
  background-color: #f0f2f1;
}

.widget--title {
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-weight: normal;
  padding: .5em 1em .25em;
  text-transform: uppercase;
  font-size: 19px;
  font-size: 1.1875rem;
}
@media (min-width: 60em) {
  .widget--title {
    font-size: 22px;
    font-size: 1.375rem;
  }
}
@media (min-width: 75em) {
  .widget--title {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
.widget--title .icon {
  font-size: 1.25em;
  vertical-align: text-bottom;
}

/*<ul class="tabs" role="tablist">
	<li class="tabs--item tabs--item__disabled"><a href="#" class="tabs--link">1. Recommend Organization</a></li>
	<li class="tabs--item"><a href="#" class="tabs--link">2. Confirm Gift</a></li>
</ul>*/
.tabs--item {
  float: left;
}
.tabs--item:first-child .tabs--link {
  border-top-left-radius: 4px;
}
.tabs--item:last-child .tabs--link {
  border-top-right-radius: 4px;
}
.tabs--item__disabled .tabs--link {
  background-color: #fff;
  color: #627c90;
  cursor: default;
}
.no-js .tabs--item__disabled .tabs--link:hover, .no-js .tabs--item__disabled .tabs--link:focus, .js.no-touch .tabs--item__disabled .tabs--link:hover, .js.no-touch .tabs--item__disabled .tabs--link:focus, .js.touch .tabs--item__disabled .tabs--link:active {
  color: #627c90;
}
.tabs--link {
  background-color: #e5e7e6;
  color: #aaaeaf;
  padding: .5em 1em .25em;
  text-align: center;
  text-transform: uppercase;
}
.tabs span.tabs--link {
  display: inline-block;
}
.tabs__addfunds .tabs--link {
  font-family: TradeGothicLT-CondEighteen, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-size: 87.5%;
  padding: .5em .75em .25em;
  text-transform: none;
}
@media (max-width: 38.6875em) {
  .tabs--item {
    background-color: #fff;
    border-top-left-radius: 4px;
    float: none;
  }
  .tabs--item:first-child {
    background-color: transparent;
  }
  .tabs--link {
    margin-left: 2em;
    width: auto;
  }
  .tabs--item:first-child .tabs--link {
    border-top-right-radius: 4px;
  }
  .tabs--item:last-child .tabs--link {
    border-top-right-radius: 0;
  }
  .tabs--item__disabled .tabs--link {
    margin-left: 0;
  }
}

/*<ul class="tabbed" role="tablist">
	<li class="tabbed--item tabbed--item__disabled"><a href="#credit" class="tabbed--link js-tab-trigger">Credit Card: One Time</a></li>
	<li class="tabbed--item"><a href="#credit-recurring" class="tabbed--link js-tab-trigger">Credit Card: Monthly</a></li>
	<li class="tabbed--item"><a href="#paypal" class="tabbed--link js-tab-trigger">PayPal</a></li>
	<li class="tabbed--item"><a href="#securities" class="tabbed--link js-tab-trigger">Securities</a></li>
	<li class="tabbed--item"><a href="#billme" class="tabbed--link js-tab-trigger">Bill Me</a></li>
</ul>*/
.tabbed {
  overflow: hidden;
  border-top: 1px solid #e5e7e6;
  border-left: 1px solid #e5e7e6;
  border-right: 1px solid #e5e7e6;
}
.tabbed--item {
  background-color: #f0f2f1;
  margin-left: 1em;
}
.tabbed--item__disabled {
  background-color: #fff;
  margin-left: -1em;
}
.tabbed--link {
  display: block;
  line-height: 1.25;
  padding: .5em .5em .375em;
  text-align: center;
}
.tabbed--item__disabled .tabbed--link {
  color: #aaaeaf;
}
.tabbed--content {
  display: none;
  padding-top: 1.75em;
}
.tabbed--content--title {
  padding-bottom: 0.875em;
}
.tabbed--content--title + p {
  margin-top: -0.875em;
  padding-bottom: 1.75em;
}
.tabbed--content.visible {
  display: block;
}
.tabbed--form--group {
  padding-bottom: 1.75em;
}
@media (min-width: 30em) {
  .tabbed {
    display: table-row;
  }
  .tabbed--item {
    border: 1px solid #e5e7e6;
    display: table-cell;
    vertical-align: middle;
  }
  .tabbed--item:first-child:nth-last-child(1) {
    width: 100%;
  }
  .tabbed--item:first-child:nth-last-child(2), .tabbed--item:first-child:nth-last-child(2) ~ li {
    width: 50%;
  }
  .tabbed--item:first-child:nth-last-child(3), .tabbed--item:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
  }
  .tabbed--item:first-child:nth-last-child(4), .tabbed--item:first-child:nth-last-child(4) ~ li {
    width: 25%;
  }
  .tabbed--item:first-child:nth-last-child(5), .tabbed--item:first-child:nth-last-child(5) ~ li {
    width: 20%;
  }
  .tabbed--item__disabled {
    border-bottom: none;
  }
}

/* ! ===== Pagination ===== */
/*<footer class="pagination">
	<ul class="pagination--list menu">
		<li class="pagination--listitem"><a class="pagination--link pagination--link__first" href="#" title="First Page">Icon</a></li>
		<li class="pagination--listitem"><a class="pagination--link pagination--link__prev" href="#" title="View Newer Posts">Icon</a></li>
		<li class="pagination--listitem"><a class="pagination--link pagination--link__disabled" href="#">1</a></li>
		<li class="pagination--listitem"><a class="pagination--link" href="#">2</a></li>
		<li class="pagination--listitem"><a class="pagination--link pagination--link__next" href="#" title="View Older Posts">Icon</a></li>
		<li class="pagination--listitem"><a class="pagination--link pagination--link__last" href="#" title="Last Page">Icon</a></li>                                        
	</ul>
</footer>*/
.pagination {
  padding: 1.75em 0;
}
.pagination--list {
  text-align: center;
}
.pagination--listitem {
  display: inline-block;
}
.pagination--link {
  background-color: transparent;
  font-weight: 700;
  padding: .5em .875em;
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .pagination--link {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .pagination--link {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.no-js .pagination--link:hover, .no-js .pagination--link:focus, .js.no-touch .pagination--link:hover, .js.no-touch .pagination--link:focus, .js.touch .pagination--link:active {
  background-color: #d8f4f1;
}
.pagination--link__first, .pagination--link__prev, .pagination--link__next, .pagination--link__last {
  color: #888;
  font-weight: 400;
}
.no-js .pagination--link__first:hover, .no-js .pagination--link__first:focus, .js.no-touch .pagination--link__first:hover, .js.no-touch .pagination--link__first:focus, .js.touch .pagination--link__first:active, .no-js .pagination--link__prev:hover, .no-js .pagination--link__prev:focus, .js.no-touch .pagination--link__prev:hover, .js.no-touch .pagination--link__prev:focus, .js.touch .pagination--link__prev:active, .no-js .pagination--link__next:hover, .no-js .pagination--link__next:focus, .js.no-touch .pagination--link__next:hover, .js.no-touch .pagination--link__next:focus, .js.touch .pagination--link__next:active, .no-js .pagination--link__last:hover, .no-js .pagination--link__last:focus, .js.no-touch .pagination--link__last:hover, .js.no-touch .pagination--link__last:focus, .js.touch .pagination--link__last:active {
  background-color: transparent;
}
.pagination--link__disabled {
  background-color: #e5e7e6;
  color: #ff9700;
  cursor: default;
}
.no-js .pagination--link__disabled:hover, .no-js .pagination--link__disabled:focus, .js.no-touch .pagination--link__disabled:hover, .js.no-touch .pagination--link__disabled:focus, .js.touch .pagination--link__disabled:active {
  background-color: #e5e7e6;
  color: #ff9700;
}

/* ! ===== RWD embed support for 3rd-party videos ===== */
/* Force videos to be part of the flow instead of on top for IE8 with '?wmode=transparent' appended to the URL if possible
<div class="embed-container ">
    <iframe width="560" height="315" src="//www.youtube.com/embed/TdwT5JlH8gM?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>*/
.js .embed-container {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-bottom: 56.25%;
  max-width: 100%;
  height: 0;
  margin-bottom: 1.75em;
}
.js .embed-container iframe,
.js .embed-container object,
.js .embed-container embed, .js .embed-container > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.no-js .embed-container {
  padding: 1em;
  background-color: #505050;
  text-align: center;
}
.no-js .embed-container:before {
  content: 'Sorry, embedded video player needs javascript.';
  width: 100%;
  color: #f0f2f1;
}
.no-js .embed-container iframe,
.no-js .embed-container object,
.no-js .embed-container embed, .no-js .embed-container > div {
  display: none;
  visibility: hidden;
}

/* ! ===== Footer styles ===== */
/*<footer class="mainfoot">
	<div class="container">
		<div class="column--foot">
			<div class="column mainfoot--social">
				<h4 class="mainfoot--title">Stay Connected</h4>
				<ul class="mainfoot--list" role="menu">
					<li role="menuitem"><a href="//www.facebook.com/LIVEUNITEDri" class="mainfoot--link"><span class="icon icon-facebook" aria-hidden="true"></span>LIVEUNITEDri</a></li>
				</ul>
			</div>
			<div class="column mainfoot--sitenav">
				<h4 class="mainfoot--title">Navigate</h4>
				<ul class="mainfoot--list" role="menu">
					<li role="menuitem"><a href="#" class="mainfoot--link">Home/Dashboard</a></li>
				</ul>
			</div>
			<div class="column brand"> [...] </div>
		</div>
	</div>
	<div class="copyright">
		<div class="container">
			<p>&copy;2016 United Way of Rhode Island. <a href="#" class="copyright--link">Terms &amp; Conditions</a> <a href="#" class="copyright--link">Privacy Policy</a></p>
			<p><a href="#" class="copyright--link" title="Manage Account"><span class="icon icon-cog" aria-hidden="true"></span>Manage Account</a></p>
		</div>
	</div>
</footer>*/
.mainfoot {
  background-color: #f0f2f1;
  text-align: center;
}
.mainfoot--title {
  color: #505050;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-weight: normal;
  padding: 0.875em 0;
  text-transform: uppercase;
}
.mainfoot--link {
  color: #6b6b6b;
  padding: .5em 0;
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .mainfoot--link {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .mainfoot--link {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.mainfoot--link .icon {
  color: #7c81b9;
}
.no-js .mainfoot--link:hover, .no-js .mainfoot--link:focus, .js.no-touch .mainfoot--link:hover, .js.no-touch .mainfoot--link:focus, .js.touch .mainfoot--link:active {
  color: #0f1583;
}
.no-js .mainfoot--link:hover .icon, .no-js .mainfoot--link:focus .icon, .js.no-touch .mainfoot--link:hover .icon, .js.no-touch .mainfoot--link:focus .icon, .js.touch .mainfoot--link:active .icon {
  color: #81dcd1;
}
.mainfoot--social .icon {
  font-size: 1.875em;
  vertical-align: bottom;
}

/*<div class="column brand">
	<a href="//www.uwri.org" class="brand--logo"><img src="img/UWRI-logo-@2x.png" alt="United Way of Rhode Island"></a>
	<p><a href="//www.uwri.org"><strong>United Way of Rhode Island</strong></a></p>
	<address>50 Valley Street<br>Providence RI 02909</address>
	<p><a href="tel:4014440500">(401) 444-0600</a></p>
</div>*/
.brand {
  padding-top: 0.875em;
}
.brand--logo {
  display: inline-block;
  padding-bottom: 0.875em;
}
.brand--logo {
  width: 193px;
}
.brand p {
  padding-bottom: 0.875em;
}

/*<div class="copyright">
	<div class="container">
		<p class="copyright--text">&copy;2016 United Way of Rhode Island. <a href="#" class="copyright--link">Terms &amp; Conditions</a> <a href="#" class="copyright--link">Privacy Policy</a></p>
		<p class="copyright--utility"><a href="#" class="utility--link" title="Manage Account"><span class="icon icon-cog" aria-hidden="true"></span>Manage Account</a></p>
	</div>
</div>*/
.copyright {
  background: top left repeat-x url("../../img/slanted-border.png") #fff;
  clear: both;
  padding: 2.625em 0 0.25em;
}
.copyright p {
  margin-bottom: 1.75em;
}
.copyright--link {
  color: #6b6b6b;
  margin-left: .5em;
  white-space: nowrap;
}
@media (min-width: 47.5em) {
  .copyright--text, .copyright--utility {
    float: left;
  }
  .copyright--text {
    text-align: left;
    width: 75%;
  }
  .copyright--utility {
    text-align: right;
    width: 25%;
  }
}

/*
 * Warnings for browsers. Keep these for all projects. 
 
<div id="nojs" class="typography do-not-print">
	<h1>Whoops! <em>No Javascript&#x203d;</em></h1>
	<p>Javascript is essential for a complete experience. Please enable Javascript on this device or visit with a more capable device for the full experience. </p>
	<p>If you think that javascript <em>should</em> be available, check your browser settings or force a fresh reload of this page. <kbd>&#8984; F5</kbd> in most Windows applications, or <kbd>&#8679;&#8984; R</kbd> or <kbd>&#8984; R</kbd> in most browsers. For more information on cache, visit <a href="//www.refreshyourcache.com/en/cache/">refreshyourcache.com/en/cache/</a></p>
</div>
 
 */
#nojs,
#oldie {
  color: #505050;
  padding: 1em 1em 0;
}
#nojs p,
#oldie p {
  text-align: center;
  padding-bottom: 1em;
  margin: 0;
}
#nojs a,
#oldie a {
  color: #505050;
}
.no-js #nojs a:hover, .no-js #nojs a:focus, .js.no-touch #nojs a:hover, .js.no-touch #nojs a:focus, .js.touch #nojs a:active, .no-js
#oldie a:hover, .no-js
#oldie a:focus, .js.no-touch
#oldie a:hover, .js.no-touch
#oldie a:focus, .js.touch
#oldie a:active {
  color: #44484c;
  text-decoration: none;
}

.js #nojs {
  display: none;
  visibility: hidden;
}

#nojs {
  background-color: #fecac3;
  background: repeating-linear-gradient(45deg, #fecac3, #fecac3 6px, #fedcd7 6px, #fedcd7 12px);
}
.no-js #nojs a:hover, .no-js #nojs a:focus, .js.no-touch #nojs a:hover, .js.no-touch #nojs a:focus, .js.touch #nojs a:active {
  color: #fff;
}

/*<!--[if lt IE 8]>
    <div id="oldie" class="typography do-not-print">
    <![endif]-->
        <!--[if IE 6]>
        <p>Your browser is <em>ancient</em> and <a href="//www.modern.ie/en-us/ie6countdown">Microsoft agrees</a>. <a href="//browsehappy.com/">Upgrade or download a new browser</a> to experience a better web. </p>
        <![endif]-->
        <!--[if IE 7]>
        <p>Internet Explorer version 7 is not supported by this site, and your experience with the content may be hindered by poor performance and/or lack of design support. <a href="//browsehappy.com/">Upgrade or download a new browser</a> to experience a better web. </p>
        <![endif]-->
    <!--[if lt IE 8]>
        <p>Not sure what a browser is? <a href="//whatbrowser.org">This site explains it all very nicely</a>.</p>
    </div>
    <![endif]-->*/
#oldie {
  color: #505050;
  background-color: #ffdba8;
  background: repeating-linear-gradient(45deg, #ffdba8, #ffdba8 6px, #ffe4bd 6px, #ffe4bd 12px);
}

/* ! ===== Roll your own Grid ===== */
/*
    The concept here should be simple. 
    With the box-model set to border-box in the reset, padding renders on the inside of an element. 
    Therefore, column widths can be simple math AND we do not need to float the last element in a row right, 
        nor remove a margin. 
    More work to nest columns is needed in some cases, but the grid is dead simple: 
    
    Two columns     50% each
    Three columns   33.3333% each
    Four columns    25% each
    Six columns     16.6666% each
    Twelve columns  8.3333% each
    
    Use the columns() function to get a percentage for a number from 1 - 12, i.e. columns(4) 
    Pass another total max columns if you want something different, i.e. columns(3,16)
    
    Example: 
    <div class="container">
        <h1 class="column--not">Title</h1>
        <div class="column--two">
            <div class="column"> Content </div>
            <div class="column"> Content </div>
        </div>
    </div>
    
    <div class="container__tight">
        <h1 class="column--not">Widgets</h1>
        <div class="column--three">
            <div class="column"> Content </div>
            <div class="column"> Content </div>
            <div class="column"> Content </div>
        </div>
    </div>
    
    <div class="container">
        <div class="column--default">
            <article class="column" role="main"> Content </div>
            <aside class="column" role="complementary"> Content </aside>
        </div>
    </div>
*/
@media (min-width: 38.75em) {
  .column--two .column,
  .column--four .column {
    float: left;
    width: 50%;
  }
  .column--two .column.pull-right,
  .column--four .column.pull-right {
    float: right;
  }
  .column--two .column:nth-of-type(2n+3),
  .column--four .column:nth-of-type(2n+3) {
    clear: both;
  }
}

/*.column--four {

	// Redefine the four col structure to be four across 
	@include oo-media( bp(large) ) {

		.column { width: columns(3); }

		.column:nth-of-type(2n+3) { clear: none; } // reset the clear pattern from the two col structure 

		.column:nth-of-type(4n+5) { clear: both; }
	}
}*/
/*.column--three, 
.column--six {
	@extend %col-row; 

	// At small sizes, make the two and four col pattern the same 
	@include oo-media( bp(medium) ) {

	.column { 
		float: left; 
		width: columns(4); 

		&.pull-right { float: right; }
	}

		// every third, starting with the fourth element 
		.column:nth-of-type(3n+4) { clear: both; }
	}
}


.column--six {

	// Redefine the three col structure to be six across 
	@include oo-media( bp(large) ) {

		.column { width: columns(2); } 

		.column:nth-of-type(3n+4) { clear: none; } // reset the clear pattern from the three col structure 

		// every sixth, starting with the seventh element 
		.column:nth-of-type(6n+7) { clear: left; }
	}
}*/
@media (min-width: 47.5em) {
  .column--default .column {
    float: left;
  }
  .column--default .column.pull-right {
    float: right;
  }
  .column--default [role="main"] {
    width: 58.33333%;
  }
  .column--default [role="complementary"] {
    width: 41.66667%;
  }
}
@media (min-width: 60em) {
  .column--default [role="main"] {
    width: 66.66667%;
  }
  .column--default [role="complementary"] {
    width: 33.33333%;
  }
}
@media (min-width: 38.75em) {
  .column--default__gift-and-news .column {
    float: left;
  }
  .column--default__gift-and-news [role="main"] {
    width: 66.66667%;
  }
  .column--default__gift-and-news [role="complementary"] {
    width: 33.33333%;
  }
}
@media (min-width: 47.5em) {
  .column--default__receipt .column {
    float: left;
  }
  .column--default__receipt [role="main"] {
    width: 75%;
  }
  .column--default__receipt [role="complementary"] {
    width: 25%;
  }
}
@media (min-width: 60em) {
  .column--default__gift-and-news .column, .column--default__activity-and-help .column {
    float: left;
  }
  .column--default__gift-and-news [role="main"], .column--default__activity-and-help [role="main"] {
    width: 66.66667%;
  }
  .column--default__gift-and-news [role="complementary"], .column--default__activity-and-help [role="complementary"] {
    width: 33.33333%;
  }
}

@media (min-width: 38.75em) {
  .column--foot .mainfoot--social,
  .column--foot .mainfoot--sitenav {
    float: left;
    width: 50%;
  }
  .column--foot .brand {
    clear: left;
  }
}
@media (min-width: 47.5em) {
  .column--foot .mainfoot--social,
  .column--foot .mainfoot--sitenav,
  .column--foot .brand {
    float: left;
    text-align: left;
    width: 33.33333%;
  }
  .column--foot .brand {
    clear: none;
    text-align: right;
  }
}
@media (min-width: 60em) {
  .column--foot .mainfoot--social,
  .column--foot .mainfoot--sitenav {
    width: 25%;
  }
  .column--foot .brand {
    width: 50%;
  }
}

/*
 * Fixed Single column with a fluid neighbor
 * Based on http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/
 */
/*<section class="fwf--row">
	<aside class="fwf--fixed__left" role="complementary">
		[...]
	</aside>
	<article class="fwf--fluid-wrapper main-content" role="main">
		<div class="fwf--fluid__right">
		[...]    
		</div>
	</article>
</section>*/
/*.fwf {

	&--row,
	&--fluid-wrapper { @include clearfix; }

	//&--row { padding-bottom: $vert-line-height; }
}

// Temporary
.fwf--row { border: 1px solid black; }
.fwf--fixed__left,
.fwf--fixed__right { border: 1px solid red; min-height: 4em; }
.fwf--fluid-wrapper  { border: 1px solid blue; }
.fwf--fluid__left,
.fwf--fluid__right { border: 1px solid green; min-height: 4em; }

@include oo-media( bp(small) ) {

	$fwf-width: 300px; 

	.fwf {
		
		&--fixed {

			&__left,
			&__right {
				position: relative;
				float: left;
				width: $fwf-width;
			}

			&__left {
				left: $fwf-width;
				margin-left: - $fwf-width;
			}

			&__right {
				right: $fwf-width;
				margin-right: - $fwf-width;
			}
		}
	
		&--fluid-wrapper  {
			float: left;
			width: 100%;
		}

	}
	
	$fwf-width-plus-gutter: $fwf-width + (32); 

	.fwf--fluid {

		&__left { margin-right: $fwf-width-plus-gutter; }

		&__right { margin-left: $fwf-width-plus-gutter; }
	}
}*/
/*<article class="news column--default">
	<aside class="balance column" role="complementary">
		<div class="balance">
			<div class="balance--label">Ready to Gift</div>
			<div class="balance--amount">$15,000</div>
		</div>
	</aside>
	<div class="news--outer column" role="main">
		<header class="news--header">
			<h4 class="news--title"><span class="icon icon-calendar" aria-hidden="true"></span>News &amp; Announcements</h4>
		</header>
		<div class="news--message typography">
			<p><strong>Your balance of $15,000 will support the Community Impact Fund.</strong></p>
			<p>For MyFund Pledges made between January 1 &ndash; June 30: Any funds not distributed by December 31st will automatically be contributed to United Way Rhode Island&rsquo;s Community Impact Fund. Thank you!
			</p>
		</div>
	</div>
</article>*/
.news--header {
  background-color: #f9fafa;
  border-bottom: 1px solid #e5e7e6;
}
.news--title {
  color: #81dcd1;
}
.news--title .icon {
  color: #c8cbcb;
  font-size: 1.25em;
  vertical-align: text-bottom;
}
.news--message {
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: .75em 1em;
}
.news--message p {
  margin-bottom: 0;
}

.balance {
  display: block;
  background-color: #7c81b9;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.balance:hover, .balance:focus {
  background-color: #0f1583;
}
.balance--label {
  color: #fff;
  background-color: #ff9700;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 4px;
  font-weight: 900;
  letter-spacing: .0625em;
  padding: .5em 1em;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  width: 80%;
  z-index: 2;
}
.balance--label:after {
  position: absolute;
  top: 100%;
  right: 10%;
  z-index: 3;
  width: 0;
  height: 0;
  content: '';
  border-style: solid;
  border-width: 0.625em;
  border-color: transparent;
  border-top-color: #ff9700;
}
.balance--amount {
  color: #fff;
  border-bottom: 1px solid #fff;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  padding: 1.25em .125em .25em;
  text-align: center;
}
@media (min-width: 30em) and (max-width: 38.6875em) {
  .balance--label {
    width: 40%;
  }
  .balance--amount {
    padding: .75em .125em .5625em;
  }
}
@media (min-width: 47.5em) {
  .balance--label {
    width: 40%;
  }
  .balance--amount {
    padding: .875em .125em .5625em;
  }
}

/*<aside class="help column" role="complementary">
	<header class="help--header">
		<h3 class="help--title widget--title">We&rsquo;re Here to Help</h3>
	</header>
	<div class="help--card--outer">
		<div class="help--card">
			<p class="help--card--avatar"><img src="img/sandy-smithson.png" alt=""></p>
			<h4 class="help--card--name">Sandy Smithson</h4>
			<p class="help--card--details">
				<span class="help--card--title">MyFund Manager</span>
				<a class="help--card--phone" href="tel:4014440620"><span class="icon icon-phone" aria-hidden="true"></span>(401) 444-0620</a>
				<a class="help--card--email" href="mailto:sandy.smithson@uwri.org"><span class="icon icon-envelope" aria-hidden="true"></span>Email Sandy</a>
			</p>
		</div>
	</div>
</aside>*/
.help--header {
  color: #fff;
  text-align: center;
}
.help--card {
  background-color: #fff;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 4px;
}
.help--card p {
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .help--card p {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .help--card p {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.help--card--avatar {
  float: left;
}
.help--card--avatar img {
  margin: 0;
  width: 90px;
}
.help--card--name, .help--card--details {
  margin-left: 106px;
}
.help--card--title, .help--card--phone, .help--card--email {
  display: block;
  padding-bottom: .25em;
}
.help--card--name {
  color: #81dcd1;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  text-transform: uppercase;
  font-size: 19px;
  font-size: 1.1875rem;
}
@media (min-width: 60em) {
  .help--card--name {
    font-size: 22px;
    font-size: 1.375rem;
  }
}
@media (min-width: 75em) {
  .help--card--name {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
.help--card--phone .icon, .help--card--email .icon {
  color: #c8cbcb;
}
.no-js .help--card--phone:hover .icon, .no-js .help--card--phone:focus .icon, .js.no-touch .help--card--phone:hover .icon, .js.no-touch .help--card--phone:focus .icon, .js.touch .help--card--phone:active .icon, .no-js .help--card--email:hover .icon, .no-js .help--card--email:focus .icon, .js.no-touch .help--card--email:hover .icon, .js.no-touch .help--card--email:focus .icon, .js.touch .help--card--email:active .icon {
  color: #0f1583;
}
@media (min-width: 38.75em) and (max-width: 59.9375em) {
  .help--card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .help--card--outer {
    float: left;
    width: 50%;
  }
  .help--card--outer:nth-child(n+2) {
    padding-right: 0.5em;
  }
  .help--card--outer:last-child {
    padding-left: 1em;
  }
}
@media (min-width: 60em) {
  .help--card--outer:nth-child(2) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/*<div class="activity activity__dashboard column" role="main">
	<header class="activity--header column--two">
		<h4 class="activity--title widget--title column"><span class="icon icon-activity" aria-hidden="true"></span>Your Recent Activity</h4>
		<div class="activity--actions column">
			<button class="button button--primary"><span class="icon icon-gift" aria-hidden="true"></span>Give a Gift</button>
			<button class="button button--secondary"><span class="icon icon-plus-circle" aria-hidden="true"></span>Add Funds</button>
		</div>
	</header>*/
.activity {
  /*<footer class="activity--foot">
  	<button class="button button--secondary">View More Activity &gt;</button>
  </footer>*/
}
.activity--header {
  margin: 0;
  text-align: center;
}
.activity--title {
  color: #fff;
  padding-bottom: 0;
  padding-top: .625em;
}
.activity--title .icon {
  color: #888;
}
.activity--actions, .activity--statements, .activity--export {
  padding: .75em;
}
.activity--actions .button--secondary, .activity--statements .button--secondary, .activity--export .button--secondary {
  background-color: #0f1583;
  color: #d8f4f1;
}
.activity--export .form--input-group {
  padding-right: .5em;
  overflow: hidden;
}
.activity--export .button--secondary {
  float: right;
}
.activity--export .progressive-text {
  display: none;
  visibility: hidden;
}
.activity--status__received, .activity--status__cancelled {
  color: #888;
}
.activity--status__pending {
  color: #ff9700;
}
.activity--status__approved {
  color: #81dcd1;
}
.activity--status__processed {
  color: #0f1583;
}
.activity--foot {
  padding: 0.875em 0;
}
@media (min-width: 38.75em) {
  .activity--title {
    text-align: left;
  }
  .activity--actions, .activity--statements {
    text-align: right;
  }
  .activity--export .form__export {
    max-width: 32em;
  }
  .activity--export .progressive-text {
    display: inline;
    visibility: visible;
  }
}

/*<div class="table--outer">
	<ul class="table" role="menu">
		<li class="table--row table--row__header" role="rowheader">
			<select id="" class="form--select table--sorting">
				<option value="sort-status">Status</option>
			</select>
			<span class="table--col table--col__status" role="columnheader"><a href="#" class="table--sort js-sort">Status <span class="icon icon-sort" aria-hidden="true"></span></a></span>
			[ ... ]
		</li>
		<li class="table--row" role="row">
			<span class="table--col table--col__status"><a href="#" class="activity--filter activity--status__pending">Pending</a></span>
			<span class="table--col table--col__type">Gift</span>
			<span class="table--col table--col__date"><span class="progressive-text"> on </span><time datetime="2015-14-12T12:00">12/14/15</time><span class="progressive-text"> to </span></span>
			<span class="table--col table--col__org"><a href="#" class="activity--filter activity--filter__org">Wikipedia</a></span>
			<span class="table--col table--col__amount"><span class="progressive-text"> in the amount of </span>$5,000</span>
			<span class="table--col table--col__actions"><button class="button button--secondary"><span class="icon icon-give-a-gift" aria-hidden="true"></span>Gift Again</button></span>
		</li>*/
.table {
  border: 0;
  border-collapse: collapse;
  overflow: hidden;
  width: 100%;
}
.table a {
  display: inline-block;
}
.table--outer {
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .table--outer {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .table--outer {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.table--row {
  background-color: #ecfaf8;
  border-bottom: 1px solid #e5e7e6;
  padding: 0.5em 1em;
}
.table--row__header {
  background-color: #c0eee8;
}
.table--row__header .table--col {
  white-space: nowrap;
}
tbody .table--row:nth-child(even) {
  background-color: #fff;
}
.table--row__cancelled, .table--row__cancelled a {
  color: #aaaeaf;
}
.table--col {
  padding: .25em .125em .25em 0;
}
.table--col__status {
  white-space: nowrap;
}
.table--row__cancelled .table--col__amount {
  text-decoration: line-through;
}
.table--col__actions {
  min-width: 2em;
}
.table .progressive-text {
  color: #828487;
}
.table .button--secondary:not(.js-whoopsnope) {
  background-color: #c0eee8;
  white-space: nowrap;
}
.no-js .table .button--secondary:not(.js-whoopsnope):hover, .no-js .table .button--secondary:not(.js-whoopsnope):focus, .js.no-touch .table .button--secondary:not(.js-whoopsnope):hover, .js.no-touch .table .button--secondary:not(.js-whoopsnope):focus, .js.touch .table .button--secondary:not(.js-whoopsnope):active {
  background-color: #ff9700;
}
@media (max-width: 47.4375em) {
  .table__rwd, .table__rwd thead, .table__rwd tbody {
    display: block;
  }
  .table__rwd .table--row {
    display: block;
    position: relative;
  }
  .table__rwd .table--col {
    display: inline-block;
    vertical-align: baseline;
  }
  .table__rwd .table--col__status {
    white-space: normal;
  }
  .table__rwd thead {
    position: relative;
    z-index: 1;
    overflow: visible;
    background-color: #c0eee8;
    padding: 0.5em 1em;
    z-index: 99;
  }
  .table__rwd thead:before {
    color: #888;
    content: 'Sort your activity by:';
  }
  .no-js .table__rwd thead:hover .table--row__header, .no-js .table__rwd thead:focus .table--row__header, .js.no-touch .table__rwd thead:hover .table--row__header, .js.no-touch .table__rwd thead:focus .table--row__header, .js.touch .table__rwd thead:active .table--row__header {
    left: 0;
    opacity: .95;
  }
  .table__rwd .table--row__header {
    box-shadow: 2px 2px 0.5em rgba(0, 0, 0, 0.5);
    opacity: 0;
    position: absolute;
    top: 100%;
    left: -999em;
    transition: opacity 250ms ease;
    width: 100%;
  }
  .table__rwd .table--row__header th {
    display: block;
  }
  .table__rwd .table--row__header th.no-sort {
    display: none;
    visibility: hidden;
  }
  .table__dashboard .table--col__date, .table__dashboard .table--col__org {
    display: inline;
  }
  .table__dashboard .table--col__date:after, .table__dashboard .table--col__org:after {
    content: '\A';
    white-space: pre;
  }
  .table__rwd .table--row__header .table--col__date:after, .table__rwd .table--row__header .table--col__org:after {
    content: '';
  }
  .table__rwd .button--terciary {
    position: absolute;
    bottom: .5em;
    right: .5em;
    padding: .5em;
  }
  .table__rwd .button--terciary .icon {
    font-size: 1.75em;
    margin-right: 0;
  }
  .table__rwd .button--label {
    display: none;
    visibility: hidden;
  }
}
@media (max-width: 38.6875em) {
  .table__activity .table--col__user, .table__activity .table--col__org {
    display: inline;
  }
  .table__activity .table--col__user:after, .table__activity .table--col__org:after {
    content: '\A';
    white-space: pre;
  }
}
@media (min-width: 47.5em) {
  .table__activity .table--col__amount, .table__activity .table--col__actions {
    text-align: right;
  }
  .table__rwd .table--row {
    padding: 0;
  }
  .table__rwd .table--row__header .table--col {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
    font-size: 0.8125rem;
  }
}
@media (min-width: 47.5em) and (min-width: 60em) {
  .table__rwd .table--row__header .table--col {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media (min-width: 47.5em) and (min-width: 75em) {
  .table__rwd .table--row__header .table--col {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media (min-width: 47.5em) {
  .table__rwd .table--col {
    padding: 0.625em 0.5em;
    vertical-align: top;
  }
  .table__rwd .progressive-text {
    display: none;
    visibility: hidden;
  }
}

th.sort-header {
  cursor: pointer;
}

table th.sort-header:before {
  color: #888;
  content: '\f0dc';
  margin-right: 1em;
  opacity: .5;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-right: .25em;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
table th.sort-header.sort-up:before, table th.sort-header.sort-down:before {
  color: #ff9700;
  opacity: 1;
}
table th.sort-header.sort-up:before {
  content: '\f0de';
}
table th.sort-header.sort-down:before {
  content: '\f0dd';
}

/*<div class="action-item js-received">
	<div class="action--item--front">
		<button href="#" class="button button--terciary action--cancel js-areyousure"><span class="icon icon-times-circle" aria-hidden="true"><span>X</span></span><span class="button--label">Cancel</span></button>
	</div>
	<div class="action--item--back">
		Are you sure you want to remove this gift? <!-- <br class="breaker"> --><button class="button button--secondary js-whoopsnope"><span class="icon icon-times-circle" aria-hidden="true"></span> No</button> <button class="button button--primary"><span class="icon icon-check-circle" aria-hidden="true"></span> Yes, please Remove</button>
	</div>
</div>*/
.action--item {
  margin: -.625em -.5em;
}
.action--item .breaker {
  display: none;
  visibility: hidden;
}
.action--item--back {
  -webkit-transition: opacity 250ms ease;
  -moz-transition: opacity 250ms ease;
  background-color: #f0f2f1;
  border: 1px solid #c8cbcb;
  opacity: 0;
  padding: .625em .5em;
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: -999em;
}
.action--item.js-flipped .action--item--back {
  opacity: 1;
  right: 0;
  left: auto;
}
.action--cancel {
  background-color: #fa3b1e;
  color: #fff;
}
.action--regift {
  background-color: #81dcd1;
  color: #fff;
}
@media (min-width: 30em) and (max-width: 38.6875em) {
  .action--item .breaker {
    display: inline;
    visibility: visible;
  }
}
@media (min-width: 47.5em) {
  body:after {
    content: "set-widths";
    display: none;
    speak: none;
  }
  .action--item {
    overflow: visible;
    position: relative;
  }
  .action--item--back {
    padding: 0;
  }
}

/*<div class="received--item js-received">
	<div class="received--item--front">
		<a href="#" class="activity__cancel js-areyousure"><span class="icon icon-times-circle" aria-hidden="true"><span>Cancel</span></span></a>
		<a href="#" class="activity--filter activity--status__received">Received</a>
	</div>
	<div class="received--item--back">
		Are you sure you want to remove this gift? <a href="#" class="button button--secondary js-whoopsnope"><span class="icon icon-times-circle" aria-hidden="true"> No, whoops!</span></a> <br class="breaker"><a href="#" class="button button--secondary activity--button__cancel"><span class="icon icon-check-circle" aria-hidden="true"> Yes, Remove &amp; Cancel</span></a>
	</div>
</div> 

.received {

	.breaker { display: none; }

	&--item {
		margin: -.625em -.5em;
		position: relative;

		&--front,
		&--back { padding: .625em .5em .375em; }

		&--front {

			a { vertical-align: top; }
		}

		&--back {
			background-color: palette(mono,x-light);
			padding-bottom: .25em;

			.button { margin-bottom: .5em;}
		}
	}

	// Media
	@include oo-media( $min: bp(x-small), $max: bp(small) ) {

		.breaker { display: inline; }
	}
	
	@include oo-media( $max: bp(medium) ) {

		.table--col__status { display: block !important; }

		&--item {

			&--back { display: none !important; }

			&.js-flipped &--front { display: none; }

			&.js-flipped &--back { display: block !important; }
		}
	}
	
	@include oo-media( bp(medium) ) {
		@include perspective(10000);
		@include perspective-origin(50% 50%);

		@at-root {
			@include javascript_tag('set-widths');
		}

		&--item {
			@include transform-style(preserve-3d);
			@include transform-origin( top left );
			@include transform( rotateX(0deg) );
			@include transition( transform 500ms ease );
			display: block;
			height: 100%;

			&--front,
			&--back { @include backface-visibility(hidden); }

			&--back {
				@include transform( rotateX(-90deg) );
				@include transform-origin( top left );
				box-shadow: 0 0 .5em rgba(#000, .5);
				position: absolute;
			}

			&.js-flipped { @include transform( rotateX(90deg) ); }
			
			// Internet Explorer 10 or 11 does not support "preserve-3d". Work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform
			html[data-useragent*='Trident/7.0'] &,
			html[data-useragent*='MSIE 10'] & { @include transition( transform opacity 500ms ease ); }
			
			html[data-useragent*='Trident/7.0'] &--front,
			html[data-useragent*='MSIE 10'] &--front {
				@include transform( rotateX(0deg) );
				opacity: 1;
				position: absolute;
				z-index: 1;
			}
			
			html[data-useragent*='Trident/7.0'] &--back,
			html[data-useragent*='MSIE 10'] &--back {
				@include transform( rotateX(-180deg) );
				opacity: 0;
				position: absolute;
				z-index: 2;
			}
			
			html[data-useragent*='Trident/7.0'] &.js-flipped,
			html[data-useragent*='MSIE 10'] &.js-flipped { @include transform( rotateX(0deg) ); }
			
			html[data-useragent*='Trident/7.0'] &.js-flipped &--front,
			html[data-useragent*='MSIE 10'] &.js-flipped &--front {
				@include transform( rotateX(-180deg) );
				opacity: 0;
			}
			
			html[data-useragent*='Trident/7.0'] &.js-flipped &--back,
			html[data-useragent*='MSIE 10'] &.js-flipped &--back {
				@include transform( rotateX(0deg) );
				opacity: 1;
			}
		}
	}
}*/
.daterangepicker {
  position: absolute;
  top: 100px;
  left: -999em;
  color: inherit;
  background: #fff;
  border-radius: 4px;
  width: 278px;
  padding: 4px;
  margin-top: .5em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.daterangepicker:before,
.daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.dropup {
  margin-top: -5px;
}

.daterangepicker.dropup:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.dropup:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.dropdown-menu {
  max-width: none;
  z-index: 3001;
}

.daterangepicker.single .ranges,
.daterangepicker.single .calendar {
  float: none;
}

.daterangepicker.show-calendar .calendar {
  display: block;
}

.daterangepicker .calendar {
  display: none;
  max-width: 270px;
  margin: 4px;
}

.daterangepicker .calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar th,
.daterangepicker .calendar td {
  white-space: nowrap;
  text-align: center;
  min-width: 32px;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  padding: 4px;
  border-radius: 4px;
  background: #fff;
}

.daterangepicker table {
  width: 100%;
  margin: 0;
}

.daterangepicker td,
.daterangepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: #eee;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.today,
.daterangepicker td.today.off {
  background-color: #d8f4f1;
  color: #81dcd1;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #888;
}

.daterangepicker td.in-range {
  background-color: #e5e6f1;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #7c81b9;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #ddd;
  cursor: not-allowed;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin-bottom: 0;
}

.daterangepicker .input-mini {
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  height: 30px;
  line-height: 30px;
  display: block;
  vertical-align: middle;
  margin: 0 0 5px 0;
  padding: 0 6px 0 28px;
  width: 100%;
}

.daterangepicker .input-mini.active {
  border: 1px solid #7c81b9;
  border-radius: 4px;
}

.daterangepicker .daterangepicker_input {
  position: relative;
}

.daterangepicker .daterangepicker_input i {
  position: absolute;
  left: 8px;
  top: 8px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 5px auto;
  line-height: 30px;
  position: relative;
  padding-left: 28px;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.ranges {
  font-size: 11px;
  float: none;
  margin: 4px;
  text-align: left;
}

.ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.ranges li {
  font-size: 13px;
  background: #f0f2f1;
  border: 1px solid #f0f2f1;
  border-radius: 4px;
  color: #7c81b9;
  padding: 3px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}

.ranges li:hover {
  background: #7c81b9;
  border: 1px solid #7c81b9;
  color: #fff;
}

.ranges li.active {
  background: #7c81b9;
  border: 1px solid #7c81b9;
  color: #fff;
}

.range_inputs .button {
  font-size: 14px;
  font-size: 0.875rem;
}

@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 160px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .calendar {
    float: left;
  }

  .daterangepicker .calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .calendar.right {
    margin-left: 0;
  }

  .daterangepicker .calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .left .daterangepicker_input {
    padding-right: 12px;
  }

  .daterangepicker .calendar.left .calendar-table {
    padding-right: 12px;
  }

  .daterangepicker .ranges, .daterangepicker .calendar {
    float: left;
  }
}
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
    float: left;
  }

  .daterangepicker .calendar.left {
    clear: none;
  }
}
/*<div class="give column" role="main">
	<ul class="tabs" role="tablist">
		<li class="tabs--item__disabled"><a href="#" class="tabs--link">1. Recommend Organization</a></li>
		<li class="tabs--item"><a href="#" class="tabs--link">2. Confirm Gift</a></li>
	</ul>
	<div class="give--outer">
		<nav class="give--nav">
			<ul class="give--nav--list">
				<li><span class="give--nav--label">Select:</span></li>
				<li><a href="#" class="give--nav--link give--nav--link__disabled">Quick Search</a></li>
				<li><a href="#" class="give--nav--link">Search with GuideStar</a></li>
				<li><a href="#" class="give--nav--link">Manual Recommendation</a></li>
			</ul>
		</nav>*/
.give {
  position: relative;
  z-index: 99;
  /*	<div class="give--inner">
  		<h2 class="give--title">Quick Search</h2>
  		<p class="give--description">Search the UWRI Database for an Organization Name. If you can&rsquo;t find the organization, <a href="#">use the GuideStar Advanced Search</a> to ensure they are a 501c3 in good standing.</p>*/
  /*<div class="give--quick">
  	<h3 class="delta">Quick Gift</h3>
  	<p>Give again from your recent history. Change the amount and add special instructions next.</p>
  	<ul class="give--quick--list">
  		<li><a href="#" class="give--quick--link">United Way of Rhode Island Community Impact Fund</a></li>
  		<li><a href="#" class="give--quick--link">$5,000 to Wikipedia</a></li>
  		<li><a href="#" class="give--quick--link">$3,000 to ASPCA</a></li>
  		<li><a href="#" class="give--quick--link">$2,500 to American Red Cross</a></li>
  		<li><a href="#" class="give--quick--link">$500 to CVS Charities</a></li>
  	</ul>
  </div>*/
  /*<div class="give--preview">
  	<h3 class="echo">Selected Organization</h3>
  	<p><strong>Organization Name</strong><br>Tax ID #000-000-00</p>
  	<p>123 Street Address<br>City, State 00000-0000</p>
  	<p>Phone: (000) 000-0000</p>
  </div>*/
  /*<div class="give--additional">
  	<h3 class="delta">Can&rsquo;t find an organization?</h3>
  	<p>Our <a href="#">Advanced Search with GuideStar</a> will find 501c3 organizations in good standing anywhere in the country. Still can&rsquo;t find an approved organization? <a href="#">Submit an organization manually</a>. All GuideStar or manual recommendations will be subject to review and approval.</p>
  </div>*/
  /*<div class="form--action form--action__indent">
  	<span class="proceed--outer">
  		<input type="submit" name="submit" class="button button--primary" value="Next Step &gt;">
  	</span>
  </div>*/
}
.give--outer {
  background-color: #fff;
  padding: 0.75em 1em;
}
.give--nav {
  background-color: #d8f4f1;
  padding: .5em .75em;
  margin: 0.875em 0;
  border-radius: 4px;
}
.give--nav--list li {
  display: inline-block;
}
.give--nav--label {
  color: #6b6b6b;
  font-weight: 900;
  text-transform: uppercase;
}
.give--nav--link {
  border-right: 1px solid #888;
  color: #505050;
  line-height: 1.25;
  padding: 0 .75em 0 .5em;
}
.give--nav--link__disabled {
  color: #0f1583;
  font-weight: 700;
}
.no-js .give--nav--link__disabled:hover, .no-js .give--nav--link__disabled:focus, .js.no-touch .give--nav--link__disabled:hover, .js.no-touch .give--nav--link__disabled:focus, .js.touch .give--nav--link__disabled:active {
  color: #0f1583;
  font-weight: 700;
}
.give--nav--list li:last-child .give--nav--link {
  border-right: 0;
}
.give--inner {
  padding: 0.875em 0;
}
.give--inner h1, .give--inner h2, .give--inner h3, .give--inner h4, .give--inner p {
  padding-bottom: 0.875em;
}
.give--inner p {
  color: #888;
}
.give--title {
  color: #505050;
  font-weight: 700;
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .give--title {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .give--title {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.give--amount .form--input {
  font-weight: 700;
}
.give--quick {
  padding: 1.75em 0;
}
.give--quick--list {
  list-style: none;
  margin-left: 0;
}
.give--quick--list li:before {
  color: #81dcd1;
  content: '\f105';
  margin-right: .5em;
  font-family: 'icomoon' !important;
  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;
  font-weight: bold;
}
.give--preview {
  padding: 1.75em 0;
}
.give--additional {
  border-top: 1px solid #e5e7e6;
  padding-top: 1.75em;
}
@media (min-width: 38.75em) and (max-width: 47.4375em) {
  .give--quick, .give--preview, .give--additional {
    margin-left: 27%;
  }
}
@media (min-width: 60em) {
  .give--quick, .give--preview, .give--additional {
    margin-left: 27%;
  }
}
@media (min-width: 75em) {
  .give--inner {
    padding-left: 1em;
    padding-right: 1em;
  }
  .give--quick, .give--preview, .give--additional {
    margin-left: 25%;
  }
}

.give--inner .delta, .give--inner .typography h4, .typography .give--inner h4, .give--inner .tabs--link, .give--inner .mainfoot--title,
.giftlist--inner .delta,
.giftlist--inner .typography h4,
.typography .giftlist--inner h4,
.giftlist--inner .tabs--link,
.giftlist--inner .mainfoot--title,
.thanks--card .charlie,
.thanks--card .typography h3,
.typography .thanks--card h3,
.thanks--card .tabbed--content--title {
  color: #81dcd1;
  text-transform: uppercase;
}

/*<aside class="giftlist column" role="complementary">
	<div class="giftlist--inner">
		<h3 class="delta">Your Gift List</h3>
		<ul class="giftlist--list giftlist--list__available">
			<li><span class="giftlist--org">Ready to Gift</span><span class="giftlist--amt">$15,000</span></li>
		</ul>
		<ul class="giftlist--list giftlist--list__empty">
			<li>No Current Gift</li>
		</ul>
	</div>
</aside>*/
.giftlist {
  /*<header class="giftlist--head">Current Gift:</header>
  <ul class="giftlist--list">
  	<li><a href="#" class="giftlist--link"><span class="giftlist--org">American Red Cross <span class="icon icon-pencil" aria-hidden="true"></span></span><span class="giftlist--amt">$1,000</span></a></li>
  	<li><a href="#" class="giftlist--link"><span class="giftlist--org">The Jimmy Fund <span class="icon icon-pencil" aria-hidden="true"></span></span><span class="giftlist--amt">$5,000</span></a></li>
  </ul>
  <footer class="giftlist--foot">
  	<ul class="giftlist--list giftlist--list__balance">
  		<li class="giftlist--total"><span class="giftlist--org">Total</span><span class="giftlist--amt">$6,000</span></li>
  		<li class="giftlist--aftergift"><span class="giftlist--org">Balance after gift(s)</span><span class="giftlist--amt">$9,000</span></li>
  	</ul>
  </footer>
  <form class="form giftlist--submit">
  	<input type="submit" id="submit" name="submit" value="Confirm Gift &gt;">
  </form>*/
}
.giftlist--inner {
  background-color: #7c81b9;
  padding: 1em;
  border-radius: 4px;
}
.giftlist .delta, .giftlist .typography h4, .typography .giftlist h4, .giftlist .tabs--link, .giftlist .mainfoot--title {
  color: #fff;
  margin-bottom: .5em;
  text-align: center;
}
.giftlist--list {
  color: #fff;
  list-style: none;
  margin-left: 0;
}
.giftlist--list li {
  padding: .5em .5em 0;
}
.giftlist--list__empty {
  border-top: 1px dashed #9da1cb;
  border-bottom: 1px dashed #9da1cb;
  margin: .75em 0;
  padding-bottom: .375em;
}
.giftlist--list__empty li {
  font-weight: 700;
  text-align: center;
}
.giftlist--list__available, .giftlist--list__balance {
  color: #0f1583;
}
.giftlist--list__available .giftlist--org {
  font-weight: 700;
}
.giftlist--link {
  color: #fff;
}
.giftlist--link .icon {
  color: #9da1cb;
  margin-right: .25em;
  -webkit-transition: color 250ms ease;
  -moz-transition: color 250ms ease;
}
.no-js .giftlist--link:hover, .no-js .giftlist--link:focus, .js.no-touch .giftlist--link:hover, .js.no-touch .giftlist--link:focus, .js.touch .giftlist--link:active {
  color: #ff9700;
}
.no-js .giftlist--link:hover .icon, .no-js .giftlist--link:focus .icon, .js.no-touch .giftlist--link:hover .icon, .js.no-touch .giftlist--link:focus .icon, .js.touch .giftlist--link:active .icon {
  color: #fff;
}
.giftlist--link__disabled {
  color: #81dcd1;
  cursor: default;
}
.giftlist--link__disabled .icon {
  color: #ff9700;
}
.no-js .giftlist--link__disabled:hover, .no-js .giftlist--link__disabled:focus, .js.no-touch .giftlist--link__disabled:hover, .js.no-touch .giftlist--link__disabled:focus, .js.touch .giftlist--link__disabled:active {
  color: #81dcd1;
}
.no-js .giftlist--link__disabled:hover .icon, .no-js .giftlist--link__disabled:focus .icon, .js.no-touch .giftlist--link__disabled:hover .icon, .js.no-touch .giftlist--link__disabled:focus .icon, .js.touch .giftlist--link__disabled:active .icon {
  color: #ff9700;
}
.giftlist--head {
  border-bottom: 1px dashed #9da1cb;
  color: #fff;
  font-weight: 700;
  padding: .5em;
}
.giftlist--org, .giftlist--amt {
  display: block;
  float: left;
}
.giftlist--org {
  width: 65%;
}
.giftlist--amt {
  text-align: right;
  width: 35%;
}
.giftlist--foot {
  border-top: 1px solid #9da1cb;
  clear: left;
  margin-top: .5em;
}
.giftlist--total .giftlist--org {
  font-weight: 700;
  text-transform: uppercase;
}
.giftlist--aftergift {
  color: #b1b4d5;
}
.giftlist--edit-note {
  color: #f0f2f1;
  padding: .5em;
}
.giftlist--submit {
  padding: 1em 0 .5em;
  text-align: center;
}

/*<form class="form confirm--inner">
	<div class="confirm--card">
		<div class="confirm--remove">
			<a href="#" class="confirm--remove--button">Remove Gift <span class="icon icon-times-circle" aria-hidden="true"></a>
		</div>
		<div class="form--group give--amount">
			<label for="gift-amount">Gift amount</label>
			<span class="form--input-group form--input-group__currency">
				<input id="gift-amount" name="gift-amount" class="form--input form--input__number" type="number" min="0" step="50" placeholder="1000" value="1000" required>
				<strong class="form--input-group--overlay form--input-group--overlay--pre">$</strong>
			</span>
		</div>
		<div class="form--group">
			<label for="">Organization</label>
			<span class="form--input-group confirm--org">
				<p><b>American Red Cross of Northeastern CA</b><br>
					2125 E. Onstott Road<br>
					Sacramento, CA<br>
					Tax ID: #53-0196605
				</p>
			</span>
		</div>
		<div class="form--group">
			<label for="gift-special">Instructions</label>
			<textarea id="gift-special" type="gift-special" class="form--textarea">Please recognize us as Mr.and Mrs Williams</textarea>
		</div>
	</div>
	<div class="confirm--total">
		<h3 class="delta">Total Gift Distribution: <span class="confirm--amt">$6,000.00</span></h3>
		<p class="confirm--aftergift">($9,000 remaining after Gift)</p>
	</div>
</form>*/
.confirm {
  	/*&--total {
  		border-bottom: 1px dashed $border-color;
  		padding-top: $vert-grid-spacing;
  		margin-bottom: $vert-grid-spacing/2;
  		text-align: right;
  
  		.delta { padding-bottom: 0; }
  	}
  
  	&--amt { color: palette(mono,x-dark); }
  
  	&--aftergift {
  		font-size: 87.5%;
  		font-style: italic;
  	}*/
}
.confirm--card {
  background-color: #f0f2f1;
  padding: 1em 1em 0;
  position: relative;
  margin-bottom: 1.75em;
  border-radius: 4px;
}
.confirm--remove {
  text-align: right;
}
.confirm--remove--button {
  color: #6b6b6b;
  font-size: 75%;
}
.confirm--remove--button .icon {
  color: #fa3b1e;
  font-size: 200%;
  margin: 0 0 0 .25em;
  vertical-align: bottom;
}
.no-js .confirm--remove--button:hover, .no-js .confirm--remove--button:focus, .js.no-touch .confirm--remove--button:hover, .js.no-touch .confirm--remove--button:focus, .js.touch .confirm--remove--button:active {
  color: #fa3b1e;
}
.no-js .confirm--remove--button:hover .icon, .no-js .confirm--remove--button:focus .icon, .js.no-touch .confirm--remove--button:hover .icon, .js.no-touch .confirm--remove--button:focus .icon, .js.touch .confirm--remove--button:active .icon {
  color: #44484c;
}
.confirm--inner {
  padding: 0 0 0.875em;
}
.confirm--org {
  padding: .375em 0 0 .75em;
}
.confirm--org b,
.confirm--org strong {
  color: #44484c;
}

/*<div class="thanks">						
	<div class="thanks--card thanks--card__social">
		<div class="thanks--icon"><span class="icon icon-check-circle" aria-hidden="true"></span></div>
		<h1 class="charlie">Thank You, your gift has been submitted</h1>
		<p class="thanks--next">
			<a href="activity.html">View your activity</a> or <a href="give-quick.html">give again</a>
		</p>
		<div class="thanks--share">
			<p class="thanks--share--buttons">
				<a href="#" class="button button--facebook"><span class="icon icon-facebook-nocircle" aria-hidden="true"></span>Share on Facebook</a> 
				<a href="#" class="button button--twitter"><span class="icon icon-twitter-nocircle" aria-hidden="true"></span>Share on Twitter</a>
			</p>
			<p class="thanks--share--description">
				<b>Share this message with your friends, or create your own:</b>
				<q class="thanks--share--message">I fund the American Red Cross and the Jimmy Fund using MyFund from the United Way of RI #ifundwithmyfund</q>
			</p>
		</div>
	</div>*/
.thanks {
  padding-top: 1.75em;
  padding-bottom: 1.75em;
  /*<div class="thanks--print"><a href="#">Print this confirmation <span class="icon icon-print" aria-hidden="true"></span></a></div>*/
  /*<div class="thanks--receipt column--default__receipt">
  	<div class="column" role="complementary">
  		<p>Submitted Gifts on <time datetime="2016-01-02">1/2/2016</time></p>
  	</div>
  	<div class="column" role="main">
  		<div class="thanks--gift">
  			<p class="thanks--gift--amt">$1,000.00</p>
  			<div class="thanks--gift--details">
  				<p><b>American Red Cross of Northeastern CA</b><br>
  					2125 E. Onstott Road<br>
  					Sacramento, CA<br>
  					Tax ID: #53-0196605
  				</p>
  				<p><i>Please donate ASAP</i></p>
  			</div>
  		</div>
  		<div class="thanks--gift">
  			<p class="thanks--gift--amt">$5,000.00</p>
  			<div class="thanks--gift--details">
  				<p><b>The Jimmy Fund</b><br>
  					P.O. Box 849168<br>
  					Boston, MA 02284-9168<br>
  					Tax ID: #53-0196605
  				</p>
  				<p><i>In memoriam of Horace Quinn</i></p>
  			</div>
  		</div>
  	</div>
  </div>*/
}
.thanks--card {
  background-color: #f0f2f1;
  padding: 2em 1em;
  border-radius: 4px;
}
.thanks--card .charlie, .thanks--card .typography h3, .typography .thanks--card h3, .thanks--card .tabbed--content--title {
  color: #627c90;
}
.thanks--card--header, .thanks--card__social {
  text-align: center;
}
.thanks--card--header {
  border-bottom: 1px dashed #c8cbcb;
  padding-bottom: 1.5em;
}
.thanks--card__receipt {
  padding-bottom: 0;
}
.thanks--icon {
  color: #81dcd1;
  font-size: 2.625em;
  line-height: 1;
}
.thanks--icon .icon {
  margin-right: 0;
}
.thanks--next a {
  text-decoration: underline;
}
.thanks--share {
  padding-top: 2em;
}
.thanks--share--buttons {
  padding-bottom: .75em;
}
.thanks--share .button {
  margin-bottom: .75em;
}
.thanks--share--message {
  display: block;
}
.thanks--print {
  padding: 1em 0;
  text-align: right;
}
.thanks--print .icon {
  font-size: 1.5em;
}
.thanks--receipt {
  padding-top: 1.5em;
}
.thanks--gift {
  overflow: hidden;
  padding: 0 0 1.75em;
}
.thanks--gift--amt {
  color: #69d5c8;
  font-weight: 700;
}
.thanks--gift--details p:first-child {
  padding-bottom: 1em;
}
@media (min-width: 47.5em) {
  .thanks--gift {
    border-left: 1px solid #c8cbcb;
    padding-left: 1em;
  }
}
@media (min-width: 60em) {
  .thanks--share--description {
    padding-left: 16.66667%;
    padding-right: 16.66667%;
  }
  .thanks--gift--amt, .thanks--gift--details {
    float: left;
  }
  .thanks--gift--amt {
    width: 25%;
  }
  .thanks--gift--details {
    width: 75%;
  }
}
@media (min-width: 75em) {
  .thanks {
    padding-left: 1em;
    padding-right: 1em;
  }
}

/*<div class="help--outer column" role="main">
	<p class="help--description"> [...] </p>
	<div class="help--faq">
		<header class="help--header">
			<h3 class="help--title widget--title">F.A.Q.s</h3>
		</header>
		[ ... ]
	</div>
	<div class="help--video">
		<header class="help--header">
			<h3 class="help--title widget--title">Tutorial Videos</h3>
		</header>
		[ ... ]
	</div>
</div>*/
.help--outer {
  background-color: #fff;
  padding: 1em;
  border-radius: 4px;
}
.help--faq, .help--video {
  padding-top: 1.75em;
}
@media (min-width: 60em) {
  .help--outer {
    padding: 2em;
  }
}

/*<div class="faqs">
	<h2 class="charlie">Adding Funds to MyFund</h2>
	<dl class="faqs--list">
		<dt class="faqs--question"><a href="#question1" class="faqs--trigger js-accordion">Question 1 <span class="icon icon-caret-down" aria-hidden="true"></span></a></dt>
		<dd id="question1" class="faqs--answer">
			<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>
		</dd>
	</dl>
</div>*/
.faqs--header {
  background-color: #c0eee8;
  font-weight: 900;
  text-transform: uppercase;
}
.faqs--header span {
  font-size: 13px;
  font-size: 0.8125rem;
}
@media (min-width: 60em) {
  .faqs--header span {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media (min-width: 75em) {
  .faqs--header span {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
.faqs h2 {
  font-size: 22px;
  font-size: 1.375rem;
  color: #627c90;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  margin: 1em .5em .25em;
}
@media (min-width: 60em) {
  .faqs h2 {
    font-size: 27px;
    font-size: 1.6875rem;
  }
}
@media (min-width: 75em) {
  .faqs h2 {
    font-size: 31px;
    font-size: 1.9375rem;
  }
}
.faqs--list {
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #e5e7e6;
  margin-bottom: 1.75em;
}
.faqs--header, .faqs--question, .faqs--answer {
  border-bottom: 1px solid #e5e7e6;
  padding: 0.5em 1em 0.25em;
}
.faqs--question {
  position: relative;
  padding-right: 3em;
}
.faqs--question h4 {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
}
@media (min-width: 60em) {
  .faqs--question h4 {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .faqs--question h4 {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.faqs--trigger {
  display: block;
}
.faqs--trigger .icon {
  display: block;
  position: absolute;
  top: .875em;
  right: 1em;
  transition: transform 250ms ease-in-out;
}
.faqs--trigger.open {
  color: #0f1583;
}
.faqs--trigger.open .icon {
  transform-origin: center;
  transform: rotate(180deg);
}
.faqs--answer {
  padding-bottom: 0;
}
.faqs--answer.typography p {
  margin-bottom: 0;
}
.js .faqs--answer {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: all 500ms ease;
}
.js .faqs--answer.open {
  max-height: 99em;
  padding-top: .5em;
  padding-bottom: .5em;
}
.js .faqs--answer-wrap {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: all 500ms ease;
}
.js .faqs--answer-wrap.open {
  max-height: 99em;
  padding-top: .5em;
  padding-bottom: .5em;
}
.js .help2--body .faqs--answer {
  max-height: 99em;
  padding-top: .5em;
  padding-bottom: .5em;
}
.help2--body .faqs--question h4 {
  font-weight: 700;
}

/*<div class="help--resources">
	<header class="help--header">
		<h3 class="help--title widget--title">Resources</h3>
	</header>
	<div class="resources--columns">
		<p>
			<a href=-"#"><span class="icon icon-file-pdf" aria-hidden="true"></span>Resourceful PDF download</a><br>
			<a href=-"#"><span class="icon icon-file-word" aria-hidden="true"></span>Resourceful Word Doc download</a><br>
			<a href=-"#"><span class="icon icon-file-excel" aria-hidden="true"></span>Resourceful Excel File download</a><br>
			<a href=-"#"><span class="icon icon-file-powerpoint" aria-hidden="true"></span>Resourceful Powerpoint File download</a><br>
			<a href=-"#"><span class="icon icon-file-image" aria-hidden="true"></span>Resourceful Image download</a><br>
			<a href=-"#"><span class="icon icon-file-zip" aria-hidden="true"></span>Resourceful Zip Archive download</a><br>
		</p>
	</div>
</div>*/
.resources--columns {
  border-width: 0 1px 1px;
  border-style: solid;
  border-color: #e5e7e6;
  padding: 1em 1em 0;
}
.resources--columns a {
  display: inline-block;
  padding-bottom: 1em;
}
.resources--columns a .icon {
  color: #888;
  font-size: 1.5em;
  vertical-align: text-bottom;
}
.no-js .resources--columns a:hover .icon, .no-js .resources--columns a:focus .icon, .js.no-touch .resources--columns a:hover .icon, .js.no-touch .resources--columns a:focus .icon, .js.touch .resources--columns a:active .icon {
  color: #0f1583;
}
@media (min-width: 47.5em) {
  .resources--columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-count: 2;
    column-gap: 2em;
  }
}

/*<article class="manage content--main" role="main">
	<header class="manage--header">
		<h1 class="content--title">Manage Account</h1>
		<p class="manage--description">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. </p>
	</header>
	<div class="column--two">
		<div class="column">
			<div class="manage--widget manage--profile">
				<header class="manage--widget--header">
					<h3 class="manage--title widget--title"><span class="icon icon-cog" aria-hidden="true"></span>Profile Settings</h3>
					<a href="#" class="button button--primary"><span class="icon icon-pencil" aria-hidden="true"></span>Edit</a>
				</header>
				<div class="manage--widget--content">*/
.manage {
  /*<dl class="manage--history--list history">
  	<dt class="faqs--header">
  		<span class="history--col history--col__pledgedate">Your pledges to the United Way of Rhode Island</span>
  		<span class="history--col history--col__pledge">Amount</span>
  	</dt>
  	<dt class="faqs--question">
  		<span class="history--col history--col__pledgedate"><time datetime="2015-12-15">12/15/2015</time></span>
  		<span class="history--col history--col__pledge">$75,000</span>
  		<a href="#pledge1" class="history--col faqs--trigger js-accordion"><span class="icon icon-caret-down" aria-hidden="true"><span>v</span></span></a>
  	</dt>
  	<dd id="pledge1" class="faqs--answer">
  		<span class="history--col history--col__dest">UWRI Community Impact Fund</span>
  		<span class="history--col history--col__pledge">$10,000</span>
  	</dd>
  </dl>*/
  /*<div class="manage--widget manage--funds">
  	<header class="manage--widget--header">
  		<h3 class="manage--title widget--title"><span class="icon icon-coins" aria-hidden="true"></span>Current Funds</h3>
  		<a href="#" class="button button--primary"><span class="icon icon-plus-circle" aria-hidden="true"></span>Add Funds</a>
  	</header>
  	<div class="manage--widget--content">
  		<table class="table">
  			<thead role="rowgroup">
  				<tr class="table--row table--row__header table--row__header--cols" role="row">
  					<th class="table--col table--col__funds">MyFund Funds</th>
  					<th class="table--col table--col__amt"></th>
  				</tr>
  			</thead>
  			<tbody role="rowgroup">
  				<tr class="table--row" role="row">
  					<td class="table--col table--col__funds">Pledged to MyFund for calendar year 2015</td>
  					<td class="table--col table--col__amt">$75,000</td>
  				</tr>
  				<tr class="table--row" role="row">
  					<td class="table--col table--col__funds">Disbursed through MyFund for all submitted gifts</td>
  					<td class="table--col table--col__amt">$45,000</td>
  				</tr>
  				<tr class="table--row manage--funds--balance" role="row">
  					<td class="table--col table--col__funds">Ready to Give</td>
  					<td class="table--col table--col__amt">$15,000</td>
  				</tr>
  			</tbody>
  		</table>
  	</div>
  </div>*/
}
.manage--description {
  padding-bottom: 1.75em;
}
@media (min-width: 60em) {
  .manage--description {
    width: 75%;
  }
}
.manage--widget--header {
  color: #fff;
  position: relative;
  text-align: left;
}
.manage--widget--header .button {
  position: absolute;
  top: .5em;
  right: 1em;
}
.manage--widget--content {
  background-color: #fff;
}
.manage--title .icon:before {
  color: #888;
}
.manage--profile .manage--widget--content {
  padding: 1em 1em;
}
.manage--profile--address {
  padding-bottom: 1.75em;
}
.manage--profile--address + p {
  padding-bottom: 0.875em;
}
.manage--users .table--col, .manage--funds .table--col {
  padding: .625em 0 .5em 1em;
}
.manage--users .table--row__header .table--col, .manage--funds .table--row__header .table--col {
  font-weight: 900;
  padding-left: 16px;
  padding-left: 1rem;
  text-transform: uppercase;
}
.manage--users .table--col__action {
  padding: .5em 1em;
  text-align: right;
}
.manage .faqs--header,
.manage .faqs--question,
.manage .faqs--answer {
  padding-right: 3em;
}
.manage .faqs--question .history--col, .manage--funds--balance {
  font-size: 16px;
  font-size: 1rem;
}
@media (min-width: 60em) {
  .manage .faqs--question .history--col, .manage--funds--balance {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media (min-width: 75em) {
  .manage .faqs--question .history--col, .manage--funds--balance {
    font-size: 19px;
    font-size: 1.1875rem;
  }
}
.manage .faqs--answer {
  background-color: #e5e7e6;
}
.manage .history--col {
  display: inline-block;
}
.manage .history--col__pledgedate, .manage .history--col__dest {
  width: 65%;
}
.manage .history--col__pledge {
  width: 30%;
}
.manage--funds .manage--widget--header {
  background-color: #7c81b9;
}
.manage--funds .manage--widget--header .icon:before {
  color: #9da1cb;
}
.manage--funds .button--primary {
  background-color: #0f1583;
  color: #81dcd1;
}
.manage--funds .button--primary .icon:before {
  color: #fff;
}
.manage--funds--balance {
  font-weight: 700;
}

/*<div class="modal--overlay"></div>
<div class="modal--wrapper">
    <header class="modal--head">
		<h3 class="widget--title">Change your Password</h3>
	</header>
    <form class="form modal--form give--form__quicksearch">
        
    </form>
</div>*/
.modal--overlay {
  background: #44484c;
  background: rgba(0, 0, 0, 0.88);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
}
.modal--wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;
  border-radius: 4px;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.15);
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  margin: 0 auto;
  position: absolute;
  top: 3em;
  left: 50%;
  width: 94%;
  z-index: 9999;
}
.modal--form {
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 3.5em;
  padding: 1.75em 1em;
}
.modal--form .form--action {
  border-top: 1px solid #e5e7e6;
  padding-top: 1.75em;
}
@media (min-width: 75em) {
  .modal--form .form--group label:not(.error) {
    width: 23%;
  }
  .modal--form .form--group, .modal--form .form--action__indent {
    padding-left: 25%;
    padding-right: 25%;
  }
}
.modal--wrapper__addfunds .widget--title:before {
  display: inline-block;
  background: top left no-repeat url("../../img/favicon-32x32.png") transparent;
  content: '';
  height: 32px;
  position: relative;
  top: 6px;
  width: 40px;
}
@media (min-width: 47.5em) {
  .modal--overlay {
    position: fixed;
  }
  .modal--wrapper {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    margin: 0;
    top: 50%;
  }
}

.mainhead__login .mainhead--title {
  float: none;
  text-align: center;
  width: auto;
}
.mainhead__login .mainhead--homelink {
  display: inline-block;
  padding-right: 72px;
}

.mainfoot__login .copyright--text {
  float: none;
  text-align: center;
  width: auto;
}

/*<div class="login--wrapper">				
	<header class="login--head">
		<h3 class="widget--title">Provide your Credentials Below</h3>
	</header>
	<form class="form login--form js-validate">
		<fieldset title="Login to MyFund">
			<div class="form--group">
				<label for="lab-login-username">Username</label>
				<input id="lab-login-username" name="username" class="form--input" type="text" placeholder="" required data-msg="Please provide a username">
			</div>
			<div class="form--group">
				<label for="lab-login-password">Password</label>
				<input id="lab-login-password" name="password" class="form--input" type="password" placeholder="" required data-msg="Please provide a password">
			</div>
			<div class="form--action form--action__indent">
				<div class="column--two">
					<div class="column">
						<a href="#">Forgot password?</a>
					</div>
					<div class="column">
						<span class="proceed--outer">
							<input type="submit" name="submit" class="button button--primary" value="Login &gt;">
						</span>
					</div>
				</div>
			</div>
		</fieldset>
	</form>
</div>*/
.login--wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;
  border-radius: 4px;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.15);
}
.login--head, .modal--head {
  background-color: #d8f4f1;
  color: #81dcd1;
  margin-top: 3.5em;
  text-align: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.login--form {
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 3.5em;
  padding: 1.75em 1em;
}
.login--form .form--action .column--two {
  padding-bottom: 1.75em;
}
@media (min-width: 75em) {
  .login--form .form--group label:not(.error) {
    width: 17%;
  }
  .login--form .form--group, .login--form .form--action__indent {
    padding-left: 20%;
    padding-right: 20%;
  }
}
.login--message {
  color: #6b6b6b;
}

/*td.Bill,
td.Credit,
td.CreditPP,
td.PPXChkout,
td.Securities {
	cursor: pointer;
}*/
.modal--head__andar {
  margin-top: 0;
}
.modal--head__andar .widget--title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans;
  font-weight: bold;
  text-transform: none;
}
.modal--head__andar .widget--title:before {
  display: inline-block;
  background: top left no-repeat url("../../img/favicon-32x32.png") transparent;
  content: '';
  height: 32px;
  position: relative;
  top: 6px;
  width: 40px;
}

.LoginOffTopTable {
  font-size: 16px;
}
.LoginOffTopTable .BlockHeader {
  font-size: 16px !important;
}
.LoginOffTopTable .button {
  font-family: "Helvetica Neue", Helvetica, Arial, sans;
  font-weight: bold;
}
.LoginOffTopTable .button--primary:hover, .LoginOffTopTable .button--primary:focus {
  background-color: #d8f4f1;
  color: #505050;
}
.LoginOffTopTable .button--secondary:hover, .LoginOffTopTable .button--secondary:focus, .LoginOffTopTable .button--terciary:hover, .LoginOffTopTable .button--terciary:focus {
  background-color: #888;
  color: #fff;
}

.MainLoginOff {
  padding: 0;
}

.Page-SinglePageRegPledge .Block > h2 .DIV-SPRPledgeTitle,
.Page-CybsSACheckout .Block > h2 .DIV-SPRPledgeTitle {
  display: none;
}
.Page-SinglePageRegPledge .DIV-SPRPSectionH .DIV-C,
.Page-CybsSACheckout .DIV-SPRPSectionH .DIV-C {
  font-size: 16px;
}

form[name=RegisterForm],
form[name=SAChkoutEmpty],
.Page-SPRPThankyou,
form[name=CybsSAClose] {
  padding: 0 1em 1em;
}

.Page-CybsSACheckout,
.Page-SPRPThankyou,
.Page-CybsSAClose {
  /*tr*/
}
.Page-CybsSACheckout > h1,
.Page-SPRPThankyou > h1,
.Page-CybsSAClose > h1 {
  color: #888;
  font-family: TradeGothicLT-CondEighteen, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-size: 26px;
  font-size: 1.625rem;
  padding: 1em 16px 0;
}
@media (min-width: 60em) {
  .Page-CybsSACheckout > h1,
  .Page-SPRPThankyou > h1,
  .Page-CybsSAClose > h1 {
    font-size: 33px;
    font-size: 2.0625rem;
  }
}
@media (min-width: 75em) {
  .Page-CybsSACheckout > h1,
  .Page-SPRPThankyou > h1,
  .Page-CybsSAClose > h1 {
    font-size: 40px;
    font-size: 2.5rem;
  }
}
.Page-CybsSACheckout > h1 a,
.Page-SPRPThankyou > h1 a,
.Page-CybsSAClose > h1 a {
  color: #888;
}
.Page-CybsSACheckout > .Block,
.Page-SPRPThankyou > .Block,
.Page-CybsSAClose > .Block {
  padding: 1em;
}
.Page-CybsSACheckout .Block h2,
.Page-SPRPThankyou .Block h2,
.Page-CybsSAClose .Block h2 {
  color: #81dcd1;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-size: 22px;
  font-size: 1.375rem;
}
@media (min-width: 60em) {
  .Page-CybsSACheckout .Block h2,
  .Page-SPRPThankyou .Block h2,
  .Page-CybsSAClose .Block h2 {
    font-size: 27px;
    font-size: 1.6875rem;
  }
}
@media (min-width: 75em) {
  .Page-CybsSACheckout .Block h2,
  .Page-SPRPThankyou .Block h2,
  .Page-CybsSAClose .Block h2 {
    font-size: 31px;
    font-size: 1.9375rem;
  }
}
.Page-CybsSACheckout .Block h2 a,
.Page-SPRPThankyou .Block h2 a,
.Page-CybsSAClose .Block h2 a {
  color: #81dcd1;
}
.Page-CybsSACheckout .Row-Entry .Col-Text,
.Page-SPRPThankyou .Row-Entry .Col-Text,
.Page-CybsSAClose .Row-Entry .Col-Text {
  padding: .375em 1em .25em 0;
  white-space: nowrap;
}

.Page-CybsSACheckout form input {
  border: 1px solid #c8cbcb;
  padding: 9px 10px 8px;
  width: 100% !important;
}
.Page-CybsSACheckout form input[type=radio], .Page-CybsSACheckout form input[type=checkbox] {
  width: auto !important;
}
.Page-CybsSACheckout form input:hover {
  border-color: #81dcd1;
}
.Page-CybsSACheckout form input:focus {
  color: #505050;
  border-color: #0f1583;
  box-shadow: 0 0 0.5em rgba(124, 129, 185, 0.5);
  outline-width: 0;
}
.Page-CybsSACheckout form input[readonly]:hover, .Page-CybsSACheckout form input[readonly=true]:hover, .Page-CybsSACheckout form input[readonly=readonly]:hover {
  border-color: transparent;
}
.Page-CybsSACheckout form input[readonly]:focus, .Page-CybsSACheckout form input[readonly=true]:focus, .Page-CybsSACheckout form input[readonly=readonly]:focus {
  border-color: transparent;
  box-shadow: none;
}

.Page-CybsSAClose .ConfirmClose h2 {
  padding-top: 2em;
  text-align: center;
}

.SPAN-SPRPTypeBM .SPAN-C span,
.SPAN-SPRPTypeCC .SPAN-C span,
.SPAN-SPRPTypeSec .SPAN-C span {
  color: #81dcd1;
  font-family: TradeGothicLT-BoldCondTwenty, Roboto, "Helvetica Neue", Helvetica, Arial, sans;
  font-size: 22px;
  font-size: 1.375rem;
  display: block;
  font-size: 22px !important;
  padding-bottom: .875em;
}
@media (min-width: 60em) {
  .SPAN-SPRPTypeBM .SPAN-C span,
  .SPAN-SPRPTypeCC .SPAN-C span,
  .SPAN-SPRPTypeSec .SPAN-C span {
    font-size: 27px;
    font-size: 1.6875rem;
  }
}
@media (min-width: 75em) {
  .SPAN-SPRPTypeBM .SPAN-C span,
  .SPAN-SPRPTypeCC .SPAN-C span,
  .SPAN-SPRPTypeSec .SPAN-C span {
    font-size: 31px;
    font-size: 1.9375rem;
  }
}
.SPAN-SPRPTypeBM .SPAN-C span a,
.SPAN-SPRPTypeCC .SPAN-C span a,
.SPAN-SPRPTypeSec .SPAN-C span a {
  color: #81dcd1;
}

.tabbed-table {
  overflow: hidden;
}
.tabbed-table tr {
  background-color: #f0f2f1;
  border: 1px solid #e5e7e6;
  border-radius: 4px;
  display: block;
  float: left;
  margin-right: .25em;
  		/*&.selected-tab {
  			background-color: $white;
  			border-bottom: 0;
  
  			&:hover,
  			&:focus { background-color: $white; }
  		}
  		
  		&:first-child { border-left: 1px solid palette(mono, deep-light); }*/
}
.tabbed-table td {
  padding: .625em .5em .375em;
  white-space: nowrap;
}
.tabbed-table td input, .tabbed-table td > span,
.tabbed-table td p img {
  display: inline-block;
  vertical-align: middle;
}
.tabbed-table td.PPXChkout {
  padding-bottom: 0.375em;
}

/*<span class="SPAN-NOTE">
	<span class="SPAN-SPRPTypePPXChkout">
		<span class="SPAN-C">
			<p style="text-align: left;"><img style="margin-right: 7px;" src="https://www.paypal.com/en_US/i/logo/PayPal_mark_37x23.gif" alt="" align="AbsMiddle"></p>
		</span>
	</span>
</span>*/
td.PPXChkout p {
  display: inline;
}
td.PPXChkout img {
  margin: 0 !important;
}

.Area-ePledgeAdmin .LeftAlign td,
.Area-ePledgeAdmin .Leftalign td,
.Area-Profile .LeftAlign td,
.Area-Registration .LeftAlign td {
  border: 1px solid #e5e7e6;
  padding: .5em .75em .375em;
}

#PaymentSD input ~ span {
  margin-left: .5em;
}

.DIV-WebConfirmWait {
  padding: 0 2em 1.75em;
}

#NavigationButtons {
  overflow: hidden;
  padding-bottom: 1em;
}
#NavigationButtons .Navigation1,
#NavigationButtons .Navigation2 {
  width: 48%;
}
#NavigationButtons .Navigation1 {
  float: right;
  text-align: right;
}
#NavigationButtons .Navigation2 {
  float: left;
}

.PledgeNavigation {
  height: auto;
  padding: 2em 1em;
  margin: 0;
  text-align: center;
}
.PledgeNavigation > div {
  display: inline-block;
  margin: 0 .25em;
  vertical-align: middle;
}

/*@include oo-media( bp(medium) ) {
	@include javascript_tag( 'tablesort-cols' ); 
}*/
.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}

.hidden {
  display: none;
  visibility: hidden;
}

.off-screen {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

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

.screen-reader-text.focusable:active,
.screen-reader-text.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

@media print {
  *, *:before, *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 10pt;
    line-height: 1.67;
  }

  header, nav, footer, section, article, aside, div {
    float: none;
    width: 100%;
  }

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

  /**[role="main"] a[href]:after {
  	content: " (" attr(href) ")";
  	font-size: 75%; 
  }
  
  *[role="main"] abbr[title]:after {
  	content: " (" attr(title) ")";
  	font-size: 75%; 
  }
  
  .ir a:after, 
  a[href^="javascript:"]:after, 
  a[href^="#"]:after, 
  .ie7 *[role="main"] a[href]:after, 
  .ie7 *[role="main"] abbr[title]:after { content: ""; }*/
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr, img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }
  p, h1, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  .do-not-print,
  .screen-reader-text,
  .hidden,
  .invisible {
    display: none;
  }
}
@font-face {
  font-family: 'TradeGothicLT-CondEighteen';
  src: url("../fonts/2F99D9_0_0.eot");
  src: url("../fonts/2F99D9_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2F99D9_0_0.woff2") format("woff2"), url("../fonts/2F99D9_0_0.woff") format("woff"), url("../fonts/2F99D9_0_0.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'TradeGothicLT-BoldCondTwenty';
  src: url("../fonts/2F99D9_1_0.eot");
  src: url("../fonts/2F99D9_1_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2F99D9_1_0.woff2") format("woff2"), url("../fonts/2F99D9_1_0.woff") format("woff"), url("../fonts/2F99D9_1_0.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.ttf?d8q6fl") format("truetype"), url("../fonts/icomoon.woff?d8q6fl") format("woff"), url("../fonts/icomoon.svg?d8q6fl#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa,
.icon {
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-right: .25em;
  speak: none;
  display: inline-block;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa span,
.icon span {
  display: none;
  visibility: hidden;
}
.no-fontface .fa span, .no-fontface
.icon span {
  display: block;
  visibility: visible;
}

.icon-activity:before {
  content: "\e908";
}

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

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

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

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

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

.icon-youtube:before {
  content: "\e905";
}

.icon-logout:before {
  content: "\e906";
}

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

.icon-give-a-gift:before {
  content: "\e909";
}

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

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

.icon-trashcan:before {
  content: "\e90f";
}

.icon-megaphone:before {
  content: "\e900";
}

.icon-coins:before {
  content: "\e90c";
}

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

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

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

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

.icon-times-circle:before {
  content: "\f057";
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-angle-double-left:before {
  content: "\f100";
}

.icon-angle-double-right:before {
  content: "\f101";
}

.icon-angle-left:before {
  content: "\f104";
}

.icon-angle-right:before {
  content: "\f105";
}

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

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

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

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

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

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

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

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

.icon-history:before {
  content: "\f1da";
}

/* 
 * Remove for Production
 *
 * When we want to review the markup for W3 and similar errors, turn some of these on 
 * Uses :not selectors a bunch, so only modern browsers will support them
 */
/* http://dev.w3.org/csswg/css-device-adapt/
 * http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
 * for IE10 Snap Mode on Metro and more.
 */
@-webkit-viewport {
  width: device-width;
  zoom: 1.0;
}
@-moz-viewport {
  width: device-width;
  zoom: 1.0;
}
@-ms-viewport {
  width: device-width;
  zoom: 1.0;
}
@-o-viewport {
  width: device-width;
  zoom: 1.0;
}
@viewport {
  width: device-width;
  zoom: 1.0;
}

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