/* CSS Document */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/** 1. Set default font family to sans-serif. 2. Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

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

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability of focused elements when they are also in an active/hover state. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

html { box-sizing: border-box; }

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

/* Variables */
/*! Typography */
@font-face { font-family: 'pantonregular'; src: url("../fonts/panton-regular-webfont.eot"); src: url("../fonts/panton-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/panton-regular-webfont.woff2") format("woff2"), url("../fonts/panton-regular-webfont.woff") format("woff"), url("../fonts/panton-regular-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'pantonbold'; src: url("../fonts/panton-bold-webfont.eot"); src: url("../fonts/panton-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/panton-bold-webfont.woff2") format("woff2"), url("../fonts/panton-bold-webfont.woff") format("woff"), url("../fonts/panton-bold-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'argonregular'; src: url("../fonts/argon-regular-webfont.eot"); src: url("../fonts/argon-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/argon-regular-webfont.woff2") format("woff2"), url("../fonts/argon-regular-webfont.woff") format("woff"), url("../fonts/argon-regular-webfont.ttf") format("truetype"), url("../fonts/argon-regular-webfont.svg#argonregular") format("svg"); font-weight: normal; font-style: normal; }
body { font-size: 62.5% !important; font-family: 'pantonregular'; background: #ededed; color: #333; }

h1, h2, h3, h4, h5, h6, h7 { font-weight: normal; margin: 0 0 15px; line-height: 1.1; }

.argon { font-family: 'argonregular'; }

h1 { font-size: 3em; text-transform: uppercase; font-family: 'pantonbold'; line-height: 1; }

h2 { font-size: 4.5em; text-transform: uppercase; font-family: "pantonbold"; }

h3 { font-size: 4em; text-transform: uppercase; font-family: "pantonbold"; }

h4 { font-size: 3.5em; }

h5 { font-size: 3em; }

h6 { font-size: 2.5em; }

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 65%; color: #666; }

p, li, dl, address { font-size: 1.6em; margin: 0 0 10px; line-height: 1.5; letter-spacing: 1px; }

p.lead { font-size: 2em; }

address { font-style: normal; }

a { color: #900; }

a:hover { text-decoration: none; }

/* Lists */
ul, ol { margin: 0; padding: 0 0 0 15px; }

ul ul, ol ol, ul ol, ol ul { padding: 15px 0 0 30px; }

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

li li { font-size: 1em; }

hr { border: 0; border-bottom: 1px dashed #ccc; background: #999; margin: 30px 0; }

dl { margin: 0 0 15px; }

dt { font-weight: 700; }

dd { margin: 0; }

dt, dd { line-height: 1.45; }

.dl-horizontal dt { clear: left; float: left; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; width: 160px; }

.dl-horizontal dd { margin-left: 180px; }

.dl-horizontal dd:before { content: ''; display: table; }

blockquote { font-family: serif; margin: 0; padding: 15px 0; }

blockquote > p { font-size: 3em; line-height: 1.2; }

blockquote > p:before { content: open-quote; }

blockquote > p:after { content: close-quote; }

blockquote footer { font-family: sans-serif; font-size: 1.3em; }

blockquote footer:before { content: '-'; margin: 0 10px 0 0; }

.quote-outdented { margin-left: -50px; }

.quote-indented { padding-left: 20px; border-left: 5px solid #ccc; }

.quote-pullout { width: 50%; margin: 0 20px 10px 0; float: left; font-style: italic; max-width: 400px; padding: 20px; background: #e6e6e6; }

.quote-pullout > p { font-size: 2em; }

@media only screen and (min-width: 480px) { .quote-pullout { width: 50%; margin: 0 20px 10px 0; float: left; font-style: italic; max-width: 400px; padding: 20px; background: #e6e6e6; }
  .quote-pullout > p { font-size: 3em; }
  h1 { font-size: 5em; } }
.quote-right { text-align: right; }

.quote-right.quote-pullout { float: right; margin: 0 0 10px 20px; }

.quote-right.quote-indented { border-left: none; border-right: 5px solid #ccc; padding-right: 20px; padding-left: 0; }

/*! Framework */
img { max-width: 100%; }

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

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

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

.clearfix:after, .clear-both { clear: both; }

.hide { display: none; }

.disabled * { pointer-events: none; }

/*! Header */
.lockup { position: absolute; left: 0; right: 0; top: 0; z-index: 100; }

.idea-logo { position: absolute; right: 0; top: 0; }

@media only screen and (max-width: 991px) { .garter { width: 70px; height: 70px; } }
@media only screen and (max-width: 767px) { .garter { width: 50px; height: 50px; } }
@media only screen and (max-width: 479px) { .garter { width: 45px; height: 45px; }
  .idea-logo { height: 70px; width: auto; } }
/*! Footer */
/*! General */
/*! Breadcrumbs */
.breadcrumbs { background-color: #f5f5f5; border-radius: 5px; list-style: outside none none; margin-bottom: 20px; padding: 8px 15px; }

.breadcrumbs > li { display: inline-block; margin: 0; }

.breadcrumbs > li + li::before { color: #ccc; content: "/ "; padding: 0 5px; }

.breadcrumbs > .active { color: #333; }

/*! Buttons */
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-weight: 400; line-height: 1.45; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 5px; text-decoration: none; transition: background .2s, border-color .2s, color .2s; font-family: 'pantonbold'; }

.btn-set { width: 250px !important; text-transform: uppercase; margin: 0 auto !important; border-radius: 0 0 5px 5px !important; }

.btn-default { color: #333; background-color: #fff; border-color: #ccc; }

.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; }

.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; min-width: 264px; text-align: center; height: 58px; line-height: 56px; padding: 0 12px; text-transform: uppercase; background: #eb7f00; border: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); letter-spacing: 0; }

.btn-primary:active, .btn-primary:focus, .btn-primary:hover { color: #fff; background-color: #285f8f; border-color: #23537c; }

.btn-secondary { color: #fff; background-color: #1c758e; border-color: #1c758e; min-width: 264px; text-align: center; height: 58px; line-height: 56px; padding: 0 12px; text-transform: uppercase; background: #1c758e; border: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); letter-spacing: 0; }

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover { color: #fff; background-color: #2498b9; border-color: #2498b9; }

.btn-tertiary { color: #fff; background-color: #c30; border-color: #c30; }

.btn-tertiary:active, .btn-tertiary:focus, .btn-tertiary:hover { color: #fff; background-color: #992600; border-color: #992600; }

.btn-lg { font-size: 150%; padding: 6px 18px; }

.btn-sm { font-size: 90%; padding: 4px 8px; }

.cta { text-align: center; margin: 0 0 30px; }

/*! Forms */
label { display: block; margin: 0 0 3px; }

.lg-input { font-size: 2em; }

.sm-input { font-size: 1.1em; }

/*--
FORM INLINE
--*/
.form-inline p { display: inline-block; margin: 0 10px 0 0; }

.form-inline label { display: inline-block; padding: 0 3px 0 0; }

.form-inline input { width: auto !important; }

/*--
FORM HORIZONTAL
--*/
.form-horizontal label { display: inline-block; width: 200px; }

.form-horizontal .checkbox, .form-horizontal .radio { padding-left: 204px; }

/*--
INPUTS
--*/
input, textarea, select { -moz-appearance: none; -webkit-appearance: none; }

textarea { height: 100px; resize: vertical; }

input[type="text"], input[type="email"], input[type="password"], textarea, select { border: 1px solid #999; padding: 8px; border-radius: 5px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); color: #333; }

input + label { display: inline-block; }

.help-block, .help-inline { color: #666; }

.help-block { display: block; padding: 4px 0 0; }

.help-inline { display: inline-block; margin: 0 0 0 10px; }

.form-action-right { text-align: right; }

[type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; left: -9999px; }

[type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { position: relative; padding-left: 25px; cursor: pointer; }

[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 1px solid #999; background: #fff; border-radius: 5px; transition: border-color 0.2s, box-shadow 0.2s; }

[type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: '\2714'; position: absolute; top: 0; left: 0; width: 20px; text-align: center; font-size: 14px; color: #000; transition: all .2s; }

[type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); }

[type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); }

[type="checkbox"]:checked:focus + label:before, [type="checkbox"]:not(:checked):focus + label:before { outline: none; }

[type="radio"] + label { display: inline-block; }

[type="radio"]:not(:checked), [type="radio"]:checked { position: absolute; left: -9999px; }

[type="radio"]:not(:checked) + label, [type="radio"]:checked + label { position: relative; padding-left: 25px; cursor: pointer; }

[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 1px solid #999; background: #fff; border-radius: 5px; transition: border-color 0.2s, box-shadow 0.2s; }

[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after { content: '\2714'; position: absolute; top: 0; left: 0; width: 20px; text-align: center; font-size: 14px; color: #000; transition: all .2s; }

[type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0); }

[type="radio"]:checked + label:after { opacity: 1; transform: scale(1); }

[type="radio"]:checked:focus + label:before, [type="radio"]:not(:checked):focus + label:before { outline: none; }

.radio-inline p, .checkbox-inline p { display: inline-block; margin-right: 10px; }

/*! Grid */
.holder { max-width: 480px; margin: 0 auto; }

[class*='xs-col-'] { float: left; }

.xs-col-1-1 { width: 100%; }

.xs-col-1-2 { width: 50%; }

.xs-col-1-3 { width: 33.33%; }

.xs-col-2-3 { width: 66.66%; }

.xs-col-1-4 { width: 25%; }

.xs-col-3-4 { width: 75%; }

.xs-push-1-4 { margin-left: 25%; }

.xs-push-3-4 { margin-left: 75%; }

.xs-push-1-2 { margin-left: 50%; }

.xs-push-1-3 { margin-left: 33.33%; }

.xs-push-2-3 { margin-left: 66.66%; }

.row { clear: both; padding: 0; margin: 0; }

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

.row:after { clear: both; }

.column-content { padding: 20px; margin: 0 10px; }

.column-content--no-border { border: none; }

.column-content--no-hz-padding { padding-left: 0; padding-right: 0; background: #fff; }

.column-content--no-vt-padding { padding-top: 0; padding-bottom: 0; background: #fff; }

.column-content--no-t-padding { padding-top: 0; }

.column-content--no-b-padding { padding-bottom: 0; }

.column-content--no-l-padding { padding-left: 0; }

.column-content--no-r-padding { padding-right: 0; }

.column-content--no-padding { padding: 0; }

.column-content--border-right { border-right: 1px solid #000; margin-right: 0; padding-right: 30px; }

.column-content--border-left { border-left: 1px solid #000; margin-left: 0; padding-left: 30px; }

.centre-col { margin-left: auto; margin-right: auto; float: none !important; }

.xs-width-1-1 { width: 100%; }

.xs-width-1-2 { width: 50%; }

.xs-width-1-3 { width: 33.33%; }

.xs-width-1-4 { width: 25%; }

@media only screen and (min-width: 480px) { .holder { max-width: 768px; margin: 0 auto; }
  [class*='sm-col-'] { float: left; }
  .sm-col-1-1 { width: 100%; }
  .sm-col-1-2 { width: 50%; }
  .sm-col-1-3 { width: 33.33%; }
  .sm-col-1-4 { width: 25%; }
  .sm-col-3-4 { width: 75%; }
  .sm-col-1-5 { width: 20%; }
  .sm-col-2-5 { width: 40%; }
  .sm-col-3-5 { width: 60%; }
  .sm-col-4-5 { width: 80%; }
  .sm-push-1-4 { margin-left: 25%; }
  .sm-push-3-4 { margin-left: 75%; }
  .sm-push-1-2 { margin-left: 50%; }
  .sm-push-1-3 { margin-left: 33.33%; }
  .sm-push-2-3 { margin-left: 66.66%; }
  .sm-push-1-5 { margin-left: 20%; }
  .sm-push-2-5 { margin-left: 40%; }
  .sm-width-1-1 { width: 100%; }
  .sm-width-1-2 { width: 50%; }
  .sm-width-1-3 { width: 33.33%; }
  .sm-width-1-4 { width: 25%; } }
@media only screen and (min-width: 768px) { .holder { max-width: 1024px; margin: 0 auto; }
  [class*='md-col-'] { float: left; }
  .md-col-1-1 { width: 100%; }
  .md-col-1-2 { width: 50%; }
  .md-col-1-3 { width: 33.33%; }
  .md-col-2-3 { width: 66.66%; }
  .md-col-3-4 { width: 75%; }
  .md-col-1-4 { width: 25%; }
  .md-col-1-5 { width: 20%; }
  .md-col-2-5 { width: 40%; }
  .md-col-3-5 { width: 60%; }
  .md-col-4-5 { width: 80%; }
  .md-col-1-6 { width: 16.66%; }
  .md-col-5-6 { width: 83.3%; }
  .md-col-1-7 { width: 14.28%; }
  .md-col-2-7 { width: 28.56%; }
  .md-col-3-7 { width: 42.84%; }
  .md-col-4-7 { width: 57.12%; }
  .md-col-5-7 { width: 71.4%; }
  .md-col-6-7 { width: 85.68%; }
  .md-col-1-8 { width: 12.5%; }
  .md-col-3-8 { width: 37.5%; }
  .md-col-5-8 { width: 62.5%; }
  .md-col-7-8 { width: 87.5%; }
  .md-push-1-4 { margin-left: 25%; }
  .md-push-3-4 { margin-left: 75%; }
  .md-push-1-2 { margin-left: 50%; }
  .md-push-1-3 { margin-left: 33.33%; }
  .md-push-2-3 { margin-left: 66.66%; }
  .md-push-1-5 { margin-left: 20%; }
  .md-push-2-5 { margin-left: 40%; }
  .md-push-1-7 { margin-left: 14.28%; }
  .md-push-2-7 { margin-left: 28.56%; }
  .md-push-3-7 { margin-left: 42.84%; }
  .md-push-4-7 { margin-left: 57.12%; }
  .md-push-5-7 { margin-left: 71.4%; }
  .md-push-6-7 { margin-left: 85.68%; }
  .md-push-1-8 { margin-left: 12.5%; }
  .md-push-3-8 { margin-left: 37.5%; }
  .md-push-5-8 { margin-left: 62.5%; }
  .md-push-7-8 { margin-left: 87.5%; }
  .md-width-1-1 { width: 100%; }
  .md-width-1-2 { width: 50%; }
  .md-width-1-3 { width: 33.33%; }
  .md-width-1-4 { width: 25%; } }
@media only screen and (min-width: 1024px) { .holder { max-width: 1366px; margin: 0 auto; }
  [class*='lg-col-'] { float: left; }
  .lg-col-1-1 { width: 100%; }
  .lg-col-1-2 { width: 50%; }
  .lg-col-1-3 { width: 33.33%; }
  .lg-col-2-3 { width: 66.66%; }
  .lg-col-3-4 { width: 75%; }
  .lg-col-1-4 { width: 25%; }
  .lg-col-1-5 { width: 20%; }
  .lg-col-2-5 { width: 40%; }
  .lg-col-3-5 { width: 60%; }
  .lg-col-4-5 { width: 80%; }
  .lg-col-1-6 { width: 16.66%; }
  .lg-col-5-6 { width: 83.3%; }
  .lg-col-1-7 { width: 14.28%; }
  .lg-col-2-7 { width: 28.56%; }
  .lg-col-3-7 { width: 42.84%; }
  .lg-col-4-7 { width: 57.12%; }
  .lg-col-5-7 { width: 71.4%; }
  .lg-col-6-7 { width: 85.68%; }
  .lg-col-1-8 { width: 12.5%; }
  .lg-col-3-8 { width: 37.5%; }
  .lg-col-5-8 { width: 62.5%; }
  .lg-col-7-8 { width: 87.5%; }
  .lg-push-1-4 { margin-left: 25%; }
  .lg-push-3-4 { margin-left: 75%; }
  .lg-push-1-2 { margin-left: 50%; }
  .lg-push-1-3 { margin-left: 33.33%; }
  .lg-push-2-3 { margin-left: 66.66%; }
  .lg-push-1-5 { margin-left: 20%; }
  .lg-push-2-5 { margin-left: 40%; }
  .lg-push-1-7 { margin-left: 14.28%; }
  .lg-push-2-7 { margin-left: 28.56%; }
  .lg-push-3-7 { margin-left: 42.84%; }
  .lg-push-4-7 { margin-left: 57.12%; }
  .lg-push-5-7 { margin-left: 71.4%; }
  .lg-push-6-7 { margin-left: 85.68%; }
  .lg-push-1-8 { margin-left: 12.5%; }
  .lg-push-3-8 { margin-left: 37.5%; }
  .lg-push-5-8 { margin-left: 62.5%; }
  .lg-push-7-8 { margin-left: 87.5%; }
  .lg-width-1-1 { width: 100%; }
  .lg-width-1-2 { width: 50%; }
  .lg-width-1-3 { width: 33.33%; }
  .lg-width-1-4 { width: 25%; } }
@media only screen and (min-width: 1200px) { .holder { max-width: 1366px; margin: 0 auto; }
  [class*='xl-col-'] { float: left; }
  .xl-col-1-1 { width: 100%; }
  .xl-col-1-2 { width: 50%; }
  .xl-col-1-3 { width: 33.33%; }
  .xl-col-2-3 { width: 66.66%; }
  .xl-col-3-4 { width: 75%; }
  .xl-col-1-4 { width: 25%; }
  .xl-col-1-5 { width: 20%; }
  .xl-col-2-5 { width: 40%; }
  .xl-col-3-5 { width: 60%; }
  .xl-col-4-5 { width: 80%; }
  .xl-col-1-6 { width: 16.66%; }
  .xl-col-5-6 { width: 83.3%; }
  .xl-col-1-7 { width: 14.28%; }
  .xl-col-2-7 { width: 28.56%; }
  .xl-col-3-7 { width: 42.84%; }
  .xl-col-4-7 { width: 57.12%; }
  .xl-col-5-7 { width: 71.4%; }
  .xl-col-6-7 { width: 85.68%; }
  .xl-col-1-8 { width: 12.5%; }
  .xl-col-3-8 { width: 37.5%; }
  .xl-col-5-8 { width: 62.5%; }
  .xl-col-7-8 { width: 87.5%; }
  .xl-push-1-4 { margin-left: 25%; }
  .xl-push-3-4 { margin-left: 75%; }
  .xl-push-1-2 { margin-left: 50%; }
  .xl-push-1-3 { margin-left: 33.33%; }
  .xl-push-2-3 { margin-left: 66.66%; }
  .xl-push-1-5 { margin-left: 20%; }
  .xl-push-2-5 { margin-left: 40%; }
  .xl-push-1-7 { margin-left: 14.28%; }
  .xl-push-2-7 { margin-left: 28.56%; }
  .xl-push-3-7 { margin-left: 42.84%; }
  .xl-push-4-7 { margin-left: 57.12%; }
  .xl-push-5-7 { margin-left: 71.4%; }
  .xl-push-6-7 { margin-left: 85.68%; }
  .xl-push-1-8 { margin-left: 12.5%; }
  .xl-push-3-8 { margin-left: 37.5%; }
  .xl-push-5-8 { margin-left: 62.5%; }
  .xl-push-7-8 { margin-left: 87.5%; }
  .xl-width-1-1 { width: 100%; }
  .xl-width-1-2 { width: 50%; }
  .xl-width-1-3 { width: 33.33%; }
  .xl-width-1-4 { width: 25%; } }
/*! Parallax Banner Scroll */
.grid-sizer { width: 100%; }

.grid-item { background: #fff; width: 100%; height: 300px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); padding: 20px; }

.grid-item--width2 { width: 100%; }

@media only screen and (min-width: 480px) { .grid-sizer { width: 50%; }
  .grid-item { background: #fff; width: 50%; height: 300px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); padding: 20px; }
  .grid-item--width2 { width: 100%; } }
@media only screen and (min-width: 768px) { .grid-sizer { width: 33.33%; }
  .grid-item { background: #fff; width: 33.33%; height: 300px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); padding: 20px; }
  .grid-item--width2 { width: 66.66%; } }
@media only screen and (min-width: 1200px) { .grid-sizer { width: 20%; }
  .grid-item { background: #fff; width: 20%; height: 300px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); padding: 20px; }
  .grid-item--width2 { width: 40%; } }
/*! Lazy Load */
.lazyload { opacity: 0; transform: scale(1); }

.lazyloaded { opacity: 1; transform: scale(1); transition: all 1s; }

/*! Overlays */
.overlay-bg { background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: visibility 0s linear 0.25s,opacity 0.25s linear; }

.overlay-bg.overlay-bg-visible { visibility: visible; opacity: 1; transition-delay: 0s; }

.overlay { visibility: hidden; opacity: 0; position: absolute; left: 50%; top: 50%; width: 500px; height: 300px; background: #fff; margin: -250px 0 0 -250px; transform: scale(0.5, 0.5); transition: visibility 0s linear 0.25s,opacity 0.25s linear,transform 0.25s linear; }

.overlay.overlay-visible { visibility: visible; opacity: 1; transform: scale(1, 1); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); transition-delay: 0s; }

.overlay-close { position: absolute; right: 10px; top: 10px; cursor: pointer; }

.overlay-content-holder { overflow: auto; height: 100%; padding: 50px 20px 20px; }

.overlay.overlay-full { width: 100%; height: 100%; left: 0; top: 0; margin: 0; }

/*! Tables */
table { background-color: transparent; }

caption { padding-top: 8px; padding-bottom: 8px; color: #777; text-align: left; }

th { text-align: left; }

.table { width: 100%; max-width: 100%; margin-bottom: 20px; font-size: 1.4em; }

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { padding: 8px; line-height: 1.45; vertical-align: top; border-top: 1px solid #ddd; }

.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #ddd; }

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

.table > tbody + tbody { border-top: 2px solid #ddd; }

.table .table { background-color: #fff; }

.table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th { padding: 5px; }

.table-bordered { border: 1px solid #ddd; }

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th { border: 1px solid #ddd; }

.table-bordered > thead > tr > td, .table-bordered > thead > tr > th { border-bottom-width: 2px; }

.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; }

.table-hover > tbody > tr:hover { background-color: #f5f5f5; }

table col[class*=col-] { position: static; display: table-column; float: none; }

table td[class*=col-], table th[class*=col-] { position: static; display: table-cell; float: none; }

.table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active { background-color: #f5f5f5; }

.table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr.active:hover > th, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover { background-color: #e8e8e8; }

.table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > thead > tr > td.success, .table > thead > tr > th.success { background-color: #dff0d8; }

.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th, .table-hover > tbody > tr:hover > .success, .table-hover > tbody > tr > td.success:hover, .table-hover > tbody > tr > th.success:hover { background-color: #d0e9c6; }

.table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > thead > tr > td.info, .table > thead > tr > th.info { background-color: #d9edf7; }

.table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover { background-color: #c4e3f3; }

.table-responsive { min-height: .01%; overflow-x: auto; }

@media screen and (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; }
  .table-responsive > .table { margin-bottom: 0; }
  .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th { white-space: nowrap; }
  .table-responsive > .table-bordered { border: 0; }
  .table-responsive > .table-bordered > tbody > tr > td:first-child, .table-responsive > .table-bordered > tbody > tr > th:first-child, .table-responsive > .table-bordered > tfoot > tr > td:first-child, .table-responsive > .table-bordered > tfoot > tr > th:first-child, .table-responsive > .table-bordered > thead > tr > td:first-child, .table-responsive > .table-bordered > thead > tr > th:first-child { border-left: 0; }
  .table-responsive > .table-bordered > tbody > tr > td:last-child, .table-responsive > .table-bordered > tbody > tr > th:last-child, .table-responsive > .table-bordered > tfoot > tr > td:last-child, .table-responsive > .table-bordered > tfoot > tr > th:last-child, .table-responsive > .table-bordered > thead > tr > td:last-child, .table-responsive > .table-bordered > thead > tr > th:last-child { border-right: 0; }
  .table-responsive > .table-bordered > tbody > tr:last-child > td, .table-responsive > .table-bordered > tbody > tr:last-child > th, .table-responsive > .table-bordered > tfoot > tr:last-child > td, .table-responsive > .table-bordered > tfoot > tr:last-child > th { border-bottom: 0; } }
/*! Tabs */
.tabs-navigation { margin: 0; padding: 0; text-align: left; position: relative; top: 1px; display: table; }

.tabs-navigation li { list-style: none; display: inline; margin: 0; padding: 0 4px 0 0; display: table-cell; }

.tabs-navigation li a { border: 1px solid #ccc; padding: 10px 20px; background: #666; text-decoration: none; display: inline-block; color: #900; border-radius: 5px 5px 0 0; background-clip: padding-box; }

.tabs-navigation li a:hover { color: #000; }

.tabs-navigation li a.current { background: #fff; color: #333; border-bottom: 1px solid #fff; }

.tabs-content { border: 1px solid #ccc; padding: 15px; display: none; background: #fff; border-radius: 0 5px 5px 5px; }

.tabs-content.currentTab { display: block; }

.tabs--pills .tabs-navigation { top: 0; margin: 0 0 15px; }

.tabs--pills .tabs-navigation li { display: inline-block; padding: 0; margin: 0 10px 0 0; }

.tabs--pills .tabs-navigation li a { border-radius: 5px; }

.tabs--pills .tabs-navigation li a.current { border: 1px solid #ccc; }

.tabs--pills .tabs-content { border: none; padding: 0; }

/*! Tooltips */
a.tooltip { outline: none; }

a.tooltip strong { line-height: 30px; }

a.tooltip:hover { text-decoration: none; }

.tooltip-text { z-index: 10; display: none; padding: 14px 20px; margin-top: -25px; margin-left: 15px; width: 300px; line-height: 16px; border-radius: 4px; box-shadow: 5px 5px 8px #CCC; }

a.tooltip:hover .tooltip-text { display: inline; position: absolute; color: #333; border: 1px solid #ccc; background: #fff; }

.tooltip-text:after { z-index: 20; position: absolute; top: 28px; border: 0; left: -12px; width: 0; content: ''; height: 0; border-left: 6px solid transparent; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #999; }

a.tooltip--bottom { position: relative; }

a.tooltip--bottom .tooltip-text { margin-top: 12px; left: 0; margin-left: 0; top: auto; }

a.tooltip--bottom:hover .tooltip-text { display: block; }

a.tooltip--bottom .tooltip-text:after { z-index: 20; position: absolute; top: -12px; border: 0; left: 12px; width: 0; content: ''; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid transparent; border-bottom: 6px solid #999; }

a.tooltip--top { position: relative; }

a.tooltip--top .tooltip-text { margin-top: 12px; left: 0; margin-left: 0; top: auto; bottom: 30px; }

a.tooltip--top:hover .tooltip-text { display: block; }

a.tooltip--top .tooltip-text:after { z-index: 20; position: absolute; top: auto; bottom: -12px; border: 0; left: 12px; width: 0; content: ''; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-top: 6px solid #999; }

/*! Transforms */
.container { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0 auto; overflow: hidden; z-index: -1; }

.scene { padding: 0; margin: -200px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

.layer { width: 100%; height: 100%; }

.layer1 { background: url(../img/bg-layer-1.png) repeat center center; opacity: .5; }

.layer2 { background: url(../img/bg-layer-2.png) repeat center center; opacity: .3; }

.layer3 { background: url(../img/bg-layer-3.png) repeat center center; opacity: .1; }

.layer1, .layer2, .layer3 { background-size: contain; }

.intro-copy { text-align: center; padding: 20px; }

.intro-copy svg { max-width: 430px; fill: #fff; }

@media only screen and (min-width: 768px) { .intro-copy { position: absolute; left: 50%; top: 50%; width: 700px; text-align: center; margin: -290px 0 0 -310px; padding: 0; }
  .layer1, .layer2, .layer3 { background-size: auto; }
  .intro-copy p { font-size: 1.8em; letter-spacing: 1px; line-height: 1.55; margin: 0 0 30px; color: #fff; } }
.intro-copy p { font-size: 1.8em; letter-spacing: 1px; line-height: 1.55; margin: 0 0 30px; color: #fff; }

.intro-image { margin: 0 0 20px; }

.intro-copy .btn { min-width: 264px; text-align: center; height: 58px; line-height: 56px; padding: 0 12px; text-transform: uppercase; background: #eb7f00; border: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); letter-spacing: 0; }

html.home-screen, body.home-screen-body { height: 100%; background: linear-gradient(to bottom, #56c4d0 0%, #225478 100%); }

.home-holder { position: absolute; height: 100%; }

/*!
 * animsition v4.0.1
 * A simple and easy jQuery plugin for CSS animated page transitions.
 * http://blivesta.github.io/animsition
 * License : MIT
 * Author : blivesta (http://blivesta.com/)
 */
.animsition, .animsition-overlay { position: relative; opacity: 0; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

/** overlay option */
.animsition-overlay-slide { position: fixed; z-index: 1; width: 100%; height: 100%; background-color: #ddd; }

/* loading option */
.animsition-loading, .animsition-loading:after { width: 32px; height: 32px; position: fixed; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; border-radius: 50%; z-index: 100; }

.animsition-loading { background-color: transparent; border-top: 5px solid rgba(0, 0, 0, 0.2); border-right: 5px solid rgba(0, 0, 0, 0.2); border-bottom: 5px solid rgba(0, 0, 0, 0.2); border-left: 5px solid #eee; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-name: animsition-loading; animation-name: animsition-loading; }

@-webkit-keyframes animsition-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes animsition-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes fade-in { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fade-in { 0% { opacity: 0; }
  100% { opacity: 1; } }
.fade-in { -webkit-animation-name: fade-in; animation-name: fade-in; }

@-webkit-keyframes fade-out { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes fade-out { 0% { opacity: 1; }
  100% { opacity: 0; } }
.fade-out { -webkit-animation-name: fade-out; animation-name: fade-out; }

@-webkit-keyframes fade-in-up { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
@keyframes fade-in-up { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
.fade-in-up { -webkit-animation-name: fade-in-up; animation-name: fade-in-up; }

@-webkit-keyframes fade-out-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } }
@keyframes fade-out-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; } }
.fade-out-up { -webkit-animation-name: fade-out-up; animation-name: fade-out-up; }

@-webkit-keyframes fade-in-up-sm { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
@keyframes fade-in-up-sm { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
.fade-in-up-sm { -webkit-animation-name: fade-in-up-sm; animation-name: fade-in-up-sm; }

@-webkit-keyframes fade-out-up-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } }
@keyframes fade-out-up-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; } }
.fade-out-up-sm { -webkit-animation-name: fade-out-up-sm; animation-name: fade-out-up-sm; }

@-webkit-keyframes fade-in-up-lg { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
@keyframes fade-in-up-lg { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
.fade-in-up-lg { -webkit-animation-name: fade-in-up-lg; animation-name: fade-in-up-lg; }

@-webkit-keyframes fade-out-up-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } }
@keyframes fade-out-up-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } }
.fade-out-up-lg { -webkit-animation-name: fade-out-up-lg; animation-name: fade-out-up-lg; }

@-webkit-keyframes fade-in-down { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
@keyframes fade-in-down { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
.fade-in-down { -webkit-animation-name: fade-in-down; animation-name: fade-in-down; }

@-webkit-keyframes fade-out-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } }
@keyframes fade-out-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(500px); transform: translateY(500px); opacity: 0; } }
.fade-out-down { -webkit-animation-name: fade-out-down; animation-name: fade-out-down; }

@-webkit-keyframes fade-in-down-sm { 0% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
@keyframes fade-in-down-sm { 0% { -webkit-transform: translateY(-100px); transform: translateY(-100px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
.fade-in-down-sm { -webkit-animation-name: fade-in-down-sm; animation-name: fade-in-down-sm; }

@-webkit-keyframes fade-out-down-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } }
@keyframes fade-out-down-sm { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } }
.fade-out-down-sm { -webkit-animation-name: fade-out-down-sm; animation-name: fade-out-down-sm; }

@-webkit-keyframes fade-in-down-lg { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
@keyframes fade-in-down-lg { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }
.fade-in-down-lg { -webkit-animation-name: fade-in-down; animation-name: fade-in-down; }

@-webkit-keyframes fade-out-down-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } }
@keyframes fade-out-down-lg { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
  100% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } }
.fade-out-down-lg { -webkit-animation-name: fade-out-down-lg; animation-name: fade-out-down-lg; }

@-webkit-keyframes fade-in-left { 0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes fade-in-left { 0% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
.fade-in-left { -webkit-animation-name: fade-in-left; animation-name: fade-in-left; }

@-webkit-keyframes fade-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } }
@keyframes fade-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(-500px); transform: translateX(-500px); opacity: 0; } }
.fade-out-left { -webkit-animation-name: fade-out-left; animation-name: fade-out-left; }

@-webkit-keyframes fade-in-left-sm { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes fade-in-left-sm { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
.fade-in-left-sm { -webkit-animation-name: fade-in-left-sm; animation-name: fade-in-left-sm; }

@-webkit-keyframes fade-out-left-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } }
@keyframes fade-out-left-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } }
.fade-out-left-sm { -webkit-animation-name: fade-out-left-sm; animation-name: fade-out-left-sm; }

@-webkit-keyframes fade-in-left-lg { 0% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes fade-in-left-lg { 0% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
.fade-in-left-lg { -webkit-animation-name: fade-in-left-lg; animation-name: fade-in-left-lg; }

@-webkit-keyframes fade-out-left-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } }
@keyframes fade-out-left-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); opacity: 0; } }
.fade-out-left-lg { -webkit-animation-name: fade-out-left-lg; animation-name: fade-out-left-lg; }

@-webkit-keyframes fade-in-right { 0% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes fade-in-right { 0% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
.fade-in-right { -webkit-animation-name: fade-in-right; animation-name: fade-in-right; }

@-webkit-keyframes fade-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } }
@keyframes fade-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(500px); transform: translateX(500px); opacity: 0; } }
.fade-out-right { -webkit-animation-name: fade-out-right; animation-name: fade-out-right; }

@-webkit-keyframes fade-in-right-sm { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes fade-in-right-sm { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
.fade-in-right-sm { -webkit-animation-name: fade-in-right-sm; animation-name: fade-in-right-sm; }

@-webkit-keyframes fade-out-right-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } }
@keyframes fade-out-right-sm { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } }
.fade-out-right-sm { -webkit-animation-name: fade-out-right-sm; animation-name: fade-out-right-sm; }

@-webkit-keyframes fade-in-right-lg { 0% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
@keyframes fade-in-right-lg { 0% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } }
.fade-in-right-lg { -webkit-animation-name: fade-in-right-lg; animation-name: fade-in-right-lg; }

@-webkit-keyframes fade-out-right-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } }
@keyframes fade-out-right-lg { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
  100% { -webkit-transform: translateX(1500px); transform: translateX(1500px); opacity: 0; } }
.fade-out-right-lg { -webkit-animation-name: fade-out-right-lg; animation-name: fade-out-right-lg; }

@-webkit-keyframes rotate-in { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; }
  100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } }
@keyframes rotate-in { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; }
  100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } }
.rotate-in { -webkit-animation-name: rotate-in; animation-name: rotate-in; }

@-webkit-keyframes rotate-out { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; }
  100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } }
@keyframes rotate-out { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; }
  100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } }
.rotate-out { -webkit-animation-name: rotate-out; animation-name: rotate-out; }

@-webkit-keyframes rotate-in-sm { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; }
  100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } }
@keyframes rotate-in-sm { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; }
  100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } }
.rotate-in-sm { -webkit-animation-name: rotate-in-sm; animation-name: rotate-in-sm; }

@-webkit-keyframes rotate-out-sm { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; }
  100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } }
@keyframes rotate-out-sm { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; }
  100% { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } }
.rotate-out-sm { -webkit-animation-name: rotate-out-sm; animation-name: rotate-out-sm; }

@-webkit-keyframes rotate-in-lg { 0% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; }
  100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } }
@keyframes rotate-in-lg { 0% { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; }
  100% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; } }
.rotate-in-lg { -webkit-animation-name: rotate-in-lg; animation-name: rotate-in-lg; }

@-webkit-keyframes rotate-out-lg { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } }
@keyframes rotate-out-lg { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; transform-origin: center center; opacity: 1; }
  100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: center center; transform-origin: center center; opacity: 0; } }
.rotate-out-lg { -webkit-animation-name: rotate-out-lg; animation-name: rotate-out-lg; }

@-webkit-keyframes flip-in-x { 0% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } }
@keyframes flip-in-x { 0% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; } }
.flip-in-x { -webkit-animation-name: flip-in-x; animation-name: flip-in-x; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-out-x { 0% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } }
@keyframes flip-out-x { 0% { -webkit-transform: perspective(550px) rotateX(0deg); transform: perspective(550px) rotateX(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(550px) rotateX(90deg); transform: perspective(550px) rotateX(90deg); opacity: 0; } }
.flip-out-x { -webkit-animation-name: flip-out-x; animation-name: flip-out-x; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-in-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } }
@keyframes flip-in-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; } }
.flip-in-x-nr { -webkit-animation-name: flip-in-x-nr; animation-name: flip-in-x-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-out-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } }
@keyframes flip-out-x-nr { 0% { -webkit-transform: perspective(100px) rotateX(0deg); transform: perspective(100px) rotateX(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(100px) rotateX(90deg); transform: perspective(100px) rotateX(90deg); opacity: 0; } }
.flip-out-x-nr { -webkit-animation-name: flip-out-x-nr; animation-name: flip-out-x-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-in-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } }
@keyframes flip-in-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; } }
.flip-in-x-fr { -webkit-animation-name: flip-in-x-fr; animation-name: flip-in-x-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-out-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } }
@keyframes flip-out-x-fr { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } }
.flip-out-x-fr { -webkit-animation-name: flip-out-x-fr; animation-name: flip-out-x-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-in-y { 0% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } }
@keyframes flip-in-y { 0% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; } }
.flip-in-y { -webkit-animation-name: flip-in-y; animation-name: flip-in-y; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-out-y { 0% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } }
@keyframes flip-out-y { 0% { -webkit-transform: perspective(550px) rotateY(0deg); transform: perspective(550px) rotateY(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(550px) rotateY(90deg); transform: perspective(550px) rotateY(90deg); opacity: 0; } }
.flip-out-y { -webkit-animation-name: flip-out-y; animation-name: flip-out-y; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-in-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } }
@keyframes flip-in-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; } }
.flip-in-y-nr { -webkit-animation-name: flip-in-y-nr; animation-name: flip-in-y-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-out-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } }
@keyframes flip-out-y-nr { 0% { -webkit-transform: perspective(100px) rotateY(0deg); transform: perspective(100px) rotateY(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(100px) rotateY(90deg); transform: perspective(100px) rotateY(90deg); opacity: 0; } }
.flip-out-y-nr { -webkit-animation-name: flip-out-y-nr; animation-name: flip-out-y-nr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-in-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } }
@keyframes flip-in-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; }
  100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; } }
.flip-in-y-fr { -webkit-animation-name: flip-in-y-fr; animation-name: flip-in-y-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flip-out-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } }
@keyframes flip-out-y-fr { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); opacity: 1; }
  100% { -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg); opacity: 0; } }
.flip-out-y-fr { -webkit-animation-name: flip-out-y-fr; animation-name: flip-out-y-fr; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes zoom-in { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; }
  100% { opacity: 1; } }
@keyframes zoom-in { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; }
  100% { opacity: 1; } }
.zoom-in { -webkit-animation-name: zoom-in; animation-name: zoom-in; }

@-webkit-keyframes zoom-out { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; }
  100% { opacity: 0; } }
@keyframes zoom-out { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 0; }
  100% { opacity: 0; } }
.zoom-out { -webkit-animation-name: zoom-out; animation-name: zoom-out; }

@-webkit-keyframes zoom-in-sm { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; }
  100% { opacity: 1; } }
@keyframes zoom-in-sm { 0% { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; }
  100% { opacity: 1; } }
.zoom-in-sm { -webkit-animation-name: zoom-in-sm; animation-name: zoom-in-sm; }

@-webkit-keyframes zoom-out-sm { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; }
  100% { opacity: 0; } }
@keyframes zoom-out-sm { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; }
  100% { opacity: 0; } }
.zoom-out-sm { -webkit-animation-name: zoom-out-sm; animation-name: zoom-out-sm; }

@-webkit-keyframes zoom-in-lg { 0% { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; }
  100% { opacity: 1; } }
@keyframes zoom-in-lg { 0% { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; }
  100% { opacity: 1; } }
.zoom-in-lg { -webkit-animation-name: zoom-in-lg; animation-name: zoom-in-lg; }

@-webkit-keyframes zoom-out-lg { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; }
  100% { opacity: 0; } }
@keyframes zoom-out-lg { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  50% { -webkit-transform: scale(0.4); transform: scale(0.4); opacity: 0; }
  100% { opacity: 0; } }
.zoom-out-lg { -webkit-animation-name: zoom-out-lg; animation-name: zoom-out-lg; }

@-webkit-keyframes overlay-slide-in-top { 0% { height: 100%; }
  100% { height: 0; } }
@keyframes overlay-slide-in-top { 0% { height: 100%; }
  100% { height: 0; } }
.overlay-slide-in-top { top: 0; height: 0; -webkit-animation-name: overlay-slide-in-top; animation-name: overlay-slide-in-top; }

@-webkit-keyframes overlay-slide-out-top { 0% { height: 0; }
  100% { height: 100%; } }
@keyframes overlay-slide-out-top { 0% { height: 0; }
  100% { height: 100%; } }
.overlay-slide-out-top { top: 0; height: 100%; -webkit-animation-name: overlay-slide-out-top; animation-name: overlay-slide-out-top; }

@-webkit-keyframes overlay-slide-in-bottom { 0% { height: 100%; }
  100% { height: 0; } }
@keyframes overlay-slide-in-bottom { 0% { height: 100%; }
  100% { height: 0; } }
.overlay-slide-in-bottom { bottom: 0; height: 0; -webkit-animation-name: overlay-slide-in-bottom; animation-name: overlay-slide-in-bottom; }

@-webkit-keyframes overlay-slide-out-bottom { 0% { height: 0; }
  100% { height: 100%; } }
@keyframes overlay-slide-out-bottom { 0% { height: 0; }
  100% { height: 100%; } }
.overlay-slide-out-bottom { bottom: 0; height: 100%; -webkit-animation-name: overlay-slide-out-bottom; animation-name: overlay-slide-out-bottom; }

@-webkit-keyframes overlay-slide-in-left { 0% { width: 100%; }
  100% { width: 0; } }
@keyframes overlay-slide-in-left { 0% { width: 100%; }
  100% { width: 0; } }
.overlay-slide-in-left { width: 0; -webkit-animation-name: overlay-slide-in-left; animation-name: overlay-slide-in-left; }

@-webkit-keyframes overlay-slide-out-left { 0% { width: 0; }
  100% { width: 100%; } }
@keyframes overlay-slide-out-left { 0% { width: 0; }
  100% { width: 100%; } }
.overlay-slide-out-left { left: 0; width: 100%; -webkit-animation-name: overlay-slide-out-left; animation-name: overlay-slide-out-left; }

@-webkit-keyframes overlay-slide-in-right { 0% { width: 100%; }
  100% { width: 0; } }
@keyframes overlay-slide-in-right { 0% { width: 100%; }
  100% { width: 0; } }
.overlay-slide-in-right { right: 0; width: 0; -webkit-animation-name: overlay-slide-in-right; animation-name: overlay-slide-in-right; }

@-webkit-keyframes overlay-slide-out-right { 0% { width: 0; }
  100% { width: 100%; } }
@keyframes overlay-slide-out-right { 0% { width: 0; }
  100% { width: 100%; } }
.overlay-slide-out-right { right: 0; width: 100%; -webkit-animation-name: overlay-slide-out-right; animation-name: overlay-slide-out-right; }

html { overflow-y: scroll; }

/*! Explanation Screen */
.gradient-holder { background: linear-gradient(to bottom, #56c4d0 0%, #225478 100%); padding: 20px; color: #fff; text-align: center; }

.gradient { background: linear-gradient(to bottom, #56c4d0 0%, #225478 100%); text-align: center; }

.page-header { background: #ededed; padding: 30px 20px; }

.page-content { padding: 30px 20px; color: #fff; }

.timeline-holder { position: relative; padding: 20px 0 1px; max-width: 900px; margin: 0 auto 30px; overflow: hidden; }

.timeline { position: absolute; width: 4px; height: 100%; background: #fff; top: 0; border-radius: 2px; }

.timeline-block-heading { font-size: 2.4em; line-height: 1.1; font-family: 'pantonregular'; margin: 0 0 5px; text-transform: none; }
.timeline-block-heading span { font-size: 66.66%; display: block; }
.timeline-block-heading b { padding: 10px 15px; margin: 0 0 3px; display: inline-block; border-radius: 3px; }

@media only screen and (max-width: 767px) { .timeline-block { text-align: left; width: auto; margin: 0 0 20px 40px; position: relative; }
  .timeline-block:before { content: ''; position: absolute; width: 20px; display: block; height: 2px; background: #fff; top: 10px; left: -40px; }
  .timeline-block:after { height: 8px; width: 8px; content: ''; display: block; background: #fff; border-radius: 50%; position: absolute; left: -20px; top: 11px; margin: -4px 0 0 0; }
  .timeline-block-heading { font-size: 1.6em; } }
@media only screen and (min-width: 768px) { .timeline-holder { position: relative; padding: 20px 0 1px; max-width: 720px; margin: 0 auto 30px; }
  .timeline-block { width: 300px; margin: 0 0 20px; }
  .timeline { left: 50%; margin: 0 0 0 -2px; }
  .timeline-left { text-align: right; position: relative; }
  .timeline-left:before { content: ''; position: absolute; width: 40px; display: block; height: 2px; background: #fff; top: 10px; right: -60px; }
  .timeline-left:after { height: 8px; width: 8px; content: ''; display: block; background: #fff; border-radius: 50%; position: absolute; right: -20px; top: 11px; margin: -4px 0 0 0; }
  .timeline-right { text-align: left; margin-left: 420px; position: relative; }
  .timeline-right:before { content: ''; position: absolute; width: 40px; display: block; height: 2px; background: #fff; top: 10px; left: -60px; }
  .timeline-right:after { height: 8px; width: 8px; content: ''; display: block; background: #fff; border-radius: 50%; position: absolute; left: -20px; top: 11px; margin: -4px 0 0 0; } }
@media only screen and (min-width: 1024px) { .timeline-block-heading { font-size: 2.8em; line-height: 1.1; font-family: 'pantonregular'; margin: 0 0 5px; }
  .timeline-block-heading span { font-size: 66.66%; display: block; }
  .timeline-holder { position: relative; padding: 20px 0 1px; max-width: 900px; margin: 0 auto 30px; }
  .timeline-block { width: 350px; margin: 0 0 20px; }
  .timeline { left: 50%; margin: 0 0 0 -2px; }
  .timeline-left { text-align: right; position: relative; }
  .timeline-left:before { content: ''; position: absolute; width: 80px; display: block; height: 2px; background: #fff; top: 13px; right: -100px; }
  .timeline-left:after { height: 8px; width: 8px; content: ''; display: block; background: #fff; border-radius: 50%; position: absolute; right: -20px; top: 14px; margin: -4px 0 0 0; }
  .timeline-right { text-align: left; margin-left: 550px; position: relative; }
  .timeline-right:before { content: ''; position: absolute; width: 80px; display: block; height: 2px; background: #fff; top: 13px; left: -100px; }
  .timeline-right:after { height: 8px; width: 8px; content: ''; display: block; background: #fff; border-radius: 50%; position: absolute; left: -20px; top: 14px; margin: -4px 0 0 0; } }
.explanation-text { margin: 0 0 30px; }

.explanation-text h2 { margin: 0 0 10px; }

.explanation-text p { max-width: 360px; margin: 0 auto 10px; }

.explanation-intro { max-width: 768px; margin: 0 auto 30px; text-align: center; padding: 40px 0 0; }

.page-heading .argon { display: block; }

.page-outro { max-width: 500px; margin: 0 auto; padding: 30px 0 60px; text-align: center; }

.cta { padding-top: 20px; }

/*! Task Intro */
.task-intro { background: #55c3cf; padding: 20px; color: #fff; text-align: center; position: absolute; overflow-y: auto; left: 0; top: 0; width: 100%; height: 100%; }

.task-intro-task-number { font-size: 3em; margin: 0 0 5px; }

.unlucky-copy { background: white; width: 420px; height: 420px; border-radius: 210px; padding: 100px 30px 30px; position: absolute; left: 50%; top: 50%; margin: -210px 0 0 -210px; text-align: center; z-index: 2; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); color: #02356F; }

.failed-btn-holder { padding: 20px 0 0; }

.success-copy { background: white; width: 420px; height: 420px; border-radius: 210px; padding: 125px 30px 30px; position: absolute; left: 50%; top: 50%; margin: -240px 0 0 -210px; text-align: center; z-index: 2; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); color: #02356F; }

.badge-holder { background: #fff url(../img/badge.png) no-repeat center center; width: 200px; height: 200px; position: absolute; left: 50%; bottom: -50px; margin: 0 0 0 -100px; border-radius: 50%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); transform: scale(0.1, 0.1); opacity: 0; transition: all .25s ease-in; }

.animated .badge-holder { transform: scale(1, 1); opacity: 1; }

@media only screen and (min-width: 480px) { .task-intro-content { width: 580px; position: absolute; left: 50%; top: 50%; margin: -205px 0 0 -290px; } }
@media only screen and (min-width: 1024px) { .task-intro-content { width: 660px; position: absolute; left: 50%; top: 50%; margin: -193px 0 0 -330px; } }
body { padding-top: 20px; }

.task-icon-list { margin: 0 0 50px; padding: 0; list-style: none; }

.task-icon-list a { display: block; padding: 10px; border-radius: 5px; text-align: center; color: #fff; text-decoration: none; transition: all .25s; }
.task-icon-list a .fi { display: block; font-size: 300%; text-align: center; line-height: 1.2; transition: all .15s; }

.task-icon-list a:active { transform: scale(0.95, 0.95); }

.task-icon-list li { display: inline-block; padding: 0 5px; margin: 0 -2px 10px; width: 33.33%; opacity: 0; transition: opacity .2s ease; font-size: 1.4em; }

.task-icon-list .on a, .task-icon-list a:hover { background: rgba(34, 85, 121, 0.5); }

.task-heading { font-size: 2em; }

.the-task { font-size: 100%; display: block; padding: 15px; border: 1px solid #ccc; border-radius: 5px; background: #fff; margin: 15px 0 5px; }

.correct-message { padding: 78px 20px 25px 20px; border: 1px solid #ccc; border-radius: 5px; background: #fff; margin: 0 auto 30px; position: relative; min-height: 78px; font-size: 1.6em; text-align: center; background: #696; color: #fff; }

.incorrect-message { background: #A81518; }

.tick-holder { position: absolute; left: 50%; top: 25px; margin: 0 0 0 -25px; background: #fff; border-radius: 50%; width: 50px; height: 50px; display: block; padding: 14px 0 0; }

.correct-message svg { width: 30px; height: 23px; }

.incorrect-message svg path { fill: #A81518; }

@media only screen and (min-width: 480px) { .task-icon-list li { font-size: 1.6em; }
  .task-heading { font-size: 2.8em; } }
@media only screen and (min-width: 768px) { .task-icon-list li { width: 116px; } }
@media only screen and (min-width: 1024px) { .task-icon-list li { width: 100px; }
  .task-icon-list li .fi { display: block; font-size: 360%; text-align: center; line-height: 1.2; } }
@media only screen and (min-width: 1200px) { .task-icon-list li { width: 116px; } }
.task-options { margin: 0 auto 30px; padding: 0; list-style: none; color: #fff; max-width: 890px; }

.task-options li { font-size: 1em; padding: 0 10px; }

.task-options li h3 { font-size: 1.4em; margin: 0 0 4px; line-height: 1.55; display: table-cell; vertical-align: middle; height: 50px; }

.task-options li p { font-size: 1.4em; }

.task-options a { text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.1); transition: background .25s; padding: 20px; border-radius: 5px; display: table; transition: all .2s ease; width: 100%; }

.task-options .on a, .action-with-text-area.on, .task-options a:hover { background: rgba(34, 85, 121, 0.5); }

@media only screen and (min-width: 768px) { .task-options li { display: inline-block; padding: 0 5px; margin: 0 -2px 10px; width: 33.33%; vertical-align: top; } }
.task-options li.full-width { width: 100% !important; }

.when-use, .how-use, .what-do, .first-part-complete, .second-part-complete, .lets-move-on, .task-3, .what-technology-subsequent, .trigger-call-to-action { opacity: 0; transition: opacity .25s ease; pointer-events: none; }

.when-use.visible, .how-use.visible, .what-do.visible, .first-part-complete.visible, .second-part-complete.visible, .lets-move-on.visible, .task-3.visible, .what-technology-subsequent.visible, .trigger-call-to-action.visible { opacity: 1; pointer-events: auto; }

.first-part-complete, .second-part-complete, .second-part-incomplete, .first-part-incomplete { display: none; }

.first-part-complete.visible, .second-part-complete.visible, .second-part-incomplete.visible, .first-part-incomplete.visible { display: block; }

.task-options li, .task-icon-list li { transform: scale(1.1, 1.1); opacity: 0; transition: opacity .2s ease, transform .2s ease; }

.visible .task-options li, .visible .task-icon-list li { transform: scale(1, 1); }

.visible .task-options li:nth-of-type(1), .visible .task-icon-list li:nth-of-type(1) { opacity: 1; transition-delay: .5s; }

.visible .task-options li:nth-of-type(2), .visible .task-icon-list li:nth-of-type(2) { opacity: 1; transition-delay: .6s; }

.visible .task-options li:nth-of-type(3), .visible .task-icon-list li:nth-of-type(3) { opacity: 1; transition-delay: .7s; }

.visible .task-options li:nth-of-type(4), .visible .task-icon-list li:nth-of-type(4) { opacity: 1; transition-delay: .8s; }

.visible .task-options li:nth-of-type(5), .visible .task-icon-list li:nth-of-type(5) { opacity: 1; transition-delay: .9s; }

.visible .task-options li:nth-of-type(6), .visible .task-icon-list li:nth-of-type(6) { opacity: 1; transition-delay: 1s; }

.visible .task-options li:nth-of-type(7), .visible .task-icon-list li:nth-of-type(7) { opacity: 1; transition-delay: 1.1s; }

.visible .task-options li:nth-of-type(8), .visible .task-icon-list li:nth-of-type(8) { opacity: 1; transition-delay: 1.2s; }

.visible .task-options li:nth-of-type(9), .visible .task-icon-list li:nth-of-type(9) { opacity: 1; transition-delay: 1.3s; }

.visible .task-options li:nth-of-type(10), .visible .task-icon-list li:nth-of-type(10) { opacity: 1; transition-delay: 1.4s; }

.visible .task-options li:nth-of-type(11), .visible .task-icon-list li:nth-of-type(11) { opacity: 1; transition-delay: 1.5s; }

.chosen-trigger { background: #1c758e; text-align: center; color: #fff; padding: 20px; }

.chosen-trigger h2 { font-size: 1.8em; margin: 0; }

.chosen-trigger h2 .fi { display: inline-block; font-size: 200%; vertical-align: middle; margin: 0 10px; }

.chosen-action { background: #2d95a8; text-align: center; color: #fff; padding: 20px; }

.chosen-action h2 { font-size: 1.8em; margin: 0; }

.chosen-action h2 .fi { display: inline-block; font-size: 200%; vertical-align: middle; margin: 0 10px; }

.preview-mode { padding: 50px 20px; font-size: 1.3em; }

.lets-move-on { text-align: center; margin: 0 0 100px; padding: 0 20px; }

.action-with-text-area { background: rgba(255, 255, 255, 0.1); transition: background .25s; padding: 20px; border-radius: 5px; margin: 0 auto 30px; max-width: 970px; }

.action-with-text-area textarea { width: 100%; max-width: 300px; }

.feedback-negative { display: none; background: rgba(189, 87, 87, 0.9); border-radius: 15px; padding: 15px; margin: -20px auto 20px; max-width: 400px; }
.feedback-negative p { margin: 0; }

.thats-right { padding: 20px; text-align: center; }

.wrong { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }

@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); } }
.the-task span { padding: 5px 10px; color: #fff; display: table; border-radius: 3px; margin: 0 auto; }

.drop-area { width: 100%; height: 30px; background: #fff; display: block; padding: 3px 10px; text-align: left; }

.drag-item { width: 230px; height: 30px; background: #fff; display: block; padding: 3px 10px; margin: 0 auto 15px; border-right: 1px solid #999; border-bottom: 1px solid #999; cursor: pointer !important; }

.drag-item p { margin: 0; font-size: 1.4em; }

.ui-draggable-dragging { box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); cursor: move !important; }

.drag-container { position: relative; }

.drag-drop-game { max-width: 768px; margin: 0 auto; padding: 40px 20px; }

.drag-drop-game--no-padding-top { padding-top: 0; }

.drop-sentence { font-size: 1.4em; text-align: left; position: relative; padding: 5px 0 0 0; margin: 0; }

.drop-sentence .drop-area { color: #333; }
.drop-sentence .drop-area p { font-size: 1em; margin: 0; }

.drop-joiner { font-size: 1.4em; text-align: left; position: relative; padding: 10px 0 0 0; margin: 0; }

.drop-sentence span { border-radius: 3px; padding: 0 10px; display: block; color: #fff; }

.drop-area { background: #fff; border: 1px solid transparent; transition: border .25s ease; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

.dragging .drop-area { border: 1px dashed #333; }

.drop-area.ui-state-highlight { border: 1px solid #696; background: #696; color: #fff; }

.drop-items { margin: 0 0 10px; }

.drag-items-wrapper { padding: 20px 0 10px; background: rgba(0, 0, 0, 0.1); }

@media only screen and (min-width: 768px) { .drop-items { float: left; width: 63%; padding: 0 10px 0 0; margin: 20px 0; }
  .drag-items { float: left; width: 37%; padding: 0 0 0 10px; margin: 20px 0; }
  .drop-sentence { font-size: 1.4em; text-align: right; position: relative; height: 60px; line-height: 30px; padding: 20px 250px 10px 0; margin: 0; }
  .drop-sentence span { border-radius: 3px; padding: 0 10px; display: inline-block; color: #fff; }
  .drop-joiner { font-size: 1.4em; text-align: right; position: relative; padding: 10px 250px 0 0; margin: 0; }
  .drop-sentence .drop-area { position: absolute; right: 10px; top: 10px; color: #333; }
  .drop-sentence .drop-area p { font-size: 1em; margin: 0; line-height: 30px; }
  .drop-sentence .drop-area:before { content: ''; display: block; width: 10px; height: 10px; transform: rotate(45deg); position: absolute; left: -5px; top: 50%; margin: -5px 0 0; background: inherit; }
  .drop-area { width: 230px; height: 50px; background: #fff; display: block; padding: 10px; text-align: left; }
  .drag-item { width: 230px; height: 50px; background: #fff; display: block; padding: 10px; margin: 0 auto 15px; border-right: 1px solid #999; border-bottom: 1px solid #999; cursor: pointer !important; }
  .drag-item p { margin: 0; line-height: 30px; font-size: 1.4em; }
  .drag-items-wrapper { padding: 20px 0 10px; background: rgba(0, 0, 0, 0.1); height: 335px; }
  .drop-sentence .drop-area { color: #333; }
  .drop-sentence .drop-area p { font-size: 1em; margin: 0; line-height: 30px; } }
.tech { background: #8E541C; }

.event { background: #063541; }

.tool { background: #C13513; }

.action { background: #9B2E50; }

.fixed-task { position: fixed; left: 0; top: -100px; right: 0; padding: 20px; background: #fff; border-bottom: 1px solid #ccc; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); z-index: 20; font-size: 1.2em; text-align: center; opacity: 0; transition: opacity .25s ease, top .25s ease; max-height: 129px; overflow-y: auto; }

@media only screen and (min-width: 768px) { .fixed-task { padding: 20px 150px; font-size: 1.5em; } }
.scrolled .fixed-task { opacity: 1; top: 0; }

.scrolled .fixed-task.no-longer-needed { opacity: 0; top: -100px; }

.summary-heading { font-size: 2.8em; text-transform: none; }

.answers-heading { margin: 0 15px 15px; text-transform: none; font-size: 1.4em; font-family: 'pantonregular'; }

.sub-task-heading { font-size: 2.2em; margin: -10px 0 20px; }

.reveal { display: none; }

.remind-me { margin: -10px 0 10px; text-decoration: underline; cursor: pointer; }

.remind-me:hover { text-decoration: none; }

.hidden-options { display: none; }

.performance-table { font-size: 1.4em; width: 100%; margin: 0 auto 20px; max-width: 760px; border-collapse: separate; background: #fff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

.performance-table th { padding: 20px; border-bottom: 1px dotted #ccc; text-align: left; }

.performance-table td { padding: 20px; border-bottom: 1px dotted #ccc; text-align: left; vertical-align: top; }

.performance-table tbody th { color: #fff; vertical-align: top; }

.got-it-wrong { color: #D81215; }

.information-pullout { margin: 0 auto; max-width: 768px; padding: 20px 0; }
.information-pullout h2 { font-size: 2em; }

.text-sentence { background: #76CD68; color: #fff; padding: 20px; border-radius: 20px; text-align: center; margin: 0 auto 20px; max-width: 400px; position: relative; }

.text-sentence::after { content: ''; display: block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid #76CD68; position: absolute; right: -15px; bottom: 10px; transform: rotate(-45deg); }

.available-variables { padding: 10px 0 20px; }

.available-variables .drag-item { display: inline-block; margin: 0 5px 10px; color: #333; z-index: 10; }

.text-sentence .drop-area { background: none; border: none; border-bottom: 1px solid #fff; box-shadow: none; width: 100%; text-align: center; font-size: 1.6em; }

.text-sentence .drop-area + p { padding-top: 10px; }

.dragging .text-sentence .drop-area { border: 1px dashed #fff; }

.what-you-were-trying-to-do { background: #fff; text-align: center; padding: 20px; margin: 0; border-bottom: 1px solid #ccc; }

.task-joiner { background: #fff; padding: 40px 20px; margin: 0; color: #333; text-align: center; }

.task-joiner p { margin: 0; }

.task-joiner .the-task { max-width: 400px; background: #f5f5f5; margin: 0 auto; }

.task-joiner h2 { font-size: 2.8em; margin: 0; }

.correct-message--no-margin { margin-bottom: 0; }

.hashtag-input { text-align: center; }

.hashtag-input label { padding: 10px 0 0; display: block; }

.hashtag-input input { width: 250px; text-align: center; font-size: 120%; padding: 20px; border-radius: 5px 5px 0 0; }

.hashtag-input input:before { content: '#'; }

.task5-sentence-1, .task5-sentence-2, .task5-sentence-3, .task5-sentence-4 { display: inline; }

.task5-sentence-1.hide, .task5-sentence-2.hide, .task5-sentence-3.hide, .task5-sentence-4.hide { display: none; }

#task5part1, #task5part2, #task5part3, #task5part4 { visibility: hidden; opacity: 0; }

#task5part1.show, #task5part2.show, #task5part3.show, #task5part4.show { visibility: visible; opacity: 1; }

.animation-holder { padding: 80px 20px 40px; }

.animation { display: none; width: 200px; height: 200px; overflow: hidden; position: relative; }

.animation.visible { display: inline-block; margin: 0 -2px; vertical-align: top; }

.animation-step1 { background: rgba(255, 255, 255, 0.1); }

.animation-step2 { background: rgba(255, 255, 255, 0.3); }

.animation-step3 { background: rgba(255, 255, 255, 0.5); }

.animation-step4 { background: #fff; }

.animation-map-point { background: #eb7f00; box-shadow: 0 0 10px #eb7f00; height: 16px; width: 16px; border-radius: 50%; position: absolute; left: 90px; top: 112px; transition: all 5s; }

.animation-step-1 .animation-map-point { left: 92px; top: 172px; }

.mobile-animation { width: 69px; height: 121px; position: absolute; left: 50%; top: 50%; margin: -61px 0 0 -35px; transform: rotate(15deg); }

.mobile-text-sent { background: #fff; width: 40px; height: 40px; text-align: center; position: absolute; left: 50%; top: 35px; margin: 0 0 0 -20px; text-transform: uppercase; padding: 10px 0 0; font-family: 'pantonbold'; line-height: 1; opacity: 0; transition: opacity .25s; animation-name: flash; animation-duration: 1s; animation-iteration-count: 6; animation-delay: 2s; }

.animation-step-2 .mobile-text-sent { opacity: 1; }

.tap-animation { width: 111px; height: 98px; position: absolute; right: 0; top: 30px; }

.bubbles { width: 200px; height: 62px; background: url(../img/bubbles.png) no-repeat; position: absolute; left: 0; bottom: -62px; transition: bottom 3s; transition-delay: .5s; }

.water { position: absolute; background: #1fa0ac; width: 10px; height: 0; right: 95px; top: 128px; transition: height .25s; }

.water-drop { width: 13px; height: 100px; position: absolute; right: 95px; top: 128px; opacity: 0; }

.animation-step-3 .bubbles { bottom: 0; }

.animation-step-3 .water { height: 100px; }

.animation-step-3 .water-drop { opacity: 1; }

.outcome-text { font-size: 1.6em; text-align: center; color: #696; width: 150px; position: absolute; left: 25px; top: 50%; text-transform: uppercase; font-family: 'pantonbold'; line-height: 1; margin: -31px 0 0; opacity: 0; transition: opacity .5s; }

.outcome-incorrect .outcome-text { color: #c33; }

.outcome-text span { display: block; }

.outcome-text svg { width: 44px; height: 33px; margin: 0 0 10px; }

.animation-step-2 .step-2-incorrect .mobile-animation { animation-name: wiggle; animation-duration: .15s; animation-iteration-count: 6; }

.animation-step-4 .outcome-text { opacity: 1; }

@keyframes flash { 0% { visibility: hidden; }
  25% { visibility: hidden; }
  50% { visibility: visible; }
  75% { visibility: hidden; }
  100% { visibility: hidden; } }
@keyframes wiggle { 0% { transform: rotate(15deg); }
  15% { transform: rotate(5deg); }
  85% { transform: rotate(25deg); }
  100% { transform: rotate(15deg); } }
.give-space-at-bottom { padding-bottom: 100px; }

/*
Flaticon icon font: Flaticon
Creation date: 18/04/2016 17:00
*/
@font-face { font-family: "Flaticon"; src: url("../fonts/Flaticon.eot"); src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"), url("../fonts/Flaticon.woff") format("woff"), url("../fonts/Flaticon.ttf") format("truetype"), url("../fonts/Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; }
@media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Flaticon"; src: url("../fonts/Flaticon.svg#Flaticon") format("svg"); } }
.fi:before { display: inline-block; font-family: "Flaticon"; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; text-decoration: inherit; text-rendering: optimizeLegibility; text-transform: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

.flaticon-arrows:before { content: "\f100"; }

.flaticon-arrows-1:before { content: "\f101"; }

.flaticon-business:before { content: "\f102"; }

.flaticon-charge:before { content: "\f103"; }

.flaticon-location:before { content: "\f104"; }

.flaticon-music:before { content: "\f105"; }

.flaticon-printer:before { content: "\f106"; }

.flaticon-social:before { content: "\f107"; }

.flaticon-social-1:before { content: "\f108"; }

.flaticon-social-2:before { content: "\f109"; }

.flaticon-sms:before { content: "\f10a"; }

.flaticon-telephone:before { content: "\f10b"; }

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