@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. 
 */
/* Define constants for the application and to configure the blueprint framework. */
/* ===== Compass Imports ===== */
/* Needed for the link-colors() function */
/* Needed for the horizontal-list() function */
/* When remembering whether or not there's a hyphen in white-space is too hard */
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
/* Defaults */
/* Positive is down */
/* ! ===== 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
 */
/* 
 * Do the math of pixel to EM conversion. 
 * @requires $base-font-size
 */
/* 
 * Calculate a percentage from two pixel values... 
 * @requires: $total-max-width
 * @accepts: two pixel (assumed) values
 * @returns: percent value
 */
/*
 * Calculate the width of a column based on any number of columns grid
 * @accepts a number from 1 - 12
 * @returns: percent value
 */
/* 
 * 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
 */
/* 
 * Output a little 'tag' on the body:after content
 * @accepts: string
 * @requires: nothing
 * @returns: entire body pseudo-class declaration
 * Usage: @include javascript_tag( 'actionhook' );
 */
/*
 * 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
 */
/* 
 * 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 ===== */
/* 
 * REM output with pixel fallbacks for any passed declaration
 * @accepts: valid CSS property, and a (pixel) value
 * @requires: $base-font-size
 * @returns: valid CSS declarations
 * Usage: @include pe-rem-helper( 'font-size', 12px );
 */
/* 
 * Stuart Robson's vertical rhythm mixin with REM, pixel fallback and line-height set as whole numbers
 * http://codepen.io/sturobson/pen/fhige 
 *
 * Overrides for values need to be pixel values, like so: @include pe-fontsize( $headerfour, $line-height: 24px, $margin: 14px ); 
 */
/* 
 * 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. */
/* Talk of depreciating the Compass mixin, so we pull it in here and make small adjustments */
/* ! ===== 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. */
/* ! ===== Project Variables ===== */
/* Grid */
/* Color Palette Map */
/*
 * 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 */
/* True here means that all computed values will be in EMs */
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
/* If using Google fonts, set the weights here */
/* Sizes */
/* ! ===== 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
 */
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, 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, 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%; }

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

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: 87.5%; }

b, strong, th {
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  /*font-weight: $bold-weight;*/ }

i, em, cite {
  font-family: source_sans_proitalic, "Helvetica Neue", Helvetica, Arial, sans;
  /*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 #e6e6e6;
  margin: 1.5em 0;
  padding: 0; }

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

input, textarea, button, select, .button {
  font-size: 99%;
  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; }

* {
  box-sizing: border-box; }

[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; }

/* ! ==== 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="not-column">Title</h1>
        <div class="two-col">
            <div class="column"> Content </div>
            <div class="column"> Content </div>
        </div>
    </div>
    
    @requires these variables: 
    $total-max-width
    $grid-spacing
    $vert-grid-spacing
*/
/* ! ===== Spacing ===== */
.column, .form--single-line-group .form--input-group, .foot--social, .foot--column, .filelist--list li {
  padding-left: 0.5em;
  padding-right: 0.5em; }

.container__tight, .container__tight .column {
  padding-left: 0.25em;
  padding-right: 0.25em; }

.form--single-line-group, .two-col,
.four-col, .two-third-col, .default-col, .event-col, .foot--columns, .filelist--list {
  /* If $height is true, override the variable. */ }
  @media (min-width: 40em) {
    .form--single-line-group, .two-col,
    .four-col, .two-third-col, .default-col, .event-col, .foot--columns, .filelist--list {
      margin-left: -0.5em;
      margin-right: -0.5em; } }

.container__tight .two-col, .container__tight .four-col {
  /* If $height is true, override the variable. */ }
  @media (min-width: 40em) {
    .container__tight .two-col, .container__tight .four-col {
      margin-left: -0.25em;
      margin-right: -0.25em; } }

/* ! ===== Containers ===== */
.container,
.container__tight {
  margin: 0 auto;
  min-width: 320px;
  max-width: 60em;
  /*@include column-grid-background(
        $total          : 16,
        $column         : 50,
        $gutter         : 12,
        $offset         : 6,
        $column-color   : rgba($code,.25),
        $gutter-color   : transparent,
        $force-fluid    : true
    ); */ }
  .lt-ie8 .container, .lt-ie8
  .container__tight {
    width: 960px; }

.container {
  padding-left: 1em;
  padding-right: 1em; }

/* ! ===== Rows and Columns ===== */
.lt-ie8 .form--single-line-group, .lt-ie8 .two-col, .lt-ie8
.four-col, .lt-ie8 .two-third-col, .lt-ie8 .default-col, .lt-ie8 .event-col, .lt-ie8 .foot--columns {
  position: relative;
  zoom: 1; }

.column {
  padding-bottom: 1.5em; }

.not-column {
  margin-left: 0.5em;
  margin-right: 0.5em; }

/*
 * 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 
 */
/* ! ===== 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/
 */
.anchornav--list li, .tabnav--list li, .button-tabs li, .pagination--list li, .foot--social--list li, .my-events--controls--list li {
  display: inline-block; }

.lt-ie8 .anchornav--list, .lt-ie8 .tabnav--list, .lt-ie8 .button-tabs, .lt-ie8 .pagination--list, .lt-ie8 .foot--social--list, .lt-ie8 .my-events--controls--list {
  display: inline; }

.form--single-line-group:after, .two-col:after,
.four-col:after, .two-third-col:after, .default-col:after, .event-col:after, .foot--columns:after, form:after, .head:after, .user--list li:after, .foot:after, .filelist--list:after, .filelist--list li:after {
  content: "";
  display: table;
  clear: both; }

label,
.label, .button,
input.button, .user__active .user--link, .tabnav--link, .feedback--snipe, .event--detail--title {
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans; }

a, input,
textarea,
button,
.button, .form--select--wrapper, .date-input {
  transition: all 250ms ease-in-out; }

.head, .banner, .anchornav.stuck {
  box-shadow: 0 0.125em 0.375em rgba(0, 0, 0, 0.25); }

/* ! ==== Global General Typographic / Element Styles ==== */
html {
  height: 100%;
  background-color: #e6e6e6;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }
  html.no-touch {
    overflow-x: hidden; }

html[lang="he"],
html[lang="ar"] {
  direction: rtl; }

body {
  color: #7c7c7c;
  height: 100%;
  /* If $height is true, override the variable. */ }
  @media (min-width: 47.5em) {
    body {
      text-rendering: optimizeLegibility; } }

body,
input,
textarea,
select,
button {
  font: normal 100%/1.6666 source_sans_proregular, "Helvetica Neue", Helvetica, Arial, sans; }

/* ! ===== Generic declarations ===== */
a {
  color: #24a2ec;
  text-decoration: none; }
  .no-js a:hover,
  .no-js a:focus,
  .js.no-touch a:hover,
  .js.no-touch a:focus,
  .js.touch a:active {
    color: #197cb5;
    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; }

nav a,
menu a {
  display: block; }

::-moz-selection {
  background: #24a2ec;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #24a2ec;
  color: #fff;
  text-shadow: none; }

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

/* ! ===== Headers & Type Sizes ===== */
.giga,
.mega,
.kilo {
  font-family: source_sans_problack, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  line-height: 1.3333; }

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

.mega {
  font-size: 32px;
  font-size: 2rem; }

.kilo {
  font-size: 30px;
  font-size: 1.875rem; }

.alpha {
  color: #197cb5;
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 27px;
  line-height: 1.6875rem; }
  .alpha a {
    color: #197cb5; }

.bravo {
  color: #474747;
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 27px;
  line-height: 1.6875rem; }
  .bravo a {
    color: #474747; }

.charlie, .no-js .embed-container:before {
  color: #474747;
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 27px;
  line-height: 1.6875rem; }
  .charlie a, .no-js .embed-container:before a {
    color: #474747; }

.delta {
  color: #197cb5;
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 27px;
  line-height: 1.6875rem; }
  .delta a {
    color: #197cb5; }

.echo {
  color: #197cb5;
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  letter-spacing: .0625em;
  font-size: 16px;
  font-size: 1rem;
  line-height: 27px;
  line-height: 1.6875rem; }
  .echo a {
    color: #197cb5; }

.foxtrot {
  color: #197cb5;
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  text-transform: uppercase;
  letter-spacing: .0625em;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 27px;
  line-height: 1.6875rem; }
  .foxtrot a {
    color: #197cb5; }

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

p,
ul,
ol,
address,
table {
  margin-bottom: 13.5px;
  margin-bottom: 0.84375rem; }

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

li {
  line-height: 1.3333;
  margin-bottom: 6px;
  margin-bottom: 0.375rem; }

nav ul,
menu ul,
.menu,
.tabnav,
.button-tabs {
  list-style: none;
  margin: 0; }

nav li,
menu li,
.menu li,
.tabnav li,
.button-tabs li {
  line-height: 1.6666;
  margin-bottom: 0px;
  margin-bottom: 0rem; }

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

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

/* ! ===== Global elements ===== */
.pre {
  white-space: nowrap; }

.aligncenter {
  text-align: center; }

.semibold {
  font-family: source_sans_prosemibold, "Helvetica Neue", Helvetica, Arial, sans; }

/* ! ==== Forms ==== */
fieldset {
  border: 0; }

legend {
  display: inline-block;
  color: #7c7c7c;
  background-color: #fff;
  padding: 0 .5em 0 0; }

label,
.label {
  display: inline-block;
  color: #474747;
  font-size: 14px;
  font-size: 0.875rem; }

label.checkbox,
label.radio {
  cursor: pointer;
  font-family: source_sans_proregular, "Helvetica Neue", Helvetica, Arial, sans; }

input,
textarea,
button,
.button {
  padding: 0.5em 0.75em 0.375em;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  border-radius: 4px; }

input,
textarea,
select {
  color: #666;
  width: 100%; }
  input:focus,
  textarea:focus,
  select:focus {
    outline-width: 0;
    border-style: solid;
    border-color: #24a2ec; }
  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 {
    outline-width: 0;
    border-style: solid;
    border-color: #f79331; }

input[type="submit"], input[type="reset"], input[type="button"], button,
.button,
select,
input[type=checkbox],
input[type=radio],
input[type=image] {
  width: auto; }

input[type="submit"], input[type="reset"], input[type="button"], button,
.button,
input[type=checkbox],
input[type=radio] {
  border: none; }

textarea {
  overflow: auto;
  resize: vertical; }

.disabled,
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;
  -ms-user-select: none;
      user-select: none;
  cursor: default; }

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

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

:-ms-input-placeholder {
  color: #b2b2b2;
  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; }

/* ! ===== Custom Form element styles ===== */
/*<div class="form--select--wrapper">
    <select class="form--select">
        <option value="">Choose</option>
    </select>
</div>*/
.form--select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  outline: none;
  cursor: pointer;
  height: auto;
  line-height: 1.5;
  border: 1px solid transparent;
  padding: 0.5em 2.25em 0.375em 0.75em;
  border-radius: 4px; }
  .form--select:focus {
    border-color: #24a2ec; }
  .lt-ie10 .form--select {
    display: block; }
  .form--select option {
    font-weight: normal; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .form--select::-ms-expand {
      display: none; }
    .form--select:focus::-ms-value {
      background: transparent;
      color: #474747; } }
  .form--select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000; }
  .form--select--wrapper {
    display: inline-block;
    margin-right: 1em;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 0;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #e6e6e6;
    border-radius: 4px; }
    .form--select--wrapper:after {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      display: inline-block;
      vertical-align: baseline;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: absolute;
      top: 0;
      right: 0;
      content: "\e601";
      font-size: .5em;
      color: #e6e6e6;
      border-left: 1px solid #e6e6e6;
      padding: 1.875em .75em 1.375em;
      pointer-events: none; }
      .form--select--wrapper:after span {
        vertical-align: baseline; }
    .form--select--wrapper x:-o-prefocus, .form--select--wrapper:after {
      display: none; }

@-moz-document url-prefix() {
  .form--select--wrapper:after {
    display: none; } }

/* ! ===== General forms ===== */
.form {
  /*<div class="form--search-group">
        <label for="s" class="screen-reader-text">Search:</label>
        <span class="icon icon-search" aria-hidden="true"><span>&#x1f50d;</span></span>
        <input type="search" name="s" id="s" class="form--input" placeholder="Find an event by searching a city or town">
    </div>*/ }
  .form p {
    font-size: 14px;
    font-size: 0.875rem; }
  .form--input-group {
    padding-bottom: 0.75em;
    position: relative;
    z-index: 1;
    overflow: visible; }
    .form--input-group__spacious {
      margin-bottom: 2.25em; }
    .form--input-group li {
      padding-bottom: .5em; }
  .form--label__large {
    font-size: 20px;
    font-size: 1.25rem; }
  .form--input {
    font-size: 14px;
    font-size: 0.875rem; }
    .form--input__round {
      border-radius: 1.5em; }
    .form--input__readonly {
      cursor: default;
      padding-left: 0;
      padding-right: 0;
      border: none;
      border-radius: 0; }
      .no-js .form--input__readonly:hover,
      .no-js .form--input__readonly:focus,
      .js.no-touch .form--input__readonly:hover,
      .js.no-touch .form--input__readonly:focus,
      .js.touch .form--input__readonly:active {
        border: none;
        background-color: #fff;
        outline: none; }
  .form--textarea {
    font-size: 14px;
    font-size: 0.875rem; }
  .form--checkbox-group input {
    margin-right: 0.5em; }
  .form--single-line-group input,
  .form--single-line-group select {
    width: auto; }
  .form--single-line-group .form--input-group {
    float: left; }
  .form--single-line-group .form--select--wrapper {
    margin-right: 0; }
  .form--search-group {
    position: relative;
    z-index: 1;
    overflow: hidden; }
    .form--search-group .icon {
      position: absolute;
      top: .425em;
      left: .75em;
      z-index: 3;
      color: #b2b2b2; }
    .form--search-group input {
      z-index: 2;
      padding: .375em .75em .25em 2em;
      font-size: 14px;
      font-size: 0.875rem; }
    .form--search-group .form--input:focus ~ .icon {
      color: #cc3333; }
  .form--submit-group {
    text-align: center;
    padding-top: 0.75em;
    padding-bottom: 1.5em; }
  .form p.error {
    color: #cc3333; }
  .form--input.invalid {
    border-color: #cc3333; }
  .form__narrow {
    /* If $height is true, override the variable. */ }
    @media (min-width: 47.5em) {
      .form__narrow {
        margin-left: auto;
        margin-right: auto;
        max-width: 22.5em; } }

/*<div class="form--input-group">
    <span class="form--input--container [waiting] [success]">
        <input class="editable--input" type="text" name="name" placeholder="Untitled Event" value="Sample Event">
    </span>
</div>*/
.form--input--container {
  display: inline-block;
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: visible; }
  .form--input--container.success:before {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;
    margin-top: -8px;
    content: '\e600';
    color: #fff;
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    vertical-align: baseline;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px; }
    .form--input--container.success:before span {
      vertical-align: baseline; }
  .form--input--container.success:after {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    content: '';
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background-color: #26c8a3;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); }
  .form--input--container.success .form--input,
  .form--input--container.success .editable--input,
  .form--input--container.success .form--textarea,
  .form--input--container.success .editable--textarea {
    border-style: solid;
    border-color: #26c8a3; }
  .form--input--container .char-count {
    position: absolute;
    bottom: -20px;
    right: 0;
    color: #b2b2b2; }

/*<span class="form--input--container [error] [show-feedback]">
    <input class="editable--input" type="text" name="name" placeholder="Untitled Event" value="Sample Event">
    <span class="form--feedback">This field is required</span>
</span>*/
.form--feedback {
  position: absolute;
  top: -9999px;
  left: -9999px;
  display: inline-block;
  color: #666;
  background-color: #f2f2f2;
  border: 1px solid #cc3333;
  line-height: 1.25;
  margin-top: 1em;
  padding: .625em .75em .5em;
  font-size: 14px;
  font-size: 0.875rem;
  border-radius: 4px; }
  .form--feedback:before {
    position: absolute;
    top: -.35em;
    left: 20%;
    background-color: #f2f2f2;
    display: block;
    width: 0.5em;
    height: 0.5em;
    content: '';
    border-style: solid;
    border-color: #cc3333;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }
  .form--feedback ul,
  .form--feedback ol,
  .form--feedback li {
    margin-bottom: 0; }
  .form--feedback.invalid, .form--feedback.invalid:before {
    border-color: #24a2ec; }
  .show-feedback .form--feedback {
    position: relative;
    top: auto;
    left: auto; }
    .modal--content .show-feedback .form--feedback,
    .main-content .show-feedback .form--feedback {
      /* If $height is true, override the variable. */ }
      @media (min-width: 60em) {
        .modal--content .show-feedback .form--feedback,
        .main-content .show-feedback .form--feedback {
          position: absolute;
          top: 41%;
          left: 105%;
          display: block;
          width: 190px;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
          .modal--content .show-feedback .form--feedback:before,
          .main-content .show-feedback .form--feedback:before {
            top: 50%;
            left: -.35em;
            margin: -.25em 0 0 0;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg); } }

.show-feedback.error input,
.show-feedback.error textarea,
.show-feedback.error .form--select--wrapper,
.show-feedback input.error,
.show-feedback textarea.error {
  border-color: #cc3333;
  background-color: #faebeb; }

.editable--input, .editable--textarea {
  border-style: dashed;
  border-color: #b2b2b2;
  background-color: transparent; }
  .waiting .editable--input, .waiting .editable--textarea {
    border-style: dashed;
    border-color: #24a2ec; }

/*<div class="label-input-pair">
    <button class="secondary-action" type="submit">Submit Compound</button>
    <label for="pfid">PF-ID</label>
    <span><input class="form--input" id="pfid" type="number" placeholder="12345678" /></span>
</div>
  or
<div class="label-input-pair">
    <span class="element-before"><select>[...]</select></span>
    <span><input class="form--input" id="pfid" type="number" placeholder="12345678" /></span>
</div>
  or
<div class="label-input-pair">
    <span><input class="form--input" id="pfid" type="number" placeholder="12345678" /></span>
    <label class="element-after" for="pfid">PF-ID</label>
</div>
*/
.label-input-pair {
  overflow: hidden; }
  .label-input-pair > label,
  .label-input-pair .element-before {
    float: left; }
  .label-input-pair .element-before {
    /* If $height is true, override the variable. */ }
    @media (max-width: 30em) {
      .label-input-pair .element-before {
        float: none;
        margin-bottom: .75em; } }
  .label-input-pair > label {
    margin-top: .75em;
    padding-right: .5em; }
  .label-input-pair > span {
    display: block;
    overflow: hidden; }
  .label-input-pair > button,
  .label-input-pair > .button,
  .label-input-pair .inner-wrapper,
  .label-input-pair > .element-after {
    float: right; }
  .label-input-pair > .element-after {
    padding-left: .5em;
    padding-right: 0; }
  .label-input-pair .inner-wrapper {
    padding-left: .5em; }
  .label-input-pair .form--input--container {
    display: block;
    width: auto; }

.stacked-labels {
  line-height: 1.3333; }
  .stacked-labels label,
  .stacked-labels input {
    vertical-align: baseline;
    font-family: source_sans_proregular, "Helvetica Neue", Helvetica, Arial, sans;
    font-size: 13px;
    font-size: 0.8125rem; }

.date-input {
  padding: 0;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  overflow: hidden; }
  .date-input .form--input {
    padding-right: 3em;
    border-color: transparent; }
  .date-input:after {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    margin-right: .25em;
    display: inline-block;
    vertical-align: baseline;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    content: "\e604";
    color: #b2b2b2;
    border-left: 1px solid #e6e6e6;
    padding: .75em .75em 1em; }
    .date-input:after span {
      vertical-align: baseline; }

/* ! ===== Buttons ===== */
.button,
input.button {
  display: inline-block;
  line-height: 1.25;
  text-align: center;
  padding: .625em 1.25em .5em;
  -webkit-tap-highlight-color: #fff;
  /* If $height is true, override the variable. */ }
  .no-js .button.disabled,
  .no-js .button.disabled:hover,
  .no-js .button.disabled:focus,
  .js.no-touch .button.disabled,
  .js.no-touch .button.disabled:hover,
  .js.no-touch .button.disabled:focus,
  .js.touch .button.disabled,
  .js.touch .button.disabled:active, .no-js
  input.button.disabled,
  .no-js
  input.button.disabled:hover,
  .no-js
  input.button.disabled:focus,
  .js.no-touch
  input.button.disabled,
  .js.no-touch
  input.button.disabled:hover,
  .js.no-touch
  input.button.disabled:focus,
  .js.touch
  input.button.disabled,
  .js.touch
  input.button.disabled:active {
    cursor: default;
    color: #7c7c7c;
    background-color: #e6e6e6; }
  .button--unconfirmed,
  input.button--unconfirmed {
    color: rgba(255, 255, 255, 0.6);
    background-color: #b2b2b2; }
  .button .icon:before,
  input.button .icon:before {
    font-size: 1.5em; }
  @media (min-width: 47.5em) {
    .button,
    input.button {
      min-width: 10em; } }
  .button__small,
  input.button__small {
    min-width: 8em;
    padding: .5em .75em .25em;
    font-size: 14px;
    font-size: 0.875rem; }
  .button__round,
  input.button__round {
    border-radius: 1em; }
  .button__full,
  input.button__full {
    width: 100%; }
  .button__shrink,
  input.button__shrink {
    min-width: 0; }
  .button-tabs .button, .button-tabs
  input.button {
    min-width: 0; }
  .button__on-orange,
  input.button__on-orange {
    color: #f79331;
    background-color: #fff; }
  .button__on-blue,
  input.button__on-blue {
    color: #fff;
    background-color: #197cb5; }
    .no-js .button__on-blue:hover,
    .no-js .button__on-blue:focus,
    .js.no-touch .button__on-blue:hover,
    .js.no-touch .button__on-blue:focus,
    .js.touch .button__on-blue:active, .no-js
    input.button__on-blue:hover,
    .no-js
    input.button__on-blue:focus,
    .js.no-touch
    input.button__on-blue:hover,
    .js.no-touch
    input.button__on-blue:focus,
    .js.touch
    input.button__on-blue:active {
      color: #fff;
      background-color: #53b6f0; }
  .button__blue,
  input.button__blue {
    color: #fff;
    background-color: #24a2ec; }
    .no-js .button__blue:hover,
    .no-js .button__blue:focus,
    .js.no-touch .button__blue:hover,
    .js.no-touch .button__blue:focus,
    .js.touch .button__blue:active, .no-js
    input.button__blue:hover,
    .no-js
    input.button__blue:focus,
    .js.no-touch
    input.button__blue:hover,
    .js.no-touch
    input.button__blue:focus,
    .js.touch
    input.button__blue:active {
      color: #fff;
      background-color: #8525c8; }
  .button__dark,
  input.button__dark {
    color: #fff;
    background-color: #197cb5; }
    .no-js .button__dark:hover,
    .no-js .button__dark:focus,
    .js.no-touch .button__dark:hover,
    .js.no-touch .button__dark:focus,
    .js.touch .button__dark:active, .no-js
    input.button__dark:hover,
    .no-js
    input.button__dark:focus,
    .js.no-touch
    input.button__dark:hover,
    .js.no-touch
    input.button__dark:focus,
    .js.touch
    input.button__dark:active {
      color: #fff;
      background-color: #f79331; }
  .button__on-dark,
  input.button__on-dark {
    color: #fff;
    background-color: #24a2ec; }
    .no-js .button__on-dark:hover,
    .no-js .button__on-dark:focus,
    .js.no-touch .button__on-dark:hover,
    .js.no-touch .button__on-dark:focus,
    .js.touch .button__on-dark:active, .no-js
    input.button__on-dark:hover,
    .no-js
    input.button__on-dark:focus,
    .js.no-touch
    input.button__on-dark:hover,
    .js.no-touch
    input.button__on-dark:focus,
    .js.touch
    input.button__on-dark:active {
      color: #24a2ec;
      background-color: #fff; }
  .button__green,
  input.button__green {
    color: #fff;
    background-color: #26c8a3; }
    .no-js .button__green:hover,
    .no-js .button__green:focus,
    .js.no-touch .button__green:hover,
    .js.no-touch .button__green:focus,
    .js.touch .button__green:active, .no-js
    input.button__green:hover,
    .no-js
    input.button__green:focus,
    .js.no-touch
    input.button__green:hover,
    .js.no-touch
    input.button__green:focus,
    .js.touch
    input.button__green:active {
      color: #fff;
      background-color: #24a2ec; }
  .button__orange,
  input.button__orange {
    color: #fff;
    background-color: #f79331; }
  .button__grey,
  input.button__grey {
    color: #fff;
    background-color: #b2b2b2; }
  .button__light,
  input.button__light {
    color: #fff;
    background-color: #d6d6d6; }
  .no-js .button__grey:hover,
  .no-js .button__grey:focus,
  .js.no-touch .button__grey:hover,
  .js.no-touch .button__grey:focus,
  .js.touch .button__grey:active, .no-js .button__light:hover,
  .no-js .button__light:focus,
  .js.no-touch .button__light:hover,
  .js.no-touch .button__light:focus,
  .js.touch .button__light:active, .no-js
  input.button__grey:hover,
  .no-js
  input.button__grey:focus,
  .js.no-touch
  input.button__grey:hover,
  .js.no-touch
  input.button__grey:focus,
  .js.touch
  input.button__grey:active, .no-js
  input.button__light:hover,
  .no-js
  input.button__light:focus,
  .js.no-touch
  input.button__light:hover,
  .js.no-touch
  input.button__light:focus,
  .js.touch
  input.button__light:active {
    color: #fff;
    background-color: #24a2ec; }
  .no-js .button__orange:hover,
  .no-js .button__orange:focus,
  .js.no-touch .button__orange:hover,
  .js.no-touch .button__orange:focus,
  .js.touch .button__orange:active, .no-js
  input.button__orange:hover,
  .no-js
  input.button__orange:focus,
  .js.no-touch
  input.button__orange:hover,
  .js.no-touch
  input.button__orange:focus,
  .js.touch
  input.button__orange:active {
    color: #fff;
    background-color: #197cb5; }
  .no-js .button__alert:hover,
  .no-js .button__alert:focus,
  .js.no-touch .button__alert:hover,
  .js.no-touch .button__alert:focus,
  .js.touch .button__alert:active, .no-js
  input.button__alert:hover,
  .no-js
  input.button__alert:focus,
  .js.no-touch
  input.button__alert:hover,
  .js.no-touch
  input.button__alert:focus,
  .js.touch
  input.button__alert:active {
    color: #fff;
    background-color: #cc3333; }

/* ! ===== Elements inside .typography — Anywhere we want very pretty, readable type styles ===== */
body.home-2017,
body.how-to-host {
  font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; }
  body.home-2017 h2,
  body.how-to-host h2 {
    margin: 1.5rem 0;
    font-size: 1.9rem;
    line-height: 1.6;
    font-weight: bold;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 60em) {
      body.home-2017 h2,
      body.how-to-host h2 {
        font-size: 1.7rem; } }
    @media (max-width: 47.5em) {
      body.home-2017 h2,
      body.how-to-host h2 {
        font-size: 1.6rem; } }
    @media (max-width: 40em) {
      body.home-2017 h2,
      body.how-to-host h2 {
        font-size: 1.4rem; } }
  body.home-2017 h3,
  body.how-to-host h3 {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: normal;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 47.5em) {
      body.home-2017 h3,
      body.how-to-host h3 {
        font-size: 1.5rem; } }
    @media (max-width: 40em) {
      body.home-2017 h3,
      body.how-to-host h3 {
        font-size: 1.3rem; } }
  body.home-2017 h4,
  body.how-to-host h4 {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: bold;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 47.5em) {
      body.home-2017 h4,
      body.how-to-host h4 {
        font-size: 1.4rem; } }
    @media (max-width: 40em) {
      body.home-2017 h4,
      body.how-to-host h4 {
        font-size: 1.2rem; } }
  body.home-2017 p,
  body.how-to-host p {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    line-height: 1.7;
    color: #7F7F7F;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 47.5em) {
      body.home-2017 p,
      body.how-to-host p {
        font-size: 1.4rem;
        line-height: 1.6; } }
    @media (max-width: 40em) {
      body.home-2017 p,
      body.how-to-host p {
        font-size: 1.3rem;
        line-height: 1.5; } }
  body.home-2017 .leader,
  body.how-to-host .leader {
    font-size: 1.2rem;
    color: #7F7F7F;
    font-weight: bold; }
  body.home-2017 .modal p,
  body.how-to-host .modal p {
    font-size: .875rem;
    margin-bottom: .875rem; }
  body.home-2017 .pre,
  body.how-to-host .pre {
    white-space: normal; }
  body.home-2017 a.link--white:hover, body.home-2017 a.link--white:focus,
  body.how-to-host a.link--white:hover,
  body.how-to-host a.link--white:focus {
    color: white; }
  body.home-2017 a.link--white-underline,
  body.how-to-host a.link--white-underline {
    text-decoration: underline; }
    body.home-2017 a.link--white-underline:hover, body.home-2017 a.link--white-underline:focus,
    body.how-to-host a.link--white-underline:hover,
    body.how-to-host a.link--white-underline:focus {
      color: white;
      text-decoration: underline; }

body.how-to-host h2 {
  margin: 1.5rem 0 1rem 0;
  color: #7F7F7F; }

body.how-to-host h4 {
  font-size: 1.2rem;
  margin: .5rem 0; }

body.how-to-host p {
  font-size: 1.1rem;
  line-height: 1.7rem; }

body.how-to-host .banner--title {
  margin-bottom: 1rem; }

body.how-to-host .banner--content p {
  color: #FFFFFF; }

/* ! ===== Header Styles ===== */
/*<header id="sitetop" class="head">
    <div class="container">

        <div class="head--brand">
            <img src="{% static 'img/scratchday-logo-sm_trans.png' %}" alt="">
        </div>
        
        <div class="head--button">
            <a class="head--button--link head--button--link__disabled" href="#" title="Learn more abot hosting a Scratch Day event">How to Host</a>
        </div>
        
        
        <nav class="user">
            <ul class="user--list">
                <li class="user__notactive"><a class="user--link" href="#">Host Login</a></li>
            </ul>
        </nav>
        
        <div class="head--search-toggle">
            <a href="#event-search"><span class="icon icon-search" aria-hidden="true"></span></a>
        </div>
        
        <div class="head--search">
            <form class="form head--search--form search-field-with-icon" action="">
                <fieldset title="Find a Scratch Day Event">
                    <span class="icon icon-mag-glass" aria-hidden="true"></span>
                    <input type="search" name="s" id="s" class="form--input" placeholder="Looking to attend an event?">
                </fieldset>
            </form>
        </div>
                    
    </div>
</header>*/
.head--button--link, .user--link {
  display: block;
  color: #fff;
  background-color: transparent;
  text-align: center;
  line-height: 1;
  padding: 1.5em .5em 1.25em;
  font-size: 14px;
  font-size: 0.875rem; }

.no-js .head--button--link:hover,
.no-js .head--button--link:focus,
.js.no-touch .head--button--link:hover,
.js.no-touch .head--button--link:focus,
.js.touch .head--button--link:active, .no-js .user--link:hover,
.no-js .user--link:focus,
.js.no-touch .user--link:hover,
.js.no-touch .user--link:focus,
.js.touch .user--link:active {
  color: #fff;
  background-color: #197cb5; }

.head {
  background-color: #24a2ec;
  position: relative;
  z-index: 1000;
  overflow: visible;
  /*<div class="head--search-toggle">
        <a href="#event-search"><span class="icon icon-search" aria-hidden="true"><span>&#x1f50d;</span></span></a>
    </div>*/
  /*<div class="head--search column">
        <form class="form head--search--form search-field-with-icon" action="">
            <fieldset title="Find a Scratch Day Event">
                <span class="icon icon-mag-glass" aria-hidden="true"><span>&#x1f50d;</span></span>
                <input type="search" name="s" id="s" class="form--input" placeholder="Looking to attend an event?">
            </fieldset>
        </form>
    </div>*/ }
  .head--brand {
    padding: .625em 0 .5em; }
  .head--button--link__disabled {
    /* If $height is true, override the variable. */ }
    .no-js .head--button--link__disabled,
    .no-js .head--button--link__disabled:hover,
    .no-js .head--button--link__disabled:focus,
    .js.no-touch .head--button--link__disabled,
    .js.no-touch .head--button--link__disabled:hover,
    .js.no-touch .head--button--link__disabled:focus,
    .js.touch .head--button--link__disabled,
    .js.touch .head--button--link__disabled:active {
      cursor: default;
      background-color: #24a2ec; }
    @media (min-width: 30.0625em) {
      .no-js .head--button--link__disabled,
      .no-js .head--button--link__disabled:hover,
      .no-js .head--button--link__disabled:focus,
      .js.no-touch .head--button--link__disabled,
      .js.no-touch .head--button--link__disabled:hover,
      .js.no-touch .head--button--link__disabled:focus,
      .js.touch .head--button--link__disabled,
      .js.touch .head--button--link__disabled:active {
        border-top: 3px solid #197cb5;
        padding: 1.25em .5em 1.25em; } }
  .head--search-toggle a {
    display: block; }
  .head--search-toggle .icon {
    margin-right: 0; }
  .head--search--form {
    padding: .625em 0 .625em; }

/*<nav class="user">
    <ul class="user--list">
        <li id="dropdown" class="user__active user--dropdown__active">
            <a class="user--dropdown js-dropdown" href=":;javascript">
                <span class="user--dropdown--border">
                    <span class="icon icon-dropdown-arrow" aria-hidden="true"><span>&#9660;</span></span>
                </span>
            </a>
            <a class="user--link" href="{% url 'my_events' %}">
                <span class="user--overflow">
                    <span class="icon icon-person" aria-hidden="true"></span>
                    {{ user.get_short_name }}
                </span>
            </a>
            <ul class="user--subnav--list">
                <li><a class="user--subnav--link" href="{% url 'logout' %}">Logout</a></li>
            </ul>
        </li>
    </ul>
</nav>*/
.user {
  text-align: right; }
  .user--list {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: visible; }
  .user--link .icon:before {
    font-size: 1.14286em; }
  .user--overflow {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .user--dropdown {
    float: right;
    padding: .875em 0 .625em; }
    .no-js .user--dropdown:hover,
    .no-js .user--dropdown:focus,
    .js.no-touch .user--dropdown:hover,
    .js.no-touch .user--dropdown:focus,
    .js.touch .user--dropdown:active {
      background-color: #197cb5; }
    .user--dropdown--border {
      display: inline-block;
      border-left: 1px solid #4ab2ef; }
    .user--dropdown .icon {
      padding: .125em .125em .625em 0;
      margin: 0; }
    .user--dropdown .icon:before {
      font-size: .5em;
      color: #fff;
      padding: .75em 1em .5em; }
    .user--dropdown__active .icon-dropdown-arrow {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg); }
  .user--subnav--list {
    position: absolute;
    top: -12em;
    right: 0;
    z-index: 2;
    opacity: 0;
    text-align: left;
    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.25);
    transition: opacity 250ms ease-in;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px; }
    .user--subnav--list li {
      width: 100%; }
      .user--subnav--list li:first-child a {
        padding-top: 1em; }
      .user--subnav--list li:last-child a {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px; }
    .user--subnav--list:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      content: '';
      /* FF3.6+ */
      /* Chrome,Safari4+ */
      /* Chrome10+,Safari5.1+ */
      /* Opera 11.10+ */
      /* IE10+ */
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
      /* W3C */ }
  .user--subnav--link {
    color: #fff;
    background-color: #24a2ec;
    line-height: 1.25;
    padding: .75em 1em;
    white-space: nowrap;
    font-size: 14px;
    font-size: 0.875rem; }
    .no-js .user--subnav--link:hover,
    .no-js .user--subnav--link:focus,
    .js.no-touch .user--subnav--link:hover,
    .js.no-touch .user--subnav--link:focus,
    .js.touch .user--subnav--link:active {
      color: #fff;
      background-color: #197cb5; }
  .user__active .user--link {
    padding: 1.1875em .75em 1.3125em;
    overflow: hidden;
    margin-right: 38px; }
  .user--dropdown__active {
    background-color: #197cb5; }
  .user--dropdown__active .user--dropdown--border {
    border-left: 1px solid #4ab2ef; }
  .user--dropdown__active .user--subnav--list,
  .no-js .user__active:hover .user--subnav--list,
  .no-js .user__active:focus .user--subnav--list {
    top: 100%;
    opacity: 1;
    transition: opacity 250ms ease-out; }

/* If $height is true, override the variable. */
@media (max-width: 30em) {
  .head--button--link,
  .user__notactive .user--link,
  .user__active,
  .head--search-toggle a {
    color: #fff;
    border: 1px solid #4ab2ef;
    border-radius: 4px; }
    .no-js .head--button--link:hover,
    .no-js .head--button--link:focus,
    .js.no-touch .head--button--link:hover,
    .js.no-touch .head--button--link:focus,
    .js.touch .head--button--link:active, .no-js
    .user__notactive .user--link:hover,
    .no-js
    .user__notactive .user--link:focus,
    .js.no-touch
    .user__notactive .user--link:hover,
    .js.no-touch
    .user__notactive .user--link:focus,
    .js.touch
    .user__notactive .user--link:active, .no-js
    .user__active:hover,
    .no-js
    .user__active:focus,
    .js.no-touch
    .user__active:hover,
    .js.no-touch
    .user__active:focus,
    .js.touch
    .user__active:active, .no-js
    .head--search-toggle a:hover,
    .no-js
    .head--search-toggle a:focus,
    .js.no-touch
    .head--search-toggle a:hover,
    .js.no-touch
    .head--search-toggle a:focus,
    .js.touch
    .head--search-toggle a:active {
      color: #fff;
      background-color: #197cb5; }
  .no-js .user__active:hover,
  .no-js .user__active:focus,
  .js.no-touch .user__active:hover,
  .js.no-touch .user__active:focus,
  .js.touch .user__active:active {
    color: #fff;
    background-color: #197cb5; }
  .head--search-toggle a {
    padding: .5em .75em .375em; }
  .head--button {
    margin-right: .375em; }
  .head--button--link {
    padding: 1.0625em .75em .75em; }
  .user--dropdown {
    padding: .5em 0 .125em; }
  .user__notactive .user--link {
    padding: 1em .5em .75em; }
  .user__active .user--link {
    padding: .75em .25em 0; }
  .user--overflow {
    max-width: 7em; } }

/* ! ===== Main Media Banners and other media handling ===== */
/*<section class="banner banner__default" role="banner">
    <h1 class="banner--title giga">Page Title</h1>
</section>*/
.banner {
  position: relative;
  z-index: 100;
  text-align: center;
  color: #fff;
  background-color: #197cb5;
  padding: 1.5em 0 0.75em;
  /*<section class="banner banner__search" role="banner">...*/
  /* Components for an image banner with content */
  /*<section class="banner banner__home" role="banner">
        <div class="banner--content">
            <h1 class="banner--cta">Want to host a Scratch Day?</h1>
            <h2 class="banner--subhead">This year&rsquo;s Scratch Day is <time datetime="2015-05-09">May 9, 2015</time></h2>
            <div class="banner--actions">
                <p>
                    <a class="button button__small button__dark" href="#">Register as a Host</a> &nbsp;
                    <a class="button button__small button__dark" href="#">Host Login</a>
                </p>
            </div>
        </div>
    </section>*/ }
  .banner--content {
    padding: 0 1em;
    /* If $height is true, override the variable. */ }
    .banner--content p {
      margin-bottom: 13.5px;
      margin-bottom: 0.84375rem; }
    @media (min-width: 47.5em) {
      .banner--content {
        margin: 0 12.5%; } }
    .banner--content a {
      color: #fff;
      text-decoration: underline; }
      .no-js .banner--content a:hover,
      .no-js .banner--content a:focus,
      .js.no-touch .banner--content a:hover,
      .js.no-touch .banner--content a:focus,
      .js.touch .banner--content a:active {
        color: #fff;
        text-decoration: underline; }
      .banner--content a.button {
        text-decoration: none; }
        .no-js .banner--content a.button:hover,
        .no-js .banner--content a.button:focus,
        .js.no-touch .banner--content a.button:hover,
        .js.no-touch .banner--content a.button:focus,
        .js.touch .banner--content a.button:active {
          text-decoration: none; }
  .banner__search label {
    color: #fff; }
  .banner__search .label-input-pair .form--search-group {
    margin-right: 1em; }
  .banner__howtohost {
    padding-bottom: 0; }
  .banner--cta {
    color: #fff;
    text-shadow: 0 2px 0.375em rgba(0, 0, 0, 0.75); }
  .banner--subhead {
    color: #fff;
    font-family: source_sans_problack, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    text-shadow: 0 2px 0.375em rgba(0, 0, 0, 0.75); }
  .banner--actions {
    text-align: center;
    padding: 1.5em 0;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    .banner--actions .button {
      margin-bottom: 0.5em; }
    @media (min-width: 47.5em) {
      .banner--actions {
        margin: 0 12.5%; } }
    @media (min-width: 60em) {
      .banner--actions {
        margin: 0 18.75%; } }
  .banner__home {
    z-index: 1;
    width: 100%;
    background: center top no-repeat url("../img/homepage-scratchday.da7d1ec54bed.jpg") #e6e6e6;
    background-size: cover;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (min-width: 30em) {
      .banner__home {
        padding: 1.5em 0; } }
    @media (min-width: 40em) {
      .banner__home {
        height: 45%;
        min-height: 220px;
        background-blend-mode: multiply; } }
    @media (min-width: 60em) {
      .no-touch .banner__home {
        background-attachment: fixed; } }
  .banner__home .banner--content {
    position: relative;
    z-index: 1;
    overflow: visible;
    top: 20%;
    text-align: center; }
  .banner__map .banner--content,
  .banner__slideshow .banner--content {
    padding: 0;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    .banner__map .banner--content .container,
    .banner__slideshow .banner--content .container {
      padding-left: 0;
      padding-right: 0;
      margin-top: 0; }
    .banner__map .banner--content .column, .banner__map .banner--content .column--wide, .banner__map .banner--content .column--narrow,
    .banner__slideshow .banner--content .column,
    .banner__slideshow .banner--content .column--wide,
    .banner__slideshow .banner--content .column--narrow {
      width: 100%;
      padding-top: .5em;
      padding-bottom: .25em; }
    .banner__map .banner--content .banner__map--message,
    .banner__slideshow .banner--content .banner__map--message {
      text-align: center; }
      .banner__map .banner--content .banner__map--message h1, .banner__map .banner--content .banner__map--message h2, .banner__map .banner--content .banner__map--message h3,
      .banner__slideshow .banner--content .banner__map--message h1,
      .banner__slideshow .banner--content .banner__map--message h2,
      .banner__slideshow .banner--content .banner__map--message h3 {
        font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
        font-size: 16px;
        font-size: 1rem;
        line-height: 27px;
        line-height: 1.6875rem;
        color: #fff; }
    .banner__map .banner--content .banner__map--action-buttons,
    .banner__slideshow .banner--content .banner__map--action-buttons {
      text-align: center; }
    @media (min-width: 47.5em) {
      .banner__map .banner--content .banner__map--message,
      .banner__slideshow .banner--content .banner__map--message {
        text-align: center; }
        .banner__map .banner--content .banner__map--message h1, .banner__map .banner--content .banner__map--message h2, .banner__map .banner--content .banner__map--message h3,
        .banner__slideshow .banner--content .banner__map--message h1,
        .banner__slideshow .banner--content .banner__map--message h2,
        .banner__slideshow .banner--content .banner__map--message h3 {
          font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
          font-size: 22px;
          font-size: 1.375rem;
          line-height: 27px;
          line-height: 1.6875rem; } }
    @media (min-width: 60em) {
      .banner__map .banner--content .column,
      .banner__slideshow .banner--content .column {
        width: 50%; }
      .banner__map .banner--content .column--wide,
      .banner__slideshow .banner--content .column--wide {
        width: 66.66%; }
      .banner__map .banner--content .column--narrow,
      .banner__slideshow .banner--content .column--narrow {
        width: 33.33%; }
      .banner__map .banner--content .column, .banner__map .banner--content .column--wide, .banner__map .banner--content .column--narrow,
      .banner__slideshow .banner--content .column,
      .banner__slideshow .banner--content .column--wide,
      .banner__slideshow .banner--content .column--narrow {
        padding-top: 1.5em;
        padding-bottom: .5em; }
      .banner__map .banner--content .banner__map--message,
      .banner__slideshow .banner--content .banner__map--message {
        text-align: left; }
      .banner__map .banner--content .banner__map--action-buttons,
      .banner__slideshow .banner--content .banner__map--action-buttons {
        text-align: right; } }
  .banner__slideshow {
    max-width: 100%;
    padding-top: 0; }
    .banner__slideshow--wrapper {
      width: 100%;
      height: 260px;
      /* If $height is true, override the variable. */
      /* If $height is true, override the variable. */
      /* Use max-height breakpoint for Nexus 7, which is wide in landscape,
               but not high. */ }
      @media (min-width: 47.5em) {
        .banner__slideshow--wrapper {
          height: 350px; } }
      @media (min-width: 60em) {
        .banner__slideshow--wrapper {
          height: 450px; } }
      @media screen and (max-height: 30em) {
        .banner__slideshow--wrapper {
          height: 280px; } }
    .banner__slideshow .flex-control-nav {
      position: absolute;
      bottom: 0px; }
    .banner__slideshow .flex-direction-nav span.icon:hover {
      color: #24a2ec; }
    .banner__slideshow .flexslider.loading .slides > li:first-child {
      opacity: 1 !important; }

/*<nav class="anchornav js-sticky" role="navigation">
    <div class="container">
        <ul class="anchornav--list">
            <li><a id="imagine-button" class="anchornav--link js-smoovmove" href="#imagine">Imagine</a></li>
            <li><a id="plan-button" class="anchornav--link js-smoovmove" href="#plan">Plan</a></li>
            <li><a id="organize-button" class="anchornav--link js-smoovmove" href="#organize">Organize</a></li>
            <li><a id="share-button" class="anchornav--link js-smoovmove" href="#share">Share</a></li>
            <li><a id="post-button" class="anchornav--link js-smoovmove" href="#post">Post</a></li>
        </ul>
    </div>
</nav>*/
.anchornav {
  color: #fff;
  background-color: #197cb5;
  padding: 0.75em 0; }
  .anchornav--link {
    color: #fff;
    background-color: transparent;
    padding: .5em 1.5em;
    font-weight: bold;
    font-size: 14px;
    font-size: 0.875rem;
    border-radius: 1.5em; }
    .no-js .anchornav--link:hover,
    .no-js .anchornav--link:focus,
    .js.no-touch .anchornav--link:hover,
    .js.no-touch .anchornav--link:focus,
    .js.touch .anchornav--link:active {
      color: #fff;
      background-color: #24a2ec; }
    .anchornav--link__selected#imagine_button {
      background-color: #24a2ec; }
    .anchornav--link__selected#plan_button {
      background-color: #f79331; }
    .anchornav--link__selected#invite_button {
      background-color: #8525c8; }
    .anchornav--link__selected#post_button {
      background-color: #26c8a3; }

/* ! ===== Content Styles ===== */
/* Want to test/debug vertical rhythm?
 * http://compass-style.org/reference/compass/layout/grid_background/
 * Set $show-baseline-grid-backgrounds to true;
 *
 * To tweak the base font size and line height according to the width of the reading container, try this calculator:
 * http://www.pearsonified.com/typography/
 */
.vert-rhythm {
  background-position: left 0px; }

.typography {
  /* If $height is true, override the variable. */
  /* images from TinyMCE
    .alignleft { float: left; }

    .alignright { float: right; }

    .alignleft,
    img[style='float: left;'] {
        max-width: 35%;
        margin-right: 1em;
        margin-bottom: .5em;
    }
    .alignright,
    img[style='float: right;'] {
        max-width: 35%;
        margin-left: 1em;
        margin-bottom: .5em;
    } */ }
  .typography h1 {
    color: #197cb5;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 27px;
    line-height: 1.6875rem;
    margin-top: 46px;
    margin-top: 2.875rem;
    margin-bottom: 26px;
    margin-bottom: 1.625rem; }
    .typography h1 a {
      color: #197cb5; }
  .typography h2 {
    color: #474747;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 27px;
    line-height: 1.6875rem;
    margin-top: 42px;
    margin-top: 2.625rem;
    margin-bottom: 26px;
    margin-bottom: 1.625rem; }
    .typography h2 a {
      color: #474747; }
  .typography h3 {
    color: #474747;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 27px;
    line-height: 1.6875rem;
    margin-top: 26px;
    margin-top: 1.625rem;
    margin-bottom: 2px;
    margin-bottom: 0.125rem; }
    .typography h3 a {
      color: #474747; }
  .typography h4 {
    color: #197cb5;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 27px;
    line-height: 1.6875rem;
    margin-top: 26px;
    margin-top: 1.625rem;
    margin-bottom: 2px;
    margin-bottom: 0.125rem; }
    .typography h4 a {
      color: #197cb5; }
  .typography h5 {
    color: #197cb5;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    letter-spacing: .0625em;
    font-size: 16px;
    font-size: 1rem;
    line-height: 27px;
    line-height: 1.6875rem;
    margin-top: 26px;
    margin-top: 1.625rem;
    margin-bottom: 2px;
    margin-bottom: 0.125rem; }
    .typography h5 a {
      color: #197cb5; }
  .typography h6 {
    color: #197cb5;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    text-transform: uppercase;
    letter-spacing: .0625em;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 27px;
    line-height: 1.6875rem;
    margin-top: 4px;
    margin-top: 0.25rem; }
    .typography h6 a {
      color: #197cb5; }
  @media (max-width: 40em) {
    .typography h1 {
      font-size: 22px;
      font-size: 1.375rem; }
    .typography h2 {
      font-size: 20px;
      font-size: 1.25rem; }
    .typography h3 {
      font-size: 18px;
      font-size: 1.125rem; } }
  .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;
    -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;
      -ms-hyphens: none;
      -o-hyphens: none;
      hyphens: none; }
  .typography a {
    text-decoration: underline; }
    .typography a:hover, .typography a:focus {
      color: #474747;
      text-decoration: none; }
    .typography a[href^="tel:"] {
      color: #7c7c7c;
      border-bottom: 2px dotted #24a2ec; }
      .typography a[href^="tel:"]:hover, .typography a[href^="tel:"]:focus {
        color: #24a2ec; }
  .typography blockquote {
    position: relative; }
    .typography blockquote p {
      color: #24a2ec;
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 18px;
      font-size: 1.125rem;
      line-height: 27px;
      line-height: 1.6875rem;
      padding-left: 32px;
      padding-left: 2rem; }
    .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 {
      color: #82caf4;
      font-style: normal;
      font-weight: bold;
      line-height: 1;
      font-size: 48px;
      font-size: 3rem; }
    .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 {
    margin-bottom: 13.5px;
    margin-bottom: 0.84375rem; }
    .typography figure img {
      margin-bottom: 13px;
      margin-bottom: 0.8125rem; }
    .typography figure figcaption {
      text-align: center;
      font-style: italic;
      line-height: 1.5;
      font-size: 14px;
      font-size: 0.875rem; }
  .typography strong, .typography b,
  .typography em, .typography i, .typography cite,
  .typography small,
  .typography sup, .typography sup, .typography var {
    letter-spacing: .03125em; }
  .typography cite,
  .typography abbr[title],
  .typography dfn[title] {
    border-bottom: 1px dotted #24a2ec; }
  .typography cite a {
    text-decoration: none; }
  .typography abbr[title] {
    text-transform: uppercase;
    letter-spacing: 0.125em;
    font-size: 13px;
    font-size: 0.8125rem; }
  .typography var {
    color: #474747;
    font-style: italic; }
  .typography pre {
    margin-bottom: 1em; }
    .typography pre code {
      display: block;
      padding: 1em;
      margin: 0;
      border-left: 5px solid #53a43c;
      border-bottom: 1px solid #f0f0f0;
      border-radius: 0;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px; }
  .typography code,
  .typography kbd,
  .typography samp,
  .typography mark,
  .typography ins {
    display: inline-block;
    line-height: 1.25;
    padding: .25em .25em .125em;
    margin: 0 -.0625em; }
  .typography code, .typography kbd {
    background: #f2f2f2;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.1) inset;
    border-radius: 6px; }
  .typography code {
    color: #53a43c; }
  .typography samp {
    background-color: #e6e6e6; }
  .typography mark {
    background-color: #ffffb1; }
  .typography strike, .typography s {
    color: #b2b2b2; }
  .typography del {
    color: #cc3333; }
  .typography u {
    text-decoration: underline; }
  .typography ins {
    color: #222;
    background-color: #e6e6e6;
    text-decoration: none; }
  .typography table {
    margin-bottom: 13.5px;
    margin-bottom: 0.84375rem; }
    .typography table caption {
      caption-side: top;
      color: #7c7c7c;
      font-size: 1.125em;
      text-align: left;
      margin-bottom: 27px;
      margin-bottom: 1.6875rem; }
    .typography table thead,
    .typography table tfoot {
      border-bottom: 2px solid #b2b2b2; }
    .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 #e4eaf6; }
      .typography table th:first-child,
      .typography table td:first-child {
        border-left: none; }
    .typography table td {
      border-bottom: 1px solid #e4eaf6; }
    .typography table tfoot {
      border-top: 1px solid #e6e6e6; }
  .typography dl {
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    margin-top: -8px;
    margin-top: -0.5rem;
    margin-bottom: 24px;
    margin-bottom: 1.5rem; }
    .typography dl dt, .typography dl dd {
      margin-bottom: 0;
      padding-left: 0.5em;
      padding-right: 0.5em;
      padding-top: 8px;
      padding-top: 0.5rem;
      padding-bottom: 6px;
      padding-bottom: 0.375rem; }
    .typography dl dt {
      font-weight: bold;
      color: #727272;
      border-top: 1px solid #e6e6e6;
      border-bottom: 1px solid #e6e6e6; }
    .typography dl dd {
      padding-top: 7px;
      padding-top: 0.4375rem;
      padding-bottom: 4px;
      padding-bottom: 0.25rem; }
    .typography dl dt + dt {
      border-top: 0; }
  .typography form .horizontal-list li {
    margin-right: 1em; }
  .typography form .element-caption {
    color: #b2b2b2; }
  .typography fieldset {
    border-top: 1px solid #24a2ec;
    padding: 0.75em 0; }
  .typography > h1:first-child {
    margin-top: 0;
    padding-top: 4px;
    padding-top: 0.25rem; }
  .typography > h2:first-child,
  .typography > h3:first-child,
  .typography > h4:first-child {
    margin-top: 0; }
  .typography > h2.title,
  .typography > p.leader {
    margin-top: 42px;
    margin-top: 2.625rem; }
  .typography label.active {
    color: #7c7c7c; }

.default-typography {
  line-height: 1.6666;
  font-size: 16px;
  font-size: 1rem;
  margin-bottom: 13.5px;
  margin-bottom: 0.84375rem; }

/*<section class="content">
    <div class="container">
    </div>
</section>*/
.content {
  position: relative;
  z-index: 1;
  clear: both;
  padding: 1.5em 0 3em;
  background: top left repeat;
  background-image: url("../img/bg-pattern-main.c9a432ce9788.png");
  background-color: #e4eaf6;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  .content--main {
    padding: 1.5em 1.5em; }
  .content--edit {
    padding: 1.5em 1.5em; }
  .content--main__home {
    padding: 0.5em 1em; }
  @media (max-width: 40em) {
    .content--main__home .column[role=complementary] {
      display: none;
      visibility: hidden; } }
  @media (min-width: 47.5em) {
    .content {
      padding: 3em 0 4.5em; }
      .content .container {
        padding-left: 6.25%;
        padding-right: 6.25%; }
      .content--main, .content--main__home {
        padding: 1.5em 9.09091%; }
      .content--edit {
        padding: 0 9.09091% 0 18.18182%; } }
  @media (min-width: 60em) {
    .content--main__full {
      padding: 1.5em 12.5%; } }

/*<section class="banner controls" role="banner">
    <div class="container controls--container">
        <header class="two-col">
            <div class="column controls--left">
                <span id="event-published"></span>
                <a class="controls--button button button__blue" href="#">Preview</a>
            </div>
            <div class="column controls--right">
                <a class="controls--button button button__blue" href="{% url 'my_events' %}">My Events</a>
            </div>
        </header>
    </div>
</section>*/
.controls {
  text-align: right;
  padding-bottom: 1.5em;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  .controls--left, .controls--right {
    padding-bottom: 1.25em; }
  .controls--left {
    text-align: left; }
  .controls--right {
    text-align: right; }
  .controls--button {
    margin-right: 0.5em; }
  @media (max-width: 29.9375em) {
    .controls--left {
      text-align: center; }
    .controls--right {
      display: none;
      visibility: hidden; } }
  @media (min-width: 47.5em) {
    .controls--container {
      padding-left: 6.25%;
      padding-right: 6.25%; } }
  .controls__banner {
    padding-bottom: 0; }

/* ! ===== Tabs ===== */
/*<h1 class="tabnav--title">My Events</h1>
    <menu class="tabnav">
    <ul class="tabnav--list js-nav">
        <li><a href="#about" class="tabnav--link tabnav--link__disabled">About Me</a></li>
        <li><a href="#password" class="tabnav--link">Password</a></li>
        <li><a href="#email" class="tabnav--link">Email</a></li>
    </ul>
</menu>*/
.tabnav {
  padding-top: 0.75em;
  margin-bottom: -1.5em; }
  .tabnav--header {
    text-align: center;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    .tabnav--header .controls {
      text-align: center; }
    @media (max-width: 39.9375em) {
      .tabnav--header .content--main {
        padding-left: 0;
        padding-right: 0; } }
    @media (min-width: 40em) {
      .tabnav--header {
        text-align: left; }
        .tabnav--header .controls {
          float: right; } }
  .tabnav--title {
    color: #fff;
    font-family: source_sans_problack, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 30px;
    font-size: 1.875rem; }
  .tabnav--list li {
    margin-right: 3px; }
  .tabnav--link {
    padding: .75em 1em .375em;
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    font-size: 14px;
    font-size: 0.875rem;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    /* If $height is true, override the variable. */ }
    .no-js .tabnav--link:hover,
    .no-js .tabnav--link:focus,
    .js.no-touch .tabnav--link:hover,
    .js.no-touch .tabnav--link:focus,
    .js.touch .tabnav--link:active {
      color: #fff;
      background-color: #24a2ec; }
    @media (min-width: 40em) {
      .tabnav--link {
        min-width: 10em;
        text-align: center; } }
  .no-js .tabnav .disabled,
  .no-js .tabnav .disabled:hover,
  .no-js .tabnav .disabled:focus,
  .js.no-touch .tabnav .disabled,
  .js.no-touch .tabnav .disabled:hover,
  .js.no-touch .tabnav .disabled:focus,
  .js.touch .tabnav .disabled,
  .js.touch .tabnav .disabled:active {
    cursor: default;
    color: #7c7c7c;
    background-color: #fff; }
  .tabnav--content {
    padding: 1.5em 0; }

/*<ul class="button-tabs">
    <li><a class="button button__small button__on-blue disabled" href="#details">Event Details</a></li>
    <li><a class="button button__small button__on-blue" href="#author">Kassah Adel</a></li>
</ul>*/
.button-tabs {
  text-align: center;
  padding-bottom: 1.5em;
  /* If $height is true, override the variable. */ }
  .button-tabs li {
    padding: 0 .25em; }
  @media (min-width: 60em) {
    .button-tabs {
      padding-bottom: 3em; } }
  .button-tabs__event {
    background-color: #197cb5;
    padding: 1.5em 0 0.75em;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    .button-tabs__event li {
      padding: 0 0.25em 0.75em; }
    @media (max-width: 40em) {
      .button-tabs__event {
        margin: -0.5em; } }
    @media (min-width: 40em) {
      .button-tabs__event {
        border-top-right-radius: 8px; } }

/* ! ===== Breadcrumbs ===== */
/*<div class="breadcrumbs">
    <a class="breadcrumbs--link" href="projects.php">Projects</a>
    <span class="breadcrumbs--sep">&raquo;</span>
    <span class="breadcrumbs--link breadcrumbs--link__active">Recent Projects</span>
</div>*/
/* ! ===== Pagination ===== */
/*<footer class="pagination">
    <ul class="pagination--list menu">
        <li><a class="pagination--link pagination--link__prev disabled" href="/www/news/page/1" title="View Newer Posts">◀</a></li>
        <li><a class="pagination--link disabled" href="/www/news/page/1">1</a></li>
        <li><a class="pagination--link" href="/www/news/page/2">2</a></li>
        <li><a class="pagination--link pagination--link__next" href="/www/news/page/2" title="View Older Posts">▶</a></li>
    </ul>
</footer>*/
.pagination {
  text-align: center;
  margin-top: 0.75em;
  border-top: 1px solid #e6e6e6;
  padding-top: 1.5em; }
  .pagination--list {
    display: inline-block; }
    .pagination--list li {
      margin: 0 .5em; }
  .pagination--link__prev.disabled:hover, .pagination--link__prev.disabled:focus, .pagination--link__prev.disabled:active, .pagination--link__prev.disabled, .pagination--link__next.disabled:hover, .pagination--link__next.disabled:focus, .pagination--link__next.disabled:active, .pagination--link__next.disabled {
    cursor: default;
    color: #e6e6e6; }
  .pagination--link.disabled:hover, .pagination--link.disabled:focus, .pagination--link.disabled:active, .pagination--link.disabled {
    cursor: default;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans; }

.column__white {
  background-color: #fff; }
  .column__white:before {
    background-color: #fff; }

.sidebar__blue {
  color: #fff;
  background-color: #24a2ec; }
  .sidebar__blue:before {
    background-color: #24a2ec; }
  .sidebar__blue label {
    color: #fff; }

.sidebar__light {
  color: #7c7c7c;
  background-color: #f2f2f2; }
  .sidebar__light:before {
    background-color: #f2f2f2; }
  .sidebar__light .button-tabs__event {
    background-color: gainsboro; }
  .sidebar__light .event--sidebar .button__on-blue {
    color: #474747;
    background-color: gainsboro; }
    .no-js .sidebar__light .event--sidebar .button__on-blue:hover,
    .no-js .sidebar__light .event--sidebar .button__on-blue:focus,
    .js.no-touch .sidebar__light .event--sidebar .button__on-blue:hover,
    .js.no-touch .sidebar__light .event--sidebar .button__on-blue:focus,
    .js.touch .sidebar__light .event--sidebar .button__on-blue:active {
      color: #fff;
      background-color: #24a2ec; }
    .no-js .sidebar__light .event--sidebar .button__on-blue.disabled,
    .no-js .sidebar__light .event--sidebar .button__on-blue.disabled:hover,
    .no-js .sidebar__light .event--sidebar .button__on-blue.disabled:focus,
    .js.no-touch .sidebar__light .event--sidebar .button__on-blue.disabled,
    .js.no-touch .sidebar__light .event--sidebar .button__on-blue.disabled:hover,
    .js.no-touch .sidebar__light .event--sidebar .button__on-blue.disabled:focus,
    .js.touch .sidebar__light .event--sidebar .button__on-blue.disabled,
    .js.touch .sidebar__light .event--sidebar .button__on-blue.disabled:active {
      color: #474747;
      background-color: #f2f2f2; }
  .sidebar__light .event--detail--title {
    color: #474747; }
  .sidebar__light .editable--input,
  .sidebar__light .editable--textarea {
    background-color: #fff; }

/* ! ===== Footer styles ===== */
/*<footer class="foot">
    <div class="container">
        <div class="foot--social">
            <p class="copyright"><span>Scratch</span> is a project of the Lifelong Kindergarten Group at the MIT Media Lab.</p>
            <ul class="foot--social--list menu">
                <li><a class="foot--social--link foot--social--link__twitter" href="#" title="Follow us on Twitter">Twitter</a></li>
                <li><a class="foot--social--link foot--social--link__instagram" href="#" title="Follow us on Instagram">Instagram</a></li>
                <li><a class="foot--social--link foot--social--link__facebook" href="#" title="Like us on Facebook">Facebook</a></li>
                <li><a class="foot--social--link foot--social--link__shopify" href="#" title="Something us on shopify">shopify</a></li>
            </ul>
        </div>
        <nav class="foot--column foot--column__day">
            <h4 class="foot--nav--title">Scratch Day</h4>
            <ul class="foot--nav--list">
                <li><a class="foot--nav--link" href="#">Contact Us</a></li>
            </ul>
        </nav>
        <nav class="foot--column foot--column__family"> [...] </nav>
    </div>
</footer>*/
.foot {
  clear: both;
  padding: 3em 0;
  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.15) inset; }
  .foot--social--list {
    padding-top: 0.75em; }
    .foot--social--list li {
      margin-right: .875em; }
  .foot--social--link {
    display: block;
    overflow: hidden;
    text-indent: 100%;
    width: 36px;
    height: 36px;
    background: 0 0 no-repeat url("../img/social-icon_sprite.813291278771.png") transparent;
    background-size: 400%;
    transition: none; }
    .foot--social--link__medium {
      background: 0 0 no-repeat url("../img/medium-dark.680440e4e828.png") #fff;
      background-size: 100%;
      height: 34px;
      width: 34px;
      border-radius: 34px;
      margin: 2px;
      transition: none; }
    .foot--social--link__medium:hover, .foot--social--link__medium:focus {
      background: 0 0 no-repeat url("../img/medium-light.89fab6145291.png") #f79331;
      background-size: 100%;
      height: 34px;
      width: 34px;
      border-radius: 34px;
      margin: 2px;
      transition: none; }
    .foot--social--link__twitter {
      background-position: 0 0; }
    .foot--social--link__twitter:hover, .foot--social--link__twitter:focus {
      background-position: 0 -36px; }
    .foot--social--link__instagram {
      background-position: -36px 0; }
    .foot--social--link__instagram:hover, .foot--social--link__instagram:focus {
      background-position: -36px -36px; }
    .foot--social--link__facebook {
      background-position: -72px 0; }
    .foot--social--link__facebook:hover, .foot--social--link__facebook:focus {
      background-position: -72px -36px; }
    .foot--social--link__shopify {
      background-position: -108px 0; }
    .foot--social--link__shopify:hover, .foot--social--link__shopify:focus {
      background-position: -108px -36px; }
  .foot--nav--link {
    margin: 0 -.25em;
    padding: .25em;
    font-weight: bold;
    line-height: 1.25; }

.copyright,
.foot--column {
  font-size: 14px;
  font-size: 0.875rem; }

.copyright a {
  font-weight: bold; }

/*
 * Warnings for browsers. Keep these for all projects. 
 
<div class="no-js-message do-not-print">
    <div class="container">
        <h1>Whoops! <em>No Javascript&#x203d;</em></h1>
        <p>Javascript is required for this website. Please enable Javascript on this device or visit with a more capable device for the full experience. </p>
        <p><small>If you think that javascript <i>should</i> be available, check your browser settings or force a fresh reload of this page &mdash; <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></small></p>
    </div>
</div>
 
 */
.no-js-message,
#oldie {
  text-align: center;
  color: #474747;
  padding: 0.5em 0.5em 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); }
  .no-js-message .container,
  #oldie .container {
    max-width: 45em; }
  .no-js-message h1,
  #oldie h1 {
    color: #fff; }
  .no-js-message p,
  #oldie p {
    padding-bottom: 1em;
    margin: 0; }
  .no-js-message a,
  #oldie a {
    color: #474747;
    text-decoration: underline;
    white-space: nowrap; }
    .no-js .no-js-message a:hover,
    .no-js .no-js-message a:focus,
    .js.no-touch .no-js-message a:hover,
    .js.no-touch .no-js-message a:focus,
    .js.touch .no-js-message 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: #222;
      text-decoration: none; }

.js .no-js-message {
  display: none;
  visibility: hidden; }

.no-js-message {
  background-color: #cc3333;
  background: repeating-linear-gradient(45deg, #ce3b3b, #ce3b3b 6px, #d24b4b 6px, #d24b4b 12px); }
  .no-js-message,
  .no-js-message a {
    color: #fff; }
  .no-js .no-js-message:hover,
  .no-js .no-js-message:focus,
  .js.no-touch .no-js-message:hover,
  .js.no-touch .no-js-message:focus,
  .js.touch .no-js-message: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: #474747;
  background-color: #ffff88;
  background: repeating-linear-gradient(45deg, #ffff88, #ffff88 6px, #ffed4b 6px, #ffed4b 12px); }
  #oldie,
  #oldie a,
  #oldie a:hover,
  #oldie a:focus {
    color: #474747; }

#google_translate_element {
  margin: 20px 0 0 0; }
  #google_translate_element img {
    display: inline; }

/* ! ===== 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="not-column">Title</h1>
        <div class="two-col">
            <div class="column"> Content </div>
            <div class="column"> Content </div>
        </div>
    </div>

    <div class="container__tight">
        <h1 class="not-column">Widgets</h1>
        <div class="three-col">
            <div class="column"> Content </div>
            <div class="column"> Content </div>
            <div class="column"> Content </div>
        </div>
    </div>

    <div class="container">
        <div class="default-col">
            <article class="column" role="main"> Content </div>
            <aside class="column" role="complementary"> Content </aside>
        </div>
    </div>
*/
.two-col,
.four-col {
  /* If $height is true, override the variable. */ }
  @media (min-width: 40em) {
    .two-col .column,
    .four-col .column {
      float: left;
      width: 50%; }
      .two-col .column.pull-right,
      .four-col .column.pull-right {
        float: right; }
    .two-col .column:nth-of-type(2n+3),
    .four-col .column:nth-of-type(2n+3) {
      clear: both; } }

.four-col {
  /* If $height is true, override the variable. */ }
  @media (min-width: 60em) {
    .four-col .column {
      width: 25%; }
    .four-col .column:nth-of-type(2n+3) {
      clear: none; }
    .four-col .column:nth-of-type(4n+5) {
      clear: both; } }

.two-third-col {
  /* If $height is true, override the variable. */ }
  @media (min-width: 30em) {
    .two-third-col .column {
      float: left; }
      .two-third-col .column--wide {
        width: 66.66%; }
      .two-third-col .column--narrow {
        width: 33.33%; } }

/*.three-col,
.six-col {
    @extend %col-row;

    .container__tight & { @extend %col-row-tight; }

    // At small sizes, make the two and four col pattern the same
    @include pe-media( $breakpoint-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; }
    }
}


.six-col {

    // Redefine the three col structure to be six across
    @include pe-media( $breakpoint-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; }
    }
}*/
.default-col {
  /* If $height is true, override the variable. */ }
  @media (min-width: 40em) {
    .default-col .column {
      float: left; }
      .default-col .column.pull-right {
        float: right; }
    .default-col > [role="main"] {
      width: 68.75%; }
    .default-col > [role="complementary"] {
      width: 31.25%; } }

.head {
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  @media (max-width: 30em) {
    .head--button, .head--user {
      display: inline-block;
      vertical-align: middle; }
    .head--search-toggle {
      float: left; }
    .head--columns {
      text-align: right;
      padding-bottom: 0.75em;
      margin: 0 -.5em; }
    .head--search {
      margin: 0.5em -1em -0.75em;
      padding: .5em 1em;
      background-color: #197cb5; }
      .js .head--search {
        display: none; }
      .js .search .head--search {
        display: block; } }
  @media (min-width: 30.0625em) {
    .head--search-toggle {
      display: none;
      visibility: hidden; }
    .head--columns {
      margin-left: -0.5em;
      margin-right: -0.5em;
      position: relative;
      z-index: 1;
      overflow: visible; }
      .head--columns:after {
        content: "";
        display: table;
        clear: both; }
    .head--button, .head--search, .head--user {
      float: left;
      padding-left: 0.5em;
      padding-right: 0.5em; }
    .head--user, .head--button {
      width: 25%; }
    .head--search {
      width: 50%; }
    .head--user {
      position: absolute;
      top: 0;
      right: 0; } }
  @media (min-width: 30.0625em) and (max-width: 40em) {
    .head .container {
      padding-left: 0;
      padding-right: 0; } }
  @media (min-width: 40em) {
    .head--brand {
      float: left; }
    .head--columns {
      margin: 0 0 0 140px; } }
  @media (min-width: 60em) {
    .head--user, .head--button {
      width: 18.75%; }
    .head--search {
      width: 62.5%; } }

/*<div class="wrapper wrapper__radiustop">
    <div class="event-col">

        <article class="event column column__white" role="main">
            <div class="content--main">
                <header class="event--header">
                    <h1 class="event--title" id="event-name">{{ event.name }}</h1>
                    <p class="event--host js-nav">Hosted by <a class="" href="#author">{{ event.host.get_full_name }}</a></p>
                </header>
            </div>
        </article>

        {% if can_edit %}
        <aside class="sidebar sidebar__light column" role="complementary">
        {% else %}
        <aside class="sidebar sidebar__blue column" role="complementary">
        {% endif %}
            <div class="event--sidebar js-tabnav-wrapper">
                [...]
            </div>
        </aside>

        <article class="event column column__white" role="main">
            <div class="content--main">
                <div class="event--text typography">
                    [...]
                </div>
            </div>
        </article>

    </div>
    <footer id="event-map" class="event--footer event--footer__map">
    </footer>
</div>*/
.event-col {
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  @media (min-width: 40em) {
    .event-col > [role="main"] {
      float: left;
      width: 62.5%;
      padding-right: 0; }
    .event-col > [role="complementary"] {
      float: right;
      width: 37.5%;
      padding-left: 0; }
    .event-col .column__white:before,
    .event-col .sidebar__blue:before,
    .event-col .sidebar__light:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: -1;
      width: inherit; } }
  @media (min-width: 47.5em) {
    .event-col > [role="main"] {
      width: 68.75%; }
    .event-col > [role="complementary"] {
      width: 31.25%; } }

.foot {
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  @media (max-width: 39.9375em) {
    .foot--social {
      text-align: center;
      padding-bottom: 1.5em; }
    .foot--column {
      float: left;
      width: 43.75%; }
    .foot--column__day {
      margin-left: 6.25%; } }
  @media (min-width: 30em) and (max-width: 39.9375em) {
    .foot--column {
      width: 37.5%; }
    .foot--column__day {
      margin-left: 12.5%; } }
  @media (min-width: 40em) {
    .foot--social, .foot--column {
      float: left; }
    .foot--social {
      width: 43.75%;
      margin-left: 6.25%; }
    .foot--column__day {
      width: 25%; }
    .foot--column__family {
      width: 25%; } }
  @media (min-width: 47.5em) {
    .foot .pre {
      white-space: normal; }
    .foot--social {
      width: 37.5%;
      margin-left: 6.25%;
      margin-right: 6.25%; }
    .foot--column__day {
      width: 18.75%; }
    .foot--column__family {
      width: 25%; } }

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

.fwf-col, .fwf-wrapper {
    @extend %pie-clearfix;
}

.fwf-col { padding-bottom: $vert-grid-spacing; }

@include pe-media( $breakpoint-medium ) {

    $fwf-width: 300px;

    .fwf-fixed-left, .fwf-fixed-right {
        position: relative;
        float: left;
        width: $fwf-width;
    }

    .fwf-fixed-left {
        left: $fwf-width;
    	margin-left: - $fwf-width;
    }

    .fwf-fixed-right {
        right: $fwf-width;
    	margin-right: - $fwf-width;
    }

    .fwf-wrapper {
        float: left;
    	width: 100%;
    }

    $fwf-width-plus-gutter: $fwf-width + ($grid-spacing-px * 2);

    .fwf-fluid-left {
        margin-right: $fwf-width-plus-gutter;
    }

    .fwf-fluid-right {
        margin-left: $fwf-width-plus-gutter;
    }
}*/
@media (min-width: 40em) and (min-height: 600px) {
  .head {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; }
  body {
    padding-top: 3.125em; }
  .stuck {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900; }
  .anchornav.stuck {
    top: 51px; } }

/* If $height is true, override the variable. */
@media (min-width: 30em) {
  .content--container__home {
    margin-top: -4.5em; }
    .content--container__home .wrapper__default {
      padding-top: 2em; }
  .content--container__map {
    margin-top: 0; } }

/* If $height is true, override the variable. */
@media (min-width: 60em) {
  .widget__home .widget--search--form {
    max-width: 62.5%;
    margin: 0 auto; } }

/*<div class="feedback feedback__notice"> also error, warning, and success
    <h2 class="feedback--snipe">Empty!</h2>
    <p class="feedback--message">No events have past yet.</p>
</div>*/
.feedback {
  padding: 0.75em 1.5em 0;
  margin-bottom: 1.5em;
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
  color: #474747;
  background-color: #99d4f6;
  border-color: #197cb5; }
  .feedback--snipe, .feedback--message {
    display: inline-block; }
  .feedback--snipe {
    margin-right: .25em;
    font-size: 20px;
    font-size: 1.25rem; }
  .feedback--message {
    font-size: 14px;
    font-size: 0.875rem; }
  .feedback a {
    color: #222;
    text-decoration: underline; }
    .no-js .feedback a:hover,
    .no-js .feedback a:focus,
    .js.no-touch .feedback a:hover,
    .js.no-touch .feedback a:focus,
    .js.touch .feedback a:active {
      text-decoration: none; }
  .feedback.no-js-message {
    border-color: #cc3333;
    color: #fff; }
  .feedback__success {
    background-color: #86e8d1;
    border-color: #26c8a3; }
  .feedback__warning {
    background-color: #f9ad62;
    border-color: #f68414; }
  .feedback__error {
    color: #222;
    background-color: #e69999;
    border-color: #cc3333; }

.txlive-langselector-list > li {
  line-height: 1.2rem; }

/* Home content
<article class="wrapper content--container content--container__home">
    <div class="wrapper__default default-col">
        <div class="column" role="main">
            <h2 class="">About Scratch Day</h2>
            <p> [...] </p>
        </div>
        <div class="column" role="complementary">
            <img class="retina-size" src="{% static 'img/home-graphic.png' %}" alt="Meet Share and Learn">
        </div>
    </div>
    <footer class="wrapper__orange two-col">
        <div class="widget widget__home column">
            <h3 class="widget--title">Find an Event</h3>
            <form class="form widget--search--form search-field-with-icon" action="">
                <fieldset title="Find a Scratch Day Event">
                    <span class="icon icon-mag-glass" aria-hidden="true"><span>&#x1f50d;</span></span>
                    <input type="search" name="s" id="s" class="form--input" placeholder="Try searching a city or town&hellip;">
                </fieldset>
            </form>
        </div>
    </footer>
</article>*/
.wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  background-color: #fff; }
  .wrapper--default {
    position: relative;
    padding-top: 1.5em;
    background-color: #fff; }
    .wrapper--default > .content--main {
      padding-top: 0; }
    .wrapper--default > .content--edit {
      padding-top: 0; }
  .wrapper--title {
    padding-bottom: 1.5em;
    text-align: center;
    font-size: 20px;
    font-size: 1.25rem; }
  .wrapper--default .wrapper--title {
    color: #24a2ec; }
  .wrapper--slideshow {
    padding-top: 1.5em; }
  .wrapper__radiustop {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .wrapper__blue {
    color: #fff;
    background-color: #24a2ec;
    background-image: -owg-linear-gradient(#5bbaf1 5%, #24a2ec 95%);
    background-image: linear-gradient(#5bbaf1 5%, #24a2ec 95%); }
  .wrapper__blue a {
    color: #fff; }
  .wrapper__dark {
    background-color: #197cb5; }
  .wrapper__dark .wrapper--title,
  .wrapper__dark .widget--title {
    color: #fff; }
  .wrapper__purple {
    background-color: #8525c8;
    background-image: -owg-linear-gradient(#a056d4 5%, #8525c8 95%);
    background-image: linear-gradient(#a056d4 5%, #8525c8 95%); }
  .wrapper__purple .wrapper--title,
  .wrapper__purple .widget--title {
    color: #fff; }
  .wrapper__orange {
    background-color: #f79331; }
  .wrapper__orange .wrapper--title,
  .wrapper__orange .widget--title {
    color: #fff; }
  .wrapper__green {
    background-color: #26c8a3;
    background-image: -owg-linear-gradient(#56d4b8 5%, #26c8a3 95%);
    background-image: linear-gradient(#56d4b8 5%, #26c8a3 95%); }
  .wrapper__green .wrapper--title,
  .wrapper__green .widget--title {
    color: #fff; }

.widget {
  padding-top: 1.5em; }
  .widget--title {
    color: #474747;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 27px;
    line-height: 1.6875rem;
    margin-bottom: 13.5px;
    margin-bottom: 0.84375rem; }
    .widget--title a {
      color: #474747; }
  .widget--search--form {
    /* If $height is true, override the variable. */ }
    @media (min-width: 47.5em) {
      .home .widget--search--form {
        margin: 0 6.25%; } }
  .widget__center {
    text-align: center; }

/* ! ===== 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;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; }
  .typography .js .embed-container {
    margin-bottom: 1.5em; }
  .js .embed-container iframe,
  .js .embed-container object,
  .js .embed-container embed,
  .js .embed-container > div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important; }
  .js .embed-container.ratio_8_5 {
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    height: 0;
    padding-bottom: 62.5%; }

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

/* ! ===== Numbered Steps ===== */
/*<h2 class="step step__orange"><span class="step--label">Step</span> <span class="step--number">1</span></h2>*/
.step {
  position: relative;
  z-index: 1;
  padding: 0.75em 0;
  /* If $height is true, override the variable. */ }
  @media (min-width: 47.5em) {
    .step {
      margin: 0 6.25%; } }
  .step:before {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    content: '';
    width: 100%;
    border-top: 1px solid #e6e6e6; }
  .step--label {
    display: none;
    visibility: hidden; }
  .step--number {
    position: relative;
    z-index: 3;
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 2em;
    height: 2em;
    color: #24a2ec;
    background-color: #fff;
    border-width: 2px;
    border-style: solid;
    border-color: #24a2ec;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    line-height: 1.875em;
    font-size: 20px;
    font-size: 1.25rem;
    border-radius: 50%; }
  .step__orange .step--number {
    color: #f79331;
    border-color: #f79331; }
  .step__green .step--number {
    color: #26c8a3;
    border-color: #26c8a3; }
  .step__purple .step--number {
    color: #8525c8;
    border-color: #8525c8; }

.not-column,
html[lang="he"] .not-column,
html[lang="ar"] .not-column {
  text-align: center; }
  .not-column .icon-pdf,
  html[lang="he"] .not-column .icon-pdf,
  html[lang="ar"] .not-column .icon-pdf {
    float: none;
    display: inline; }

#organize-tips a {
  text-decoration: underline; }

#organize-tips p {
  color: #FFFFFF; }

.resourcelist--item {
  min-height: 60px;
  line-height: 50px; }

.resourcelist--icon {
  float: left;
  margin-right: 1em; }
  .resourcelist--icon > span {
    display: block;
    width: 40px;
    height: 45px; }

html[lang="he"] .resourcelist--icon,
html[lang="ar"] .resourcelist--icon {
  float: right;
  margin-right: inherit;
  margin-left: 1em; }

/*<article class="filelist wrapper--default wrapper__green">
    <h4 class="wrapper--title">Scratch Logo and Graphics</h4>
    <ul class="filelist--list menu">
        <li>
            <div class="filelist--item">
                <div class="filelist--icon"><span class="large-download" aria-hidden="true"></span></div>
                <h5 class="filelist--title">Small Group</h5>
                <p class="filelist--details">1 hour <br>Beginners</p>
            </div>
        </li>
    </ul>
</article>*/
.filelist--list li {
  padding-bottom: 0.5em;
  /* If $height is true, override the variable. */ }
  @media (min-width: 30em) {
    .filelist--list li {
      float: left;
      width: 50%; } }

.filelist--item {
  background-color: #fff;
  min-height: 97px;
  border-radius: 8px; }

.filelist--icon {
  float: left;
  padding: 1em;
  margin-right: 1em;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
  .filelist--icon > span {
    display: block;
    width: 52px;
    height: 65px; }

.filelist--title,
.filelist p.filelist--details {
  font-size: 14px;
  font-size: 0.875rem; }

.filelist--title {
  color: #24a2ec;
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
  padding: 1em 1em 0; }

.filelist p.filelist--details {
  padding: 0 1em 1em; }

.wrapper__green .filelist--icon {
  background-color: #f1d92a; }

html[lang="he"] .filelist--icon,
html[lang="ar"] .filelist--icon {
  float: right;
  padding: 1em;
  margin-right: inherit;
  margin-left: 1em;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px; }

.samples--title,
.samples p.samples--details {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5; }

.samples--title {
  color: #24a2ec;
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans; }

.samples--slide img {
  width: 240px;
  height: 180px; }

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

.medium-icon {
  background: center no-repeat url("../img/medium-color.4fa42ea5dd15.png") transparent;
  background-size: contain; }

.pdf-icon {
  background: center no-repeat url("../img/sd-pdf-icon.0e0c6676c226.svg") transparent;
  background-size: 70%; }

.large-download {
  background: center no-repeat url("../img/icon-large-download.807a7cc2e33e.png") transparent; }

.large-zip {
  background: center no-repeat url("../img/sd-zip-icon.bd92c5cefcc9.svg") transparent;
  background-size: contain; }

/* ! ===== Create and Edit an Event ===== */
/*<article class="new-event column column__white" role="main">
    <div class="content--main">
        <div class="form--input-group">
            <label for="event_name">Event Title</label>
            <input class="form--input" type="text" id="event_name" name="event_name" max="256" placeholder="Name your event">
        </div>
        <p class="aligncenter"><a class="new-event--author" href="#">Kassah Adel</a> <span class="new-event--author--icon icon icon-help" aria-hidden="true"> <span>?</span></span></p>
        <hr noshade />
        <div class="form--input-group form--input-group__spacious">
            <label for="event_details" class="form--label__large">About Event</label>
            <textarea class="form--textarea" id="event_details" name="event_details" max="500" placeholder="Tell the world about your event&hellip;"></textarea>
        </div>
        <div class="form--input-group form--input-group__spacious">
            <label for="plan_array" class="form--label__large">Event Plans</label> (optional)
            <ul class="">
                <li><input class="form--input" type="text" id="plan_array" name="plan_1" placeholder="Add a brief list of your event&rsquo;s activities or projects&hellip;"></li>
            </ul>
            <p><a class="button button__light button__full" href="#"><span class="icon icon-plus" aria-hidden="true"></span></a></p>
        </div>
    </div>
</article>*/
.new-event--author {
  font-size: 14px;
  font-size: 0.875rem; }
  .new-event--author--icon {
    color: #24a2ec; }

.new-event--sidebar {
  padding: 1.5em 1em; }

/* ! ===== Single Event Detail page ===== */
.event {
  /*<ul id="details" class="tabs--content menu">
        <li>
            <div class="event--address">
                <span class="icon icon-location" aria-hidden="true"></span>
                <h4 class="event--detail--title">Where</h4>
                <address>
                    1823 Broadway St.<br>
                    Cambridge, MA<br>
                    USA, 02123
                </address>
            </div>
            <div class="event--datetime">
                <span class="icon icon-calendar" aria-hidden="true"></span>
                <h4 class="event--detail--title">When</h4>
                <p><!-- Datetime rules http://www.brucelawson.co.uk/2012/best-of-time/ -->
                    <time datetime="2015-10-21 11:00:00-0500 PT4H">October 21<br>
                    11:00am &ndash;3:00pm EST</time></p>
            </div>
        </li>
    </ul>*/
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  .event--header {
    text-align: center;
    padding: 0.75em 0 0.75em;
    border-bottom: 1px solid #e6e6e6; }
  .event--title,
  .event--title .editable--input {
    color: #474747;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    line-height: 1.3333;
    font-size: 30px;
    font-size: 1.875rem; }
  .event--title .editable--input {
    text-align: center;
    padding: 0.25em 0.5em 0.125em; }
  .event--host {
    padding-top: 0; }
  .event--text {
    /* If $height is true, override the variable. */ }
    @media (min-width: 40em) {
      .event--text {
        margin-top: -2.5em; } }
  .event:first-of-type .eventstep {
    padding: 1.5em 0; }
  .event > .content--edit h3 {
    color: #474747;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 27px;
    line-height: 1.6875rem;
    margin-bottom: 2px;
    margin-bottom: 0.125rem; }
    .event > .content--edit h3 a {
      color: #474747; }
  .event--sidebar .button__on-blue {
    color: #fff;
    background-color: #197cb5; }
    .no-js .event--sidebar .button__on-blue:hover,
    .no-js .event--sidebar .button__on-blue:focus,
    .js.no-touch .event--sidebar .button__on-blue:hover,
    .js.no-touch .event--sidebar .button__on-blue:focus,
    .js.touch .event--sidebar .button__on-blue:active {
      color: #fff;
      background-color: #156a9a; }
    .event--sidebar .button__on-blue.disabled, .event--sidebar .button__on-blue.disabled:hover, .event--sidebar .button__on-blue.disabled:focus, .event--sidebar .button__on-blue.disabled:active {
      cursor: default;
      color: #fff;
      background-color: #24a2ec; }
  .event--sidebar .tabs--content {
    padding: 1.5em 1em 0;
    /* If $height is true, override the variable. */ }
    @media (min-width: 47.5em) {
      .event--sidebar .tabs--content {
        padding: 4.5em 1.5em 1.5em; } }
  .event--sidebar .event--address,
  .event--sidebar .event--datetime {
    padding-left: 2.5em; }
  .event--sidebar p,
  .event--sidebar address {
    font-size: 14px;
    font-size: 0.875rem; }
  .event--address, .event--datetime {
    position: relative;
    z-index: 1;
    overflow: hidden; }
    .event--address .icon, .event--datetime .icon {
      position: absolute;
      top: 0;
      left: 0; }
    .event--address .form--input-group, .event--datetime .form--input-group {
      width: 50%;
      /* If $height is true, override the variable. */ }
      @media (max-width: 40em) {
        .event--address .form--input-group, .event--datetime .form--input-group {
          width: 80%; } }
  .event--address span {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap; }
  .event--address .locality:before {
    content: '\A';
    white-space: pre; }
  .event--datetime {
    margin-top: 1.5em; }
  .event--detail--title {
    color: #fff;
    font-size: 14px;
    font-size: 0.875rem; }
  .event--author {
    padding: 0 1em; }
  .event--footer {
    position: relative;
    z-index: 1;
    overflow: hidden; }
    .event--footer:before {
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: 4px;
      content: '';
      /* FF3.6+ */
      /* Chrome,Safari4+ */
      /* Chrome10+,Safari5.1+ */
      /* Opera 11.10+ */
      /* IE10+ */
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
      /* W3C */ }
  .event--footer__map {
    margin-bottom: -8px;
    background-color: #e6e6e6; }
    .event--footer__map iframe[src=""] {
      height: 0 !important; }
  .event--footer_buttons {
    background-color: #e6e6e6; }
    .event--footer_buttons .controls--container {
      padding-top: 1.25em; }
  @media (max-width: 39.9375em) {
    .event--header {
      padding-bottom: 0;
      border-bottom: none; } }
  @media (min-width: 30em) and (max-width: 39.9375em) {
    .event--sidebar .tabs--content {
      overflow: hidden; }
    .event--datetime {
      margin-top: 0; } }

/*<div class="editable--map label-input-pair">
    <label class="label">Map Address:</label>
    <span>
        <address id="event-where">{{ event.where.formatted_text|safe }}</address>
    </span>
</div>*/
/*<ul class="edit-event-plans">
    <li>
        <a href="#" class="edit-delete"><span class="icon icon-close" aria-hidden="true"></span></a>
        <input class="editable--input" type="text" id="plan_1" name="plan_1" value="French songs to warm up">
    </li>
</ul>*/
.edit-event-plans li {
  position: relative;
  z-index: 1;
  overflow: visible; }

.edit-event-plans .editable--input {
  position: relative;
  z-index: 2; }

.edit-event-plans .edit-delete {
  position: absolute;
  top: 1px;
  left: -9999px;
  z-index: 3;
  color: #cc3333;
  background-color: #e6e6e6;
  padding: .75em .5em .4375em;
  opacity: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  transition: opacity, color, background-color 250ms ease-in-out; }
  .no-js .edit-event-plans .edit-delete:hover,
  .no-js .edit-event-plans .edit-delete:focus,
  .js.no-touch .edit-event-plans .edit-delete:hover,
  .js.no-touch .edit-event-plans .edit-delete:focus,
  .js.touch .edit-event-plans .edit-delete:active {
    color: #fff;
    background-color: #cc3333; }
  .edit-event-plans .edit-delete.active {
    left: auto;
    right: 1px;
    opacity: 1; }

.edit-map--wrapper {
  margin-bottom: -8px; }
  .edit-map--wrapper iframe[src=""] {
    height: 0 !important; }

/*<article class="my-events">
    <header class="wrapper__dark">
    </header>
    <div class="my-events--content wrapper--default">
        <div class="content--main">
            <div id="upcoming" class="tabnav--content js-form-wrapper">
                <ul class="my-events--list menu">
                    <li>
                        <div class="two-col">
                            <div class="column">
                                <h3 class="my-events--title">
                                    <a class="my-events--link" href="#">Scratch Day at MIT</a>
                                </h3>
                                <p class="my-events--date">Event Date: <time datetime="2015-03-15">March 15, 2015</time></p>
                            </div>
                            <menu class="my-events--controls column">
                                <ul class="my-events--controls--list">
                                    <li><a class="button button__green" href="#">Publish</a></li>
                                    <li><a class="button button__grey" href="#">Edit</a></li>
                                    <li><a class="button button__grey button__alert" href="#">Delete</a></li>
                                </ul>
                            </menu>
                        </div>
                    </li>
                </ul>
            </div>*/
.my-events {
  /* If $height is true, override the variable. */ }
  .my-events--list > li {
    padding: 1em 0;
    border-bottom: 1px solid #e6e6e6; }
  .my-events--list .column {
    padding-bottom: 0; }
  .my-events--title {
    font-size: 20px;
    font-size: 1.25rem; }
  .my-events--date {
    font-size: 14px;
    font-size: 0.875rem; }
  .my-events--controls {
    text-align: right;
    margin-right: -0.5em; }
    .my-events--controls--list {
      /* If $height is true, override the variable. */
      /* If $height is true, override the variable. */
      /* If $height is true, override the variable. */ }
      .my-events--controls--list li {
        padding-bottom: 0.75em;
        margin-right: 0.5em; }
      .my-events--controls--list .button {
        min-width: 0; }
      @media (max-width: 23.75em) {
        .my-events--controls--list .first {
          display: block; } }
      @media (min-width: 40em) and (max-width: 43.125em) {
        .my-events--controls--list .first {
          display: block; } }
      @media (min-width: 47.5em) and (max-width: 53.75em) {
        .my-events--controls--list .first {
          display: block; } }
  @media (max-width: 39.9375em) {
    .my-events--list .column, .my-events--controls {
      text-align: center; } }

.eventstep {
  position: absolute;
  left: 9.09091%;
  top: 1em;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
  padding: 0;
  /* If $height is true, override the variable. */ }
  @media (max-width: 47.5em) {
    .eventstep {
      position: relative;
      z-index: 1;
      padding: 0.75em 0;
      margin: 0 6.25%;
      left: 0;
      -webkit-transform: none;
          -ms-transform: none;
              transform: none; }
      .eventstep:before {
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 2;
        content: '';
        width: 100%;
        border-top: 1px solid #e6e6e6; } }
  .eventstep:before {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    content: '';
    width: 100%;
    border-top: 1px solid #e6e6e6; }
  .eventstep--number {
    position: relative;
    z-index: 3;
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 2em;
    height: 2em;
    color: #24a2ec;
    background-color: #fff;
    border-width: 2px;
    border-style: solid;
    border-color: #24a2ec;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    line-height: 1.875em;
    font-size: 20px;
    font-size: 1.25rem;
    border-radius: 50%; }
  .eventstep__orange .eventstep--number {
    color: #f79331;
    border-color: #f79331; }
  .eventstep__green .eventstep--number {
    color: #26c8a3;
    border-color: #26c8a3; }
  .eventstep__purple .eventstep--number {
    color: #8525c8;
    border-color: #8525c8; }

/*<div class="form--search-cols">
    <p class="form--results-count">0 results</p>
    <div class="form--select--wrapper">
        <select class="form--select" id="id_search_radius" name="search_radius">
            <option value="1">1 mile</option>
        </select>
    </div>
    <div class="form--select--wrapper">
        <select class="form--select" id="id_search_sort" name="search_sort">
            <option value="start_datetime">Date</option>
        </select>
    </div>
    <div class="form--input-group form--checkbox-group">
        <label for="past" class="checkbox"><input type="checkbox" id="past"> Show past events</label>
    </div>
</div>*/
.form {
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  .form--search-cols {
    text-align: center; }
  .form--search-cols .form--select--wrapper {
    margin-bottom: 0.5em; }
  .form--results-count {
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    padding-right: 1.5em; }
  .form--checkbox-group {
    padding-top: .5em; }
  @media (max-width: 29.9375em) {
    .form .form--results-count {
      font-size: 16px;
      font-size: 1rem; } }
  @media (min-width: 30em) {
    .form--search-cols .form--results-count,
    .form--search-cols .form--select--wrapper,
    .form--search-cols .form--input-group {
      display: inline-block;
      vertical-align: baseline; }
    .form--search-cols .form--select--wrapper {
      margin-bottom: 0; } }
  @media (min-width: 60em) {
    .form--search-cols {
      margin: 0 0 0 140px;
      text-align: left; }
    .form--results-count {
      min-width: 19.5%; } }

/*<ul class="search-results--list menu">
    <li>
        <h3 class="search-results--title">
            <a class="search-results--link" href="">Scratch for Frenchies</a>
        </h3>
        <p class="search-results--host">
            <span class="search-results--host--name">Joe Host
            <span class="search-results--host--sep"> | </span>
            <span class="search-results--host--assoc">Rhode Island School of Design</span>
        </span></p>
        <p class="search-results--excerpt">
            <a class="search-results--link" href="">Speaking French and playing with Scratch. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do...</a>
        </p>
        <div class="search-results--meta">
            <p class="column search-results--date">
                <span class="icon icon-calendar" aria-hidden="true"></span>
                <span class="label">When</span>
                <time datetime="2015-09-05">May 9, 2015 &nbsp; 12:30 p.m. – 2:30 p.m.</time>
            </p>
            <p class="column search-results--location">
                <span class="icon icon-location" aria-hidden="true"></span>
                <span class="label">Where</span> Providence, RI (2.63 miles)
            </p>
        </div>
    </li>
</ul>*/
.search-results--title {
  color: #24a2ec;
  padding-top: .5em;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 27px;
  line-height: 1.6875rem; }

.search-results--host {
  font-size: 14px;
  font-size: 0.875rem; }
  .search-results--host > span {
    display: inline-block; }
  .search-results--host--sep {
    margin: 0 1em; }

.search-results--excerpt .search-results--link {
  color: #7c7c7c; }
  .no-js .search-results--excerpt .search-results--link:hover,
  .no-js .search-results--excerpt .search-results--link:focus,
  .js.no-touch .search-results--excerpt .search-results--link:hover,
  .js.no-touch .search-results--excerpt .search-results--link:focus,
  .js.touch .search-results--excerpt .search-results--link:active {
    color: #474747; }

.search-results--meta {
  font-size: 14px;
  font-size: 0.875rem; }
  .search-results--meta .label {
    margin-right: .75em;
    color: #7c7c7c; }

.search-results--distance {
  font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans; }

/*<li class="no-results">
    <h2 class="no-results--title">Sorry, we couldn&rsquo;t find any events&hellip;</h2>
    <p class="no-results--message">Try using a larger radius or searching a new location</p>
    <img class="no-results--image" src="{% static 'img/no-search-results.png' %}" alt="" />
</li>*/
.no-results {
  text-align: center;
  padding: 1.5em 0; }
  .no-results--title {
    color: #474747;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 27px;
    line-height: 1.6875rem; }
    .no-results--title a {
      color: #474747; }
  .no-results--image {
    padding: 1.5em 0; }

/*<div class="wrapper">
    <article class="settings">
        <header class="wrapper wrapper__dark">
            <div class="content--main">
                <h1 class="tabnav--title">Account Settings</h1>
                <menu class="tabnav">
                    <ul class="tabnav--list js-nav">
                        <li><a href="#about" class="tabnav--link active">About Me</a></li>
                        <li><a href="#password" class="tabnav--link">Password</a></li>
                    </ul>
                </menu>
            </div>
        </header>
        <div class="settings--content wrapper--default">
            <div class="content--main">
                <div id="about" class="tabnav--content js-form-wrapper"></div>
                <div id="password" class="hidden tabnav--content js-form-wrapper"></div>
            </div>
        </div>
    </article>
</div>*/
/* ! ===== Slideshows with Flexslider ===== */
/*<div class="slideshow slideshow__samples">
        <div class="samples slideshow--wrapper flexslider js-slideshow">
            <ul class="slides samples--list">
                <li class="samples--item">
                    <figure class="samples--slide">
                        <img src="http://lorempixel.com/240/180/cats/" alt="">
                        <figcaption class="samples--caption">
                            <h6 class="foxtrot">Sample Title 1</h6>
                            <p>Short description of the sample activity for about 12 words. </p>
                        </figcaption>
                    </figure>
                </li>*/
.homepage_samples--item {
  display: block;
  text-align: center; }

.homepage_samples--title6 {
  position: absolute;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  width: 8.5%;
  top: 25%;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* Use max-height breakpoint for Nexus 7, which is wide in landscape,
           but not high. */ }
  @media (min-width: 47.5em) {
    .homepage_samples--title6 {
      top: 130px; } }
  @media (min-width: 60em) {
    .homepage_samples--title6 {
      top: 180px; } }
  @media screen and (max-height: 30em) {
    .homepage_samples--title6 {
      top: 25%; } }

.homepage_samples--slide {
  height: 180px;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  @media (min-width: 40em) {
    .homepage_samples--slide {
      height: 280px; } }
  @media (min-width: 47.5em) {
    .homepage_samples--slide {
      height: 350px; } }
  @media (min-width: 60em) {
    .homepage_samples--slide {
      height: 450px; } }
  @media screen and (max-height: 30em) {
    .homepage_samples--slide {
      height: 280px; } }
  .homepage_samples--slide img {
    min-height: 180px;
    min-width: 411px;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (min-width: 30em) {
      .homepage_samples--slide img {
        min-height: 280px;
        min-width: 640px; } }
    @media (min-width: 40em) {
      .homepage_samples--slide img {
        min-height: 260px;
        min-width: 760px; } }
    @media (min-width: 47.5em) {
      .homepage_samples--slide img {
        min-height: 350px;
        min-width: 960px; } }
    @media (min-width: 60em) {
      .homepage_samples--slide img {
        min-height: auto;
        min-width: 100%; } }

.samples--item {
  display: block;
  text-align: center;
  /* If $height is true, override the variable. */ }
  @media (min-width: 600px) {
    .samples--item:nth-child(odd) {
      text-align: right; }
    .samples--item:nth-child(even) {
      text-align: left; } }

.samples--slide {
  width: 240px;
  display: inline-block;
  margin: 0 1em; }
  .samples--slide img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px; }

.samples--caption {
  background-color: #fff;
  padding: 0.75em 0.5em 0;
  text-align: left;
  min-height: 128px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px; }

.no-js .samples--list {
  text-align: center; }

.no-js .samples--item {
  display: inline-block;
  vertical-align: top; }

.flex-direction-nav {
  /* If $height is true, override the variable. */ }
  .flex-direction-nav .flex-prev,
  .flex-direction-nav .flex-next {
    position: absolute;
    bottom: 0;
    z-index: 10;
    margin: -2em 0 0;
    opacity: .5;
    color: #fff;
    font-size: 2em;
    line-height: 1;
    padding: .5em;
    text-decoration: none !important;
    transition: all 250ms ease;
    transition-delay: 250ms; }
  .flex-direction-nav .flex-prev {
    left: 0; }
  .flex-direction-nav .flex-next {
    right: 0; }
  .flex-direction-nav .flex-disabled {
    opacity: .25 !important;
    filter: alpha(opacity=25);
    cursor: default; }
  .flexslider:hover .flex-direction-nav .flex-prev {
    opacity: 0.9; }
  .flexslider:hover .flex-direction-nav .flex-next {
    opacity: 0.9; }
  .flexslider:hover .flex-direction-nav .flex-next:hover,
  .flexslider:hover .flex-direction-nav .flex-prev:hover,
  .flexslider:hover .flex-direction-nav .flex-next:focus,
  .flexslider:hover .flex-direction-nav .flex-prev:focus,
  .flexslider:hover .flex-direction-nav .flex-next:active,
  .flexslider:hover .flex-direction-nav .flex-prev:active {
    opacity: 1; }
  @media (min-width: 47.5em) {
    .flex-direction-nav .flex-prev,
    .flex-direction-nav .flex-next {
      position: absolute;
      top: 50%;
      bottom: auto;
      z-index: 10;
      margin: -2em 0 0;
      opacity: 0; }
    .no-touch .flex-direction-nav .flex-prev {
      left: -100px; }
    .no-touch .flex-direction-nav .flex-next {
      right: -100px; }
    .no-touch .flexslider:hover .flex-direction-nav .flex-prev {
      left: 0.5em; }
    .no-touch .flexslider:hover .flex-direction-nav .flex-next {
      right: 0.5em; } }

.flex-control-paging {
  padding-bottom: 1em; }
  .flex-control-paging li a {
    background: transparent;
    border: 1px solid #fff; }

.flex-control-paging li a:hover,
.flex-control-paging li a:focus,
.flex-control-paging li a:active {
  background: #101010;
  background: rgba(16, 16, 16, 0.75);
  border-color: #101010; }

.flex-control-paging li a.flex-active {
  background: #fff; }

/* ! ===== Modal pop-overs ===== */
/*<div class="mfp-bg"></div>
<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor" tabindex="-1" style="overflow-y: scroll; overflow-x: hidden;">
    <div class="mfp-container mfp-inline-holder">
        <div class="mfp-content">
            <div id="contact-modal" class="modal wrapper__modal modal__medium">
                <a class="modal--close mfp-close icon icon-close" href="#" aria-hidden="true"></a>
                <div class="modal--header">
                    <h1 class="modal--title">Contact Us</h1>
                </div>
                <div class="modal--content js-modal-content">
                    <form method="post" id="contact-modal--form" class="form" action="/api/contact/">
                        <div class="form--input-group type-text required">
                            <label for="id_email">Email Address</label>
                            <input type="text" class="form--text" name="email" required="" placeholder="you@example.com" id="id_email">
                            <div class="form--feedback"></div>
                        </div>
                        <div class="form--input-group type-text required">
                            <label for="id_subject">Subject</label>
                            <input type="text" class="form--text" name="subject" required="" id="id_subject">
                            <div class="form--feedback"></div>
                        </div>
                        <div class="form--input-group type-textarea required">
                            <label for="id_message">Message</label>
                            <textarea name="message" required="" id="id_message" rows="6" cols="40" maxlength="350"></textarea>
                            <div class="form--feedback"></div>
                        </div>

                        <input type="hidden" name="csrfmiddlewaretoken" value="x5KIEJy0pc5V5yJE9Feb83R2QP7Sq3tL">
                        <div class="form--submit-group">
                            <input class="button button__blue" type="submit" value="Send Message">
                        </div>
                    </form>
                </div>
                <div class="modal--success off-screen js-modal-success"></div>
            </div>
        </div>
    </div>
</div>*/
.modal {
  min-width: 288px;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  border-radius: 8px;
  /*<div class="modal--success js-modal-success">
        <h2 class="modal--success--title">Thank you. Your message was sent!</h2>
        <p class="modal--success--message">We could put more text here...</p>
        <p><a class="button button__blue mfp-close" href="#" aria-hidden="true">Close</a></p>
    </div>*/
  /* If $height is true, override the variable. */ }
  .modal p, .modal ul, .modal ol {
    line-height: 1.6666;
    font-size: 14px;
    font-size: 0.875rem; }
  .modal--close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5em;
    color: #666; }
    .no-js .modal--close:hover,
    .no-js .modal--close:focus,
    .js.no-touch .modal--close:hover,
    .js.no-touch .modal--close:focus,
    .js.touch .modal--close:active {
      color: #24a2ec; }
  .modal--header {
    text-align: center;
    margin: 0 2em;
    padding: 1em 0 0.5em;
    border-bottom: 1px solid #e6e6e6; }
  .modal--title {
    color: #474747;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 27px;
    line-height: 1.6875rem; }
    .modal--title a {
      color: #474747; }
  .modal--content {
    padding: 1.5em 2em 0; }
  .modal--footer {
    text-align: center;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    background-color: #e6e6e6;
    padding: 1.25em 2em 0.5em;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px; }
  .modal--success {
    text-align: center;
    padding: 3em 0 1.5em; }
  .modal--success--title {
    color: #666;
    font-family: source_sans_probold, "Helvetica Neue Bold", HelveticaBold, "Helvetica Bold", ArialBold, "Arial Bold", sans;
    margin-bottom: 4px;
    margin-bottom: 0.25rem; }
  .modal--success--message {
    margin-bottom: 1.5em; }
  @media (min-width: 40em) {
    .modal__small {
      max-width: 22.5em; }
    .modal__medium {
      max-width: 30em; }
    .modal__large {
      max-width: 40em; } }

/* ! ===== Registration Form Modal ===== */
.modal-step {
  display: none; }

.modal-step.active {
  display: block; }

.banner__map {
  max-width: 100%;
  padding-top: 0; }
  .banner__map--wrapper {
    width: 100%;
    height: 47vh; }
  .banner__map--tall-wrapper {
    height: 85vh; }
  .banner__map--twitterfeed {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    display: block;
    width: 360px;
    background-color: #197cb5;
    padding-top: 8px;
    margin: 0;
    /* If $height is true, override the variable. */
    /* Use max-height breakpoint for Nexus 7, which is wide in landscape,
           but not high. */ }
    @media (min-width: 60em) {
      .banner__map--twitterfeed {
        right: 12.5%;
        margin: 0 auto; } }
    @media screen and (max-height: 25em) {
      .banner__map--twitterfeed {
        display: none; } }
    @media screen and (max-width: 47.5em) {
      .banner__map--twitterfeed {
        display: none; } }
    .banner__map--twitterfeed #twitter-widget-0 {
      height: 388px !important;
      /* If $height is true, override the variable. */
      /* If $height is true, override the variable. */ }
      @media (min-width: 47.5em) {
        .banner__map--twitterfeed #twitter-widget-0 {
          height: 288px !important; } }
      @media (min-width: 60em) {
        .banner__map--twitterfeed #twitter-widget-0 {
          height: 388px !important; } }
      @media screen and (max-height: 30em) {
        .banner__map--twitterfeed #twitter-widget-0 {
          height: 268px !important; } }
  .banner__map .gm-style img {
    max-width: none; }
  .banner__map .static_map {
    max-height: 50vh;
    overflow: hidden;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .banner__map .static_map--caption {
      position: absolute;
      color: white;
      font-weight: bold;
      font-size: 2rem;
      width: 100%;
      text-align: center;
      top: 22vh; }
    .banner__map .static_map img {
      opacity: .3;
      height: auto;
      width: 100%; }

/*
    Lost Grid, a simple syntax for calculating grids.
    http://lostgrid.org

    Key relationship is between the wrapper (parent), and content (child):

        // Parent
        .wrapper {
            lost-flex-container: row;
        }

        // PostCSS compiles this to:
        .wrapper {
            display: flex;
            flex-flow: row wrap;
        }

        ///////////////////////////////////////

        // Child
        .content {
            lost-column: 8/12;  // splits the viewport width into 12 slices, does all the math
            lost-offset: 2/12;  // shift this content div, 2 columns to the right
        }

        // PostCSS compiles this to:
        .content {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: calc(99.9% * 8/12 - (30px - 30px * 8/12));
            width: calc(99.9% * 8/12 - (30px - 30px * 8/12));
            margin-left: calc(99.9% * (-2/12 * -1) - (30px - 30px * (-2/12 * -1)) + 30px) !important;
        }

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

        .content:nth-child(1n) {
            margin-right: 30px;
            margin-left: 0;
        }
    }
*/
/*
    Lost can calculate with either floats, or flexbox.
    Setting these here globally set all instances of Lost grid
    declarations, across all SCSS files
*/
/*
    Displays current breakpoint. Helpful for debugging, testing + QA
*/
.breakpoint-helper {
  display: block;
  position: fixed;
  /* maximum value */
  z-index: 2147483647;
  bottom: 0;
  right: 0;
  font-size: 0.90rem;
  font-weight: bold;
  padding: 0.25rem 1rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  .breakpoint-helper:after {
    content: 'Double XL'; }
  @media (max-width: 80em) {
    .breakpoint-helper:after {
      content: 'XL'; } }
  @media (max-width: 60em) {
    .breakpoint-helper:after {
      content: 'Large'; } }
  @media (max-width: 47.5em) {
    .breakpoint-helper:after {
      content: 'Medium'; } }
  @media (max-width: 40em) {
    .breakpoint-helper:after {
      content: 'Small'; } }
  @media (max-width: 30em) {
    .breakpoint-helper:after {
      content: 'Tiny'; } }

/*
    Globals
    @todo: make colors reusable vars
*/
/*
    Header Nav: New classes
    Overriding classes at the end of this file.
*/
.nav--sitewide {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  width: 100%;
  background-color: #24a2ec;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  @media (max-width: 47.5em) {
    .nav--sitewide {
      position: absolute;
      /*
            @todo: use a non-magic number
        */
      z-index: 10;
      background-color: transparent;
      padding: 0; } }
  @media (max-width: 40em) {
    .nav--sitewide {
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap; } }

.nav__logo {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: auto;
  padding: 0.75rem;
  margin-left: 0.75rem;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  @media (max-width: 60em) {
    .nav__logo {
      margin-left: 1rem; } }
  @media (max-width: 47.5em) {
    .nav__logo {
      display: block;
      margin: 1.5rem 0 0 1.5rem;
      padding: 0; } }
  @media (max-width: 40em) {
    .nav__logo {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      position: static;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      width: 100%;
      margin: 2rem 0 1rem 0; } }
  @media (max-width: 30em) {
    .nav__logo {
      margin: 1rem 0 0.5rem 0; } }
  .nav__logo img {
    margin: 0;
    height: 1.8rem;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 40em) {
      .nav__logo img {
        height: 2rem; } }
    @media (max-width: 30em) {
      .nav__logo img {
        height: 1.85rem; } }

.nav__date {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: bold;
  margin-left: 1rem;
  color: white;
  /* If $height is true, override the variable. */ }
  @media (max-width: 47.5em) {
    .nav__date {
      display: block;
      text-align: right;
      margin-right: 0.25rem; } }

.nav__links {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  /*
        Set height in larger breakpoints only,
        to center items inside the hover container
    */
  height: 3.25rem;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  @media (max-width: 47.5em) {
    .nav__links {
      /*
            On smaller breakpoints, layout changes
            and this container now holds both items,
            so use margin + padding on the individual
            items instead */
      height: auto; } }
  @media (max-width: 40em) {
    .nav__links {
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; } }

.nav__link, body.home-2017 .head--user, body.home-2017 .head--user ul.user--subnav--list .user--subnav--link, body.home-2017 .user--link {
  /*
        This is a regular class, and gets extended in several
        different layers of nav bar items below. Leaving
        styling only to keep simple
    */
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.3;
  color: white;
  background-color: transparent; }

.nav__link--host {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  padding: 0 2rem;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }
  @media (max-width: 60em) {
    .nav__link--host {
      font-size: 1rem;
      padding: 0 1.25rem; } }
  @media (max-width: 47.5em) {
    .nav__link--host {
      padding: 0; } }
  @media (max-width: 40em) {
    .nav__link--host {
      font-size: 1.1rem;
      height: 2rem; } }

/*
    @todo: fix overriding global styles, remove !important
*/
.nav__link:focus, body.home-2017 .head--user:focus, body.home-2017 .head--user ul.user--subnav--list .user--subnav--link:focus, body.home-2017 .user--link:focus {
  color: white !important; }

/*
    @todo: refactor .nav__link, reuse it in both places
    @todo: fix overriding global styles, remove !important
*/
.head--user:hover,
.nav__link--host:hover {
  transition: opacity 200ms ease-in;
  background-color: #1287cb !important;
  color: white !important;
  /* If $height is true, override the variable. */ }
  @media (max-width: 47.5em) {
    .head--user:hover,
    .nav__link--host:hover {
      background-color: transparent !important; } }

.nav__login {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex; }

.panel {
  /*
        Parent. Defines the flex container
    */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  background-position: 50% 50%;
  color: white; }

.panel__content {
  /*
        Child. Grid columns are calc'ed in the panel--modifiers__content
    */
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: calc(99.9% * 6/12 - (1rem - 1rem * 6/12));
      -ms-flex-preferred-size: calc(99.9% * 6/12 - (1rem - 1rem * 6/12));
          flex-basis: calc(99.9% * 6/12 - (1rem - 1rem * 6/12));
  width: calc(99.9% * 6/12 - (1rem - 1rem * 6/12));
  margin-left: calc(99.9% * (-3/12 * -1) - (1rem - 1rem * (-3/12 * -1)) + 1rem) !important;
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */ }

.panel__content:nth-child(1n){
  /*
        Child. Grid columns are calc'ed in the panel--modifiers__content
    */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  margin-right: 1rem;
  margin-left: 0; }

.panel__content:last-child{
  /*
        Child. Grid columns are calc'ed in the panel--modifiers__content
    */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  margin-right: 0; }

.panel__content:nth-child(12n){
  /*
        Child. Grid columns are calc'ed in the panel--modifiers__content
    */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  margin-right: 0;
  margin-left: auto; }
  @media (max-width: 80em) {
    .panel__content {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 8/12 - (1rem - 1rem * 8/12));
          -ms-flex-preferred-size: calc(99.9% * 8/12 - (1rem - 1rem * 8/12));
              flex-basis: calc(99.9% * 8/12 - (1rem - 1rem * 8/12));
      width: calc(99.9% * 8/12 - (1rem - 1rem * 8/12));
      margin-left: calc(99.9% * (-2/12 * -1) - (1rem - 1rem * (-2/12 * -1)) + 1rem) !important; }
    .panel__content:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .panel__content:last-child{
    margin-right: 0; }
    .panel__content:nth-child(12n){
    margin-right: 0;
    margin-left: auto; } }
  @media (max-width: 60em) {
    .panel__content {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
          -ms-flex-preferred-size: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
              flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
      width: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
      margin-left: calc(99.9% * (-1/12 * -1) - (1rem - 1rem * (-1/12 * -1)) + 1rem) !important; }
    .panel__content:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .panel__content:last-child{
    margin-right: 0; }
    .panel__content:nth-child(12n){
    margin-right: 0;
    margin-left: auto; } }

/*
    For example, the banner message panel.
    The top level just defines the full bleed color ...
*/
.panel--message {
  background-color: #197cb5; }

/*
    ... and the content defines the grid columns, and things specific to this panel
*/
.panel--message__content {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
      -ms-flex-preferred-size: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
          flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
  width: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
  margin-left: calc(99.9% * (-1/12 * -1) - (1rem - 1rem * (-1/12 * -1)) + 1rem) !important;
  font-size: 1.5rem;
  font-weight: bold;
  color: #AFD5F9; }
.panel--message__content:nth-child(1n){
  margin-right: 1rem;
  margin-left: 0; }
.panel--message__content:last-child{
  margin-right: 0; }
.panel--message__content:nth-child(12n){
  margin-right: 0;
  margin-left: auto; }
  .panel--message__content a {
    color: white; }
  .panel--message__content a:hover {
    text-decoration: underline; }
  .panel--message__content a.link--underline {
    text-decoration: underline; }
  .panel--message__content h2, .panel--message__content h3 {
    color: white !important;
    text-align: center;
    /* If $height is true, override the variable. */ }
    @media (max-width: 47.5em) {
      .panel--message__content h2, .panel--message__content h3 {
        text-align: left; } }
  .panel--message__content h2 {
    margin: 5.5rem 0 0 0 !important;
    /* If $height is true, override the variable. */ }
    @media (max-width: 40em) {
      .panel--message__content h2 {
        margin: 4rem 0 0 0; } }
  .panel--message__content h3 {
    margin: 2rem 0;
    letter-spacing: 0.5px; }
  .panel--message__content h3.message__search {
    margin: 1.5rem 0; }
  .panel--message__content h3.events__count {
    display: none;
    margin: 1.5rem 0 1rem 0;
    font-size: 1.7rem;
    font-weight: bold;
    /* If $height is true, override the variable. */ }
    @media (max-width: 47.5em) {
      .panel--message__content h3.events__count {
        display: block; } }
  .panel--message__content h3.subtitle {
    margin: 2rem 5rem;
    font-size: 1.25rem;
    font-weight: normal; }
  .panel--message__content h4 {
    margin: 0 0 4rem 0; }
  .panel--message__content br {
    display: none;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 80em) {
      .panel--message__content br {
        display: block; } }
    @media (max-width: 40em) {
      .panel--message__content br {
        display: none; } }

.panel--images {
  /*
        Makes the color tint, since images inside are set at a lower opacity
    */
  background: #24a2ec; }

.panel--video {
  height: 45rem;
  text-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* If $height is true, override the variable. */
  background: url("/static/img/bg--video-tiles.416e4a3d43a2.png");
  background-size: cover !important; }
  @media (max-width: 60em) {
    .panel--video {
      height: 30rem; } }
  .panel--video .translate-content {
    display: inline-block; }

.panel--video__content h2, .panel--video__content h3 {
  color: white; }

.panel--twitter {
  padding: 5rem 0;
  background-color: #E9EBED; }

.panel--host {
  padding: 5rem 0;
  background-color: #E9EBED; }

.panel--host-may {
  padding: 5rem 0;
  background-color: #197cb5;
  /* has to be specific to tips or the button link changes too */ }
  .panel--host-may a {
    color: white; }
  .panel--host-may .panel__content__tips {
    margin-top: 0;
    /* If $height is true, override the variable. */ }
    .panel--host-may .panel__content__tips a {
      margin-right: 0; }
    .panel--host-may .panel__content__tips a:hover {
      color: #474747; }
    @media (max-width: 60em) {
      .panel--host-may .panel__content__tips {
        margin-top: 1em; } }

.panel--host__content {
  color: #24a2ec;
  text-align: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .panel--host__content h4 {
    margin-top: 1rem; }
    .panel--host__content h4 a {
      margin-right: 0.5rem; }

.panel--about {
  padding: 5rem 0;
  background-color: white; }
  .panel--about h2, .panel--about h3 {
    color: #24a2ec; }

.panel--about__content,
.panel--host__content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; }

.icon-pdf.tips {
  float: inherit;
  display: inline-block; }

.panel__text {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: calc(99.9% * 4/6 - (1rem - 1rem * 4/6));
      -ms-flex-preferred-size: calc(99.9% * 4/6 - (1rem - 1rem * 4/6));
          flex-basis: calc(99.9% * 4/6 - (1rem - 1rem * 4/6));
  width: calc(99.9% * 4/6 - (1rem - 1rem * 4/6));
  /* If $height is true, override the variable. */ }

.panel__text:nth-child(1n){
  /* If $height is true, override the variable. */
  margin-right: 1rem;
  margin-left: 0; }

.panel__text:last-child{
  /* If $height is true, override the variable. */
  margin-right: 0; }

.panel__text:nth-child(6n){
  /* If $height is true, override the variable. */
  margin-right: 0;
  margin-left: auto; }
  @media (max-width: 60em) {
    .panel__text {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
          -ms-flex-preferred-size: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
              flex-basis: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
      width: calc(99.9% * 1/1 - (1rem - 1rem * 1/1)); }
    .panel__text:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .panel__text:last-child{
    margin-right: 0; }
    .panel__text:nth-child(1n){
    margin-right: 0;
    margin-left: auto; } }

.banner__map--action-buttons {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: calc(99.9% * 3/6 - (1rem - 1rem * 3/6));
      -ms-flex-preferred-size: calc(99.9% * 3/6 - (1rem - 1rem * 3/6));
          flex-basis: calc(99.9% * 3/6 - (1rem - 1rem * 3/6));
  width: calc(99.9% * 3/6 - (1rem - 1rem * 3/6));
  /* If $height is true, override the variable. */ }

.banner__map--action-buttons:nth-child(1n){
  /* If $height is true, override the variable. */
  margin-right: 1rem;
  margin-left: 0; }

.banner__map--action-buttons:last-child{
  /* If $height is true, override the variable. */
  margin-right: 0; }

.banner__map--action-buttons:nth-child(6n){
  /* If $height is true, override the variable. */
  margin-right: 0;
  margin-left: auto; }
  @media (max-width: 60em) {
    .banner__map--action-buttons {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
          -ms-flex-preferred-size: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
              flex-basis: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
      width: calc(99.9% * 1/1 - (1rem - 1rem * 1/1)); }
    .banner__map--action-buttons:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .banner__map--action-buttons:last-child{
    margin-right: 0; }
    .banner__map--action-buttons:nth-child(1n){
    margin-right: 0;
    margin-left: auto; } }

.panel__content__tips {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: calc(99.9% * 3/6 - (1rem - 1rem * 3/6));
      -ms-flex-preferred-size: calc(99.9% * 3/6 - (1rem - 1rem * 3/6));
          flex-basis: calc(99.9% * 3/6 - (1rem - 1rem * 3/6));
  width: calc(99.9% * 3/6 - (1rem - 1rem * 3/6));
  /* If $height is true, override the variable. */ }

.panel__content__tips:nth-child(1n){
  /* If $height is true, override the variable. */
  margin-right: 1rem;
  margin-left: 0; }

.panel__content__tips:last-child{
  /* If $height is true, override the variable. */
  margin-right: 0; }

.panel__content__tips:nth-child(6n){
  /* If $height is true, override the variable. */
  margin-right: 0;
  margin-left: auto; }
  @media (max-width: 60em) {
    .panel__content__tips {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
          -ms-flex-preferred-size: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
              flex-basis: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
      width: calc(99.9% * 1/1 - (1rem - 1rem * 1/1)); }
    .panel__content__tips:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .panel__content__tips:last-child{
    margin-right: 0; }
    .panel__content__tips:nth-child(1n){
    margin-right: 0;
    margin-left: auto; } }

.panel__scratch-blocks {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: calc(99.9% * 2/6 - (1rem - 1rem * 2/6));
      -ms-flex-preferred-size: calc(99.9% * 2/6 - (1rem - 1rem * 2/6));
          flex-basis: calc(99.9% * 2/6 - (1rem - 1rem * 2/6));
  width: calc(99.9% * 2/6 - (1rem - 1rem * 2/6));
  /* If $height is true, override the variable. */ }

.panel__scratch-blocks:nth-child(1n){
  /* If $height is true, override the variable. */
  margin-right: 1rem;
  margin-left: 0; }

.panel__scratch-blocks:last-child{
  /* If $height is true, override the variable. */
  margin-right: 0; }

.panel__scratch-blocks:nth-child(6n){
  /* If $height is true, override the variable. */
  margin-right: 0;
  margin-left: auto; }
  @media (max-width: 60em) {
    .panel__scratch-blocks {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
          -ms-flex-preferred-size: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
              flex-basis: calc(99.9% * 1/1 - (1rem - 1rem * 1/1));
      width: calc(99.9% * 1/1 - (1rem - 1rem * 1/1)); }
    .panel__scratch-blocks:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .panel__scratch-blocks:last-child{
    margin-right: 0; }
    .panel__scratch-blocks:nth-child(1n){
    margin-right: 0;
    margin-left: auto; } }

/*
    Slideshow, shared
*/
.slideshow {
  position: relative;
  width: 100%;
  background-color: #24a2ec; }

.slideshow__img {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 3000ms ease-in;
  background-size: cover;
  background-position: 50% 50%; }

.slideshow__img--visible {
  /*
        Lets the bg color of the container act as a tint
    */
  opacity: 0.75; }

/*
    A layer of the images in the top panel, that helps darken
    the content under the nav on smaller breakpoints
*/
.slideshow__gradient {
  position: absolute;
  z-index: 9;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(25, 124, 181, 0.7), transparent);
  background-mode: multiply; }

/*
    Top slideshow: scratchday at MIT
*/
.slideshow__img.comp {
  background-image: url("/static/img/home-slideshow/2017/homepage-top-comp.a884d848c096.png"); }

.slideshow__img.crowd {
  background-image: url("/static/img/home-slideshow/2017/homepage-top-crowd.d20753a1d9a9.jpg"); }

.slideshow__img.sky {
  background-image: url("/static/img/home-slideshow/2017/homepage-top-sky.00cd1ef51ab6.png"); }

.slideshow__img.fruit {
  background-image: url("/static/img/home-slideshow/2017/homepage-top-fruit.55490d98a20e.png"); }

.slideshow__img.family {
  background-image: url("/static/img/home-slideshow/2017/homepage-top-family.39ee3ef59dc2.png"); }

.slideshow__img.map {
  background-image: url("/static/img/map2017.6701f74ac3a3.png"); }

/*
    Bottom slideshow: International events
*/
.slideshow__img.ghana {
  background-image: url("/static/img/home-slideshow/2017/homepage-intl-ghana.e990109b7df9.png"); }

.slideshow__img.uk {
  background-image: url("/static/img/home-slideshow/2017/homepage-intl-uk.43ad4f385fce.png"); }

.slideshow__img.japan {
  background-image: url("/static/img/home-slideshow/2017/homepage-intl-japan.b5cd847a306d.png"); }

.slideshow__img.oman {
  background-image: url("/static/img/home-slideshow/2017/homepage-intl-oman.e1ebd49184b0.png"); }

.slideshow__img.brasil {
  background-image: url("/static/img/home-slideshow/2017/homepage-intl-brasil.b8637392b889.png"); }

/*
    Bottom slideshow: International events
*/
.slideshow__img.argentina {
  background-image: url("/static/img/home-slideshow/2018/homepage-intl-argentina.efba742eea9b.jpg"); }

.slideshow__img.ecuador {
  background-image: url("/static/img/home-slideshow/2018/homepage-intl-ecuador.27846751bef9.jpg"); }

.slideshow__img.gabon {
  background-image: url("/static/img/home-slideshow/2018/homepage-intl-gabon.8482a4c8fd2e.jpg"); }

.slideshow__img.italy {
  background-image: url("/static/img/home-slideshow/2018/homepage-intl-italy.8157bef1fd6a.jpg"); }

.slideshow__img.japan18 {
  background-image: url("/static/img/home-slideshow/2018/homepage-intl-japan.30f22a0f1744.jpg"); }

.slideshow__img.paraguay {
  background-image: url("/static/img/home-slideshow/2018/homepage-intl-paraguay.3e20bbc286a1.jpg"); }

/*
    Bottom slideshow: International events 2019
*/
/* keep gabon and paraguay from 2018 */
.slideshow__img.china {
  background-image: url("/static/img/home-slideshow/2019/china.04d6ad609e44.jpg"); }

.slideshow__img.gambia {
  background-image: url("/static/img/home-slideshow/2019/gambia.f87c20081f83.jpg"); }

.slideshow__img.us1 {
  background-image: url("/static/img/home-slideshow/2019/us1.53c5a83bb37b.jpg"); }

.slideshow__img.uae {
  background-image: url("/static/img/home-slideshow/2019/uae.799b09f2420d.jpg"); }

.slideshow__img.oman {
  background-image: url("/static/img/home-slideshow/2019/oman.4e236abc141f.jpg"); }

.slideshow__img.us2 {
  background-image: url("/static/img/home-slideshow/2019/us2.9346eb7b2b60.jpg"); }

.slideshow__img.indonesia {
  background-image: url("/static/img/home-slideshow/2019/indonesia.0c659c336ab6.jpg"); }

.slideshow__img.iraq {
  background-image: url("/static/img/home-slideshow/2019/iraq.914948a349b0.jpg"); }

.panel--banner {
  display: block; }
  .panel--banner .slideshow {
    height: 65vh;
    /* If $height is true, override the variable. */ }
    @media (max-width: 30em) {
      .panel--banner .slideshow {
        height: 75vh; } }

.panel--international {
  /* If $height is true, override the variable. */
  position: relative; }
  @media (max-width: 47.5em) {
    .panel--international {
      display: block; } }
  .panel--international .slideshow {
    height: 45rem;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 60em) {
      .panel--international .slideshow {
        display: block;
        height: 40rem; } }
    @media (max-width: 47.5em) {
      .panel--international .slideshow {
        height: 35rem; } }
    @media (max-width: 40em) {
      .panel--international .slideshow {
        height: 30rem; } }

.panel--intl__content {
  position: absolute;
  z-index: 100;
  bottom: 0;
  margin: 3rem 0;
  /* If $height is true, override the variable. */ }
  .panel--intl__content h4 {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    z-index: 100;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0;
    padding: 1rem 2rem;
    line-height: 1;
    background: white;
    color: #474747;
    border-radius: 4px;
    /* If $height is true, override the variable. */ }
    .panel--intl__content h4 img {
      display: inline-block;
      margin-right: 1rem; }
    @media (max-width: 47.5em) {
      .panel--intl__content h4 {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0; } }
  @media (max-width: 47.5em) {
    .panel--intl__content {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 12/12 - (1rem - 1rem * 12/12));
          -ms-flex-preferred-size: calc(99.9% * 12/12 - (1rem - 1rem * 12/12));
              flex-basis: calc(99.9% * 12/12 - (1rem - 1rem * 12/12));
      width: calc(99.9% * 12/12 - (1rem - 1rem * 12/12));
      /*
            This is a workaround for offset: none.
            @todo: use new Lost offset clear param: https://github.com/peterramsing/lost/pull/363
        */
      margin-left: 0 !important;
      margin-right: 1rem !important; }
    .panel--intl__content:nth-child(1n){
    /*
            This is a workaround for offset: none.
            @todo: use new Lost offset clear param: https://github.com/peterramsing/lost/pull/363
        */
    margin-right: 1rem;
    margin-left: 0; }
    .panel--intl__content:last-child{
    /*
            This is a workaround for offset: none.
            @todo: use new Lost offset clear param: https://github.com/peterramsing/lost/pull/363
        */
    margin-right: 0; }
    .panel--intl__content:nth-child(12n){
    /*
            This is a workaround for offset: none.
            @todo: use new Lost offset clear param: https://github.com/peterramsing/lost/pull/363
        */
    margin-right: 0;
    margin-left: auto; } }

/*
    Search bar
*/
.panel--search {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  /*
        Lift this layer above the map, on Large breakpoint and above
    */
  z-index: 100;
  top: -2.3rem;
  /* If $height is true, override the variable. */ }
  @media (max-width: 40em) {
    .panel--search {
      top: -1.85rem; } }

.container--search {
  position: absolute;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: calc(99.9% * 6/12 - (1rem - 1rem * 6/12));
      -ms-flex-preferred-size: calc(99.9% * 6/12 - (1rem - 1rem * 6/12));
          flex-basis: calc(99.9% * 6/12 - (1rem - 1rem * 6/12));
  width: calc(99.9% * 6/12 - (1rem - 1rem * 6/12));
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
      transform: translateX(-50%); }

.container--search:nth-child(1n){
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  margin-right: 1rem;
  margin-left: 0; }

.container--search:last-child{
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  margin-right: 0; }

.container--search:nth-child(12n){
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  /* If $height is true, override the variable. */
  margin-right: 0;
  margin-left: auto; }
  @media (max-width: 60em) {
    .container--search {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 8/12 - (1rem - 1rem * 8/12));
          -ms-flex-preferred-size: calc(99.9% * 8/12 - (1rem - 1rem * 8/12));
              flex-basis: calc(99.9% * 8/12 - (1rem - 1rem * 8/12));
      width: calc(99.9% * 8/12 - (1rem - 1rem * 8/12)); }
    .container--search:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .container--search:last-child{
    margin-right: 0; }
    .container--search:nth-child(12n){
    margin-right: 0;
    margin-left: auto; } }
  @media (max-width: 47.5em) {
    .container--search {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
          -ms-flex-preferred-size: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
              flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
      width: calc(99.9% * 10/12 - (1rem - 1rem * 10/12)); }
    .container--search:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .container--search:last-child{
    margin-right: 0; }
    .container--search:nth-child(12n){
    margin-right: 0;
    margin-left: auto; } }
  @media (max-width: 40em) {
    .container--search {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
          -ms-flex-preferred-size: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
              flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
      width: calc(99.9% * 10/12 - (1rem - 1rem * 10/12)); }
    .container--search:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .container--search:last-child{
    margin-right: 0; }
    .container--search:nth-child(12n){
    margin-right: 0;
    margin-left: auto; } }
  @media (max-width: 30em) {
    .container--search {
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      -webkit-flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
          -ms-flex-preferred-size: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
              flex-basis: calc(99.9% * 10/12 - (1rem - 1rem * 10/12));
      width: calc(99.9% * 10/12 - (1rem - 1rem * 10/12)); }
    .container--search:nth-child(1n){
    margin-right: 1rem;
    margin-left: 0; }
    .container--search:last-child{
    margin-right: 0; }
    .container--search:nth-child(12n){
    margin-right: 0;
    margin-left: auto; } }

input.search__form {
  height: 4.6rem;
  /*
        Leave space for the search icon
     */
  padding: 1rem 1.5rem 1rem 4rem;
  font-size: 1.25rem;
  /* Remove shadow in ios */
  -webkit-appearance: none;
  border: 0;
  /* If $height is true, override the variable. */ }
  @media (max-width: 40em) {
    input.search__form {
      height: 3.7rem; } }

/*
    @todo: vendor prefixes necessary, since we're using autoprefixer?
*/
input.search__form::-webkit-input-placeholder {
  color: #7c7c7c !important;
  font-style: normal;
  text-overflow: ellipsis;
  font-size: 1.25rem;
  text-align: center;
  /* Chrome/Opera/Safari */ }

input.search__form::-moz-placeholder {
  color: #7c7c7c !important;
  font-style: normal;
  text-overflow: ellipsis;
  font-size: 1.25rem;
  text-align: center;
  /* Firefox 19+ */ }

input.search__form:-ms-input-placeholder {
  color: #7c7c7c !important;
  font-style: normal;
  text-overflow: ellipsis;
  font-size: 1.25rem;
  text-align: center;
  /* IE 10+ */ }

input.search__form:-moz-placeholder {
  color: #7c7c7c !important;
  font-style: normal;
  text-overflow: ellipsis;
  font-size: 1.25rem;
  text-align: center;
  /* Firefox 18 */ }

.search__button {
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  z-index: 1;
  /*
        optically align, for curvature of search icon
    */
  top: 1px;
  left: 3px;
  height: 4.6rem;
  width: 4rem;
  font-size: 1.75rem;
  /* If $height is true, override the variable. */ }
  @media (max-width: 40em) {
    .search__button {
      height: 3.7rem;
      font-size: 1.5rem;
      left: 2px; } }

/*
    Same color as placeholder text
*/
.search__button:before {
  color: #7c7c7c !important; }

.message__count,
.message__label {
  color: #f79331;
  font-weight: bold; }

/*
    Utilities
*/
.js--reveal {
  opacity: 0; }

.link--play {
  display: none;
  margin: 2rem 0 0 0;
  font-weight: bold;
  color: white;
  fill: white;
  font-size: 1.5rem;
  cursor: pointer; }

/*
    @todo: fix overriding global styles, remove !important
*/
.link--play:hover {
  color: white !important; }

.panel--video__player {
  display: none; }
  .panel--video__player iframe {
    width: 695px !important;
    height: 390px !important;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 47.5em) {
      .panel--video__player iframe {
        width: 450px !important;
        height: 253px !important; } }
    @media (max-width: 40em) {
      .panel--video__player iframe {
        width: 390px !important;
        height: 219px !important; } }

/*
    Overrides
*/
.banner__map {
  padding: 0;
  display: none; }

body.home-2017 {
  padding-top: 0 !important;
  /* If $height is true, override the variable. */ }
  body.home-2017 .banner {
    box-shadow: none; }
  body.home-2017 .content {
    padding: 0; }
  body.home-2017 .button__orange {
    display: inline-block;
    padding: 1.25rem 4rem;
    font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: bold; }
  body.home-2017 .head--user {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    /*
            For absolutely positioned child dropdown
        */
    position: relative;
    float: none;
    top: initial;
    right: initial;
    /*
            Show above the map embed
        */
    z-index: 101;
    height: 100%;
    width: auto;
    margin: 0 1rem 0 0;
    padding: 0 2rem 0 1.8rem;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 60em) {
      body.home-2017 .head--user {
        margin: 0;
        padding: 0 1.25rem; } }
    @media (max-width: 47.5em) {
      body.home-2017 .head--user {
        margin: 0 1rem;
        height: 3rem; } }
    @media (max-width: 40em) {
      body.home-2017 .head--user {
        margin: 0;
        padding: 0;
        width: 100%;
        /* for children, the subnav, to go full width */
        height: 2rem; } }
    body.home-2017 .head--user ul.user--list {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      position: static;
      z-index: auto;
      height: 100%;
      margin: 0;
      width: auto;
      /* If $height is true, override the variable. */ }
      @media (max-width: 40em) {
        body.home-2017 .head--user ul.user--list {
          margin: 0 auto; } }
      body.home-2017 .head--user ul.user--list li {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        margin-bottom: 0;
        line-height: 1;
        /* If $height is true, override the variable. */ }
        @media (max-width: 40em) {
          body.home-2017 .head--user ul.user--list li {
            -webkit-justify-content: center;
                -ms-flex-pack: center;
                    justify-content: center; } }
      body.home-2017 .head--user ul.user--list .user--dropdown {
        /*
                    Swap position of down arrow and username.
                    Doing this here to avoid using floats, and
                    from editing the header nav source, which is
                    referenced on other pages with older nav design

                    @todo: when using new nav, switch order in DOM instead
                */
        float: none;
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
        padding: 0;
        /*
                    Overriding global transitions
                */
        transition: none;
        /*
                    Get dropdown arrow vertically flush with text
                    This is flaky, should refactor with access to DOM
                */
        position: relative;
        top: -1px;
        /* If $height is true, override the variable. */
        /* If $height is true, override the variable. */
        /*
                    Fixes shifting arrow on hover,
                    from font-size set in .nav__link, extended to parent
                */
        font-size: initial; }
        @media (max-width: 47.5em) {
          body.home-2017 .head--user ul.user--list .user--dropdown {
            top: 0; } }
        @media (max-width: 40em) {
          body.home-2017 .head--user ul.user--list .user--dropdown {
            top: 1px; } }
        body.home-2017 .head--user ul.user--list .user--dropdown .user--dropdown--border {
          border: 0; }
      body.home-2017 .head--user ul.user--list .user--dropdown .icon-dropdown-arrow {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex; }
      body.home-2017 .head--user ul.user--list .user--dropdown__active {
        background: transparent; }
      body.home-2017 .head--user ul.user--list .user--dropdown .icon {
        padding: 0; }
      body.home-2017 .head--user ul.user--list .user--dropdown .icon:before {
        padding: 0; }
    body.home-2017 .head--user ul.user--subnav--list {
      z-index: auto;
      right: 0;
      padding: 0.5rem 0;
      background-color: #24a2ec;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      /*
                speeding this up, a bit laggy on the app-wide setting
            */
      transition: opacity 150ms ease-out;
      /* If $height is true, override the variable. */
      /* If $height is true, override the variable. */ }
      @media (max-width: 47.5em) {
        body.home-2017 .head--user ul.user--subnav--list {
          border-radius: 4px; } }
      @media (max-width: 40em) {
        body.home-2017 .head--user ul.user--subnav--list {
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column;
          top: 2.6rem;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 100%;
          border-radius: 0; } }
      body.home-2017 .head--user ul.user--subnav--list .user--subnav--link {
        width: 100%;
        padding: .4rem 2rem;
        /* If $height is true, override the variable. */
        /* If $height is true, override the variable. */ }
        @media (max-width: 60em) {
          body.home-2017 .head--user ul.user--subnav--list .user--subnav--link {
            font-size: 1rem; } }
        @media (max-width: 40em) {
          body.home-2017 .head--user ul.user--subnav--list .user--subnav--link {
            font-size: 1.1rem;
            text-align: center; } }
      body.home-2017 .head--user ul.user--subnav--list .user--subnav--link:hover {
        background-color: #1287cb;
        /* If $height is true, override the variable. */
        /* If $height is true, override the variable. */ }
        @media (max-width: 47.5em) {
          body.home-2017 .head--user ul.user--subnav--list .user--subnav--link:hover {
            background-color: none; } }
        @media (max-width: 40em) {
          body.home-2017 .head--user ul.user--subnav--list .user--subnav--link:hover {
            text-align: center; } }
    body.home-2017 .head--user .user--subnav--list:before {
      display: none; }
  body.home-2017 .user__active .user--link {
    overflow: visible;
    margin-right: 0.75rem;
    padding: 0; }
  body.home-2017 .user--link {
    padding: 0;
    /* If $height is true, override the variable. */
    /* If $height is true, override the variable. */ }
    @media (max-width: 60em) {
      body.home-2017 .user--link {
        font-size: 1rem; } }
    @media (max-width: 40em) {
      body.home-2017 .user--link {
        font-size: 1.1rem;
        margin: 0;
        padding-bottom: 0; } }
    body.home-2017 .user--link .user--overflow {
      font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; }
    body.home-2017 .user--link .icon-person {
      position: relative;
      top: 3px; }
  body.home-2017 .user--link:hover,
  body.home-2017 .user--link:focus,
  body.home-2017 .user__active:hover {
    box-shadow: none;
    background-color: transparent !important; }
  body.home-2017 .user--dropdown:hover,
  body.home-2017 .user--dropdown:focus,
  body.home-2017 .user--dropdown:active {
    background-color: transparent !important; }
  body.home-2017 .user__dropdown--active {
    border: 0; }
  @media (max-width: 30em) {
    body.home-2017 .head--button--link,
    body.home-2017 .user__notactive .user--link,
    body.home-2017 .user__active,
    body.home-2017 .head--search-toggle a {
      border: 0 !important;
      border-radius: 0 !important; } }
  body.home-2017 h2.panel__text--host {
    margin-top: 0; }
  body.home-2017 p.copywright,
  body.home-2017 h4.foot--nav--title {
    font-size: .875rem; }
  body.home-2017 .panel__text--host-title,
  body.home-2017 .panel__text--host-desc {
    width: 100%;
    text-align: center; }
  body.home-2017 .panel__text--host-title {
    color: #24a2ec;
    margin: 0; }
  body.home-2017 .panel__text--host-desc {
    margin-bottom: 2rem; }
  body.home-2017 .panel__text--host-may-title,
  body.home-2017 .panel__text--host-may-desc {
    color: white; }
  body.home-2017 .panel__text--twitter-title,
  body.home-2017 .panel__text--twitter-desc {
    width: 100%;
    text-align: center; }
  body.home-2017 .panel__text--twitter-title {
    color: #24a2ec;
    margin: 0; }
  body.home-2017 .panel__text--twitter-desc {
    color: #7F7F7F;
    margin-bottom: 2rem; }

/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */
/*
    Preferred markup... 
    
    .slideshow and the related .slideshow--list, .slideshow--item, etc are for us to style
    .flexslider and .slides are required by this CSS and not worth messing with
    We decouple the JS trigger from the CSS with .js-slideshow
    
    <div class="slideshow slideshow__home" role="banner">
        <div class="slideshow--wrapper flexslider js-slideshow">
            
            <div class="flex-viewport"> [ ! Dynamically inserted ]
            
            <ul class="slides slideshow--list">
                <li class="slideshow--item">
                    <figure class="slideshow--slide">
                        <img src="http://www.woothemes.com/wp-content/themes/woo/images/flex/flexslider_a.jpg" alt="">
                        <figcaption class="slideshow--caption">Flexslider by WooThemes.</figcaption>
                    </figure>
                </li>
                <li class="slideshow--item">
                    <figure class="slideshow--slide">
                        <img src="http://www.woothemes.com/wp-content/themes/woo/images/flex/flexslider_b.jpg" alt="">
                        <figcaption class="slideshow--caption">Flexslider by WooThemes.</figcaption>
                    </figure>
                </li>
            </ul>
            
            </div> [ ! Dynamically inserted ]
            
            [ ! Dynamically inserted ]
            <ul class="flex-direction-nav">
                <li><a class="flex-prev" href="#">Previous</a></li>
                <li><a class="flex-next" href="#">Next</a></li>
            </ul>
            
            [ ! Dynamically inserted ]
            <ol class="flex-control-nav flex-control-paging">
                <li><a class="flex-active">1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
            </ol>
            
        </div>
    </div>
    
    Use this SCSS structure to style the elements
    
    .slideshow {
    
        &--wrapper {}
        
        &--list {}
        
        &--item {}
        
        &--slide {
            
            img {}
        }
        
        &--caption {}
        
        
        // Overrides
        &__home {}
    }
*/
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
  outline: none; }

.slides,
.flex-control-nav,
.flex-direction-nav,
.typography .slides,
.typography .flex-control-nav,
.typography .flex-direction-nav {
  margin: 0;
  list-style: none; }

/* FlexSlider Necessary Styles
*********************************/
.flexslider {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  padding: 0; }

.flexslider .slides {
  zoom: 1; }

.carousel li {
  margin-right: 1em; }

.flex-viewport {
  max-height: 2000px;
  transition: all 500ms ease; }

/*body*/
.loading .slides {
  min-height: 280px; }
  .loading .slides > li {
    display: none;
    -webkit-backface-visibility: hidden; }

/*.flexslider ul img { 
    width: 100%; // should be already part of the rest of our CSS
    display: block; 
}*/
.flex-pauseplay span {
  text-transform: capitalize; }

/* Clearfix for the .slides element */
.slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0; }

html[xmlns] .slides {
  display: block; }

* html .slides {
  height: 1%; }

/* No JavaScript Fallback */
/*html*/
.no-js .loading .slides > li:first-child {
  display: block; }

/* FlexSlider Default Theme
*********************************/
.flex-direction-nav {
  *height: 0; }
  .flex-direction-nav .flex-prev,
  .flex-direction-nav .flex-next {
    display: block;
    cursor: pointer; }

.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000; }

.flex-control-nav {
  width: 100%;
  text-align: center; }

.flex-control-nav li {
  margin: 0 .375em;
  display: inline-block;
  zoom: 1;
  *display: inline; }

.flex-control-paging li a {
  display: block;
  width: 1em;
  height: 1em;
  cursor: pointer;
  text-indent: -9999px;
  border-radius: 50%; }

.flex-control-paging li a.flex-active {
  cursor: default; }

/* Icon Fonts
*********************************/
/* Font-face Icons — Make sure to use the font from GitHub */
/* Try this: 
    
    Markup: .js-gallery as the watcher, .js-popup as the click action. Everything else optional. 
    
    <ul class="gallery--list menu js-gallery">
        <li class="gallery--item">
            <figure class="gallery--media">
                <a class="gallery--link s-popup" href="/gallery_photos/211.281.jpg" title="title">
                    <img src="/gallery_photos/211.281.jpg" alt="title">
                </a>
            </figure>
        </li><li class="gallery--item">
            <figure class="gallery--media">
                <a class="gallery--link js-popup" href="/gallery_photos/213.284.jpg" title="title">
                    <img src="/gallery_photos/213.284.jpg" alt="title">
                </a>
            </figure>
        </li>
    </ul>
    
    
    $('.js-gallery').each( function() {
        
        $(this).magnificPopup({
            disableOn: 480, // disable this plugin when window width is less that number
            delegate: '.js-popup',
            removalDelay: 500, // Needed for CSS Transitions to work
            mainClass: 'mfp-fade', // Needed for CSS Transitions to work
            type: 'image',
            gallery: {
                enabled: true, // set to true to enable gallery
                preload: [1,2], // load one previous and 2 next objects
                navigateByImgClick: true,
                
                // Optional... leave these off to use default markup
                arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>', 
                tPrev: 'Previous (Left arrow key)', // title for left button
                tNext: 'Next (Right arrow key)', // title for right button
                tCounter: '<span class="mfp-counter">%curr% of %total%</span>' // title for counter
            }
        });
        
    }); 
*/
/* overlay at start */
.mfp-fade {
  /* overlay animate in */
  /* overlay animate out */
  /* content at start */
  /* content animate in */
  /* content animate out */ }
  .mfp-fade.mfp-bg {
    opacity: 0;
    transition: opacity 500ms ease; }
  .mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.9; }
  .mfp-fade.mfp-bg.mfp-removing {
    opacity: 0; }
  .mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: opacity 500ms ease; }
  .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1; }
  .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0; }

.mfp-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5002;
  overflow: hidden;
  background: #101010;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  opacity: 0.9; }

.mfp-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5003;
  outline: none !important;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 0.5em; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 1em auto;
  text-align: left;
  z-index: 5005;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

/*
// Cursors
.mfp-ajax-cur {
    cursor: progress;
}
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}
.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
    cursor: auto;
}
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select:none;
    -moz-user-select: none;
    user-select: none;
}

// Hide the image during the loading
.mfp-loading.mfp-figure { @include opacity(0); }
*/
.mfp-hide {
  display: none !important; }

/*.mfp-preloader {
    position: absolute;
        top: 50%; left: 8px; right: 8px;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    color: $controls-text-color;
    z-index: $z-index-base + 4; 
    @include opacity(1);
}
.mfp-preloader a { color: $controls-text-color; }
.mfp-preloader a:hover { color: $controls-text-color-hover; }

// Hide preloader when content successfully loaded
.mfp-s-ready .mfp-preloader { @include opacity(0); }

// Hide content when it was not loaded
.mfp-s-error .mfp-content { @include opacity(0); }

// CSS-reset for buttons
//button.mfp-close,
button.mfp-arrow {
    //overflow: visible;
    //cursor: pointer;
    -webkit-appearance: none;
    display: block;
    padding: 0;
    z-index: $z-index-base + 6; 
    //@include reset-button-styles( $color: no, $border: 0, $solid-bg: transparent ); 
    @include opacity( $controls-opacity );
    
    &:hover, 
    &:focus { @include opacity( 1 ); }
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}*/
/*.mfp-close {
    position: absolute;
        top: 0; right: 0; 
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-decoration: none;
    text-align: center;
    padding: 0 0 1em .75em;
    color: $controls-color;
    font-weight: bold; 
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
    @include opacity( $controls-opacity );
    
    &:hover, &:focus { @include opacity( 1 ); }
    
    &:active { top: 1px; }
}

.mfp-close-btn-in .mfp-close { color: $inner-close-icon-color; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: $controls-color;
    text-align: right;
    width: 100%;
}*/
/*.mfp-counter {
    position: absolute;
        top: 0; right: 0;
    color: $controls-text-color; 
    white-space: nowrap; 
}

// Navigation arrows
@if $include-arrows {
  
    .mfp-arrow {
        position: absolute;
            top: 50%;
        margin: 0;
        margin-top: -55px;
        padding: 0;
        width: 90px;
        height: 110px;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        @include opacity( $controls-opacity );
    }

    .mfp-arrow:active { margin-top: -54px; }
    
    .mfp-arrow:hover,
    .mfp-arrow:focus {
        @include opacity( 1 );
    }

    .mfp-arrow {

        &:before,
        &:after,
        .mfp-b,
        .mfp-a {
            content: '';
            display: block;
            position: absolute;
                top: 0; left: 0;
            width: 0;
            height: 0;
            margin-top: 35px;
            margin-left: 35px;
            border: medium inset transparent;
        }

        &:after,
        .mfp-a {
            top:8px;
            border-top-width: 13px;
            border-bottom-width: 13px;
        }

        &:before,
        .mfp-b {
            border-top-width: 21px;
            border-bottom-width: 21px;
        }
    }

    .mfp-arrow-left {
        left: 0;
    
        &:after,
        .mfp-a {
            border-right: 17px solid $arrow-inner-color;
            margin-left: 31px;
        }
        
        &:before,
        .mfp-b {
            margin-left: 25px;
            border-right: 27px solid $arrow-border-color;
        }
    }
    
    .mfp-arrow-right {
        right: 0;
        
        &:after,
        .mfp-a {
            border-left: 17px solid $arrow-inner-color;
            margin-left: 39px
        }
        
        &:before,
        .mfp-b {
            border-left: 27px solid $arrow-border-color;
        }
    }
}


// Iframe content type
@if $include-iframe-type {

    .mfp-iframe-holder {
        padding-top: $iframe-padding-top;
        padding-bottom: $iframe-padding-top;
    }
    
    .mfp-iframe-holder .mfp-content {
        line-height: 0;
        width: 100%;
        max-width: $iframe-max-width;
    }
    
    .mfp-iframe-scaler {
        width: 100%;
        height: 0;
        overflow: hidden;
        padding-top: $iframe-ratio * 100%;
    }
    
    .mfp-iframe-scaler iframe {
        position: absolute;
            top: 0; left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: $iframe-background;
        @include box-shadow( $shadow ); 
    }
    
    .mfp-iframe-holder .mfp-close { top: -40px; }
}



// Image content type
@if $include-image-type {

    // Main image in popup
    img.mfp-img {
        width: auto;
        max-width: 100%;
        height: auto;
        display: block;
        line-height: 0;
        padding: $image-padding-top 0 $image-padding-bottom;
        margin: 0 auto;
        @include box-sizing( border-box ); 
    }

    // The shadow behind the image
    .mfp-figure:after {
        content: '';
        position: absolute;
            top: $image-padding-top; left: 0; bottom: $image-padding-bottom;
        display: block;
        right: 0;
        width: auto;
        height: auto;
        z-index: -1;
        background: $image-background;
        @include box-shadow( $shadow ); 
    }
    
    .mfp-figure {
        line-height: 0; 
        @include opacity(1);
    }
    
    .mfp-bottom-bar {
        position: absolute;
            bottom: .75em; left: 0;
        width: 100%;
        cursor: auto; 
        line-height: 1.5;
        @include pe-rem-helper( font-size, 14px ); 
    }
    
    .mfp-title {
        text-align: left;
        color: $caption-title-color;
        word-break: break-word;
        padding-right: 20%; // leave some space for counter at right side
    }

    .mfp-figure small {
        color: $caption-subtitle-color;
        display: block; 
        line-height: 1; 
        @include pe-rem-helper( font-size, 12px ); 
    }
    
    .mfp-image-holder .mfp-content {
        max-width: 100%;
    }

    .mfp-gallery .mfp-image-holder .mfp-figure {
        cursor: pointer;
    }


  @if $include-mobile-layout-for-image {

      @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
        
        // Remove all paddings around the image on small screen
        .mfp-img-mobile .mfp-image-holder {
            padding-left: 0;
            padding-right: 0;
        }
        
        .mfp-img-mobile img.mfp-img { padding: 0; }
        
        // The shadow behind the image 
        .mfp-img-mobile .mfp-figure:after {
            top: 0; bottom: 0;
        }

        .mfp-img-mobile .mfp-bottom-bar {
            position: fixed;
                top: auto; bottom: 0;
            background: rgba(0,0,0,0.6);
            margin: 0;
            padding: 3px 5px;
            @include box-sizing( border-box ); 
        }
        
        .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }
        
        .mfp-img-mobile .mfp-counter {
            right: 5px; top: 3px;
        }
        
        .mfp-img-mobile .mfp-close {
            position: fixed;
              top: 0; right: 0;
            width: 35px;
            height: 35px;
            line-height: 35px;
            background: rgba(0, 0, 0, 0.6);
            text-align: center;
            padding: 0;
        }
        
        .mfp-img-mobile .mfp-figure small {
            display: inline;
            margin-left: 5px;
        }
      }
  }

}


// Scale navigation arrows and reduce padding from sides
@media all and (max-width: 900px) {
    
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }
    .mfp-container {
        padding-left: $popup-padding-left-mobile;
        padding-right: $popup-padding-left-mobile;
    }
}


// IE7 support
// Styles that make popup look nicer in old IE
@if $IE7support {
    
    .mfp-ie7 {
    
        .mfp-img {
            padding: 0;
        }
        
        .mfp-bottom-bar {
            width: 600px;
            left: 50%;
            margin-left: -300px;
            margin-top: 5px;
            padding-bottom: 5px;
        }
        
        .mfp-container { padding: 0; }
        
        .mfp-content { padding-top: 44px; }
        
        .mfp-close {
            top: 0; right: 0;
            padding-top: 0;
        }
    }
}*/
/*<div gldp-el="gldp-3471337804" class="gldp-default">
    <div class="core border monyear">
        <a class="prev-arrow">◄</a>
    </div>
    <div class="core border monyear title"><div>
        <span>March</span>
        <select>
            <option value="0">January</option>
            <option value="1">February</option>
            <option value="2" selected="selected">March</option>
            <option value="3">April</option>
            <option value="4">May</option>
            <option value="5">June</option>
            <option value="6">July</option>
            <option value="7">August</option>
            <option value="8">September</option>
            <option value="9">October</option>
            <option value="10">November</option>
            <option value="11">December</option>
        </select>
        <span>2015</span>
        <select>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015" selected="selected">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
        </select>
    </div>
</div>
<div class="core border monyear">
    <a class="next-arrow">►</a>
</div>
<div class="core border dow">Sun</div>
<div class="core border dow">Mon</div>
<div class="core border dow">Tue</div>
<div class="core border dow">Wed</div>
<div class="core border dow">Thu</div>
<div class="core border dow">Fri</div>
<div class="core border dow">Sat</div>
<div class="core border noday">22</div>
<div class="core border noday">23</div>
<div class="core border noday">24</div>
<div class="core border noday">25</div>
<div class="core border noday">26</div>
<div class="core border noday">27</div>
<div class="core border noday">28</div>
<div class="core border noday">1</div>
<div class="core border today">2</div>
<div class="core border tue">3</div>
<div class="core border wed">4</div>
<div class="core border thu">5</div>
<div class="core border selected">6</div>
<div class="core border sat">7</div>
<div class="core border sun">8</div>
<div class="core border mon">9</div>
<div class="core border tue">10</div>
<div class="core border wed">11</div>
<div class="core border thu">12</div>
<div class="core border fri">13</div>
<div class="core border sat">14</div>
<div class="core border sun">15</div>
<div class="core border mon">16</div>
<div class="core border tue">17</div>
<div class="core border wed">18</div>
<div class="core border thu">19</div>
<div class="core border fri">20</div>
<div class="core border sat">21</div>
<div class="core border sun">22</div>
<div class="core border mon">23</div>
<div class="core border tue">24</div>
<div class="core border wed">25</div>
<div class="core border thu">26</div>
<div class="core border fri">27</div>
<div class="core border sat">28</div>
<div class="core border sun">29</div>
<div class="core border mon">30</div>
<div class="core border tue">31</div>
<div class="core border wed outday">1</div>
<div class="core border thu outday">2</div>
<div class="core border fri outday">3</div>
<div class="core border sat outday">4</div>
</div>*/
.gldp-default {
  position: absolute; }

/* Core style for every cell */
.gldp-default .core {
  position: relative;
  float: left;
  margin: 0;
  text-align: center;
  cursor: pointer;
  color: #474747;
  background-color: #fff;
  font-size: 13px;
  font-size: 0.8125rem; }

/* Cell border */
.gldp-default .border {
  border-style: solid;
  border-width: 0;
  border-color: #b2b2b2; }

/* Month/Year text and select */
.gldp-default .monyear,
.gldp-default .monyear select {
  font-size: 16px !important; }

/* Month/Year text */
.gldp-default .monyear span {
  margin: 0 5px; }

/* Prev/Next arrows */
.gldp-default .prev-arrow,
.gldp-default .next-arrow {
  color: #24a2ec; }

.gldp-default .prev-arrow:active,
.gldp-default .next-arrow:active {
  color: #f79331; }

.gldp-default .prev-arrow-off,
.gldp-default .next-arrow-off {
  color: #7c7c7c;
  opacity: 0.15; }

/* Days of the week (DOW) */
.gldp-default .dow {
  color: #fff;
  cursor: not-allowed;
  background: #7c7c7c; }

/* Weekdays */
.gldp-default .mon,
.gldp-default .tue,
.gldp-default .wed,
.gldp-default .thu,
.gldp-default .fri {
  color: #7c7c7c; }

/* Weekend days */
.gldp-default .sat,
.gldp-default .sun {
  color: #666; }

/* Selectable days that are outside of current month being shown */
.gldp-default .outday {
  color: #b2b2b2;
  background-color: #f2f2f2; }

/* Hover */
.gldp-default .mon:hover,
.gldp-default .tue:hover,
.gldp-default .wed:hover,
.gldp-default .thu:hover,
.gldp-default .fri:hover,
.gldp-default .sat:hover,
.gldp-default .sun:hover {
  color: #474747;
  background: #e6e6e6; }

/* Non-Selectable days: Previous to today */
.gldp-default .noday {
  color: #b2b2b2;
  background-color: #f2f2f2; }

/* Currently selected day */
.gldp-default .selected {
  color: #fff;
  border-color: #24a2ec;
  background: #24a2ec; }

/* Today */
.gldp-default .today {
  color: #f57e0a;
  border-color: #f79331;
  background: #fbc998; }

/* Special */
.gldp-default .special {
  color: #fff;
  background: #24a2ec; }

/* If $height is true, override the variable. */
@media (max-width: 30em) {
  body:after {
    content: "search-toggle";
    display: none;
    speak: none; } }

@media (min-width: 40em) and (min-height: 600px) {
  body:after {
    content: "stuck-header";
    display: none;
    speak: none; } }

.ir {
  display: block;
  text-indent: -9999px;
  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; }
  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,
  .jump-to-menu,
  .jump-link {
    display: none; } }

/* 
 * Generated by Font Squirrel (http://www.fontsquirrel.com) on July 2, 2013 10:19:24 AM America/New_York
 * Adobe Source Pro Sans, Open Source License: http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1959
 */
@font-face {
  font-family: 'source_sans_problack';
  src: url("../fonts/sourcesanspro-black-webfont.2f59d181cff6.eot");
  src: url("../fonts/sourcesanspro-black-webfont.2f59d181cff6.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-black-webfont.75847612402a.woff") format("woff"), url("../fonts/sourcesanspro-black-webfont.3e6a6564df67.ttf") format("truetype"), url("../fonts/sourcesanspro-black-webfont.c5f6a5d263c1.svg#source_sans_problack") format("svg");
  font-weight: bolder;
  font-style: normal; }

@font-face {
  font-family: 'source_sans_probold';
  src: url("../fonts/sourcesanspro-bold-webfont.d704ad1e8bc9.eot");
  src: url("../fonts/sourcesanspro-bold-webfont.d704ad1e8bc9.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-bold-webfont.9450c2a2fe40.woff") format("woff"), url("../fonts/sourcesanspro-bold-webfont.be1ca9a5d091.ttf") format("truetype"), url("../fonts/sourcesanspro-bold-webfont.6927c0ad50d3.svg#source_sans_probold") format("svg");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'source_sans_prosemibold';
  src: url("../fonts/sourcesanspro-semibold-webfont.ffd546a3adf5.eot");
  src: url("../fonts/sourcesanspro-semibold-webfont.ffd546a3adf5.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-semibold-webfont.7363da01c23c.woff") format("woff"), url("../fonts/sourcesanspro-semibold-webfont.3a41b90ef887.ttf") format("truetype"), url("../fonts/sourcesanspro-semibold-webfont.f12fbff7c1f8.svg#source_sans_prosemibold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'source_sans_proregular';
  src: url("../fonts/sourcesanspro-regular-webfont.1bca0e67e577.eot");
  src: url("../fonts/sourcesanspro-regular-webfont.1bca0e67e577.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-regular-webfont.98677ff75929.woff") format("woff"), url("../fonts/sourcesanspro-regular-webfont.64c59e9d278e.ttf") format("truetype"), url("../fonts/sourcesanspro-regular-webfont.bd74e66b4d88.svg#source_sans_proregular") format("svg");
  font-weight: lighter;
  font-style: normal; }

@font-face {
  font-family: 'source_sans_proitalic';
  src: url("../fonts/sourcesanspro-it-webfont.3ac96e27d525.eot");
  src: url("../fonts/sourcesanspro-it-webfont.3ac96e27d525.eot?#iefix") format("embedded-opentype"), url("../fonts/sourcesanspro-it-webfont.3b490763adad.woff") format("woff"), url("../fonts/sourcesanspro-it-webfont.f726a47961c4.ttf") format("truetype"), url("../fonts/sourcesanspro-it-webfont.21a387682190.svg#source_sans_proitalic") format("svg");
  font-weight: normal;
  font-style: italic; }

@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.64c0831ef9d0.eot"); }

@font-face {
  font-family: 'icomoon';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype"), url(data:application/font-woff;charset=utf-8;base64,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) format("woff");
  font-weight: normal;
  font-style: normal; }

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

.icon-dropdown-arrow:before {
  content: "\e601"; }

.icon-question-mark:before {
  content: "\e602"; }

.icon-x:before {
  content: "\e603"; }

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

.icon-close:before {
  content: "\e605"; }

.icon-left-arrow:before {
  content: "\e606"; }

.icon-location:before {
  content: "\e607"; }

.icon-minus:before {
  content: "\e608"; }

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

.icon-person:before {
  content: "\e60a"; }

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

.icon-right-arrow:before {
  content: "\e60c"; }

.icon-search:before {
  content: "\e60d"; }

/* ! ===== Our modifications ===== */
.icon {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-right: .25em;
  display: inline-block;
  vertical-align: baseline;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .icon span {
    vertical-align: baseline; }

html[lang="he"] .icon,
html[lang="ar"] .icon {
  margin-right: 0;
  margin-left: .25em; }

.icon-pdf {
  font-size: 1.25em;
  display: block;
  float: left;
  margin-top: .0625em; }

html[lang="he"] .icon-pdf,
html[lang="ar"] .icon-pdf {
  float: right; }

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

.no-fontface.no-svg .icon:before {
  display: none;
  visibility: hidden; }

.no-fontface.no-svg .icon span {
  display: "inline-block";
  visibility: visible; }

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

@viewport {
  width: device-width;
  zoom: 1.0; }